...

View Full Version : javascript close link?



WildcatBart
12-08-2011, 10:06 PM
Can someone tell me how to make a close button for this? The close button I currently have here makes the IMAGE2 disappear but I cannot see IMAGE1 until the time runs out on the setTmeout. I want to be able to click the closeX and close out the whole script leaving IMAGE1 showing. Here is what I have:


<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
<tr>
<td align="center">
<script type="text/javascript">
window.onload = function () {
setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}
</script>
<div id="hideOverlay">
<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
<tr>
<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="var lyr =document.getElementById('hideOverlay'); lyr.innerHTML='';"/><font color="#666666" size="2">Close [x]</font></a>IMAGE2 GOES HERE</td>
</tr>
</table></div>
</td>
</tr>
</table>
</div>

Philip M
12-09-2011, 07:41 AM
Assign a variable name to the function

var tim = setTimeout(function () {

and then when the button is clicked

window.clearTimeout("tim")


Quizmaster: What "R" was Hilary Clinton's maiden name?
Contestant: Er, um . .. is it Rottweiler?

WildcatBart
12-09-2011, 03:21 PM
Thanks Philip. I added the var tim = setTimeout(function () { to the Javascript at:


<script type="text/javascript">
window.onload = function () {
var tim = setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}
</script>

But how do I add the other code to make it work? It is a text word CLOSE that I want to close the javascript not a button.

Thanks again for any help

mvmacd
12-09-2011, 04:29 PM
Thanks Philip. I added the var tim = setTimeout(function () { to the Javascript at:


<script type="text/javascript">
window.onload = function () {
var tim = setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}
</script>

But how do I add the other code to make it work? It is a text word CLOSE that I want to close the javascript not a button.

Thanks again for any help

Just put the text into a span, or you can even use an anchor.

for example:



<a href='#' onclick='window.clearTimeout("tim");return false'>Close [x]</a>


Or even make window.clearTimeout('tim') a function and then 'onclick=myFunction()', etc

Philip M
12-09-2011, 04:36 PM
<a href='#' onclick='window.clearTimeout("tim");return false'>Close [x]</a>



Use <a href="javascript: void(0)" rather than <a href = "#" which will cause a scroll to the top of the page.

OP - You asked for "Can someone tell me how to make a close button for this?"

WildcatBart
12-09-2011, 06:02 PM
You are right Philip I did ask for a button. Sorry :)

I tried what you suggested and I click the Close [X] and it does nothing. it won't close...it just waits and after the seconds the IMAGE1 appears and IMAGE2 disappears.

Here is what I have



<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#000000" height="350">
<tr>
<td align="center">
<script type="text/javascript">
window.onload = function () {
var tim = setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}
</script>
<div id="hideOverlay">
<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
<tr>
<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="javascript:window.clearTimeout('tim')"/>Close [x]</a><br>IMAGE2 GOES HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</div>


Any ideas? :)

WildcatBart
12-10-2011, 03:07 PM
Bump....Does anyone know of any other forums that have more javascript coders that might know how to get this working?

WildcatBart
12-11-2011, 07:22 AM
Anyone? :(

Philip M
12-11-2011, 12:05 PM
Don't be impatient. We are not around 24/7, especially at weekends. Please look at Posting Guideline #5.

But I am sorry that my advice to use clearTimeout() was not correct in this situation. :o Try this:-


<script type="text/javascript">

window.onload = function () {
var tim = setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}

function stop() {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE';
}
</script>

<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="350">
<tr>
<td align="center">

<div id="hideOverlay">
<table border="0" width="650" id="table1" cellspacing="0" cellpadding="0" height="350">
<tr>
<td align="center" width="650" height="350"><a style="text-decoration: none" href="javascript:void(0)" onclick="stop()">Close [x]</a><br>IMAGE2 GOES HERE</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

WildcatBart
12-11-2011, 06:21 PM
Sorry about being impatient :o I understand you guys are not here all the time...I will be more patient in the future.

That code almost did it. When it loads...and I let it sit. After 6 seconds the IMAGE1 (animated GIF) appears and plays (it is a 20 second gif). if it loads and I click close[X] IMAGE1 (animated GIF) appears and plays but after the 6 seconds it restarts again then completes the 20 second animated.gif. It seems like the 6 second countdown is not stopping once you click close

Any ideas? and thanks again

Philip M
12-11-2011, 09:38 PM
You did not mention anything about animated gifs.

If you click on the link after (say) 3 seconds, then function stop() is called and IMAGE1 appears. The timeout does continue to run, but after a further 3 seconds it expires and does what has already occured, that is show IMAGE1 in the div where it is already displayed. In other words, it starts the animated gif over again. If the image was static that would not be apparant.

Change the script as follows:-


<script type="text/javascript">

var tim;
window.onload = function () {
tim = setTimeout(function () {
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE'; }, 6000);}

function stop() {
clearTimeout(tim);
var div = document.getElementById('hideOverlay');
div.innerHTML = 'IMAGE1 GOES HERE';
}
</script>

mvmacd
12-11-2011, 11:59 PM
Use <a href="javascript: void(0)" rather than <a href = "#" which will cause a scroll to the top of the page.

OP - You asked for "Can someone tell me how to make a close button for this?"

Yeah, or you can do


<a href='#' onclick='return false'>


I was just using that as an example, I guess I wasn't thinking, or I expected the OP to figure out the scrolling part :D

WildcatBart
12-12-2011, 03:11 AM
That worked perfectly...thank you so much Philip...thanks for your help too mvmacd



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum