A couple of questions:
I've never really used JS listeners other than onclick and onkey events, so I wondered if someone could help me with what I need in order to reload the page every X seconds?
Secondly, the page contains bare minimum, literally just one input box. Do I still need to include the html head and body?
You don't need Javascript for this simple function. Add in the page header:
<meta http-equiv="Refresh" content="300">
300 is the number of seconds in this example.
To reload the page after 5 seconds (5000 milliseconds) using JavaScript, add the following to the bottom of the page:
<script type="text/javascript">
setTimeout(function () { location.reload(true); }, 5000);
</script>
As Greg Hewgill notes, you can also accomplish this with the meta refresh tag:
<meta http-equiv="Refresh" content="5">
Strictly speaking, you do still need <html> and <body> tags. Some browsers may render the page correctly without them, but your are safest to include them.
use a timer: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
and usee ajax to reload if it is dynamic
To your second question, ye you definitely do!!
Toy your first question check this out:
http://www.javascriptkit.com/script/script2/autofresh.shtml
Or this to do it without javascript:
http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm
It does what you asked and is very easy to configure!
Related
I'm working on a karaoke video assignment and was hoping to find a way to flip between two different index.html documents (one for chorus, one for verses) using JS. I have limited knowledge of Javascript and am in the process of learning it. So far I think I need to use the following:
$(document).ready(function () {
window.setTimeout(function () {
window.location.href = "index2.html";
}, 5000);
});
Right now I have my index1.html and index2.html for the chorus and verses. I'm thinking I'd make an external JS file with the above function which displays index1.html for x amount of seconds and then index2.html for another duration. Sorry if this question is too simple or not well clarified. Still a beginner so any help is appreciated! Thanks!
What you are looking for is:
window.location.replace('path/to/index2.html')
I'm not sure what your directory structure looks like but you can pass it a relative or absolute path.
you don't even need javascript for this purpose, just put this in your head section:
<meta http-equiv="refresh" content="5; url=index2.html">
it will redirect to index2.html after 5 seconds.
http-equiv means "http header equivalent". As you can guess it can also be a http header sent by the server so you can serve even pure txt documents and switch them using headers sent by server.
If you want to use the power of javascript, you don't need to switch between pages, you can simply hide one content or another which is pretty simple:
<pre id="verse1">
verse 1 here
</pre>
<pre id="chorus" style="display: none">
chorus here
</pre>
<script>
$(function () {
window.setTimeout(function () {
$('#verse1').hide();
$('#chorus').show();
}, 5000);
});
</script>
I m trying to update content in my page without refreshing the whole page just by refreshing the div using javascript.
However it does the job, the output is giving the "blink" at set interval to update content.
How can i avoid to hide the "blink" while updating the content.
Here's the code so far :
index.php
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
</head>
<body >
<div id="curve_chart"></div>
<br><br>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#curve_chart').load('load.php');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#curve_chart').load('load.php');
refresh();
}, 2000);
}
</script>
</body></html>
the load.php contains the content which comes from db.
Now , how do i update the content fetched in load.php in index.php without giving the blink effect for every 2 sec of set interval.
Thanks in advance for every single soul who took a min in going through this. I respect your time.
Try to use .ajax for the call and see if the blinking goes away. .load sometimes recreates the element rather than update it and that causes the blinking when fetching a large amount of data
Edit:
$.ajax({url: "demo_test.php", success: function(result){
$("#curve_chart").html(result);
}});
I figured it out. Thank you all for your time and taking a look at it.
All i had to do is to shift the data fetching code as well as just the data interpreting code to the load.php which is getting refreshed every set interval time. leave the rest divs or sections behind in index page.
Thanks once again.
I need some advice about my problem.
I'm using a JQ Multiselect and JQ Uniform to make more of the pages hotties.
The problem is.... The JQ are applied after the page has already loaded and it happens that you see the page without the "effects" (for about 1 second) and then start the effects / styles.
And this thing is horrible and frustrating.
Before writing here I took a tour on StackOverflow and on the internet but I can not find the solution to my problem.
Note: obviously, in the head tag I have the src of single js and othe tags before and after my "Javascript problem".
I tried with
<head>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#SomeID').multiselect({});
});
});
</script>
</head>
and with
<head>
<script>
$(window).load(function(){
$('#SomeID').multiselect({});
});
</script>
</head>
but is the same thing!!!
You think there's a solution?
Do CSS display: none on the body or all the main sections of your page, so that when the entire page is loaded all the contents of it are hidden. You can then use whatever JavaScript effects you want to change the display property.
Client requests a small video to play as a "splash page". But I dont want to make it the index page for SEO purposes. Can I place a re-direct line of code at the top of my index? Cookies to make it only once?
I think there might be a few ways to do this, but i know none of them.
Thanks for your time.
James
Like my comment you can use jquery to achieve this. Check my example: http://jsfiddle.net/LSjbS/
The splash section should come last in the markup, as it has the least importance.
You can use javascript:
<script type="text/javascript">
setTimeout('Redirect()',4000); //time in ms
function Redirect()
{
location.href = 'http://www.website.com/path/splash';
}
</script>
It's that easy :) Just put it in the head section. the 4000 is the time in ms (as shown by my comment) change this to 1 for an almost immediate redirect :)
I have tried it using jQuery but it is not working.
<script>
$("a").click(function () {
$.post("http://www.example.com/trackol.php", {result: "click"
}, "html");
});
</script>
out
To get the best results you should change two things in your approach
Use onmousedown instead of click - this way you get a few extra milliseconds to complete the tracking request, otherwise the browser might not start the connection to your tracker at all as it is already navigating away from the original page. The downside is that you might get some false-positive counts, since the clicking user might not finish the click (eg. keeps the mousebutton down and moves the cursor away from the link) but overall it's a sacrifice you should be willing to make - considering the better quality of tracking.
Instead of an Ajax call ($.post('...')) use an image pre-fetcher (new Image().src='...'). The fact that the tracker is not an image is not relevant in this case because you don't want to use the resulting "image" anyway, you just want to make a request to the server. Ajax call is a two way connection so it takes a bit more time and might fail if the browser is already navigating away but the image pre-fetcher just sends the request to the server and it doesn't really matter if you get something back or not.
So the solution would be something like this:
<script>
$(document).ready(function() {
$("a").mousedown(function (){
new Image().src= "http://www.example.com/trackol.php?result=click";
});
});
</script>
out
Instead of using JavaScript to call a php tracking script, you could just link to your tracking script directly and have it in turn redirect the response to the ultimate destination, something like this:
out
and in the PHP script, after you do your tracking stuff:
...
header("Location: $dest");
As mentioned, the problem is you’re not running the script after the DOM has loaded. You can fix this by wrapping your jQuery script inside $(function() { }, like so:
This works:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tracking outgoing links with JavaScript and PHP</title>
</head>
<body>
<p>Test link to Google</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {
$('a').click(function() {
$.post('http://www.example.com/trackol.php', { result: 'click' }, 'html');
});
});
</script>
</body>
</html>
See it in action here: http://jsbin.com/imomo3