Grow your CSS skills. Land your dream job.

Query: JS style.height IF statement

  • # July 16, 2013 at 11:05 am

    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

    # July 16, 2013 at 12:29 pm

    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.

    # July 16, 2013 at 12:47 pm

    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”;
    }
    }

    # July 17, 2013 at 6:04 am

    Kuzyo. Of course! Thank you so much.

    # July 17, 2013 at 7:14 am

    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?

    # July 17, 2013 at 8:01 am

    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 http://css-tricks.com/return-false-and-prevent-default/

    # July 17, 2013 at 8:18 am

    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.

    # July 17, 2013 at 8:40 am

    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”;}
    }

    # July 17, 2013 at 8:41 am

    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!

    # July 17, 2013 at 8:46 am

    :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

    # July 17, 2013 at 8:59 am

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

    # July 17, 2013 at 12:25 pm

    _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?

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".