Your variation editor looks really awesome too. How much effort does it take create something like that? I mean just the HTML hover/manipulation etc. I am planning to write a scraper related tool similar to http://open.dapper.net/
Did you encounter any serious cross browser issues? Or any other notable info you would like to share with the HN community. Is there any open source basic implementation that can be used as a starting point? Do you preprocess the page on the server or is it all Javascript magic on the client side?
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.
Our biggest challenge in building this tool was compatibility. Every webpage is different and even seemingly innocuous things things like frame busters and javascript redirects presented quite a challenge for us. We were fortunate to have a great set of early beta customers that gave us feedback when things didn't work and we took it one website at a time.
We'd love to share the lessons we learned along the way with the HN community in a blog post. Let me know what you're most interested in and we'll share what we've learned.
This is frame busting. I'm looking for anti frame busting. There's one way which involves calling a page which returns a "nothing" header code when the iframe tries to bust out. Though some sites like stackoverflow even take this into account. I wonder if SO works with optimizely (I'm on iOS, can't test it ATM).
Since optimizely has access to the document, there might be a way to wrap the window.location object and prevent it from changing, before any experiment-site js is loaded.
http://stackoverflow.com/questions/958997/frame-buster-buste...
This keeps getting funnier and funnier :)... that must be the state of the art in recursive busting ;-)... And if someone is so obsessed that his page must not be framed... I guess it is best to leave such a guy alone...
Your variation editor looks really awesome too. How much effort does it take create something like that? I mean just the HTML hover/manipulation etc. I am planning to write a scraper related tool similar to http://open.dapper.net/
Did you encounter any serious cross browser issues? Or any other notable info you would like to share with the HN community. Is there any open source basic implementation that can be used as a starting point? Do you preprocess the page on the server or is it all Javascript magic on the client side?