Question

I have this code that would copy the contents of one element and place it on another. But I would actually like to copy the inline style, especially the positioning. Is there a way to copy the position style only, so that the info window will appear exactly where the a.star is when I hover?

$(document).ready(function(){
  $('a.star').hover(function(){
    var instrument = '.instrument_info#' + $(this).attr('instrument');
    var htmlCode = $(instrument).html();
    $('.instrument_output .instrument_detail').html(htmlCode);
    $('.instrument_output').slideToggle();
  })
});

I want to get the inline positioning of this: <div class="instrument_info" id="drums" style="top:95px; left:294px"> and put it in another div. How can I insert this in my jQuery code?

Answer 1

.html() doesn’t include inline styles at all. You need to use the jQuery .css() function;

$(".target_elements").css({top: $("someElement").offset().top, left: $("someElement").offset().left});

And since .offset() returns a {top: ..., left: ...} object, you can write the above more compactly as:

$(".target_elements").css($("someElement").offset());