|
JavaScript - Modify To Close After 5 Seconds
Can someone help me to modify this JS to close if user is no longer hovering over child link after 5 seconds?
Code: $(document).ready(function () {
$('#menuHolder ul li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
if ($(this).parent().attr('class').indexOf('clicked') != -1) {
$(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
}
else {
$(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
})
$('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
});
});
</script>
Similar TutorialsHi! I'm new to this, so please bare with me. My terminology may not be up to par. Here's the deal: - I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0: Code: on (release) {
getURL("example1.html", "_blank");
}
- Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver: Code: onClick="MM_goToURL('parent','example2.html')"
- On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using: Code: onClick="window.close()" - The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers: Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes." Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes. Opera = Button actually works for each page. Firefox & Chrome = Does not close the window at all. I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work. I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this. Any advice would be greatly appreciated. Thank you. - PW how long are these numbers? Code: setImageInterval("ad1", 1000, 3);
I know 3 is the max, but the 1000 = how many seconds? Thanks -Tim Hi I am creating an animation based on Sam Dunn's tutorial 'Animate Curtains Opening with jQuery' ( http://buildinternet.com/2009/07/ani...g-with-jquery/ ). What i need to do is create a 2 second delay in the curtains opening in order to give enough time for an iframe, thats behind the curtains, to load it's content. Here is Sam's script : ----------------------------------------------------------------- <!-- Animate a Curtain Opening with jQuery index.html By Sam Dunn 2009 Build Internet! www.buildinternet.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Animate a Curtain Opening with jQuery | Build Internet</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $curtainopen = false; $(".rope").click(function(){ $(this).blur(); if ($curtainopen == false){ $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'60px'}, 2000 ); $(".rightcurtain").stop().animate({width:'60px'},2000 ); $curtainopen = true; }else{ $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); $(".leftcurtain").stop().animate({width:'50%'}, 2000 ); $(".rightcurtain").stop().animate({width:'51%'}, 2000 ); $curtainopen = false; } return false; }); }); </script> <style type="text/css"> *{ margin:0; padding:0; } body { text-align: center; background: #4f3722 url('images/darkcurtain.jpg') repeat-x; } img{ border: none; } .leftcurtain{ width: 50%; height: 495px; top: 0px; left: 0px; position: absolute; z-index: 2; } .rightcurtain{ width: 51%; height: 495px; right: 0px; top: 0px; position: absolute; z-index: 3; } .rightcurtain img, .leftcurtain img{ width: 100%; height: 100%; } .logo{ margin: 0px auto; margin-top: 150px; } .rope{ position: absolute; top: -40px; left: 70%; z-index: 4; } </style> </head> <body> <div class="leftcurtain"><img src="images/frontcurtain.jpg"/></div> <div class="rightcurtain"><img src="images/frontcurtain.jpg"/></div> <img class="logo" src="images/buildinter.png"/> <a class="rope" href="#"> <img src="images/rope.png"/> </a> </body> </html> ----------------------------------------------------------------- Any help will be greatly appreciated. Thanks. Jet. Hey guys..... I'm wondering how you go about getting a script to run every 30 seconds for example? Thanks a lot! I need to develop this feature for a charity site displays a number that counts up 1 every 15 seconds. This is to show how many times a kid is abused in this country. I've been researching this and haven't been able to find anything helpful yet. I figured this piece of code was a good start: function doSomething() { setTimeout('doSomething()',15000); } I have a welcome message on my site and would like to automatically hide it after several seconds. I can't find anything usable after searching over the internet. Can anyone help? Thanks in advance. Trying to setup a cookie read/write in JS. Page 1 sets the JS cookie using Flash. Page 2 reads the JS cookie from Flash. I have this working. The problem is that I need the cookie to expire in a matter of seconds. This is my code for creating the cookie and expiration: Code: function setCookie(name, value)
{
var today=new Date;
today.setTime(today.getTime()+3000);
document.cookie = name+"="+value; +"; expires="+today.toGMTString();
//alert(name + " "+value);
alert("Value is: "+value+"\n Expires in: "+today);
}
The problem isn't that cookie isn't there. I just can't seem to get it to expire. Please help. I want a code that changes text (of maybe a div) after 10 seconds. So like i could have some text and a link on my page then after 10 seconds it will change to something else and i can make it change to as many things as i want. Then when it goes threw them all it starts over. THANKS This is the script to hide the div (adsdiv) Its working on all browser except IE Code: <script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var milisec=0
var seconds=30
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else
milisec-=1
if( seconds > 0 ) {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()",100) ;
}else{
closeMyAd() ;
}
}
if( document.getElementById( "closingtimer" ) )
display() ;
</script>
Hello, I found this code, written by Philip M on another thread of this forum: Code: <div id = "adsdiv">This ad will close in
<span id = "closingtimer">31</span>
seconds
</div>
<script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var seconds = 31;
function display() {
seconds --;
if (seconds < 1) {
closeMyAd();
}
else {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()", 1000);
}
}
display();
</script>
I need to reverse the script to show a div after 30 seconds, not to hide it. Can you please help me? Thank you. topic has been answered
Hi people, I'm building an online psychological experiment in which I need to display an image for 5 seconds on the screen. Does anyone has a simple script for that? I found some script that does image rotation but its not exactly what I am looking for. First, the rotation of the images doesn't stop and second I don't need something so elaborate. This is the script that I found. Code: <SCRIPT LANGUAGE="JavaScript">
<!--
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var rel="nofollow" target=0;
if (document.images.myImage)
rel="nofollow" target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
rel="nofollow" target=document.getElementById("myImage");
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 5000);
}
else
{
setTimeout("swapPicture()", 500);
}
}
}
setTimeout("swapPicture()", 5000);
//-->
</SCRIPT>
Thanks Hey. I'm working on a simple slideshow made with jQuery, and i need some help now. What i'm trying to do now, is to make it change image every X second. I know how to change image, but i'm kind of stuck trying to find out how to make it "do something" every Xth second... i hope you understand what i mean. Here's an example: (obviously not working..) Code: function slideSwitch() {
//change image...
}
setInterval(slideSwitch, 5000); //make the function slideSwitch execute every 5th second.
If anyone could help me out here, i'd really appreciate it! Also, is there any "else if" function in jQuery? Like in for example PHP, you can use "if", "else if" and "else".. like this: Code: if(){
}else if(){
}else {
}
So is there any function like that? I googled it, and i found out i have to use some kind of plugin for it to work? How do i use it? Thanks in advance, -Nike Hi, I've built a sorting table for what will (hopefully) be a leaderboard for Forza 4. I have the table sorted properly and my current script (within the table) adds up all three T columns and brings the total to 72.001 as expected, woot! Where I'm stuck is converting the 72.001 to 1 minute 12.001 seconds (1:12.001) and I need to have it include the thousandths since the game gives that information. Once I get the JS going for the top row I can copy down Any advice on converting this is greatly appreciated and I Bolded the JS I'm referring to: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Forza Motorsport 4 FRS Leaderboard</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="sortable.js"></script>
<style>
table {
text-align: left;
font-size: 12px;
font-family: verdana;
background: #c0c0c0;
}
table thead {
cursor: pointer;
}
table thead tr,
table tfoot tr {
background: #c0c0c0;
}
table tbody tr {
background: #f0f0f0;
}
td, th {
border: 1px solid white;
}
</style>
</head>
<body>
<table cellspacing="3" cellpadding="4" class="" id="myTable">
<thead>
<tr>
<th class="c1">DRIVER</th>
<th class="c2">1</th>
<th class="c2">2</th>
<th class="c2">3</th>
<th class="c6">TOTAL</th>
<th class="c5">DIVISION</th>
<th class="c7">CONTROLLER</th>
</tr>
</thead>
<tbody>
<tr id="SubTable1" class="r1">
<td class="c1">Driver Name 1</td>
<td class="c2">12.000</td>
<td class="c2">24.000</td>
<td class="c2">36.001</td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('SubTable1').getElementsByTagName('td');
var totalTime = 0.000;
for(var i = 0; i < tds.length; i ++) {
if(tds[i].className == 'c2') {
totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
}
}
document.getElementById('SubTable1').innerHTML += totalTime;
</script>
<td class="c5">1</td>
<td class="c7">Wheel</td>
</tr>
<tr class="r2">
<td class="c1">Driver Name 2</th>
<td class="c2">12.100</th>
<td class="c3">24.100</th>
<td class="c4">36.100</th>
<td class="c6">00.000</th>
<td class="c5">2</th>
<td class="c7">Gamepad</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 3</th>
<td class="c2">12.200</th>
<td class="c3">24.200</th>
<td class="c4">36.200</th>
<td class="c6">00.000</th>
<td class="c5">3</th>
<td class="c7">Wheel</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 4</th>
<td class="c2">12.300</th>
<td class="c3">24.300</th>
<td class="c4">36.300</th>
<td class="c6">00.000</th>
<td class="c5">4</th>
<td class="c7">Gamepad</th>
</tr>
<tr class="r2">
<td class="c1">Driver Name 5</th>
<td class="c2">12.400</th>
<td class="c3">24.400</th>
<td class="c4">36.400</th>
<td class="c6">00.000</th>
<td class="c5">5</th>
<td class="c7">Wheel</th>
</tr>
</tbody>
</table>
<script type="text/javascript">
var t = new SortableTable(document.getElementById('myTable'), 100);
</script>
</body>
</html>
Oh, and any help on centering the result in the cell (72.001) would be excellent too, thank you. Jerome Hello.. I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button. What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously. How can I obtain this? Whether if it's created in JavaScript or jQuery doesn't matter, I use both... Thanks Hello and thank you for you help, we have a problem in our currently built website, in chrome+firefox the website works great but in IE 7+8+9 the javascript stops working after few seconds or after several commands a user do in the website. the url is : http://www.triver.co.il if any one know what can be the issue it will be great thank you ! know why does window.open take atlst 2-3 seconds, only to open even a simple blank page? in my code, i load a page on window.open and increament a counter . but it takes 2-3 seconds and in meantime user is closing new opened window, so counter val is not correct. i cannt stop user from closing new window when it is loading, which is long given what it is doing-- see sample here from Microsoft site - simple window open taking 2-3 secs.. looks to be long. http://samples.msdn.microsoft.com/wo...ew/wind_02.htm thank in advance Hi, I'm trying to adapt a script I found online for a timer that goes in my webpage. The timer counts from 30 seconds down to 0. I've adapted it so that when it reaches 0 it goes back up to 30, but I was wondering how can I make it so that after a certain number of loops through the timer, it executes some other (non-JS) code instead of just doing the timer forever? I've introduced a variable t to try to do this, but when I put in if(t>1) {break} at the bottom, the timer doesn't work properly anymore (it doesn't display a number in the box). Thanks a lot for any help . <script> <!-- // var t=0 var milisec=0 var seconds=30 document.counter.d2.value='30' function display(){ if (milisec<=0){ milisec=9 seconds-=1 } if (seconds<=-1){ milisec=0 seconds=30 t+=1 } else milisec-=1 document.counter.d2.value=seconds+"."+milisec setTimeout("display()",100) } display() --> </script> Hi, I would need your helpful with a code for playing a music or video after 5 seconds launched page. I need a code to say under <body> </body> like autoplay. Regards Bob |
|||||||