redirect not working

[vineet]

hi all

i want to show a redirect message for 5 second before redirecting person to yahoo website.

i using the following script. but its not redirecting just a mesage is displayed on click.

<script language="JavaScript"> 
function redirect(){ 
window.location="http://www.yahoo.com"; 
document.write("You will be redirected to yahoo in 5 sec.");
} 
</script>

on link

<a href="#" onclick="setTimeout('redirect()', 5000)"> Click to go to yahoo</a>

thanks
vineet

[jscheuer1]

If you document.write to the page after it has loaded, it wipes out everything on and about the page. Even if that were not true and the rest of it worked, when the timeout fires, you would go right to Yahoo without seeing the message. Try:

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
document.body.appendChild(d);
} 
</script>

<a href="#" onclick="redirect(); return false;"> Click to go to yahoo in 5 seconds</a>

[vineet]

If you document.write to the page after it has loaded, it wipes out everything on and about the page. Even if that were not true and the rest of it worked, when the timeout fires, you would go right to Yahoo without seeing the message. Try:

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
document.body.appendChild(d);
} 
</script>

<a href="#" onclick="redirect(); return false;"> Click to go to yahoo in 5 seconds</a>

hi jscheuer1

i am using IE7 and tried it.
I m only able to redirect to yahoo but not able to see any message before redirecting.
I have expanded the delay from 5 sec to 10 sec/20 sec but still no message is displayed.
The hyperlink is in between my content. so on click i want all page content should become blank and only the redirect message should be displayed.

vineet

[jscheuer1]

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var t = document.body.getElementsByTagName('*'), i,
d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
for (i = t.length - 1; i > -1; --i)
t[i].style.display = 'none';
document.body.appendChild(d);
} 
</script>

[vineet]

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var t = document.body.getElementsByTagName('*'), i,
d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
for (i = t.length - 1; i > -1; --i)
t[i].style.display = 'none';
document.body.appendChild(d);
} 
</script>

hi john

thanks. its working now.
just wanted to ask is it possible that i can place this script before my link in my <td> so that message should be displayed in my page.

actually with this script my header is also vanishing.

if this is not posible then tell me how can apply styles to this div. i know how to make classes in stylesheet but just tell where should i put my class name for this particular div in which mesage is displayed.

vineet

[jscheuer1]

Well, you said:

on click i want all page content should become blank and only the redirect message should be displayed

But, if you have some thing(s) that you want to remain displayed, you can mark them with a class, for example 'remain':

<div id="header" class="remain">
Whatever
</div>

then in the script:

for (i = t.length - 1; i > -1; --i)
if(!/remain/.test(t[i].className))
t[i].style.display = 'none';

Just make sure that the parent of that element is either the body or also is marked class="remain".

[vineet]

Well, you said:



But, if you have some thing(s) that you want to remain displayed, you can mark them with a class, for example 'remain':

<div id="header" class="remain">
Whatever
</div>

then in the script:

for (i = t.length - 1; i > -1; --i)
if(!/remain/.test(t[i].className))
t[i].style.display = 'none';

Just make sure that the parent of that element is either the body or also is marked class="remain".

hi john

marking everything with a new class "remain" wil make everything confusing as i m not using <div>. i m using <table> and those already have classes applied and its not posible to mark every table with "remain".

tell me can i apply class on this particular <div> instead so that after applying style on this <div> it looks better. at present its mixing with my background and not proper readable. it wil solve our purpose.

vineet

[jscheuer1]

You can give as many class names to an element as you like:

<table class="mytable remain">

But tables are not such a good idea. Also, you could create a division for either keeping things displayed in or for removing the display from, and alter the script code. I'd say like put everything that you want to disappear in:

<div id="killthis">
stuff to remove here.
</div>

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
document.getElementById('killthis').style.display = 'none';
document.body.appendChild(d);
} 
</script>

[vineet]

You can give as many class names to an element as you like:

<table class="mytable remain">

But tables are not such a good idea. Also, you could create a division for either keeping things displayed in or for removing the display from, and alter the script code. I'd say like put everything that you want to disappear in:

<div id="killthis">
stuff to remove here.
</div>

<script type="text/javascript"> 
function redirect(){ 
setTimeout(function(){window.location.href='http://www.yahoo.com/';}, 5000);
var d = document.createElement('div');
d.appendChild(document.createTextNode('You will be redirected to yahoo in 5 sec.'));
document.getElementById('killthis').style.display = 'none';
document.body.appendChild(d);
} 
</script>

hi john

in this case as u say to do. i wil have to give id to the message div also. and then call it in my <td> by getElementbyID. Because at present it is displaying at the top of the page where browser starts.

vineet

[jscheuer1]

I'm assuming now that you can arrange things to work out the way you want them, right?