3 ms·
Dapper is pretty cool. Good luck in making a similar scraper tool. As for doing the manipulation: They're using jQuery for all of that. The current hover/ma
by photon_off 16y ago
Dapper is pretty cool. Good luck in making a similar scraper tool.
As for doing the manipulation: They're using jQuery for all of that. The current hover/manipulation stuff they're doing seems pretty simple. So simple, that it makes me want to make a competing service.
For the hover effects, you can do something like:
<style>
.bordered {
border: 4px solid blue;
}
</style>
<script>
var curHltdObj = null;
$("div").live("mouseover mouseout", function(e){
if (curHltdObj) curHltdObj.removeClass("bordered");
if (e.type=="mouseover"){
$(this).addClass("bordered")
curHltdObj = $(this);
}
});
</script>
This is just a starting point. What I would do is put an overlay on top of the hovered item instead. This gives you move flexibility in terms of styling and event control. I just checked out optimizely, and this is actually what they do. Though, curiously, they put their overlay element in before the <body> of the iframe document, but nevertheless it works (in FF, at least).
That actual page editing is incredibly simple as well. For the most part, you position everything relative to where it was. For normal (non positioned) elements, you just set them to position:relative, and set their top/left to be however far the user dragged the item. For other elements, you tack on how the user moved the item to their already existent top/left coordinates. Again, I'm sure it's more complicated than that, but that's the gist of it.