CODEWITHSUNDEEP
javascriptjqueryhtmlcss
riogrande
riogrande

Reputation: 349

window resize function not working

I have a menu and i want its dropdown to be accessible with hover when window width is >= 767px and accessible with click event when the window width is < 767px.

Its working only when i refresh the page, otherwise only hover event is working.

JQUERY 

(function ($) {

    'use strict';

    function getWindowWidth() {
        var windowWidth = 0;
        if (typeof(window.innerWidth) === 'number') {
            windowWidth = window.innerWidth;
        }
        else {
            if (document.documentElement && document.documentElement.clientWidth) {
                windowWidth = document.documentElement.clientWidth;
            }
            else {
                if (document.body && document.body.clientWidth) {
                    windowWidth = document.body.clientWidth;
                }
            }
        }
        console.log(windowWidth);
        return windowWidth;
    }

    function widthStatement() {
        if (getWindowWidth() >= 767) {
            $('.menu > ul > li').on({
                mouseenter: function () {
                    $(this).children('ul').stop(true, false).show();
                },
                mouseleave: function () {
                    $(this).children('ul').stop(true, false).hide();
                }
            });
        } else if (getWindowWidth() < 767) {
            $('.menu > ul > li').click(function () {
                $(this).children('ul').stop(true, false).toggle();
            });
        }
    }

    $(document).ready(getWindowWidth, widthStatement);
    $(window).on('resize', widthStatement);

}($));

CSS 

.menu {
    margin: 0 auto;
    width: 80%;
    background: #e9e9e9;
}

.menu:before, .menu:after {
    display: table;
    content: ' ';
}

.menu:after {
    clear: both;
}

.menu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu ul > li {
    float: left;
    margin: 0;
    padding: 0;
}

.menu ul > li:hover {
    background: #f0f0f0;
}

.menu ul > li > a {
    display: block;
    padding: 1.5em 2.5em;
    color: #444;
}

.menu ul > li > ul {
    position: absolute;
    left: 0;
    display: none;
    width: 100%;
    background: #f0f0f0;
}

.menu ul > li > ul > li {
    padding: 1.5em;
    width: 25%;
}

.menu ul > li > ul > li > a {
    padding: 0;
    border-bottom: 1px solid #ccc;
    color: #444;
}

.menu ul > li > ul > li > ul {
    position: relative;
    display: block;
    padding-top: 1em;
}

.menu ul > li > ul > li > ul > li {
    padding: 0;
    width: 100%;
}

.menu ul > li > ul > li > ul > li > a {
    padding: .5em 0;
    border: 0;
    font-size: .9em;
}

HTML 

<div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Research</a>
            <ul>
              <li><a href="#">Undergraduate research</a></li>
              <li><a href="#">Masters research</a></li>
              <li><a href="#">Funding</a></li>
            </ul>
          </li>
          <li><a href="#">Something</a>
            <ul>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
              <li><a href="#">Sub something</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">News</a>
        <ul>
          <li><a href="#">Today</a></li>
          <li><a href="#">Calendar</a></li>
          <li><a href="#">Sport</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">School</a>
            <ul>
              <li><a href="#">Lidership</a></li>
              <li><a href="#">History</a></li>
              <li><a href="#">Locations</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Study</a>
            <ul>
              <li><a href="#">Undergraduate</a></li>
              <li><a href="#">Masters</a></li>
              <li><a href="#">International</a></li>
              <li><a href="#">Online</a></li>
            </ul>
          </li>
          <li><a href="#">Empty sub</a></li>
        </ul>
      </li>
    </ul>
  </div>

demo: http://codepen.io/riogrande/pen/yJVNMq

Upvotes: 0

Views: 372

Answers (1)

Ian
Ian

Reputation: 590

It's a problem with the way you're using .ready(). Anyway, you don't need to call getWindowWidth() when the document is ready, because your widthStatement() does it for you. Simply remove that and you're away: 

$(document).ready(widthStatement);

http://codepen.io/anon/pen/YWpXOp

Upvotes: 2

Related Questions