Javascript styling toggle doesn't work first click

Question

I'm making this little html app with a sidebar menu that pops up on click. It works fine except that it only starts to work after the second click. On the first click nothing happens.

CSS:

#menubalk{
   margin-left: -260px;
}

HTML:

<div id="menubutton">
   <img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>

<div id="menubalk">
   <h5>Menu</h5>
</div>

Javascript:

function toggle () {
  var el = document.getElementById("menubalk");
  var kop = document.getElementById("kop");
  var pag = document.getElementById("pagina");

  if ( el.style.marginLeft=="-260px" ) {
     el.style.marginLeft="0px";
     kop.style.marginLeft="260px";
     pag.style.marginLeft="260px";
  } else {
     el.style.marginLeft="-260px";
     kop.style.marginLeft="0px";
     pag.style.marginLeft="0px";
  }
}

I think I might have to set the margin somewhere in the javascript also but I can't figure it out.

All help is greatly appreciated!

Because on the first click, neither of the statements in your if-else matches. When you click for the first time, you call toggle and one of them gets set, then since its now one of the if-then cases, it starts working.. — Subliminal Hash
– Subliminal Hash, Commented Feb 26, 2013 at 19:41
Try to add console.log to if and else blocks. Find out which one it goes at first click and check the css code at that time. You will figure out. — geniuscarrier
– geniuscarrier, Commented Feb 26, 2013 at 19:41

Christophe · Accepted Answer · 2013-02-26 19:55:37Z

4

style.marginLeft is looking at your inline styles. As you haven't defined any inline style initially style.marginLeft is undefined.

To fix this, you could simply reverse your if/else statement:

if ( el.style.marginLeft=="0px" )

edited Feb 26, 2013 at 19:55

answered Feb 26, 2013 at 19:44

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorgos Coenen Over a year ago

Jup, reversing the statement did it. Seems silly now. Thanks for the quick reply!

inDream · Accepted Answer · 2013-02-26 19:48:31Z

1

element.style only search for inline style, to get actual style you can use getComputedStyle

i.e.
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...

Reference: https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Note: For IE, this only works for IE9 or above.

answered Feb 26, 2013 at 19:48

inDream

1,28710 silver badges13 bronze badges

Comments

Christophe · Accepted Answer · 2013-02-26 21:05:15Z

1

With this line

if(el.style.marginLeft=="-260px") {

You are checking if the inline style of the element is a specific value. However, this style is set in the css. I recommend adding a className to the menu to expand it. You can check for this classname and add/remove it accordingly:

  if ( el.className == "expanded" ) {
     el.className = "";
  } else {
     el.className = "expanded";
  }

With this addition to the css:

#menubalk.expanded {
    margin-left:0;
}

edited Feb 26, 2013 at 21:05

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

answered Feb 26, 2013 at 19:46

Jaco Koster

4973 silver badges14 bronze badges

1 Comment

Christophe Over a year ago

+1 I answered with a quick fix, but classes would offer a cleaner implementation. Note the spelling: className

guypursey · Accepted Answer · 2013-02-26 19:43:08Z

0

You say you set the menu style in the JavaScript somewhere but I would actually recommend doing that as part of your initialisation, rather than setting the left margin with CSS.

I suspect (it's hard to see without an example) that on the first click the JavaScript is going straight to the else condition because it's not recognising that you've set the margin in CSS (or elsewhere). Then on the second click, JavaScript has been used to set the left margin so it can read it and perform accordingly.

answered Feb 26, 2013 at 19:43

guypursey

3,2043 gold badges28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Javascript styling toggle doesn't work first click

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related