Question

Would like a for loop in jquery so that:

“For every hover_link: show hidden div next to hovered hover_link.”

Current jquery doesn’t display the hidden div let alone position the hidden div next to the hovered link and can’t figure out how to loop this for multiple hover_links.

jquery:

$(document).ready(function() {
    $(".hover_link").mousemove(function(e) {
        $("#box1").show();
        $(".box").css({
            top: ($(".hover_link").offset().top() + 10) + "px",
            left: ($(".hover_link").offset().left() + 10) + "px"
        });
    });
    $(".hover_link").mouseout(function(e) {
        $("#box1").hide();
    });
});​

Fiddle: http://jsfiddle.net/3kWq7/1/

Many thanks to anyone who can help

Answer 1

So! In the end the problem was that I had the jquery running on a div that was within a centred fixed width div on the page.

To get around this I basically detected the html document width, subtracted the fixed width of the div, then divided the remainder by two, giving me the left margin that I needed to offset my mouse calculation by in order to get the hidden div to pop up next to the mouse no matter what the window size was.

The header of the site is also a fixed size, so I subtracted it’s height from my mouse position to get the hidden to div to position correctly on the other axis.

The for loop was not necessary it turns out – so to get it to pop up different hidden divs depending on the linked area hovered over, I implemented the suggestion from @Huangism using the rel=”boxID” attribute. (Thanks @Hunagism!)

Final fiddle: http://jsfiddle.net/3kWq7/10/

Final result: http://jsfiddle.net/3kWq7/10/embedded/result/

Final jquery:

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});