So, I am making a website, and when changing between pages, there is a flickering.
I have searched for answers to fix this issue, but all of the results have not worked.
My pages php files, and fetch other files prior to loading the HTML elements. Could this be the issue?
Here's a look at my HTML code:
<!DOCTYPE html>
<html>
<head>
//Output meta data
<title>Page Title</title>
<link rel='stylesheet' type='text/css' href='../framework/assets/stylesheets/bla.min.css'/>
<script type='text/javascript' src='../framework/assets/javascript/jquery.min.js'></script>
<script type='text/javascript' src='../framework/assets/javascript/bla.min.js'></script>
</head>
<body lang='en'>
What could I do to prevent page flicker? How would I be able to delay the page from changing until the target page is fully loaded?
Thanks.
Set body style to
display:none;
and then use jquery:
$(document).ready(function(){$(body).css('display','block')});
This is the code to show content when fully loaded :) and if i understood correctly this is what you want
Related
I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
I'm facing very strange behaviour in Chrome & Mozilla from jQuery. I'm getting very generic Unexpected token ILLEGAL error on my document.ready function.
While playing with a signaturepad sample, I tried it with my own page. It is not working in Mozilla & Chrome, but is working in IE. Then I removed all references of signaturepad and put a simple one alert inside document.ready function and observed (Thanks to Chrome JavaScript Errors Notifier) Unexpected token ILLEGAL error is occurring when system try to use jQuery reference. Then I copied all the text from the sample page (a.html), where it works perfectly inside this page (b.html), and ran the page again. I'm surprised the a.html page is working fine while b.html page is throwing the error. Both pages are on the same directory and have the same content.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title> </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link href="css/jquery.signaturepad.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
alert('hai');
})
</script>
</body>
</html>
Problem fixed now. Issue was in Encoding through which file was saved. The problematic file was saved with Unicode-1200 while it should be saved with Unicode-65001.
Thanks all for answering/comments.
Regards
I would do a few things that may sound silly --
Add a <!DOCTYPE html> tag to the top -- jquery mobile likes it
remove the indentation in front of your <html lang="en"> tag
redownload or try to use a hosted jquery library (e.g. from google) to see if that's it
add a closing ; after your })
I have several HTML pages running Javascript and JQuery Mobile, and I want to link to them from another HTML page. My link is setup as:
Hours
and the linking page and the pages being linked to are in the same directory. However, when I access the page through this link, the JQuery Mobile theme is loaded, but any additional CSS changes or any Javascript code doesn't execute. I have several methods set to run on startup, but none execute, not even a simple alert.
When I attempt to access the page directly, everything applies properly and my code executes, but when I try to access it through my HTML link, none of it works. Is there something I am forgetting?
Thanks!
Edit: None of the code is working for any link I link to. Even a simple:
$(document).ready(function(){
alert("Hello world");
});
does not work. I have this added into the other HTML page as:
<head>
<meta charset="utf-8">
<title>Hours</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet">
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("Hello world");
});
</script>
<style type="text/css">
* {
font-family: "Celeste Mobi Pro", Celeste, serif;
}
</style>
</head>
Neither the CSS font change nor the startup alert works. I've tried this on other HTML pages, so I think it might be the server I'm hosting it on, but I'm not sure.
Second Edit: I just tested it locally, and it works. I'm fairly certain it's the server right now, is there anything I should check?
Third Edit: I've been using the Chrome console to look at the javascript source on the pages being linked to. I have all scripts added through script tags in the head, but for some reason, none of those appear. Rather, the contents of the script tags are those from the page linking to them (and yes, I'm making sure that I'm checking the for the new page, not the old page). When I refresh the page, however, it updates and it seems to work.
According to every data that you provide us, what you are telling us should work. There's no flaw in it.
The only possible error that you may encounter may be that you are using two differents hours.html, and accessing the wrong one through your link.
I'm trying to understand d3 via this tutorial
So, I've downloaded script, named it d3.js and put it in the same directory with index.html
Here is code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</script>
</body>
</html>
However, when I load page, I don't see a new paragraph? What is wrong?
The snippet below is how jsFiddle sets up a working, d3-enabled page. I am not sure what exactly causes your problem, but maybe you could try copying the header.
I generally recommend including libs, like d3, via a CDN (e.g. cloudflare, or d3's own server, as in the fiddle), since the cached version can then be used across site domains (due to its absolute link), without being downloaded every time.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">//<![CDATA[
window.onload=function(){
d3.select("body").append("p").text("New paragraph!");
}//]]>
</script>
</head><body></body></html>
You can keep your script tag at the bottom of the body though.
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle