hide div onclick after 5 seconds

HI,

i am looking to hide a div automatically after 5 seconds once i have clicked an image which already has an onlcick event.

<!doctype html>

 

<html>

 

<head>

<script language="javascript"> 

function toggle() {

       var ele = document.getElementById("toggleText");

       

       if(ele.style.display == "block") {

              ele.style.display = "none";

              text.innerHTML = "show";

       }

       else {

              ele.style.display = "block";

              text.innerHTML = "hide";

       }

} 

</script>

 

<title>DEVELOPMENT</title>

 

<meta name="viewport" content="width=device-width, user-scalable=no" />

 

<style type="text/css">

 

body
{
    font: 16pt sans-serif;

}


	* { margin:0 ; padding:0 }
	#hidden-5 { background:#036 ; color:#FFF ; text-align:center;margin-left:20px;margin-right:20px}
	#toggle { display:none }
	
table{margin-left:auto;
margin-right:auto;}	


</style>
<script language="JavaScript">
<!--
 
function showHide(HID,IMG) {
        if (document.getElementById(IMG).src.indexOf('expand') != -1) {
                document.getElementById(IMG).src='/images/collapse.gif';
                document.getElementById(HID).className='visibleRow';
        } else {
                document.getElementById(IMG).src='/images/expand.gif';
                document.getElementById(HID).className='hiddenRow';
        }
}
 
// -->
</script>
<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
	var o=document.getElementById(d);
	o.style.display=(o.style.display=='none')?'block':'none';
}
-->
</script>



</head>

 

<!--<body bgcolor="#FFFFFF"> -->

 

<!--<body style="background:transparent"> -->
<!--<body onload="setup();"> -->
<body>
<a href="javascript:;" onClick="toggle('one');"  ><img src="top.png" style="padding-top: 3px; position: absolute;    right: 100px;top:0;border:none;">

 ></a>
<div id="one" style="background-color:#3399FF; display:none; width:100%; height:100%;">
<!--<div id="hidden-5" style="display:block;"> -->

Open in new window



I need the div 'one' to hide but having trouble with online exmaples i have found.

Any help?

Thanks,
Richiep86Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

APoPhySptCommented:
hi, could you explain better what you want to achiece please?
0
MrunalCommented:
Hi
In JavaScript:
Logic is:

window.setTimeout("HideDiv()", 2000); //Hide Div after 2 seconds

function HideDiv()
{
    //Hide your div here
}

For looking better and animations...use jQuery:

$("#one").delay(5000).fadeOut(300);
0
Richiep86Author Commented:
hi

Basically, when i click the one.png button, a div appears and if i click it again it dissapears. i still want this functionality to remain...

However, i would like the div to be hidden 5 seconds after the image has been clicked automatically. (in case the div is showing)

Basically the div i want to hide after 5 seconds has results on it...

That help?

Thanks
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Richiep86Author Commented:
mroonal thanks for your reply,


I need this to be an onclick event... so, say i clicked to display the results, and forgot to click it again to hide it, it would hide it self after 5 seconds.
0
APoPhySptCommented:
I think this might be what you are looking for:

function toggle(d)
{
	var o=document.getElementById(d);

        if(o.style.display=='none')
        {
              o.style.display='block';
              setTimeout( "document.getElementById(d).hide();",5000 );
        }
        {
              o.style.display='none';
        }	
}

Open in new window

0
Richiep86Author Commented:
APoPhySpt - this didnt work unfortunately...
0
APoPhySptCommented:
is there anyway you could post a link to the page? it would be easier to find a solution.
0
Richiep86Author Commented:
http://ec2-174-129-188-146.compute-1.amazonaws.com/NewPoll/development-rich-2.asp


If you click the face it shows the results. After clicking the face i want the div to close after 5 secs automatically....
0
Richiep86Author Commented:
sorted...


i put the bundled 2 functions together and called that event onclick...


<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
      var o=document.getElementById(d);
      o.style.display=(o.style.display=='none')?'block':'none';
      setTimeout(function () {document.getElementById('one').style.display='none'}, 3000);
}
-->
</script>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APoPhySptCommented:
<script type="text/JavaScript">

function toggle(d)
{

	var o=document.getElementById('one');

        if(o.style.display=='none')
        {
              o.style.display='block';
              setTimeout( "document.getElementById('one').style.display='none'",2000 );
        }
        else
        {
              o.style.display='none';
        }	

}

</script>

Open in new window

0
APoPhySptCommented:
and you might want to conside cleanning up the code, cuz you have more than one function with the same name 'toggle()' and 'toggle(d)'. also you have '<!-- Chief...' and '-->' they might break functionality on some browsers.

you should get used to work with Web Dev tools like Firebug and such, they help you alot once you get used to them, to me they're a key tool to a web dev.
0
Richiep86Author Commented:
Bundling 2 functions together
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.