2

I wish to highlight elements of a page on hover. The page is inside an iframe.

I am using a css class to give blue outline:

.highlight {
   outline: 2px solid #08C !important;
}

Attempt #1: adding class to element hovered

First I tried adding the css class to the element hovered. To ensure the outline was fully visible I had to alter the css position of surrounding elements to 'relative' and play with z-index values. But this broke the layout in some cases (image going to next line for example).

Problem: either outline is not fully visible, or I break the layout

Attempt #2: adding new DOM element on top of hovered element

In order to avoid affecting the design of the page I thought it would be better to create a new div with blue border and position it on top of the existing element.

This works ok in this fiddle: http://jsfiddle.net/aDGbX/1/

but not inside an iframe so far. (I do not see the outline anywhere).

$(document).ready(function() {

 $('body').find(".hoverClass").bind("hover", function() {   
     thisId = $(this).attr('id');
    var pos = $('#'+thisId).offset();
     var w = $(this).width();
    var h = $(this).height();

    jQuery('<div/>', {
        id: 'highlighterDiv',
    }).appendTo('body');

    $("#highlighterDiv").css( {position: 'absolute', top: pos.top, left: pos.left, 'z-index': '99' } );
    $("#highlighterDiv").css( {width: w, height: h} );
    $("#highlighterDiv").addClass('highlight');
    $("#highlighterDiv").show();

 });

});
​

Problem: not working inside iframe so far

Question:

Is the second attempt a better method? Or what would you recommend?

2
  • I'm sure that you can't select elements within an iFrame, unless you have control over the source. Do you have control?
    – Kyle
    Oct 24, 2012 at 11:56
  • 1
    @Kyle Sevenoaks I am pretty sure you can select elements within iFrame because I have seen it done (VisualWebsiteOptimizer.com ; you would have to sign in to see how they do it). I also made it work although with problems as I mentioned above. Not sure what you mean by having control over the source. Oct 24, 2012 at 12:21

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.