CODEWITHSUNDEEP
jquerycssif-statement
alex
alex

Reputation: 1089

having trouble with jQuery if statement logo. Not responding how I expected

The basic premise of my site is six large boxes that shrink down into a graphical menu bar when you click any of them. An extra icon is added for the home button.

In order to position the boxes correctly in the first grid layout, I included a few extra classes such as margin-zero, bottom-left and bottom-right. I need to remove these classes when the images are shrunk down, and bring them back when they're expanded to full size.

So, I created a little if statement.

var counter = 0;

if(counter = 0) {
    jQuery(".two").toggleClass( "two-menu" );
    jQuery(".four").toggleClass( "four-menu" );
    jQuery(".images").toggleClass( "images-menu" );
    jQuery(".home").toggleClass( "home-menu" );

    jQuery(".four").removeClass( "bottom-left" );
    jQuery(".four").removeClass( "bottom-right" );
    jQuery(".two").removeClass( "margin-zero" );

    var counter = 1;
} else {
    jQuery(".two").toggleClass( "two-menu" );
    jQuery(".four").toggleClass( "four-menu" );
    jQuery(".images").toggleClass( "images-menu" );
    jQuery(".home").toggleClass( "home-menu" );

    jQuery(".four").addClass( "bottom-left" );
    jQuery(".four").addClass( "bottom-right" );
    jQuery(".two").addClass( "margin-zero" );

    var counter = 0;
}

To me it looks like this should work. However, in my JSFiddle prototype, it doesn't. Here is the link, so you can see all of the code and how certain boxes just off the page.

http://jsfiddle.net/NkYhh/

Upvotes: 0

Views: 67

Answers (2)

mplungjan
mplungjan

Reputation: 177691

perhaps you meant this?

var toggle =0;

function toggleIt() { 
  toggle=!toggle;
  $(".two").toggleClass("two-menu",toggle);
  $(".four").toggleClass( "four-menu",toggle);
  $(".images").toggleClass( "images-menu",toggle);
  $(".home").toggleClass( "home-menu",toggle);

  $(".four").toggleClass( "bottom-left",!toggle );
  $(".four").toggleClass( "bottom-right",!toggle );
  $(".two").toggleClass( "margin-zero",!toggle );
}

Upvotes: 0

MillaresRoo
MillaresRoo

Reputation: 3848

You may try:

if(counter == 0) {

Edit: also you are declaring counter 3 times.

Upvotes: 1

Related Questions