CODEWITHSUNDEEP
jqueryjquery-ui
lipenco
lipenco

Reputation: 1368

Appending the icon on the top of the image

I am tying to append image on another image, but it doesnt work.

Here is my code:

$(document).on('mousedown', '.step-wrapper img', function() {      
    $(this).resizable();
    $(".ui-wrapper").draggable();  
    $(this).find(".ui-wrapper").append('<i class="icon-sort-up"></i>');
    $(".icon-sort-up").css("position", "absolute")
});

Upvotes: 0

Views: 161

Answers (1)

Edward Lee
Edward Lee

Reputation: 951

The .ui-wrapper is not a descendant of $(this), but parent, so use parent() instead of find(). The < I > is appended on outside of div.ui-wrapper and it's overflow property is hidden, so you have to set top position of icon.

It would be better to move resizable and draggable functions to document.ready because the functions create div each time when you click the img.

Here is my example. I replaced < i > with < img >

My code:

$(document).ready(function(){
    $('.step-wrapper img').resizable();
    $(".ui-wrapper").draggable().append('<img class="icon-sort-up" src="http://thesimpsonplace.e-monsite.com/medias/album/images/76278889donut-1-jpg.jpg"/>');  
});

$(document).on('mousedown', '.step-wrapper img.homer', function(){
    $(".icon-sort-up").css("z-index",1);
});

css:

img.homer{
    width:100px;
    height:100px;
    cursor:pointer;
    position:relative;
}
img.icon-sort-up{
    width:15%;
    height:15%;
    position:absolute;
    top:0px;
    z-index: -1;
}

html:

<div class="step-wrapper">
<img class="homer" src="http://www.boston.com/business/ticker/homer616.jpg"/>
</div>

Upvotes: 2

Related Questions