Refreshing page elaments

Go down

Refreshing page elaments Empty Refreshing page elaments

Post by jamied_uk on 27th September 2011, 14:46

to refresh framesets

to refresh pages

Here I am going to show different methods to refresh/reload the page or part of the page automatically in certain period of time.

Simplest way to refresh whole page is by using meta tag as below:

Above code refreshes the page for every 30 seconds.

if you don’t want to use meta tag as some browsers won’t support, you can do this by using Javascript as below:

window.onload = setupRefresh;

function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
function refreshPage() {
window.location = location.href;

Above code reloads the page for every 30 seconds.
setTimeout() allows you to specify that a piece of JavaScript code (called an expression) will be run a specified number of milliseconds from when the setTimeout() method was called. The general syntax of the method is:

setTimeout ( expression, timeout );

Best way of refreshing elemants

where expression is the JavaScript code to run after timeout milliseconds have elapsed.
Refreshing part of a page periodically
Using Frames

Divide the page using frames and load different pages in each frame as below:

In the above two parts, if you want to reload particular part of the page, then use the above meta tag or Javascript approach in frame source html page.
You can use the frame “reload” function periodically in frameset page itself.

window.onload = setupRefresh;

function setupRefresh() {
setInterval("refreshFrame();", 1000);
function refreshFrame() {

In the above code, “right_frame” reloads every second.
setInterval() function is very closely related to setTimeout() – both have similar syntax:

setInterval ( expression, interval );

The important difference is that, whereas setTimeout() triggers expression only once, setInterval() keeps triggering expression again and again (unless you tell it to stop). You can stop setInterval() by calling method clearInterval().
Without Frames

We can reload the particular block of the page using Javascript. Here, I am going to explain this with display time on a page which reloads every second.

window.onload = startInterval;
function startInterval()

function startTime()
document.getElementById('time').innerHTML = Date();

Above code will display time with seconds on a page and refreshes div (id “time”) block every second to show the exact time.

If you are using a JQuery, then use the “load” function to load the page in div block.

window.onload = setupRefresh;
function setupRefresh()

function refreshBlock()

In the above code, index.html page loads every 30 seconds in div with id “block1″.

Posts : 2471
Join date : 2010-05-09
Age : 36
Location : UK

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum