Query: JS style.height IF statement

[deldalton]

I’m attempting to create a website with a navigation bar at the top of the page. The nav bar will span across the full width of the page. On page load it will have a height of approximately 30px. There is an image, styled like a downward-facing arrow. If you click on this image the nav bar will expand to the given size (approx. 150px). However, if the nav bar has already been expanded then it should collapse back to its original size.

Please see my JS below.

function expandNav()
{
var nav = document.getElementById(“navBar”);

if (nav.style.height = “30px”)
{
nav.style.height = “150px”;
}
else
{
nav.style.height = “30px”;
}
}

Here’s my thought process.

1. I’ve defined a function called `expandNav` _(After my explanation above, it should be obvious what this is meant to do when called)_
2. I’ve created a variable called `nav` which should target the nav element _(which has an ID of “navBar” in the HTML)_
3. I’ve then created an IF statement. To me, it reads “IF the height of the element with an ID of `navBar` is equal to `30px` then change the height to `150px`. Otherwise (if the height of the element is anything else, other than 30px) set the height to 30px”.

Unfortunately, I’m not getting the required result. Firstly, regardless of what value I put in the nav.style.height parameter the first line of code runs and the navBar is expanded to 150px. Secondly, when I click the button a second time the navBar does not collapse.

Just to point out, and as the above paragraph should suggest, I have added an `onclick=”expandNav()”` event on the img element.

Here’s the CodePen … http://cdpn.io/EcyFI

[Paulie_D]

See this based on our previous disucssion: http://codepen.io/Paulie-D/pen/mKpdr

https://css-tricks.com/forums/discussion/26896/query-targetting-and-transitions-using-css3#Item_7

[deldalton]

Thanks for the link, @Paulie_D.

I’m really after a pure JS solution (that is, not using JQuery etc.).

I’ll have a ponder and post my findings here.

[Kuzyo]

function expandNav()
{
var nav = document.getElementById(“navBar”);

if (nav.style.height == “31px”) // you have to comparing == , not assigning =
{
nav.style.height = “150px”;
}
else
{
nav.style.height = “31px”;
}
}

[deldalton]

Kuzyo. Of course! Thank you so much.

[deldalton]

I’ve noticed a slight issue. I can’t see any problems in the JavaScript. I mean, it’s fairly simple and logical.

In the navigation bar, within HTML document, there is an `` element that has an `onclick=”expandNav()”` property. When you click on the image it will call the “expandNav()” function and the navigation bar will expand. Click on it again and it will collapse.

However, on page load, the first click on the image doesn’t seem to be registered. I have to click it twice initially to get the navigation bar to expand. Then, after that, only single clicks to collapse or expand the navigation bar.

Is there any obvious reason for this?

[Kuzyo]

I saw it too, tried to find some info, but can’t.

First my thought was prevent Default like for anchor, but I don’t know if it works for img https://css-tricks.com/return-false-and-prevent-default/

[deldalton]

Kuzyo. Thank you for looking into this. Unfortunately, adding a return false to the function and/or the doesn’t appear to have any affect.

[deldalton]

Okay. Now, I have no idea why this actually makes a difference but it does. Originally Paulie_D suggested that I used the JQuery toggleClass solution. It’s a great solution but I didn’t want to use JQuery. So, I figured I would change my JavaScript to change the className of the element rather than the style.height. And it now works on first click.

function expandNav() {
var nav = document.getElementById(“navBar”);

if (nav.className == “collapsed”) {
nav.className = “expanded”;}
else {
nav.className = “collapsed”;}
}

[deldalton]

Thanks so much for your help.

I’ve marked this as solved now but if anyone can shed any light as to why changing the className, rather than the style.height, of the element makes a difference that would be fantastic!

[Kuzyo]

:P here it works, change only if statment

function expandNav()
{
var nav = document.getElementById(“navBar”);

if (nav.style.height == “150px”)
{
nav.style.height = “31px”;
}
else
{
nav.style.height = “150px”;
}

}
problem was that after first clicking we assign height to 31px , but it already was 31px and seems that nothing happens

[deldalton]

That’s interesting. The CSS styling was written so that the

element had a size of 31px on page load. However, the CSS was applying that to all nav elements rather than to the specific nav element that had an ID of “navBar”.

So, as you’ve suggested, I suspect that it was effectively adding a height to the “navBar” element that it didn’t already have, because it’s height was applied to the nav element.

Now my code is changing the “className” which is applied inline. So, the “className” is already there for it to check and then change appropriately.

Thank you for clarifying this.

[deldalton]

_One final question, hopefully._

I have the code almost working perfectly (well, for now at least). It works in IE10, Chrome, and Firefox. But, Safari is a problem.

Here’s the CodePen: http://codepen.io/deldalton/full/mfoIi

If you copy the link above into IE10, Chrome, or Firefox, you should see how it is meant to work. If you copy the link into Safari you’ll then see that it doesn’t work the same.

Does anyone know why?

[skaz]

@Kuzyo , Thank you! I know this thread is old, but I was banging my head on the table for hours today trying to figure this out. Scanned through stackflow, w3 and Mozilla and couldn’t figure it out. Stumbled onto this post and bam, all fixed up.

I was trying to change my hidden menu from height 0 to 6em, but was plagued with having to double click on page load.  After switching the 'IF' statement sizes as you mentioned , no more double click!

Thank you! 

[Author]

Posts