I got some performance issues in phonegap 3.0. i got two html pages (i dont want to put together as one page). Both pages called jquery mobile script and deviceready function for phonegap. i use navigation command like window.location = "page2.html".
It can go to page2.html but it will take 7 seconds (I thought It is loaded script files again). so i tried to use window.location.href="page2.html". it is straight away go to page2 within 1 sec but it cannot be called page onload function (aka : $(document).ready()) in the page2.
How should i solve this issue? thanks for any suggestion or help !
Edited:
page1.html header funcition
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="js/less-1.3.0.min.js"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet/less" href="css/style.css">
<div>
Please click here to <a style="font-weight:bold;font-size:13px;color:blue;" id="registerButton"
onclick="callanotherpage('page2.html');" >REGISTER</a> !
</div>
<script type="text/javascript">
$(document).ready(init);
function init(){
document.addEventListener("deviceready", function(){
},true);
$("#pageLoader").hide();
}
function callanotherpage(page_name){
window.location.replace(page_name);
}
In page2.html
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="js/less-1.3.0.min.js"></script>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet/less" href="css/style.css">
<script type="text/javascript">
$(document).ready(init);
function init(){
document.addEventListener("deviceready", function(){
},true);
$("#pageLoader").hide();
}
function callanotherpage(page_name){
window.location.replace(page_name);
}
</script>
Best Rgds,
dartfrog
What about using just a normal link?
link
i have an application with 9000 lines of code on 3 different html pages. Every page has more than 9000 lines. The change from one site to another does not take longer than < 1sec
try using
document.location = "page2.html";
Related
I have one line of JavaScript;
alert('test');
It's included through the following HTML:
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>;
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
It fires the alert box twice. All browsers.
Why?
Is this normal?
Please!
More code is needed to be sure (always list the full example) but while using Google Chrome try placing debugger; before your alert('test'); call and you will be able to compare the call stacks from the first and second passes through the code. This should be enough information to help you figure out why.
You import the same script twice in your HTML, thus running it twice. Remove one of the two script tags and you should be groovy.
<html>
<head>
<script type="text/javascript" src="code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
</body>
</html>
On a separate note - you don't need that semi-colon after the jQuery import.
I've been trying to get a simple implementation of the Slick Carousel working.
I've followed the instructions at the Git page: https://github.com/kenwheeler/slick
Here is my code. Can anyone see a problem? Does anyone have a simple working code sample for slick?
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body style="background-color: lightblue">
<div class="your-class">
<div><p>test1</p></div>
<div><p>test2</p></div>
<div><p>test3</p></div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>
</body>
</html>
The reason it's not working is because you are running your html from file. This means that the url scheme being used for your script links is
file:
instead of
http:
so your CDN links are being resolved as
file://code.jquery.com/jquery-1.11.0.min.js
which is clearly incorrect.
Either hard-wire the scheme to http: by updating all the links to contain a scheme:
<link rel="stylesheet" type="text/css"
href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
or run your code from an http context instead of from a file on your HD.
I have an issue with yepnope that is driving me crazy, and I spent a good amount of time searching for the answer with no luck.
First, I am using device.js to detect screen size, it will throw an desktop class in the tag if it detects a desktop. On the desktop I want another script to be loaded which will then give functions to a certain class (on mobile devices, the script will not load and the certain classes will remain static.)
However, when yupnope executes, it throws my script on TOP of all the other scripts in my head tag and will not execute and run. I know the script works because I manually put it in on the bottom of my other scripts. My question is how can I make yepnope load the script last instead of putting it on the very top of the other scripts? I have a nagging feeling that this is where a callback comes in but I am still trying to get ahold of javascript!
this is my yepnope code:
$(document).ready(function(){
if ($('.desktop').length !=0) {
yepnope({
load: "js/jquery.malihu.PageScroll2id.js",
});
};
});
This is my html:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
The yepnope condition is in the file scripts.js which executes last but still puts the jquery.malihu.PageScroll2id.js script that is called on top which is wrong order then as shown in this code:
<script src="js/jquery.malihu.PageScroll2id.js"></script> //script on top = BAD!!
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/global.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/device.js"></script>
<script src="js/fixedonlater.js"></script>
<script src="js/scripts.js"></script>
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>