CODEWITHSUNDEEP
javascriptjquerycss
Ash
Ash

Reputation: 237

Jquery - Shrinking the DIV On click

I am using the below code to animate the div. 

$("i.legend-icon").click(function(){
    $(".scatterchartcolumn").animate({width: '-=100px'});
});

  1. I want the div, only to shrink. But it is completely hiding the div for 100px. I dont want that to happen.

  2. I want the animation to stop and the div to go back to the same position as it was in default when I click on the same div again.

Here`s the code.. I want to stop it and make the .scatterchartcolumn to be in the same width when I click the i.legend-icon again as it was in default. Also I want the animation to run until I click the i.legend-icon again. Currently it stops animating in a second or so..

HTML

<div class="scatterchartcolumn">
    <div id="scattercharty_axis"></div>
    <div id="scatterchart"></div>
    <div id="scatterchartx_axis"></div>
</div>

css

.scatterchartcolumn {
    float: left;
    display: inline;
    margin-left: 25px;
    width: 780px;
    height: 300px;
}

Upvotes: 0

Views: 3835

Answers (3)

Swarna Latha
Swarna Latha

Reputation: 1004

Below code will help you to do this

$(".legend-icon").click(function () {
       if ($(this).attr('id') == "icon1") {
          $(".scatterchartcolumn").animate({ width: '-=100px' }, 2500);
          $(this).attr('id', 'icon2');
       }
       else {
          $(".scatterchartcolumn").animate({ width: '+=100px' }, 2500);
          $(this).attr('id', 'icon1');
       }
   });

Here is the working fiddle sample

Take a look at this jqfaq.com site,it has more jquery related faqs. It may be helpful to you.

Upvotes: 2

xec
xec

Reputation: 18024

I'm not sure what you mean by "completely hiding the div for 100px", but as far as the toggle bit goes, you can do something like this:

// cache the selector (don't search the DOM for .scatterchartcolumn on each click)
var col = $(".scatterchartcolumn"); 
var originalWidth = col.width(); // save the width
$("i.legend-icon").click(function(){
    if (col.hasClass("shrunk")) { // check for presence of "shrunk" class
        col.removeClass("shrunk") // toggle the class
            .stop(true, true) // clear the animation queue
            .animate({width: originalWidth});
    } else {
        col.addClass("shrunk")
            .stop(true, true)
            .animate({width: '-=100px'});
    }
});

http://jsfiddle.net/DhpNQ/

As for your note: "I want the animation to run until I click the i.legend-icon again. Currently it stops animating in a second or so.." -- because it is a timed animation, the code is going to remove 100px off the width over a given period. (The jquery animation becomes impossible if we don't know when you're going to click the buttom). If you want to shrink it until you click the button you could make it shrink to 0px over a longer period perhaps? I am unsure what you really want.

update

In order to animate over a longer period, give a number (in ms) as the second argument to .animate() like this;

 .animate({width: 0}, 10000); // animate to 0 width over 10 000ms

http://jsfiddle.net/DhpNQ/1/

Upvotes: 1

Aravind30790
Aravind30790

Reputation: 992

DEMO

JQUERY:

$(document).ready(function() {
$(".scatterchartcolumn").click(function(){
  $(this).animate({
    width: "0px",
      height:"0px",
  }, 1500 );
});
    });

Upvotes: 0

Related Questions