JavaScript Toggling Class to show/hide navigation not working in Chrome for Android 4.2 (v31)

I have following markup for my nav-menu and menu icon to toggle it.

<a target='_blank' href="#navigation" class="toggle-menu">&#9776;</a>
<nav id="navigation">
    <a target='_blank' href="#" class="nav-item nav-blog active">Blog</a>
    <a target='_blank' href="#" class="nav-item nav-projects">Projects</a>
    <a target='_blank' href="#" class="nav-item nav-showcase">Showcase</a>
    <a target='_blank' href="#" class="nav-item nav-social">Social</a>
    <a target='_blank' href="#" class="nav-item nav-about">About</a>
    <a target='_blank' href="#" class="nav-item nav-close">&times;</a>
</nav>

In which all menu items stack up vertically when viewing in Smartphone in portrait mode (I use CSS media queries).

Following is the initial style of menu items.

nav {
   position: fixed;
   top: 0;
   padding-top: 60px;
}

nav .nav-item {
   display: table;
   margin-top: 10px;
   padding: 2px 10px 2px 10px;
   width: auto;
   font-size: 2.5em;
   text-align: left;
   margin-left: -230px; /* Keep menu items off-screen by default. */
   z-index: 1000;
   -webkit-transition: margin-left 0.2s ease;
      -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
           transition: margin-left 0.2s ease;
}

/* Show Menu on :target or via JS */
nav:target .nav-item,
nav.open .nav-item {
    margin-left: 0;
    transition: margin-left 0.2s ease;
}

And now I toggle open class on nav-menu upon click of a.toggle-menu, this works fine and as expected in Chrome Canary 34 (DevTools device emulator) on Desktop, Firefox 26 running on Android 4.2, but it is giving unexpected behaviours in Chrome 31 on Android, as well as any other browser on Android (that uses WebView).

What's happening is when page is loaded for first time, and I tap on Menu icon, it shows Nav-menu with transition, and tapping again on Close hides it, but when I tap again the same menu icon, it doesn't show up, but if I double-tap on page (which usually zooms-in the page 1 level), nav-menu appears (without any transition, like it was already present there), and then tapping on close hides it, and this behaviour continues until I reload the page again.

Note that I'm currently using jQuery 2.0.3 for event handlers, and this problem persists with both ways of showing/hiding of menu, with JS, without JS.

Any help will be appreciated.

Answer:1

Try:

nav {
   position: absolute;
   top: 0;
   padding-top: 60px;
}

nav .nav-item {
   display: block;
   margin-top: 10px;
   padding: 2px 10px 2px 10px;
   width: auto;
   font-size: 2.5em;
   text-align: left;
   margin-left: -230px; /* Keep menu items off-screen by default. */
   z-index: 1000;
   -webkit-transition: margin-left 0.2s ease;
      -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
           transition: margin-left 0.2s ease;
}

/* Show Menu on :target or via JS */
nav:target .nav-item,
nav.open .nav-item {
    margin-left: 0 !important;
}

Answer:2

Button doesnt work on jquery when Click

I have this code on my jquery participantText += '<div class="wrap_col td7"><input type="image" src="/pc/images/callgray.png" style="vertical-align: middle" class="actionInvite"></div&...

button doesn't work html
button doesn't work on ipad
button doesn't work on keyboard
button doesn't work unity
button doesn't work on first click
button doesn't work on iphone
button doesn't work
button doesn't work on mobile
excel button doesn't work
apple watch button doesn't work
java button doesn't work
button doesn't work on macbook
button doesn't work in firefox
button doesn't work on chrome
button doesn't work laptop
button doesn't work on android
button doesn't work meme
javascript button doesn't work
wix button doesn't work
button doesnt work internet explorer

How to pass arguments to function using unobtrusive JavaScript?

In traditional code I will pass arguments to link button like this: <a href="javascript:call_hello(1, 2, 3)" role="button">Hello</a> How can I do it in unobtrusive JavaScript style with ...

pass arguments function python
pass arguments function addeventlistener
pass arguments function php
pass arguments function c
pass argument function javascript
pass argument function bash
pass argument function pointer
pass argument function vba
pass args function
pass argument function callback
pass function arguments r
pass function arguments js
pass function argument to decorator
pass function argument java
pass function argument
pass function argument scala
pass function argument jquery
pass function argument constructor
pass function argument character
pass arguments to function in shell script

trying to make carousel animation slider

i am trying to creat a carousel animation that take 3 pics and slide the to the left and bring new 3 images, i don't think i'm in the right direction need help here is the fiddle link: http://...

How to split html string to DOM elements?

I have a html string var str = '<span class="linq" onclick="ShowData(2,-1,1);">11111</span>  »  <span class="linq" onclick="ShowData(16,1,1);">22222</span> &...

split html string c#
split html string javascript
split html string
split html string jquery
split html string php
html split string into lines
html split string into array
split string html tags
javascript split html string into array
js split html string
python split html string
angular html split string
django html split string
c# split string html tags
php split string html tags
java split string html tags
angularjs html split string
html split long string
html string split function