Question

I am having problems with the following code

$(document).ready(function() {  
var $selection = $('<div class="image-selection" />')
            .css({
                opacity : 0.5,
                position : 'absolute'

            })

var $content = $('.content');

$('img', $content).click(function(){selectItem($(this))});

function selectItem(itemSelected){      

    $image = itemSelected;

    $image.wrap($selection);

    $selection.width(150).height(150);

}

});

I declared $selection as the global variable, but for some reason when it is inside of a function the width or height don’t change(The size of the selection changes):
if i do the following, it works:

var $selection = $('<div class="image-selection" />')
            .css({
                opacity : 0.5,
                position : 'absolute'

            })

var $content = $('.content');
$selection.width(150).height(150);

I will appreciate very much if some one understands what is happening, and can tell me , i have been trying to figure it out this, but i am really struggling.
Thank you so much

Answer 1

When you wrap $image with $selection, the div is now a new object (a copy of $selection) in the DOM rather than the actual disconnected element in memory. Try changing to this:

$image.wrap($selection);
$image.parent('div.image-selection').width(150).height(150);