AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

A LIVE link preview window for links on hover over using Jquery and CSS3

September 28th, 2012

For one of my projects, I set out to find a way to display a LIVE preview for links that would display when you hover over the link. It's a novel way to show the user what they're linking to prior to clicking on the link and also provides a little bit of a wow factor. It eliminates the need to create screenshots and you can depend on the view to always be up-to-date since it's a live version.  By simply adding a target class to the link or DOM element you want, you can immediately have a up-to-date preview window.

Here are several examples below:

 

How it works

When a user hovers over the targeted element, the code looks for a href attribute (what you normally would have in a link).  The code then adds a dialog window to the DOM body which contains an iframe window referencing the intended href target.  The size of the iframe window is scaled down to the containing dialog window container using CSS3 transform properties so that the entire visible width fits into the dialog window.  This dialog appears to the left or right of the targeted element using absolute positioning.  When a user hovers off the targeted element, the dialog window is removed completely from the DOM body.

Limitations

Because of the use of CSS3 properties and an iframe window, be aware of certain limitations:

Certain sites may have set their X-FRAME-OPTIONS header policy to SAMEORGIN or DENY.  This is specifically to prevent other sites from iframing their site for obvious reasons.  If that is the case, this plugin will not work, and the best is to respect their decision.  See example below:

Unfortunately Yahoo.com has disabled any iframing to their homepage - so this won't work (see limitation note above)

Another limation is this method uses the CSS3 3D Transform scale property which will work in most modern browsers (i.e. Firefox, Chrome, Safari) but not fully supported on IE9. Thankfully IE10 does support the transform properties and will work. You may want to use modernizr to test for compatibility prior to initializing.  See example below:

This is what cnn.com may look like (if you are not using IE right now)

The Code

I've created a simple JQuery plugin that you can use on your site.  You can find the code, related files, and setup instructions on my JQuery-live-preview project on Github here:

  jquery-live-preview on Github

 

Questions or improvements? Let me know!