CODEWITHSUNDEEP
jqueryhtmlcss
zxc
zxc

Reputation: 415

Strange behavior with CSS Float when re-sizing browser (google chrome)?

I'm in the middle of making my navigation bar for my website...

I am currently using Google Chrome and I noticed that some of my li with the use of float:right after re-sizing the browser wouldn't be in the correct position, that they were in before I resized my browser.

Here is my HTML:

<div class="navbar">
    <ul class="margin-center">
        <li class="brand pull-left">
            <a href="#">lolnode</a>
        </li>
        <li class="menu-button"></li>
        <div class="collapse">
            <li class="link">
                <a href="#">Home</a>
            </li>
            <li class="link dropdown">
                <a href="#">Sports</a>
                <ul class="dropdown">
                    <li><a href="#">Football</a></li>
                    <li><a href="#">Tennis</a></li>
                    <li><a href="#">Badminton</a></li>
                </ul>
            </li>
            <li class="link pull-right">
                <a href="#">Contact Us</a>
            </li>
            <li class="link pull-right">
                <a href="#">About Us</a>
            </li>
        </div>
    </ul>
</div>

Here is my CSS:

body {background:#F0F1F2;}
html, body {
    width:100%;
    min-height:100%;
}
* {
    margin:0;
    padding:0;
    font-family:'bl-reg', sans-serif;
    font-size:12px;
    color:#333;

    z-index:inherit;
}
h1, h2, h3, h4, h5, h6, p, a, li, tr, th, td {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
}
a {
    font-family:'bl-reg', sans-serif;
    font-weight:inherit;
    font-size:inherit;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
a:hover {
    text-decoration:underline;
}
.margin-center {
    margin:auto auto;
}
.pull-left {
    float:left;
}
.pull-right {
    float:right;
}

div.navbar {
    height:48px;
    overflow:visible;
    position:relative;
    background:#FFF;
    box-shadow:0 0 5px rgba(0,0,0,0.4);

    z-index:100;
}
    div.navbar > ul {
        width:975px;
        list-style-type:none;
    }
        div.navbar > ul li.brand,
        div.navbar ul li.link {
           display:inline-block;    
        }
        div.navbar > ul li.brand {
            font-weight:bold;
            font-size:14px;
        }
        div.navbar ul li.link {
            font-size:12px;
        }
        div.navbar > ul li a {
            display:block;
            padding:15px;
        }
        div.navbar > ul li.link a {
            display:block;
            padding:16.5px 15px;
            color:rgba(51,51,51,0.75);
        }
        div.navbar > ul li.link a:hover {
            color:rgba(51,51,51,1); 
        }
        div.navbar > ul li a:hover {
            text-decoration:none;
        }
    div.navbar > ul li > ul.dropdown {
        min-width:100px;
        position:absolute;
        margin-top:48px;
        margin:0;
        padding:0;
        background:#FFF;
        box-shadow:0 3px 5px rgba(0,0,0,0.4);
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        list-style-type:none;

        display:none;
        z-index:99;
    }
        div.navbar > ul li > ul.dropdown > li > a {
            padding:5px 15px;
        }

}
@media screen and (min-width: 975px) {

    div.navbar > ul {
        width:975px;  
    }
    div.navbar > ul > li.menu-button {
        display:none;
    }
}
@media screen and (max-width: 974px) {

    div.navbar > ul {
        width:100%;
    }
    div.navbar > ul > li.menu-button {
        width:20px;
        height:20px;
        margin-top:14px;
        margin-right:15px;
        float:right;
        background:url(./assets/icon-menu.png) center no-repeat;
        border:solid 1px #333;
        border-radius:5px;
        opacity:0.5;
    }
        div.navbar > ul > li.menu-button:hover {
            opacity:1;
            cursor:pointer;
        }
    div.navbar > ul > div.collapse {
        width:100%;
        position:absolute;
        margin-top:48px;
        background:#222;

        display:none;
    }
        div.navbar > ul > div.collapse > li,
        div.navbar > ul > div.collapse > li > a {
            display:block;
            color:rgba(255,255,255,0.5);
        }
        div.navbar > ul > div.collapse > li.pull-right {
            float:none;
        }
        div.navbar > ul > div.collapse > li:hover,
        div.navbar > ul > div.collapse > li > a:hover {
            background:#232323;
            color:rgba(255,255,255,0.75);
        }
}

jQuery

$(document).ready(function() {  
    $('body').fadeIn();

    if($('div.navbar > ul > li.menu-button').length) {
       $('div.navbar > ul > li.menu-button').on('click', function() {
           $('div.navbar > ul > div.collapse').toggle();
       });
    };

    $('a').on('click', function() {
        if($(this).has('.dropdown')) {
            if($(this).siblings('ul.dropdown').css('display') == 'none') {
                $(this).siblings('ul.dropdown').css('display', 'block');
            } else if($(this).siblings('ul.dropdown').css('display') == 'block') {
                $(this).siblings('ul.dropdown').css('display', 'none');
            };
        };
    });

    $(window).on('resize', function() {
        var win = $(this);

        if(win.width() > 974) {
            if($('div.navbar > ul > div.collapse').css('display') == 'none') {
                $('div.navbar > ul > div.collapse').toggle();
                $('div.navbar > ul > div.collapse').attr('forced', 'true');
            };
        } else if(win.width() <= 974) {
            if($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
                $('div.navbar > ul > div.collapse').toggle();
                $('div.navbar > ul > div.collapse').removeAttr('forced');
            };
        };
    });
});

I created a jsbin here to recreate what happens to me, and I'll explain it:

Steps to recreate my issue:

  1. shrink the width of browser to below 975 pixels
  2. click the box to the right of the navigation bar
  3. expand browser to above 975 pixels
  4. now about and contact should be out of position

(lower than the navigation bar, but still floating to the right) I was wondering how to fix this issue and it seems I just disable and re-enable float:right in the developer options, but this won't be good enough if people are going to visit the site.

Any ideas on how to solve this issue?

Upvotes: 2

Views: 208

Answers (2)

misterManSam
misterManSam

Reputation: 24712

It's all in the floats. When it is toggled, the floats are made float: none. This is then carried across when it is re-sized.

Here is your new jsBin and here is how it fixes the problem:

  1. Give the two li's that are on the right when fullscreen another class (I made them .right). This is just to create a hook for the jQuery:

    <li class="right link pull-right">
    <a href="#">Contact Us</a>
</li>
<li class="right link pull-right">
    <a href="#">About Us</a>
</li>

  2. Remove this line from @media screen and (max-width: 974px):

    div.navbar > ul > div.collapse > li.pull-right {
    float:none;
}

  3. On resize we will remove the pull class or give it back with these: 

    $('.right').removeClass('pull-right'); //Inside <= 974
$('.right').addClass('pull-right'); //Inside > 974

  4. Add a window size check and remove the class if the width is less than 974px on load:

    var smallCheck = $(window).width(); 

if (smallCheck <= 974 ) {
    $('.right').removeClass('pull-right');
}

    You can see this in use here:

$(window).on('resize', function() {
  var win = $(this);

  var smallCheck = $(window).width(); 

    if (smallCheck <= 974 ) {
        $('.right').removeClass('pull-right');
    }

  if (win.width() > 974) {
    if ($('div.navbar > ul > div.collapse').css('display') == 'none') {
      $('div.navbar > ul > div.collapse').toggle();
      $('div.navbar > ul > div.collapse').attr('forced', 'true');
    }
    $('.right').addClass('pull-right'); // add this

  } else if (win.width() <= 974) {
    if ($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
      $('div.navbar > ul > div.collapse').toggle();
      $('div.navbar > ul > div.collapse').removeAttr('forced');
    }
    $('.right').removeClass('pull-right'); // add this

  }
});

Here is the complete nav bar.

$(document).ready(function() {
  $('body').fadeIn();
  
    var smallCheck = $(window).width(); 
	
	if (smallCheck <= 974 ) {
		$('.right').removeClass('pull-right');
	}

  if ($('div.navbar > ul > li.menu-button').length) {
    $('div.navbar > ul > li.menu-button').on('click', function() {
      $('div.navbar > ul > div.collapse').toggle();
    });
  }

  $('a').on('click', function() {
    if ($(this).has('.dropdown')) {
      if ($(this).siblings('ul.dropdown').css('display') == 'none') {
        $(this).siblings('ul.dropdown').css('display', 'block');
      } else if ($(this).siblings('ul.dropdown').css('display') == 'block') {
        $(this).siblings('ul.dropdown').css('display', 'none');
      }
    }
  });

  $(window).on('resize', function() {
    var win = $(this);

    if (win.width() > 974) {
      if ($('div.navbar > ul > div.collapse').css('display') == 'none') {
        $('div.navbar > ul > div.collapse').toggle();
        $('div.navbar > ul > div.collapse').attr('forced', 'true');
      }

      $('.right').addClass('pull-right');
    } else if (win.width() <= 974) {
      if ($('div.navbar > ul > div.collapse').attr('forced') == 'true') {
        $('div.navbar > ul > div.collapse').toggle();
        $('div.navbar > ul > div.collapse').removeAttr('forced');
      }

      $('.right').removeClass('pull-right');

    }
  });
});
body {
  background: #F0F1F2;
}
html,
body {
  width: 100%;
  min-height: 100%;
}
* {
  margin: 0;
  padding: 0;
  font-family: 'bl-reg', sans-serif;
  font-size: 12px;
  color: #333;
  z-index: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
tr,
th,
td {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
a {
  font-family: 'bl-reg', sans-serif;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}
.margin-center {
  margin: auto auto;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
div.navbar {
  height: 48px;
  overflow: visible;
  position: relative;
  background: #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
div.navbar > ul {
  width: 975px;
  list-style-type: none;
}
div.navbar > ul li.brand,
div.navbar ul li.link {
  display: inline-block;
}
div.navbar > ul li.brand {
  font-weight: bold;
  font-size: 14px;
}
div.navbar ul li.link {
  font-size: 12px;
}
div.navbar > ul li a {
  display: block;
  padding: 15px;
}
div.navbar > ul li.link a {
  display: block;
  padding: 16.5px 15px;
  color: rgba(51, 51, 51, 0.75);
}
div.navbar > ul li.link a:hover {
  color: rgba(51, 51, 51, 1);
}
div.navbar > ul li a:hover {
  text-decoration: none;
}
div.navbar > ul li > ul.dropdown {
  min-width: 100px;
  position: absolute;
  margin-top: 48px;
  margin: 0;
  padding: 0;
  background: #FFF;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  list-style-type: none;
  display: none;
  z-index: 99;
}
div.navbar > ul li > ul.dropdown > li > a {
  padding: 5px 15px;
}
}
@media screen and (min-width: 975px) {
  div.navbar > ul {
    width: 975px;
  }
  div.navbar > ul > li.menu-button {
    display: none;
  }
}
@media screen and (max-width: 974px) {
  div.navbar > ul {
    width: 100%;
  }
  div.navbar > ul > li.menu-button {
    width: 20px;
    height: 20px;
    margin-top: 14px;
    margin-right: 15px;
    float: right;
    background: url(./assets/icon-menu.png) center no-repeat;
    border: solid 1px #333;
    border-radius: 5px;
    opacity: 0.5;
  }
  div.navbar > ul > li.menu-button:hover {
    opacity: 1;
    cursor: pointer;
  }
  div.navbar > ul > div.collapse {
    width: 100%;
    position: absolute;
    margin-top: 48px;
    background: #222;
    display: none;
  }
  div.navbar > ul > div.collapse > li,
  div.navbar > ul > div.collapse > li > a {
    display: block;
    color: rgba(255, 255, 255, 0.5);
  }
  div.navbar > ul > div.collapse > li:hover,
  div.navbar > ul > div.collapse > li > a:hover {
    background: #232323;
    color: rgba(255, 255, 255, 0.75);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar">
  <ul class="margin-center">
    <li class="brand pull-left">
      <a href="#">lolnode</a>
    </li>
    <li class="menu-button"></li>
    <div class="collapse">
      <li class="link">
        <a href="#">Home</a>
      </li>
      <li class="link dropdown">
        <a href="#">Sports</a>
        <ul class="dropdown">
          <li><a href="#">Football</a>
          </li>
          <li><a href="#">Tennis</a>
          </li>
          <li><a href="#">Badminton</a>
          </li>
        </ul>
      </li>
      <li class="right link pull-right">
        <a href="#">Contact Us</a>
      </li>
      <li class="right link pull-right">
        <a href="#">About Us</a>
      </li>
    </div>
  </ul>
</div>

Upvotes: 2

Alexander Nicholas Popa
Alexander Nicholas Popa

Reputation: 272

make something like on resize() to get the close menu values. You have issues with the toggle, it remains on the values that toggle gives.

Upvotes: 0

Related Questions