|
JavaScript - Mouse Out Delay Error
Hi. I hope someone can help.
I am using a 'suckertree horizontal menu'. I am trying to alter the javascript to provide a delay with mouseout (to hide the UL). I am having issues! Here is the original code: Code: ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
Here is the code I am working with: Code: ultags[t].parentNode.onmouseout=function(){
setTimeout("this.getElementsByTagName(\"" + ul + "\")[0].style.visibility=\"" + hidden + "\"", 1500);
}
Any help greatfully recieved! Similar TutorialsI've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 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. Hello how can I add a time delay to a function, so that the called function will execute only after a certain length of time. For example if I want a div to go 'hidden', 3 seconds after hovering off of a second div? Here is the script code I'm wanting to add the delay to: Code: <script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
and Code: <div id="div1" onmouseover="show('div2'); fade_in('div2', 2);" onmouseout="fade_out('div2', 2); hide('div2');">
The reason I need this delay is so the fadeout function (which also executes after hovering off the second div completely finishes the fadeout before the hidden function executes. I'm trying to delay this line by 1 second, but can't seem to figure out the syntax. Code: window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>; this is the entire function Code: $('#cancel').click(function() {
$.ajax({
type: "POST",
url: "scripts/greenlight.php?vid_id="+<?php echo $vid_id ?>,
data: "vote=2",
success: function(){
}});
document.getElementById("greenlight").src="img/greenlight_btns/greenlight_btn.png";
document.getElementById("cancel").src="img/greenlight_btns/cancel_btnOver.png";
//window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>
window.setTimeout(function()
{
window.location.href="index.php?vid_id="+<?php echo $vid_id +1 ?>;
}, 500);
}); // end click
Hi all. The below script is from suckerfish. Can anyone help me include a 'one sec delay' to keep the menu open onmouseout. First menu often closes too fast before I get a chance to move onto submenu. I've tried everything with setTimeout BUT I just can't get it right. Nothing I do works. Can somebody PLEASE show me so I can kick myself. LT Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Hello All, This is my first post here, so hopefully I don't make to big an *** out of myself. Anyway, I am working on a small 2D game in javascript, and have character movement bound to the onkeydown event. The problem is, that there is a momentary delay between pressing the key, and then it realizing you are still holding it down. So it's Move->stop->Move smoothly You can see what I'm talking about here http://www.digitalswordsmen.com/at/townmap.cfm I know that the delay is happening at the operating system level (you see the same kind of delay if you open up notepad and hold down a letter key, first letter appears instantly, then a short delay before continuing). I was wondering if anyone has a possible solution though, or someway I could smooth out that delay. Also, the walking animations only seem to work in firefox. I guess IE doesn't play animated gifs while the onkeydown even is being fired. Not sure if there is a fix for that, other than animating the individual frames with JS, but that would be pretty laggy I think. Anyway, any input is appreciated. You can see all the code by of course just viewing source, its still fairly simple at this point. Thanks in advance. Hello I have a question, I bet it's easy for you guys. I have a page "v.php" which's got an iframe that shows different pages for 3 seconds after they have loaded. There is a page "w.php" that needs to be shown in the iframe but it needs to be shown for 10 seconds after it's loaded. How can I make so "w.php" freezes the timer for at least 10 seconds and then let it start? I hope you guys can understand. Thanks! Pretty simple, I just want to display a <div> after say 20 seconds or any predefined value. Ideally with jQuery
I would like an image to be the button for a form to be submitted, but a sound is to play onclick for 3 seconds before the submit happens. It sounds easy, with a setTimeout delay, but I can't get it to wait: Code: <script type="text/javascript">
function delay(){
mySoundObj1.TGotoAndPlay('/piano','start');
setTimeout('delay2()',3000) // piano sound lasts for 3 seconds
}
</script>
<script type="text/javascript">
function delay2(){
// nothing here I guess...
}
</script>
<FORM METHOD="POST" ACTION="do something">
<INPUT type="image" onsubmit="delay();return true;" src="image/image.gif" width="60" height="60" type="submit">
</form>
Can anyone do this? I mean maybe it is not possible? Hello, I am making a coupon for my mobile website that has to have a response within 60 seconds or so (I would like to be able to play with the time too). This code works but I need to delay the countdown running for a for say 15 seconds after tthe page loads so the people who see the page can read it. Also I would like to know if there is a way I can redirect the page if they do not respond within the countdown time that would go back to the mobile site home page. Also If they leave the coupon page and then go back to the coupon page could I make it so the countdown would still be running as if they never left. I am including the code for the coupon. Almost forgot, can the countdown numbers be red and underlined? Thanks in advance P.S. I don't know much javascript (enough to get in trouble) I searched all over for a solution (till my eyes felt like hemeroids) without bugging you about it. <body> <table cellpadding="3" cellspacing="0" style="width: 320px; height: 480px;"> <!-- MSTableType="layout" --> <tr> <td style="height: 480px; width: 320px;" valign="top" class="style1"> <strong class="style3"><span class="style2">Free Gift ! Plus A $25.00 Discount Off Any Repair $100 Or More!!<br /> </span></strong><br /> That's Right, Get a Free Gift With Your 1st Visit! Plus just for trying us out we'll give YOU $25 off if you spend $100 or more! <br /> <br /> The only catch is you need to respond by calling us within 60 seconds!<br /> <br /> <script type = "text/javascript"> /*author Philip M. 2010*/ function setTimeout("countdown", 20000); var timeInSecs; var ticker; function startTimer(secs){ timeInSecs = parseInt(secs)-1; ticker = setInterval("tick()",1000); // every second } function tick() { var secs = timeInSecs; if (secs>0) { timeInSecs--; } else { clearInterval(ticker); // stop counting at zero // startTimer(60); // remove forward slashes in front of startTimer to repeat if required } document.getElementById("countdown").innerHTML = secs; } startTimer(60); // 60 seconds </script> <span>Remember the Clock is Ticking!</span><br /><span id="countdown" style="font-weight: bold;">You Have <span class="style2"> <u><red>60</red></u></span> Seconds Left.</span> </td> </tr> </table> </body> </html> Hey all, I have a couple of videos that display on web page. I want one to display 5 seconds after another when someone clicks a link. Now I know of the setTimeout method, but I can't seem to get it to work in this below code. The thing is both of the video elements are in the same function. Any help will be greatly appreciated: Code: <script type="text/javascript">
<!--
window.onload = initLinks;
var myVid = new Array("area2d.swf","Bar2D.swf", "Column3D.swf", "Column2D.swf");
var myFlash = new Array("data/Area2D.xml","data/Bar2D.xml", "data/Column3D.xml", "data/Column2D.xml");
var thisVid = 0;
function initLinks() {
document.getElementById("vid1").onclick = processVid1;
document.getElementById("vid2").onclick = processVid2;
document.getElementById("vid3").onclick = processVid3;
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processVid1() {
document.getElementById("myVideo").src = myVid[0];
document.getElementById("myVideo").dataURL = myFlash[0];
document.getElementById("myVideo2").src = myVid[1];
document.getElementById("myVideo2").dataURL = myFlash[1];
return false
}
function processVid2() {
document.getElementById("myVideo").src = myVid[2];
document.getElementById("myVideo").dataURL = myFlash[2];
document.getElementById("myVideo2").src = myVid[3];
document.getElementById("myVideo2").dataURL = myFlash[3];
return false
}
function processVid3() {
document.getElementById("myVideo").src = myVid[2];
return false
}
function processPrevious() {
if (thisVid == 0) {
thisVid = myVid.length;
}
thisVid--;
document.getElementById("myVideo").src = myVid[thisVid];
return false;
}
function processNext() {
thisVid++;
if (thisVid == myVid.length) {
thisVid = 0;
}
document.getElementById("myVideo").src = myVid[thisVid];
return false;
}
-->
</script>
</head>
<body>
<div id="slideshow">
<h1>Introducing</h1>
<table width="">
<tr>
<td>
<embed src="area2d.swf" flashVars="&dataURL=data/Area2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo" />
</embed>
<td
<td>
<embed src="Bar2D.swf" flashVars="&dataURL=data/Bar2D.xml&debugMode=0&chartWidth=295&chartHeight=295" quality="high" width="295" height="295" type="application/x-shockwave-flash" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" id="myVideo2" />
</embed>
<td
</tr>
</table>
</div>
<div id="pageTree">
<ul>
<li><a href="video1.html" id="vid1">Area</a></li>
<li><a href="video2.html" id="vid2">Bar</a></li>
<li><a href="video3.html" id="vid3">Inventory</a></li>
</ul>
</div>
<div align="center">
<h2><a href="previous.html" id="prevLink">« Previous</a> <a href="next.html" id="nextLink">Next »</a></h2>
</div>
</body>
I have an AJAX search bar what searches after each keyup, but id like to make it so it runs the search if theres a certain delay after the keyup so if you search "hello" it doesnt run 5 times, only once (because there wont be a half a second gap between each letter. Sorry if that doesn't make sense >.<, im just curious if 1) thats possible, 2) what i need to look at to get this to work. Thanks I have a script to call upon a random link every time the page is visited. What I can't figure out is how to delay this loading by 1 or two seconds.. it changes the page as soon as the page is loaded. How would I go about delaying this code for a second or two? +rep to anybody that helps me solve this, thanks. Code: <script>
var randomlinks=new Array()
randomlinks[0]="http://www.google.com"
randomlinks[1]="http://www.yahoo.com"
randomlinks[2]="http://www.bing.com"
function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
//-->
</script>
Hey i need some help delaying this script so it starts 5 seconds after the page loads not instantly. <script> $('#ad_1 > img').each(function(i,e){ rotate($(this),600,4000,i); }); function rotate(elem1,speed,timeout,i){ elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){ var other; if(elem1.parent().attr('id') == 'ad_1') other = $('#ad_2').children('img').eq(i); else if(elem1.parent().attr('id') == 'ad_2') other = $('#ad_3').children('img').eq(i); else if(elem1.parent().attr('id') == 'ad_3') other = $('#ad_1').children('img').eq(i); other.animate({'marginLeft':'0px','width':'35px'},speed, function(){ var f = function() { rotate(other,speed,timeout,i) }; setTimeout(f,timeout); }); }); } }); </script> Hi,there, my following script generates random numbers and if random number==1 the background color of textbox="red"; so far it works fine.. What I m tring to do is to tell my script to write amessage in the same textbox after 5 seconds so ı need a delay function.. thanks for help PHP Code: <body bgcolor="pink"> <script> stopx=setInterval("gox()",500); function gox() { var box1=document.getElementById("box1"); var box2=document.getElementById("box2"); box1.value=Math.floor(Math.random()*5); if(box1.value==1) box2.style.backgroundColor="red"; ////////////// // I need a delay function here; // ////////// //???// if(delay==5) box2.value=" 5 seconds passed ,now I will give another message"; } </script> <input type="text" id="box1" style="position:absolute;top:50px;left:20px;width:40px;height:20px;"> <input type="text" id="box2" style="position:absolute;top:50px;left:200px;width:200px;height:50px;"> <input type="button" value="try again" onclick="location.reload()" style="position:absolute;top:250px;left:20px;width:60px;height:50px;"> I'm creating a new thread just for the sake of getting help from other people and getting help fast. Not sure if other people are or will be facing similar problems as I am but I will post this on the forum for other people's sake... I want to make my drop down box similar to the one seen at http://www.gamewearteamsports.com/ The menu links act as normal links but will drop down to a div box when a person hovers over the link. The box will appear when the person hovers it but SHOULD disappear once the person does not hover over the box anymore. So if the person hovers over another link, the box should disappear. I added a delay timeout to one of my div boxes and the box stays alive for a couple of seconds but then closes back up again even though I'm still hovering over it. Any ideas? My js: Code: <script type="text/javascript">
function drop(which)
{
document.getElementById("drop" + which).style.display = "block";
}
function undrop(which)
{
document.getElementById("drop" + which).style.display = "none";
}
</script>
My menu links code: Code: <ul id="head1" style="width:940px;">
<li><a href="#" onmouseover="drop(1)">Basketball</a></li>
<li><a href="#" onmouseover="drop(2)" onmouseout="undrop(2)">Football</a></li>
<li><a href="#" onmouseover="drop(3)" onmouseout="undrop(3)">Volleyball</a></li>
<li><a href="#" onmouseover="drop(4)" onmouseout="undrop(4)">Soccer</a></li>
<li><a href="#" onmouseover="drop(5)" onmouseout="undrop(5)">Baseball</a></li>
<li><a href="#" onmouseover="drop(6)" onmouseout="undrop(6)">Hockey</a></li>
<li><a href="#" onmouseover="drop(7)" onmouseout="undrop(7)">Training</a></li>
The code I have for the first link: Code: <div id="drop1" onmouseout="setTimeout('undrop(\'1\')', 3000);" style="z-index:3000;">
There's a table with content in it inside the div. There's a </ul> tag that closes out the menu links. I guess this is an easy question for all javascripters but I don't know how to manage (I'm pretty fresh with JS). I found two solutions on this forum but it seems that they don't work(?). I want to delay for few seconds window.location.href="destination_site.html" before it will automatically take visitor to destination site. It has something to do with setTimeout but I would be greatful for posting a fixed code. Thanks in advance. Hi, im fairly new at all this, so please forgive me if I have misunderstood the guidelines on posting threads for this topic. Im needing some help with adding a timed delay for a widget I have on my website. My website is hosted on moonfruit, a flash based web builder, its very beginners level, and so this makes me feel like the new kid at school posting on this forum. however moonfruit does have a HTML/JavaScript snippet Which allows me to paste in code and show the cooliris gallery But is has become crucial to my websites completion that this widget must have a timed delay on it ive been at google for days till the point where im seeing the same pages again, and have come across setTimeout, unfortunately that's as far as I can seem to go, ive tried pasting in the code in numerous places and I just cant get it to work, i have pasted in other JavaScript codes, and they have worked, so i am convinced that its just me being a noob, other than it being a limitation on moonfruit I would appreciate any help with this Here is the code that im trying to get a delayed time of 10 seconds or so. [CODE] <object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="845" height="350"><param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf"/><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always"/><param name="flashvars" value="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true"/><embed type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" flashvars="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true" width="845" height="350" allowFullScreen="true" allowScriptAccess="always"></embed></object> [CODE] Again any help is most appreciated |
|||||||