0

I'll rewrite all because probably I've not explained myself very well (sorry for my bad english).
I have 2 html pages: index.hmtl and info.html.
All html pages have a div with the name of the page and a small menu icon, when you click on the icon the menu appears and disappears (something like menu in facebook app). to have this switching of visible and invisible I've toggled two classes. If I open my html.it and click on the menu button it works well, the menu appears and disappears.
The menu is an ul with link to others html page. If you click on a link the browser will load that page (ex. info.html) with the same div in the upper part (page name and small icon) and different content. If I click on the icon menu in info.html page the switchig of the menu doesn't work. If i refresh the info.html page the menu icon works showing and hidind the ul menu.

My code in all pages (for the header part) is:

<div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
     <img id="menu" src="img/menu.png" /> <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>

 <div class="content">
 [..........]
 </div>

<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

css class used are in a css file loaded in all html pages. this is css of this part:

#listamenu{ width:80%;
        height:100%;
        background-color:#0CF;
        margin:0;
        position:absolute;
        padding:0;
}
#listamenu li{ list-style:none;
            padding:10px;
            color:#fff;
}
#listamenu li a{ color:#fff;
            font-weight:normal;
}
#listamenu li:active{ color:#0CF;
            background-color:#fff;
}
.classmenua{ visibility:hidden;
        z-index:-1;
}
.classmenub{ visibility:visible;
        z-index:1;
}

return false; doesn't work.
.toggleClass('classmenub classmenua') work to switch the menu but gives the same error if i go in another page
console gives no errors, i'm testing on firefox, last update :D
Hope you can understand now XD sorry again

Lirael
  • 35
  • 2
  • 11
  • Do you have any error? Are you sure jQuery is loaded when you are invoking it? – MarcoL Feb 28 '14 at 13:38
  • 1
    Can you go into the console on the browser you are using and see if there are any errors listed? It'll normally give you the line number as well so you can correspond it to your code. – bashleigh Feb 28 '14 at 13:42
  • what do you mean by java stops working? from the looks of it, your script is inside the current page only. do you have the same script in other pages also? – T J Feb 28 '14 at 13:45
  • the console gives no error :( this is the "header" part of the side, the menu and the title of the page, i need to use it in all pages (same html + java). – Lirael Feb 28 '14 at 14:07

3 Answers3

0

In JQuery, you do this by adding return false at the end of the event handler, if you want the click default event not to occur.

$({
  $('#menu a').click(function() {
    $('#listamenu').toggleClass('classmenub classmenua');
    return false;
   });
 });

This fiddle shows a working example of your code.

This SO question explains it very well:

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both. Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.

Community
  • 1
  • 1
raviolicode
  • 2,155
  • 21
  • 22
  • the return false; not work, I've tryied before ask this question. To be sure I've tryied it again after your comment but nothing.. I have the same problem... – Lirael Feb 28 '14 at 14:04
  • @Lirael I added a working [example](http://jsfiddle.net/raviolicode/v47zG/) of your code in the answer. – raviolicode Feb 28 '14 at 14:28
  • @Lirael I'm not sure if I understand what you're asking. The description is not enough, you need a concrete example with code for everyone to see. Also, you need to **update the question**, and code examples, to reflect what you really want. – raviolicode Feb 28 '14 at 14:39
  • I've uploaded the main question, sorry for my bad english, hope that now you can understand the problem :D thanks – Lirael Feb 28 '14 at 17:14
0

Checking the docs, if you provide two arguments like this to toggleClass

.toggleClass( className, switch )

the second one will be treated as a boolean, which is probably not what you intend.

If you want to just toggle a list of classes, provide them in one argument, but separated by spaces, like this:

.toggleClass('classmenub classmenua')
Owlvark
  • 1,763
  • 17
  • 28
  • I've uploaded the main question, sorry for my bad english, hope that now you can understand the problem :D – Lirael Feb 28 '14 at 17:12
  • Ok, time for some debugging. Add `console.log($('#listamenu').attr("class"));` before the click handler. What does it say in the console (press F12) on info.html before you do the refresh? – Owlvark Feb 28 '14 at 17:56
  • hmm ok index.html 19:40:38.681 SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.9.1.min.js:1 19:40:38.748 SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.mobile-1.3.2.min.js:7 19:40:38.800 "classmenua" index.html:59 19:40:38.825 È stata trasmessa una stringa vuota a getElementById(). jquery.mobile-1.3.2.min.js:6 19:40:38.873 L'utilizzo di getPreventDefault() è deprecato. Al suo posto utilizzare defaultPrevented. jquery-1.9.1.min.js:3 19:40:38.900 TypeError: parentElement is null index.js:121 – Lirael Feb 28 '14 at 18:41
  • on info.html before the refresh 19:40:38.681 SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery-1.9.1.min.js:1 19:40:38.748 SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.mobile-1.3.2.min.js:7 19:40:38.800 "classmenua" index.html:59 19:40:38.825 È stata trasmessa una stringa vuota a getElementById(). jquery.mobile-1.3.2.min.js:6 19:40:38.873 L'utilizzo di getPreventDefault() è deprecato. Al suo posto utilizzare defaultPrevented. jquery-1.9.1.min.js:3 – Lirael Feb 28 '14 at 18:42
  • and: 19:40:38.900 TypeError: parentElement is null index.js:121 19:42:07.177 file:///Users/Utente/Downloads/wikitude-phonegap-samples-master/PluginSamples/platforms/ios/www/img/menu.png 19:42:07.081 tag corrispettivo mancante. Atteso: . info.html:33
    hmmm... dat stupid console of firebug doesn't work -.-     – Lirael Feb 28 '14 at 18:43
  • 1
    My Italian is poor, but it looks like there are several javascript errors and that will stop your menu working. If you get those fixed I suspect the above code will work. It also seems that you are using jQuery Mobile - if you post a new question be sure to use that tag rather than "jquery". – Owlvark Feb 28 '14 at 19:01
0

If I'm correct the only thing you want to do is toggle the menu. And the toggle button is not a link so we don't have to use something like preventDefault etc.

I copied your code and got it working just fine. What I wonder is where you exactly have placed the jQ i should be just above the

the following example works the classes get changed. Try to use this structure and see if it works for you.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
    <img id="menu" src="img/menu.png">
     <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>
<!-- Include javascript before the closing body tag </body> -->
<!-- jQuery include via CDN -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Here comes your own scipt (after the include) -->
<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

</body>
</html>

When jQuery is placed before the closing body tag. It will be triggered if the DOM is ready with loading. Other wise you need to use:

$('document').ready(function(){
     //your code here
});

I prefer the first option.

Rik
  • 308
  • 1
  • 2
  • 11