3

So I have some footer function code:

$(document).ready(function () {

$("<a class=\"dropdown-toggle dropdown-toggle-new disabled\" data-toggle=\"dropdown\" data-target=\"#\" style=\"text-align:right; float:right; display:inline; cursor:pointer\">+</a><br clear=\"both\"/><br clear=\"both\"/>").insertAfter("footer .dropdown-toggle");
$(".dropdown-toggle-new").css({ "display": "none" });

$('li.dropdown .dropdown-toggle-new').click(function () {
    $(this).parent().children('ul.dropdown-menu').toggle(300);
});  

$( window ).resize(changeFooter);
  changeFooter();

    function changeFooter(){
      if ($( document ).width() > 767){
          $('li.dropdown .dropdown-toggle-new').parent().children('ul.dropdown-menu').show();   
          $(".dropdown-toggle-new").css({ "display": "none" });
      } else {
          $(".dropdown-toggle-new").css({ "display": "inline" });     
          $('li.dropdown .dropdown-toggle-new').parent().children('ul.dropdown-menu').hide();
      }
    }
});

The issue I am having is that in Mac Chrome everything seems to work when the browser width hits 767px it does the function. However on PC Chrome, at 768px it does not go to the normal list view it remains as the collapsed lists until about 782px, so it is like adding 15px. I tried to adjust the code by changing the parameter to 752px to accommodate for the 15px but that then messed up the functionality on the Mac.

Here is a link of my test:

http://www.conversantmedia.com/publishers (actually at page contains the footer to test)

There are some other styling issues that I am working on as you scaled down but I have been stumped on this footer issue for a few days now. I am focusing just on the footer nav functionality.

Greg
  • 9,068
  • 6
  • 49
  • 91
Alpdog14
  • 129
  • 2
  • 14
  • 4
    The first thing that popped in my mind when I saw it was a 15px difference was **scrollbars**. Windows and Mac render them differently, so it looks like you'll need to workaround that. Check [this](http://stackoverflow.com/q/8146874/2752041) and [this](http://programmers.stackexchange.com/questions/216403/how-can-a-website-look-different-in-safari-windows-and-safari-mac). Those are not exactly the same problem as yours, but they might shed some light on how to solve this problem. – mathielo Mar 21 '14 at 21:27

1 Answers1

0

I'd use:

$( window ).width() > 767

instead of

$( document ).width() > 767

Juanjo
  • 340
  • 2
  • 5