CCS menu on mobile show/hide by CSS or JavaScript?

iOS 8.1 has broken the way this javascript menu behaves. After displaying the mobile menu and you scroll the page on iPhone the mobile menu disappears. Can anyone point to why?

On the button to toggle the menu show hide I’m using this. (I think it this bit thats breaking on not robust enough)

<a href="#" onclick="toggle_visibility('nav'); toggle_visibility('search') ">

http://www.printlineadvertising.co.uk/demo/club/

Then to toggle the CSS on page width generally.

   
    function toggle_visibility(id) {
      var e = document.getElementById(id);
         if(e.style.display == 'block')
             e.style.display = 'none';
         else
       e.style.display = 'block';
	}
	
	function showHide(id,w){
		if (!document.getElementById){ return; }
      	var e = document.getElementById(id);
      	var r = w ? 'none' : 'block';
      	e.style.display = r;
	}
	
	window.onresize = function() {
		var w = window.innerWidth < 700;
		showHide('nav',w);
		showHide('search',w);
	}
~~~



_______________________________________________
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s the…

window.onresize = function() 

At fault. On Safari iOS 8 there’s a transition when scrolling that hides the top and bottom bar.

I assume the viewport height is changed triggering the function.

how can I just check for a viewport width change?


David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi David,
The window resize causes the menu to toggle regardless of if the user is actually using it or not so if the page is scrolled (even slightly) then the menu is hidden from the user.
A quick and easy solution is to store the state of the menu itself in a class name (open or closed) and check for this when the window resizes;
http://www.freewayactions.com/test/menu-test.html

This isn’t going to stand up to adding your own classes to these objects but for now it should do what you need.
regards,
Tim.

On 17 Nov 2014, at 17:32, David Owen wrote:

It’s the…

window.onresize = function()

At fault. On Safari iOS 8 there’s a transition when scrolling that hides the top and bottom bar.


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve just updated this example so you can now stack class styles on the items you are showing and hiding and the code will still function. Overall this should be a much more robust solution.
http://www.freewayactions.com/test/menu-test.html
Regards,
Tim.

Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options