Home/ Questions/Q 8754585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T13:39:22+00:00

I have this code on jsFiddle that is implemented and works just fine on

  • 0

I have this code on jsFiddle that is implemented and works just fine on desktop browsers and works, to a point, on mobile devices. http://jsfiddle.net/heufT/

What my code is doing

If the screen is larger than 960px wide (or thereabouts) a normal horizontal navigation will be displayed, however if the screen is less than 960px wide the navigation becomes apart of a button, which when clicked reveals the same links in a vertical menu instead. When you scroll the page, the header will shrink to a smaller height and if you go back to the top the header goes back to the same height as before. There is also a .load script that will ensure this all happens even when you resize your browser (mainly for use on desktop).

jQuery(document).ready(function($){

// prepend menu icon
$('nav').prepend('<div id="menu-icon"></div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
    $("ul#prim").slideToggle();
    $(this).toggleClass("active");
});

});

// Navigation resize event on scroll
$(document).scroll(function(){

if($(window).width()>959){
      $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

if ($(this).scrollTop()>105){
    // animate fixed div to small size:
    $('header').stop().animate({ height: 90 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');
    $('ul#prim').stop().animate({ top: 62 },50, 'linear');
    $("img.logo").fadeOut();
    $("img.bao_logo").fadeIn(1000);
} else {
    //  animate fixed div to original size
    $('header').stop().animate({ height: 175 },50, 'linear');
    $('ul#prim.adjTop').stop().animate({ top: '50%', 'margin-top': 18 },50, 'linear');  
    $('ul#prim').stop().animate({ top: 105 },50, 'linear');
    $("img.logo").fadeIn(1000);
    $("img.bao_logo").hide();
}

});

$(window).resize(function() {
if($(window).width()>959){
    $("ul#prim").addClass("adjTop");
}

if($(window).width()<958){
      $("ul#prim").removeClass("adjTop");
}

// Showreel
$(window).resize(function(){
    // Resize video to fix aspect ratio when window resizes
    // Only do this if video is currently visible
    if ($('#showreel').height()!=0){
        $('#showreel').height(($('#showreel').width()/16)*9);
    }
});
});

(function($){

// Custom scrollbars for work feature on homepage
$(window).load(function(){
    $(".scroll-pane").mCustomScrollbar({
            horizontalScroll:true,
            mouseWheel: false
    });
});

})(jQuery);​

The problem

The one thing I have been noticing though on iPad and iPhone especially is that the JS will work but then when you pinch/zoom Javascript completely breaks and the navigation button doesn’t work nor does the shrinking/growing of my header.

I have tried disabling pinch/zoom using the meta viewport tag which obviously stops the user from zooming in to the page but even when you at least try to pinch/zoom and it doesn’t do anything, i’ve noticed the JS still breaks and nothing works.

Has anyone got any pointers? Is there any errors in my code that would casue this? Am I missing anything?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok so after testing for a couple of days I ended up revisiting the meta viewport tag and added a maximum-scale attribute combined with the user scalable attribute and it cured the problem. Not sure if this is the right way to go about things as the user is prevented from pinch/zooming and therefore impacts usability but this is a short term solution none the less.

    My viewport tag now looks like so:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    • 0