|
JavaScript - Timeout Anchor
I found a simple script from the net that redirects the user to another page after timeout. I want to redirect the user to an anchor (an anchor called #done) in the SAME page, but i couldn't do it. Here's the code. Any help will be appreciated. Thank you.
Code: <form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>
<script>
<!--
/*
*/
//change below target URL to your own
var targetURL="http://myurl.com"
// tried #done/samepage.htm as also samepage.htm/#done
//change the second to start counting down from
var countdownfrom=6
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>
Similar TutorialsHi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! is there a way to make it so when the user clicked the start game button that the button would appear for a few seconds then disappear and when the start game button was clicked again another one would appear again? There will be buttons inside of the divs i just havnt programed them in yet 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random Sounds 2</title>
<style type="text/css">
.article_example_div { display:none; width:300px; height:300px;}
</style>
<script type="text/javascript" language="JavaScript"><!--
NumberOfDivsToRandomDisplay = 5;
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
//code to prevent same div from showing twice in a row.
var CookieName = 'DivRamdomValueCookie';
function DisplayRandomDiv() {
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + "=");
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + "=" + r;
}
//end of code to prevent same div from showing twice in a row.
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById("randomdiv"+i).style.display="none";
}
document.getElementById("randomdiv"+r).style.display="block";
}
</script>
</head>
<body>
<input type="button" value="Start game" onclick="DisplayRandomDiv()"></button>
<div id="randomdiv1" class="article_example_div">
Div 1
</div>
<div id="randomdiv2" class="article_example_div">
Div 2
</div>
<div id="randomdiv3" class="article_example_div">
Div 3
</div>
<div id="randomdiv4" class="article_example_div">
Div 4
</div>
<div id="randomdiv5" class="article_example_div">
Div 5
</div>
</body>
</html>
Hi all, I have some card/images and would like to have the first one displayed.Which i can do. Then when I mouse click on the card/image it goes to another image for say 2 secs, then with out clicking goes back to the orignal card. I have played with the syntax for ages and also looked on the net and cannot get it right. This is what I have so far. Code: <html> <head> <script> var back = new Image(); back.src = "back.gif";// preloads the image. var ace = new Image(); ace.src = "0.gif"; //Preload the Image var two = new Image(); two.src = "1.gif";// preloads the image. var three = new Image(); three.src = "2.gif";// preloads the image. var four = new Image(); four.src = "3.gif";// preloads the image. var five = new Image(); five.src = "4.gif";// preloads the image. </script> </head> <body> <img name="img0"> <img name="img1"> // what is this for? <script> document.images['img0'].src = back.src;//displays image /*How do I have one card diplayed then mouseclick on that one card and another card will display for 2 secs then the card will go back to original card. */ </script> </body> </html> Any ideas ? Thanks heaps Shayne 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 Code: function ChangeElementSize(objName,ToWidth,ToHeight,Speed)
{
objId=document.getElementById(objName);
CurWidth=parseInt(objId.style.width);
CurHeight=parseInt(objId.style.height);
if(CurWidth!=ToWidth) {objId.style.width=GetValueChange(CurWidth,ToWidth)+"px";}
if(CurHeight!=ToHeight) {objId.style.height=GetValueChange(CurHeight,ToHeight)+"px";}
if(CurWidth!=ToWidth || CurHeight!=ToHeight)
{
TimeoutCmd="ChangeElementSize(\""+objName+"\","+ToWidth+","+ToHeight+","+Speed+");";
setTimeout(TimeoutCmd,Speed);
}
}
function GetValueChange(CurrentValue,ToValue)
{
ValueDiff=ToValue-CurrentValue;
if(Math.abs(ValueDiff)!=1)
{CurrentValue=CurrentValue+Math.round(ValueDiff/2);}
else
{CurrentValue=CurrentValue+ValueDiff;}
return CurrentValue;
}
<div id="ChangeSizeDiv" style="position:absolute;left:0px;top:0px;width:200px;height:40px;border:5px solid green;overflow:hidden" onmouseover='ChangeElementSize("ChangeSizeDiv",500,500,40);' onclick='ChangeElementSize("ChangeSizeDiv",200,40,40);'>
Hover to resize me ...
</div>
This is working, but with a snag ... If you run it, and hover over the div, the box grows. If you click it, it shrinks. Good, but if you hover and click fast enough it puts the box in a timeout(x2) loop. One timeout is shrinking the box, while the other is making it larger, thus competing, and neither can do its job. How can I fix this? If possible, I'd like to be able to terminate any current timeout processes, then start the new one, but I haven't figured out how to pass the timeout ID back so that it can be cancelled. If you go to: http://ocmd.freehostia.com/tbb/ You'll see that when the user presses enter, it goes to another page. Currently, in the scripts part of my page is this: Code: function checkKey()
{
if (window.event.keyCode == 13)
{
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'horse.ogg');
audioElement.play();
window.location = "google.html";
return false;
}
}
Notice how I'm trying to play an audio file? Well, I need for the window.location to go after the audio file plays, or alternatively for it to be played after xx milliseconds. Thank-you. 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>
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 asked a question a while ago about this box that changes content but i didn't say i wanted it to start automatically. Code: <script type="text/javascript">
// The stuff the box will say
var content = [
"<a href='www.url.com'> link 1 </a>",
"<a href='www.url2.com'> link 2 </a>",
"insert html content"
];
var msgPtr = 0;
var stopAction = null;
function change() {
var newMsg = content[msgPtr];
document.getElementById('change').innerHTML = ''+msgPtr+'<p>'+newMsg;
msgPtr++; msgPtr = (msgPtr % content.length);
}
function startFunction() { change(); stopAction = setInterval(change, 5000); }
function stopFunction() { clearInterval(stopAction); }
</script>
</head>
<body>
<button onclick="startFunction()">Start</button>
<button
onclick="stopFunction()">Stop</button>
<div id="change"
style="border: 5px solid rgb(136, 136, 136); width: 200px; height: 100px; background-color: rgb(221, 221, 221); color: white;"></div>
</body>
Could someone make this so that it starts automatically when the page loads? Like with a time out? I use the Mouse Gesture Redox addon for Firefox 3.4 which allows javascript to be added for a gesture. I have found code which will perform different commands for the same gesture when a particular key is pressed. I would like the code to be disabled after each key press or a timeout (if a key is not pressed) until the same gesture is performed again. My attempts at coding to produce this effect have not worked. Can this be achieved? porman9 Code: document.onkeypress=detectKey;
function detectKey(e)
{
if(e.which==97){BrowserOpenAddonsMgr();}
else
if(e.which==100){gBrowser.loadOneTab(currURL, null, null, null, false, false);document.body.focus();}
else
if(e.which==110){mgB_OpenTab();}
else
if(e.which==109){mgW_MinWin();}
else
if(e.which==114){mgW_Restart();}
else
if(e.which==117){mgB_UndoCloseTab();}
}
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?? 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. I am trying to work out how to use Google Chrome DevTools to simulate a timeout on a JavaScript file on my site. I can use the 'Toggle Device Mode' to introduce throttling but that doesn't target a specific script. Is there a way to do this with DevTools? I am using Chrome 38. greetings everyone! this is my first time trying to join this javascript community. Well then, now I'm telling about my miss-understanding of this keywords of javascript here... here's the html Code: <fieldset > <legend>Attachment</legend>
<table id="attachment" style="height: 50px;" width="200" border="0">
<th width="19%">Title</th>
<th width="26%">File</th>
<th width="41%">Description</th>
<th width="6%">Upload</th>
<th width="6%">More File</th>
<tr>
<td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
<td><input name="filepath" type="file" size="33"></td>
<td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
<td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
<td><div align="center">
<input onclick="addMoreFile()" type="button" value="+">
</div></td>
</tr>
</table>
<!-- end Attachment --> </fieldset>
the aim is that the upload button would eventually changed into image and then changed back to a link. That one is already done here's the javascript Code: var attRow;
function upload(obj){
// obtain the table pointer
var attTable = document.getElementById('attachment');
// post file into the jsp file
// changing the image
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
par.innerHTML = '';
par.appendChild(loImage);
// create the removal link
var text = document.createTextNode('remove');
var liRem = document.createElement('a');
liRem.setAttribute('href','javascript:removeFile(this)');
liRem.appendChild(text);
par.innerHTML = '';
par.appendChild(liRem);
}
function removeFile(obj){
// post fileid
// change the image
}
function addMoreFile(){
// create fully file upload row
// consist of two text elements, file element, and 1 button.
var nFileTitle = document.createElement('input');
nFileTitle.setAttribute('name','title');
nFileTitle.setAttribute('type','text');
nFileTitle.setAttribute('size', '33');
nFileTitle.setAttribute('value','- none -');
nFileTitle.setAttribute('maxlength','50');
var nFilePath = document.createElement('input');
nFilePath.setAttribute('name', 'filepath');
nFilePath.setAttribute('type', 'file');
nFilePath.setAttribute('size', '33');
var nDesc = document.createElement('input');
nDesc.setAttribute('name', 'description');
nDesc.setAttribute('type', 'text');
nDesc.setAttribute('value','- none -');
nDesc.setAttribute('size', '60');
nDesc.setAttribute('maxlength', '200');
var nUpButton = document.createElement('input');
nUpButton.setAttribute('name', 'upload');
nUpButton.setAttribute('type', 'button');
nUpButton.setAttribute('value', ' Upload ');
nUpButton.setAttribute('onclick', 'upload(this)');
// empty element
var ksg = document.createTextNode(' ');
// obtain the table pointer
var attTable = document.getElementById('attachment');
attRow = attTable.rows.length;
alert(attRow);
var nextRow = attTable.insertRow(attRow);
var ceL = nextRow.insertCell(0);
ceL.appendChild(nFileTitle);
ceL = nextRow.insertCell(1);
ceL.appendChild(nFilePath);
ceL = nextRow.insertCell(2);
ceL.appendChild(nDesc);
ceL = nextRow.insertCell(3);
ceL.appendChild(nUpButton);
ceL = nextRow.insertCell(4);
ceL.appendChild(ksg);
}
the problem arise when I try to use the removeFile() function using this keywords. into these; Code: function removeFile(obj){
// post fileid
// change the image back
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
}
I try to apply the same approach as the upload() function. But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed? This code: when you click a link it jumps to an anchor point on the page and scrolls there smoothly. I was wondering how I get the same effect if I want the link to jump to another page? A normal anchor point on another page would set the href to, for instance, 'index.html#contact' but it won't work in this case as the javascript isn't reading the '#'. Any ideas?? Code: <script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('contact')">Go to anchor 1</a></li>
</ul>
Hey guys I am currently trying to set up a set of <li>'s to act as links just so: Code: <li onmouseover="location='http://www.google.com'">Text</li> Obviously this works fine, however what I need it to do is load in an iframe rather than reloading the browser. So the question is, what code do I need to get target data in to the js? Thanks! Please could anyone offer any advice, in simple terms on how to add anchor points to a page in order to create a smooth scroll element such as this one: http://www.kryogenix.org/code/browser/smoothscroll/#top Any help would be much appreciated. I define an anchor as a global variable, like this: Code: var globvar = {
anchor: document.createElement("A")
}
Later, on the fly, I give it the attributes, like this: Code: globvar.anchor.setAttribute("href","javascript:keyb_change()");
globvar.anchor.setAttribute("onclick","javascript:blur()");
globvar.anchor.setAttribute("id","switch");
...
globvar.paragraph.appendChild(globvar.anchor);
TWO questions: 1) In setting the attributes on the fly, how do I attach the anchor's text (the user clicks on) to the anchor? 2) Is there a way to include the attributes within the global variable's original definition, thereby sparing me from coding the attributes on the fly? Thanks for your time. |
|||||||