|
JavaScript - How Do I Use The Javascript Set Timeout Function For The Timed Delay Of Text?
I want to be able to display the whole contents of a text file containing 4 paragraphs of text, on a static web page, as soon as a video finishes playing on the page. The video is to be set to autorun as soon as the page loads in the browser.
The text file mentioned above, is to remain hidden when the page initially loads and the video is playing. Please I need your advice about what JavaScript code to use to achieve this effect, and where to place the code in the HTML code of the web page. I am new to website design and the use of JavaScript code. I have seen examples of code used for the timed delay of the display of an image file, after a video has finished playing. I do not know how to apply this to the display of a text file. I do not want to convert the whole text file into an image file, as I feel this would negatively affect the search engine optimisation of the page, if there is no text content on the page. Thank you. Similar TutorialsHi, 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 hi i am using jquery for ajax request response. Is there any javascript functions which can cause some time delay like Code: ajaxStart(function() {
showAnimation();
delay(5000s):
});
Hello, I am trying to create an image carousel for the website found here. As you can see everything works fine, however, I would like it to automatically scroll through the images every X seconds. I did not write this script (the credits are still in tact) and I know very very little about writing javascript, so I am hoping someone here can help. Thank you in advance for any replies and any suggestions/tips to making it a better script. The .js file: Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
The HTML where inserted onto the page Code: <script type="text/javascript" charset="utf-8">var my_glider = new Glider('my-glider', {duration:0.5});</script>
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. 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 would like to know (maybe I know the answer already), but can a function be paused, like halfway the function pause the function for lets say for 5 seconds, then continue. Thanks Hi, I've created a function that calls to get data from my MySQL database. If there is no data in my MySQL database, I want the page to just keep refreshing and then if it finds the data, I want it to echo it to the page. I'll post my code below and it'll give you an idea of what's going on. <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $.ajax({ url: 'retrieve.php', data: "", dataType: 'json', success: function(data) { var videoid = data[0]; if (videoid == false) { setTimeout("location.reload(true);",1000); } else { $('#youtube').html("<iframe width='400' height='225' src='http://www.youtube.com/embed/"+videoid+"?rel=0&autohide=1&showinfo=0' frameborder='0' allowfullscreen></iframe>"); } } }); </script> </head> <body onload="$.ajax();"> <div class="container"> <div id="youtube"> <!----- checkServer() output appears here !-----> </div> </div> </body> So as you can see the idea is that if there is a video id present in the database, it echoes the embed code for the YouTube video. If the database is empty, it just keeps refreshing the page. However this not what's happening. At the moment it just keeps echoing an empty YouTube video onto the page. I think it has something to do with my if and else syntax? Thanks for any help you can give. Also I apologize in advance if this a retarded way of doing things. I just need a basic proof concept before I make this code work any better. I have this code that when you click a button it will shuffle items in an array then you have 10 seconds to read it then the array items disappear. But I need to figure out how to make it so that you can do something like click another button that will allow you to click the twister drill button again and it will shuffle it heres the code any help would be appreciated Code: <script type="text/javascript">
function myFunction()
{
var myarray=["red","blue", "yellow", "orange"]
myarray.sort(function() {return 0.5 - Math.random()})
var x=document.getElementById("demo");
x.innerHTML=myarray;
}
</script>
<script type="text/javascript">
{
var t=setTimeout("alertMsg()",10000);
}
function alertMsg()
{
document.getElementById("demo").style.display="none";
}
</script>
<button onclick="myFunction()">Twister Drill</button>
<font size="5">
<p id="demo"></p>
</font>
Knowing just enough about javascript to get myself in trouble, I have put three timed javascripts to appear from 18 December to the 1 January on three pages of my sister's website. The scripts are on the main index for the site; the index page for the bibliography folder /bibliography/ and in the education folder on just one page: /education/educationlinks.html. Part one of the script inserts the css file; part two of the script inserts a "snowing" script and part three inserts a "make it stop snowing/let it snow" script. Everything is working perfectly for the main index page and the bibliography page. But I cannot figure out why the 3rd "make it stop snowing/let it snow" refuses to show up on the page in the education folder (the snowing javascript IS working on all three pages). There are no errors being thrown and the education page validates. This is the coding for the 3rd script: Code: // snowscript part 3: Show the script between 19-31 Dec and 1 Jan
var date = new Date();
var d = date.getDate();
var m = date.getMonth() + 1;
dm = d + m;
if (m = 12)
{
if (d > 18)
{ document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript" id="snow"></script>');
}
else
{
document.write('');
}
}
else if (dm == 1,1)
{
document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript"></script>');
}
else
{
document.write('');
}
This is the coding for snowlinkswitch.js Code: function myhref(){
document.getElementById('myAnchor').innerHTML="please let it snow!";
document.getElementById('myAnchor').href=location.href;
document.getElementById('myAnchor').title="let it snow! let it snow!";
document.getElementById('myAnchor').onclick="location.reload(); startstop('spanstyle'); return false;";
}
//
document.write ('<div id="snowlinks"><img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"> <a id="myAnchor" href="" onclick="myhref();hidesnow(); return false;" title="please make it stop snowing!">please make it stop snowing!<\/a> <img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"></div> ');
I would search for a similar occurrence but have no clue about what search words to use. Does anyone here have an idea about what I have done incorrectly that is causing this to happen? Many thanks. E Morris Toronto, Canada 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 am a Javascript novice so please bear with me here. I made a multi level menu at http://x7.ro/proiect/produse.html -first left menu item:Raticide- by using Javascript and css. What this should do is show the sub-menu on mouseover and hide it on mouseout WITH a custom delay so people have a chance to click menu items. This seems to work except for the all needed delay. I was trying to use javascript setTimeout function but I cannot seem to make it work. Think this should be easy for a pro and Id remain indebted if any of you could help. Thanks a lot. Below is the working code:JS and Html. Code: <SCRIPT type=text/javascript>
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
function hideElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="block"){
myLayer.style.display="none";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="block";
}
}
</SCRIPT>
Code: <A class=button onMouseOver="javascript:showElement('v-menu');return false;" onMouseOut="javascript:hideElement('v-menu');return false;" href="#"><SPAN>Raticide</SPAN></A>
<UL style="DISPLAY: none" id=v-menu class=v-menu>
<LI><A href="aaa.html">PRODIORAT</A></LI>
<LI><A href="aaa.html"> PROBRODIRAT</A></LI></UL>
I followed the tutorial below and got my image fade to work: http://clagnut.com/sandbox/imagefades/ Now I want to have text become visible once the fade is done. I can't get it to work. style portion: .enhanced { visibility:hidden; } javascript functions: <script language="javascript"> document.write("<style type='text/css'> ##thephoto {visibility:hidden;} </style>"); window.onload = function() {initImage()}; function initImage() { imageId = 'thephoto'; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0); } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999pacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 150); } if (opacity = 100) { textId = 'enhanced'; text = document.getElementById(textId); text.style.visibility="visible"; } } } </script> I have added this to the last function: if (opacity = 100) { textId = 'enhanced'; text = document.getElementById(textId); text.style.visibility="visible"; } But the text appears instantly. Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. Forgive me if this has been answered elsewhere. can anyone tell me if they are aware of the script which will allow an image button to appear, after a certain time. I'm running a sales video and I do not want the download button to appear until the end. Hope this makes sense?? Hello: I have two input boxes on a form which receive the first and last name of a user. I want to be able to use charAt() to get the first letter in each box and pass it to a third box on the same form. Is this doable? May I request some help? I was thinking something like the function below would be the starting point --I stand correct, as it is not working. Code: <script type=\"text/javascript\">
var str=\"Mossa\";
<!--document.write(str.charAt(0));-->
document.write('<INPUT TYPE=text size=2 VALUE=\"str.charAt(0);\">');
var str=\"Barandao\";
document.write('<INPUT TYPE=text VALUE=\"str.charAt(0)\">');
<!--document.write(str.charAt(0));-->
</script>
Any thoughts! Mossa Is there a way to call javascript functions based on the text between a span element? In other words if I have <span id="mySpan">Bronze</span> then it will call a javascript function but if I have <span id="mySpan">Silver</span> then it will call a different function? Thanks! Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) {
x.style.backgroundColor="transparent"
}
Function ActivationFuction()
{
activate.function="unhighlight"
}
thanks |
|||||||