if statements in jquery

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

So I want to check if an elements width is defined as 500px in the css. if it is, then make it grow. If it's not, then shrink it to 500px. Anyone know how to do this?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I'm guessing you're talking about an elements current width,
http://docs.jquery.com/CSS/css#name

By grow I'm guessing you want it to animate ?
http://docs.jquery.com/Effects/animate# ... ngcallback
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, I figured that part out, jquery has "width()". Whoda thunk. Now my problem is that my else statement does nothing, and it appears as though my if statement is just repeating itself.

JAVASCRIPT Code: [ Select ]
var m = $("#imagecontainer img").width();
 
if (m == 500)
  {
 
  $("#imagelink").click(function(){
         $("#imagecontainer")
         
         .css(
            {
                  position : "absolute",
                  marginLeft : "auto",
                  marginRight : "auto",
                  zIndex : "2",
                  left : "0px",
                  width : "100%"
            })
         
         .animate(
            {
                  height : "80%",
                  marginTop : "-40px",
            }, 300 );
         
         
         $("#imagecontainer img")
         
         .animate(
            {
                  height : "100%",
            }, 300 )
         
         .css(
            {
                  width : "auto",
            });              
   });
  }
 
else {
   
   $("#imagecontainer").click(function(){
         $("#imagecontainer")
         
         .css(
            {
                  position : "relative",
                  marginLeft : "auto",
                  marginRight : "auto",
                  zIndex : "1",
                  left : "0px",
                  width : "500px",
                  height : "auto",
            })
         
         .animate(
            {
                  width : "500px",
                  marginTop : "0px",
            }, 300 );
         
         
         $("#imagecontainer img")
         
         .animate(
            {
                  height : "100%",
            }, 300 )
         
         .css(
            {
                  width : "auto",
            });              
   });
 
  }
   
});
 
  1. var m = $("#imagecontainer img").width();
  2.  
  3. if (m == 500)
  4.   {
  5.  
  6.   $("#imagelink").click(function(){
  7.          $("#imagecontainer")
  8.          
  9.          .css(
  10.             {
  11.                   position : "absolute",
  12.                   marginLeft : "auto",
  13.                   marginRight : "auto",
  14.                   zIndex : "2",
  15.                   left : "0px",
  16.                   width : "100%"
  17.             })
  18.          
  19.          .animate(
  20.             {
  21.                   height : "80%",
  22.                   marginTop : "-40px",
  23.             }, 300 );
  24.          
  25.          
  26.          $("#imagecontainer img")
  27.          
  28.          .animate(
  29.             {
  30.                   height : "100%",
  31.             }, 300 )
  32.          
  33.          .css(
  34.             {
  35.                   width : "auto",
  36.             });              
  37.    });
  38.   }
  39.  
  40. else {
  41.    
  42.    $("#imagecontainer").click(function(){
  43.          $("#imagecontainer")
  44.          
  45.          .css(
  46.             {
  47.                   position : "relative",
  48.                   marginLeft : "auto",
  49.                   marginRight : "auto",
  50.                   zIndex : "1",
  51.                   left : "0px",
  52.                   width : "500px",
  53.                   height : "auto",
  54.             })
  55.          
  56.          .animate(
  57.             {
  58.                   width : "500px",
  59.                   marginTop : "0px",
  60.             }, 300 );
  61.          
  62.          
  63.          $("#imagecontainer img")
  64.          
  65.          .animate(
  66.             {
  67.                   height : "100%",
  68.             }, 300 )
  69.          
  70.          .css(
  71.             {
  72.                   width : "auto",
  73.             });              
  74.    });
  75.  
  76.   }
  77.    
  78. });
  79.  


so I'm guessing I need to loop back to the top of the function after executing the parameters set by the if function. Is this right? if sio, how do you tell it to check a variable again?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, I really need to actually research a little more than I am before posting questions, lol. so looks like if I just put the if else statement inside of my event, it works. here's the new code if you're curious:

JAVASCRIPT Code: [ Select ]
$(document).ready(function(){
 
 
 
 
  $("#imagelink").click(function(){
      var m = $("#imagecontainer img").width();
     
      if (m == 500)
         {
         $("#imagecontainer")
         
         .css(
            {
                  position : "absolute",
                  marginLeft : "auto",
                  marginRight : "auto",
                  zIndex : "2",
                  left : "0px",
                  width : "100%"
            })
         
         .animate(
            {
                  height : "80%",
                  marginTop : "-40px",
            }, 300 );
         
         
         $("#imagecontainer img")
         
         .animate(
            {
                  height : "100%",
            }, 300 )
         
         .css(
            {
                  width : "auto",
            });
         } 
         
      else
         {
   
         $("#imagecontainer").click(function(){
         $("#imagecontainer")
         
         .css(
            {
                  position : "relative",
                  marginLeft : "auto",
                  marginRight : "auto",
                  zIndex : "1",
                  left : "0px",
                  width : "500px",
                  height : "auto",
            })
         
         .animate(
            {
                  width : "500px",
                  marginTop : "0px",
            }, 300 );
         
         
         $("#imagecontainer img")
         
         .animate(
            {
                  width : "500px",
            }, 300 )
         
         .css(
            {
                  height : "auto",
            });              
   });
 
  }          
   });
 
 
 
   
});
 
  1. $(document).ready(function(){
  2.  
  3.  
  4.  
  5.  
  6.   $("#imagelink").click(function(){
  7.       var m = $("#imagecontainer img").width();
  8.      
  9.       if (m == 500)
  10.          {
  11.          $("#imagecontainer")
  12.          
  13.          .css(
  14.             {
  15.                   position : "absolute",
  16.                   marginLeft : "auto",
  17.                   marginRight : "auto",
  18.                   zIndex : "2",
  19.                   left : "0px",
  20.                   width : "100%"
  21.             })
  22.          
  23.          .animate(
  24.             {
  25.                   height : "80%",
  26.                   marginTop : "-40px",
  27.             }, 300 );
  28.          
  29.          
  30.          $("#imagecontainer img")
  31.          
  32.          .animate(
  33.             {
  34.                   height : "100%",
  35.             }, 300 )
  36.          
  37.          .css(
  38.             {
  39.                   width : "auto",
  40.             });
  41.          } 
  42.          
  43.       else
  44.          {
  45.    
  46.          $("#imagecontainer").click(function(){
  47.          $("#imagecontainer")
  48.          
  49.          .css(
  50.             {
  51.                   position : "relative",
  52.                   marginLeft : "auto",
  53.                   marginRight : "auto",
  54.                   zIndex : "1",
  55.                   left : "0px",
  56.                   width : "500px",
  57.                   height : "auto",
  58.             })
  59.          
  60.          .animate(
  61.             {
  62.                   width : "500px",
  63.                   marginTop : "0px",
  64.             }, 300 );
  65.          
  66.          
  67.          $("#imagecontainer img")
  68.          
  69.          .animate(
  70.             {
  71.                   width : "500px",
  72.             }, 300 )
  73.          
  74.          .css(
  75.             {
  76.                   height : "auto",
  77.             });              
  78.    });
  79.  
  80.   }          
  81.    });
  82.  
  83.  
  84.  
  85.    
  86. });
  87.  
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

This doesn't make sense to me, here's an example. Click on the image, then click it again. Everything works how it's supposed to. BUT, if you click it a third time it gets all messed up.
example
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

I can zoom the image in and out repeatedly. What's the issue?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

sorry, forgot to let you guys know that I fixed it. I decided to go with an overlay div instead of an if statement. click on the picture and the overlay appears and animates, click on the overlay and it collapses.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 61 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.