CODEWITHSUNDEEP
javascriptjqueryhtmlcss
daveycroqet
daveycroqet

Reputation: 2727

jQuery.clone() an element, then add dynamic styling to it

Let's say I have an image, cat.jpg, and when clicked I want to clone it.

$('img.cat').on("click", function() {
  $(this).clone().appendTo('#container');
});

Upon duplication, however, I want the new cat.jpg to appear as half the size of the original. And I want this to continue happening each time a new cat.jpg is clicked.

Any ideas on how to go about accomplishing this? Is it even possible to inject new styling/classes/parameters via .clone()?

Upvotes: 4

Views: 2991

Answers (4)

Stefanos Vakirtzis
Stefanos Vakirtzis

Reputation: 448

Create a new class with the specific new styling you want to get changed dynamicaly in your CSS file.

.newClass {
  //example green outline
  outline: solid thin green;
}

And then modify your script:

$('img.cat').on("click", function() {
  $(this).clone().addClass('newClass').appendTo('#container');
});

EDIT :

If the only thing you want to change is the size of the img for lets say 10% each click then:

$('img.cat').on("click", function() {
  var width = $(this).width() * 0.9;
  var height = $(this).height() * 0.9;

  $(this).clone().css({"width":width+"px", "height":height+"px"}).appendTo('#container');
});

The above code will produce the same image but 10% smaller than the image clicked .

If you want to click only the initial image then simply put the width and height variable outside the click function and update them inside for each click.

NOTE :

In the css() you add +"px" if initial width is in px else you add +"%" if it is in percentage.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

Just setting the width to half seems to be enough with an img element, the height gets set automatically in proportion to the width:

$('#container').on('click','img.cat', function() {
    $(this).clone()
           .appendTo('#container')
           .width(function(i,v) { return v/2;});
});

Demo: http://jsfiddle.net/Mr2x8/

But if you find you need to set the width and the height here's one way to do it:

$('#container').on('click','img.cat', function() {
    var $this = $(this);
    $this.clone()
         .appendTo('#container')
         .width($this.width()/2)
         .height($this.height()/2);
});

Demo: http://jsfiddle.net/Mr2x8/1/

Upvotes: 2

Sampson
Sampson

Reputation: 268492

It sounds like the following is what you're after:

// If all images are within #container, use $("#container") instead:
$(document).on("click", "img.cat", function () {
    var original = $(this);
    original.clone().css({
        width: original.width() / 2,
        height: original.height() / 2
    }).appendTo("#container");
});

Fiddle: http://jsfiddle.net/G6XTz/

Of course, you may have wanted the newly added image to be half the size of the last cat image, rather than the cat image clicked:

Fiddle2: http://jsfiddle.net/G6XTz/1/

Caveat:

The width and height can only divide so far; eventually you'll run into some problems. Better check the result of division first, and make a decision to do something else when it makes sense.

Upvotes: 4

Nathan
Nathan

Reputation: 142

id do this:

$(this).clone().addClass('small').appendTo('#container');

this adds the css class small to the clone of this.

Upvotes: 1

Related Questions