CODEWITHSUNDEEP
phpjquery
user1071339
user1071339

Reputation:

image width height jquery

hi everyone i want the images to expand and collapse in jquery so here is my code ...

 <div id="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div id="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>

The below is css style

 #expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }

jquery code is as given below...

  $(function() {
   $("#expand_image ").click(function() {

     var imgwidth = this.width;
     var imgheight = this.height;
    $a=300;
    $b=this.height;
      alert(this.width + 'x' + this.height);



      if ($a==$b )
    {
    alert('300');
       $(this).css('height', '100');
       $(this).css('width', '580');   
    }
    else
    {
      alert('100'); 
       $(this).css('height', '300');
       $(this).css('width', '580'); 
    }       
    });
    });

so what i want is ..when i click on one image it should expand and others should collapse.. while if i click on expanded image it should collapse

so i was trying to get the image heights

so if its 300 then collapse else expand

but the output of 

alert(this.width + '-' + this.height);

is :

enter image description here

anyone knows about this? thanks in advance..:)

Upvotes: 0

Views: 306

Answers (3)

Johnny
Johnny

Reputation: 1143

First put your divs in a wrapper then reference them by class instead of id...since you have the same id's which will avoid collisions:

<div id="wrapper"> 
<div class="expand_image" style="border-top:1px solid #000">
 <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
 </div>
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
 </div >
 <div class="expand_image">
 <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 />
 </div>
 </div>​

by having it in a div wrapper you do not have to initiate every instance of the expand_image class so this code is will perform better:

$("#wrapper").on("click", ".expand_image", function () {
    if ($(this).height() == 300) {
       $(this).css('height', '100'); 
    } else {
       $(".expand_image").css('height', '100'); 
       $(this).css('height', '300');   
    }   
});

Update your CSS by changing #expand_image to .expand_image

.expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; } ​

and it will work! HERE IS A JSFIDDLE EXAMPLE

Upvotes: 1

Siva Charan
Siva Charan

Reputation: 18064

Never use same ID

On your HTML, you are using <div id="expand_image" which will cause problem to find the element.

Refer LIVE DEMO

HTML:

<div class="expand_image" style="border-top:1px solid #000">
    <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  />
</div >
<div class="expand_image">
    <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>

JS:

$(function() {
    $(".expand_image").click(function() {
        $(this).css({
            'height':'300',
            'width':'580'
        });
        $(".expand_image").not(this).css({
            'height':'100',
            'width':'580'
        });
    });
});

CSS:

.expand_image { 
    overflow:hidden; 
    float:left; 
    height:100px; 
    margin:0 5px; 
    border-bottom: 1px solid #000; 
    cursor:pointer; 
}

Upvotes: 1

Amir
Amir

Reputation: 9627

height and width are functions, so you need to call height() instead of height (notice the braces), try this instead:

alert(this.width() + '-' + this.height());

Upvotes: 1

Related Questions