De PHPhulp kroeg
Probleem met jquery menu
ik ben laatst begonnen met een mobiele versie van mijn website.
Dit begon goed en ik had een mooie layout opgezet, maar toen ging jquery me irriteren. Ik heb toen jquery gebruikt voor een (van links naar rechts schuivend) menu. In IE doet hij het prima, maar in Google Chrome en op mijn mobiel wil het menu maar niet tevoorschijn komen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$(document).ready(function() {
$('.toggle').live("click", function(){
$('#menu').animate({marginLeft: '0'}, 500);
$('.toggle').removeClass('toggle').addClass('toggle2');
});
$('.toggle2').live("click", function(){
$('#menu').animate({marginLeft: '-65'}, 500);
$('.toggle2').removeClass('toggle2').addClass('toggle');
});
});
</script>
$(document).ready(function() {
$('.toggle').live("click", function(){
$('#menu').animate({marginLeft: '0'}, 500);
$('.toggle').removeClass('toggle').addClass('toggle2');
});
$('.toggle2').live("click", function(){
$('#menu').animate({marginLeft: '-65'}, 500);
$('.toggle2').removeClass('toggle2').addClass('toggle');
});
});
</script>
De rest van de index code kun je van de pagina afhalen: http://m.smash.nl
Iemand oplossingen??
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$(document).ready(function() {
var menu = $('#menu'),
toggle = $('.toggle');
toggle.on("click", function(){
menu.animate({margin-left: '0'}, 500);
toggle.removeClass('toggle').addClass('toggle2');
});
var toggle2 = $('.toggle2');
toggle2.on("click", function(){
menu.animate({margin-left: -65'}, 500);
toggle2.removeClass('toggle2').addClass('toggle');
});
});
</script>
$(document).ready(function() {
var menu = $('#menu'),
toggle = $('.toggle');
toggle.on("click", function(){
menu.animate({margin-left: '0'}, 500);
toggle.removeClass('toggle').addClass('toggle2');
});
var toggle2 = $('.toggle2');
toggle2.on("click", function(){
menu.animate({margin-left: -65'}, 500);
toggle2.removeClass('toggle2').addClass('toggle');
});
});
</script>
Gewijzigd op 03/05/2012 16:36:06 door Jeroen VD
Toevoeging op 03/05/2012 16:33:14:
@Jurgen B, je suggestie werkte niet, nu reageert hij in IE ook al niet meer.
javascript console? foutmeldingen?
Toevoeging op 03/05/2012 16:36:40:
en hou de namen eens in de gaten, ik heet jeroen, en jurgen heet jurgen
Mbt live() :
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Zie ook http://api.jquery.com/live/
Ik zie ook dat je margin-left probeert, dat kan wel maar dan moet je hem eveneens tussen haakjes zetten.
Gewijzigd op 03/05/2012 16:41:01 door Jurgen B
.live() dus niet gebruiken.
Wouter J op 03/05/2012 16:43:00:
Thomas, heb je wel jQuery 1.7.x ingeladen?
Volgens de broncode niet:
Code (php)
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Gewijzigd op 03/05/2012 16:44:19 door Henk PHP
In console staat ook:
Uncaught SyntaxError: Unexpected token -
Dus sowieso met de haakjes.
Gewijzigd op 03/05/2012 16:45:51 door Jurgen B
Code (php)
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Nu gaat het wel werken.
In IE doet hij het nu weer wel, ga nu kijken of hij het ook in Chrome en op mijn mobiel doet.