jQuery: Script suddenly stops working
Question
So, I looked through the questions about jQuery and scripts stop working. But it seems, they don't fit my problem:
When I switch view on my Android smartphone, the scroll.js stops working. The links wont even "jump" to their destination ...
Here's the index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/lightbox.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>
<link rel="stylesheet" href="./css/lightbox.css"/>
<link rel="stylesheet" href="./css/computer.css" media="screen and (min-width:981px)"></link>
<!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
<!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
<link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-width:720px)">
<!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->
<script type="text/javascript">
var next_move = "expand";
$(document).ready(function (){
if (window.matchMedia('(max-width: 720px)').matches) {
$("#icon-menu").on('click',function(){
if (next_move == "expand"){
$("#navigation").animate({left: '50%'});
$("body").animate({left: '50%'});
next_move = "shrink";
} else {
$("#navigation").animate({left: '0%'});
$("body").animate({left: '0%'});
next_move = "expand";
}
});
}
else{
}
});
</script>
</head>
and the scroll.js:
$(function() {
$('a[href*=#]:not([href=#])').on('click',function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
What ever is going on there is just happening to Chrome (I guess all webkit browsers) and the android-browser. When I open it with Firefox, scrolling works, menu expand doesn't. I tried the .noConflict(), but it just did, that the links jump to their destination and the menu wasn't expanding anymore.
For the view: click me
Please ignore things like the device-width. It's not finished yet, but I have to test it.
So the real question: What am I doing wrong? If there are conflicts, where can I find and correct them?
To reproduce the problem, just resize the browser to a smartphone size and refresh or use the smartphone instead. Otherwise the site is displayed for pc, where everthing works fine.
Edit: On the pc in smartphone-view everything works with Firefox, but on the actual smartphone the menu won't expand ...
Thank you!
1 answers
solution1
0 2014-10-02 13:48:38
The question is not fully answered.
One solution was, to ignore the smooth scrolling for mobile devices. So, the code atm looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/lightbox.min.js"></script>
<link rel="stylesheet" href="./css/lightbox.css"/>
<link rel="stylesheet" href="./css/computer.css" media="screen and (min-device-width:981px)"></link>
<!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
<!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
<link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-device-width:720px)">
<!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->
<script type="text/javascript">
var next_move = "expand";
$(document).ready(function (){
if (window.matchMedia('(max-device-width: 720px)').matches) {
$("#icon-menu").on('click',function(){
if (next_move == "expand"){
$("#navigation").animate({left: '50%'});
$("body").animate({left: '50%'});
next_move = "shrink";
} else {
$("#navigation").animate({left: '0%'});
$("body").animate({left: '0%'});
next_move = "expand";
}
});
}
else{
$(function() {
$('a[href*=#]:not([href=#])').on('click',function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
}
});
</script>
So the link and menu problems are gone, but the wanted smooth scroll effect for mobiles, too, is still not working.
Maybe someone has a clue.
To see the mobile-view a device with a width (not resolution!) of 720px is needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.