|
JavaScript - Show Text After X Time After Pressing A Button
Hey,
I've got the following problem: I want to edit this code: <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears. Cheers Similar Tutorialscan anyone help me change this script to add confirmation of finishing the exam when pressing submit button and avoiding that when time is out....and how could i save radio button checked even if page being refreshed it stays checked....thanks in advance. this is the code.... Code: <?php
if($_POST['submit']) {
print_r($_POST);
$aqeel= $_POST['q'];
print "a ".$aqeel[2];
exit(0);
}
?>
<?php
//Function to generate/fetch the exam
//Example output of the function:
$examQuestions = "
<label for='q1'>What is your name?</label><input type='text' name='q[1]' id='q1'><br />
Are you:<label for='q2a'>Male</label><input type='radio' name='q[2]' id='q2a' value='male'> or <label for='q2b'>Female</label><input type='radio' name='q[2]' id='q2b' value='female'><br /><input type='text' name='c'>
";
//Set a variable in the format: 'h, m, s' for use as the timer paramiters
//Sample:
$timerLength = '0, 0, 10'; //0 hours, 0 minutes, 10 seconds
?>
<html>
<head>
<script language='javascript' type='text/javascript'>
function timerShow(hours, minutes, seconds, init) {
if(init === true) {
setTimeout("timerTick(" + (hours * 360 + minutes * 60 + seconds) + ")", 1000);
}
if(hours > 0) {
time_left = hours + " hr:" + minutes + " min:" + seconds + " sec";
} else {
if(minutes > 0) {
time_left = minutes + " min:" + seconds + " sec";
} else {
if(seconds > 0) {
time_left = seconds + " sec";
} else {
document.getElementById("submit").click();
}
}
}
document.getElementById("timer").innerHTML = "Time Remaining: <b style='font-size: 14pt; color:red;'>" + time_left + "</b>";
}
function timerTick(seconds) {
seconds -= 1;
if(seconds > 0) {
setTimeout("timerTick(" + seconds + ")", 1000);
}
hours = (seconds - (seconds % 360)) / 360;
seconds -= hours * 360;
minutes = (seconds - (seconds % 60)) / 60;
seconds -= minutes * 60;
timerShow(hours, minutes, seconds, false);
}
</script>
</head>
<body>
<div>
This exam consists of <b><?php echo $num_q; ?></b> questions.<br /><br />
You have <b></b> minutes to complete this exam.<br /><br />
<input type='button' onclick='this.parentNode.style.display = "none"; document.getElementById("exam").style.display = ""; timerShow(<?php echo $timerLength; ?>, true);' value='Start'>
</div>
<form id='exam' method='post' style='display: none;'>
<div id='timer'></div>
<?php
//output the exam here
echo $examQuestions;
?>
<input type='submit' value='Finish' name='submit' id='submit'>
</form>
</body>
</html>
Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Does anyone know of a javascript code that will always show the date of next tuesday? We have a reoccurring event every tuesday, so as soon as wednesday hits, we need the date to change to the following tuesday. Any help or point in the right direction is appreciated. Thanks! Hi there, I have a page with 2 navigation menus as well as a slide show (3 separate .js files). I can get them all to work individually but not all together, at the same time. I looked over you FAQ section but I can't seem to figure it out. Any help would be hugely appreciated. Thank you so much. HTML: Quote: <!-- Main content --> <div id="content"> <div style="text-align:center"> <img id="pic" src="images/slideshow/slideshow1.jpg" width="600" height="600" alt="slideshow" /> </div> <script type="text/javascript" src="slideshow.js"></script> </div> <!-- Site navigation menu --> <div id="navcontainer"> <ul> <li> <div align="center"><img src="images/logo1.jpg" id="logo" alt="Logo" /></div> </li> <li><img src="images/buttons/teamandcorpsports1.jpg" id="teamandcorpsports" alt="Team and Corporate Sports" width="224" height="37" /></li> <li><img src="images/buttons/performancesports1.jpg" id="performancesports" alt="Performance Sports" width="224" height="37" /></li> <li><img src="images/buttons/flagsandbanners1.jpg" id="flagsandbanners" alt="Flags and Banners" width="224" height="37" /></li> <li><img src="images/buttons/home1.jpg" id="home" alt="Home" width="224" height="37" /></li> <li><img src="images/buttons/catalogues1.jpg" id="catalogues" alt="Catalogues" width="224" height="37" /></li> <li><img src="images/buttons/galleries1.jpg" id="galleries" alt="Galleries" width="224" height="37" /></li> <li><img src="images/buttons/designown1.jpg" id="designown" alt="Design your Own" width="224" height="37" /></li> </ul> </div> <script type="text/javascript" src="navigation.js"></script> <div id="footer"> <!-- Site navigation menu - footer --> <div id="navcontainer_footer"> <ul> <li><img src="images/buttons/dealerlogin1.jpg" id="dealerlogin" alt="Dealer Log in" width="102" height="29" /></li> <li><img src="images/buttons/contactus1.jpg" id="contactus" alt="Contact Us" width="102" height="29" /></li> <li><img src="images/buttons/dealersignup1.jpg" id="dealersignup" alt="Sign Up to be a Dealer Here" width="102" height="29" /></li> </ul> </div> <script type="text/javascript" src="navigation_bottom.js"></script> </div> </div> <!-- End Wrapper --> slideshow.js Quote: var pause = 3000; // interval, in milliseconds, between transitions var i = 0; // image counter var pic = document.getElementById("pic"); // the <img> element in the HTML file // define an array of images var imgs = new Array("images/slideshow/slideshow1.jpg", "images/slideshow/slideshow2.jpg", "images/slideshow/slideshow3.jpg", "images/slideshow/slideshow4.jpg", "images/slideshow/slideshow5.jpg", "images/slideshow/slideshow6.jpg", "images/slideshow/slideshow7.jpg" ); // preload the images for (var j = 0; j < imgs.length; j++) { var obj = new Image(); obj.src = imgs[j]; } // rotates between the images in the "imgs" array function rotate() { pic.src = imgs[i]; if (i === (imgs.length -1)) { i = 0; } else { i++; } setTimeout("rotate()", pause); } window.onload = rotate; navigation_bottom.js Quote: // define an array of images var navImgs = new Array("images/buttons/dealerlogin1.jpg", "images/buttons/contactus1.jpg", "images/buttons/dealersignup1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer_footer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; navigation.js Quote: // define an array of images var navImgs = new Array("images/buttons/logo1.jpg", "images/buttons/teamandcorpsports1.jpg", "images/buttons/performancesports1.jpg", "images/buttons/flagsandbanners1.jpg", "images/buttons/home1.jpg", "images/buttons/catalogues1.jpg", "images/buttons/galleries1.jpg", "images/buttons/designown1.jpg"); // preload the images by iterating the array for (var i = 0; i < navImgs.length; i++) { var obj = new Image(); obj.src = navImgs[i]; } // initialize the onmouseover and onmouseout events function init() { // get all the <img> tags in the HTML document as an array var navContainer = document.getElementById("navcontainer"); var imgArray = navContainer.getElementsByTagName("img"); // var imgArray = document.getElementsByTagName("img"); // loop through the array and bind the onmouseout and onmouseover events for (var i = 0; i < imgArray.length; i++) { var img = imgArray[i]; img.onmouseover = doMouseOver; img.onmouseout = doMouseOut; } } // define the function for the onmouseover event function doMouseOver(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } // extract the digit only from the "id" attribute value and concatenate it // to the image src for a result of "images/pic1.jpg", "images/pic2.jpg" or "images/pic3.jpg" var id = img.id; img.src = "images/buttons/" + id + ".jpg"; //img.src = "images/pic" + id.substring("pic".length) + ".jpg"; } // define the function for the onmouseout event function doMouseOut(e) { var img; if (!e) // IE { e = window.event; // get the <img> element for IE that triggered the event img = e.srcElement; } else { // get the <img> element for FF that triggered the event img = e.target; } //img.src = "images/button_home1.jpg"; var id = img.id; img.src = "images/buttons/" + id + "1.jpg"; } // call the "init" function to initialize the event binding //window.onload = init; How could a make a html button that each time your press it it does a new things?
I want to show the div when a button is clicked. And the div will enter the page by sliding in (from the left of the page). When it got clicked again, the div will dissapear by sliding out from the page. Any suggestions? Thank You. I want some thing that when i click a button it shows a div then hides the button. I found this: Code: <script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
But it has two buttons that show and then hide the div, i only want one that shows the div then hides the button. Please help. How can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely. The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing. Here's an example I created to show you Quote: <html> <head> <script type="text/javascript"> var x = 50; var y = Math.floor(Math.random()*5); function test() { var a = x+y document.getElementById("testing").innerHTML=a; } </head> <body> <p id="testing"></p> <input type="button" value="asdf" onclick="test()" /> </body> </html> So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput. Thanks! I am attempting to implement a Close icon which responds to mouseover, mouseup, mousedown, and mouseout. The problem is that the first DIV I display, using this code, works as intended, i.e. all the button states work. I can close and reopen the same DIV and everything is still fine. If I open a second DIV, which uses the reuse code below, the button states do not appear, although the DIV will close properly. If I step through the debugger all of the state images load properly but do not appear. Once I have tried to use the button in the second DIV, all of the DIV's fail to display the button states but close properly. Additionally all of the pages where this is used are generated using XMLHttpRequest(). The DIV's using this are generated when the site loads and then shown and hidden as needed with their contents being generated via XMLHttpRequest(). Anyone have any ideas? The intent is to reuse the following in a number of DIV's: Code: rtn = "<div id='closepanel' class='closepanel'><img src='images/closebutup.png' name='closebut' width='20px' height='20px' border='0px' onmouseover=\"swapbuttonstate('closebut','over')\" onmouseout=\"swapbuttonstate('closebut','out')\" onmousedown=\"swapbuttonstate('closebut','down')\" onmouseup=\"closePanel('"+this.msDivid+"')\" ></div>";
On startup I preload the images using : Code: if (document.images) {
closebutup= new Image();
closebutup.src="images/closebutup.png";
closebutover= new Image();
closebutover.src="images/closebutover.png";
closebutdown=new Image();
closebutdown.src="images/closebutdown.png";
}
The swapbuttonstate function is defined as: Code: function swapbuttonstate(buttonname, state) {
switch(state) {
case "over":
if (document.images) {
butover=eval(buttonname + "over.src");
document[buttonname].src= butover;
}
break;
case "out":
case "up":
if (document.images) {
butup=eval(buttonname + "up.src");
document[buttonname].src= butup;
}
break;
case "down":
if (document.images) {
butdown=eval(buttonname + "down.src");
document[buttonname].src= butdown;
}
break;
}
}
and closePanel is defined as: Code: function closePanel(divid) {
document.getElementById(divid).style.display='none';
}
Any help would be greatly appreciated. Hello I am new to javascript (4 months), I would like to add an hour to the current time each time a button is clicked. I have this code: ------------------------------------------------------------------ var hourstbutton=document.getElementById("button3"); hoursbutton.onclick=function() { var divlink=document.getElementById("math3"); var newtime2=new Date(); var currenthours2=newtime2.getHours()+1; var currentmins2=newtime2.getMinutes(); var currentsecns2=newtime2.getSeconds(); var ampm2= (currenthours2>=12) ? "P.M." : "A.M."; if (currenthours2>=13) { currenthours2-=12; } if(currenthours2<1){ currenthours2=12; } if(currentmins2<10){ currentmins2= "0" + currentmins2; } if(currentsecns2<10){ currentsecns2="0" + currentsecns2; } divlink.innerHTML=currenthours2+":"+currentmins2+":"+currentsecns2+ " "+ampm2; ------------------------------------------------------------------------ How do I tie the number of button clicks into the number of times this code is executed? Any help is appreciated thanks. How can I simulate pressing a key in javascript into a specific textfield?
I would like my form submit button to show as a link instead of a button, where it will be a link and pass the city value to the action page: Code: <form action="goTo.jsp" method="post"> <input type="text" name="city"> <input type="submit"> </form> Please advise. how can i make a button disable when the page is loaded first time and then make it enable on the click of other button in javascript.
Hi, I need a button that not only resets what is typed in the textarea but also hides all shown tables... Here's how my current set up is... ---------text area------ with a reset button table1 title (when clicked, shows a table under it) table2 title (when clicked, shows a table under it) table3 title (when clicked, shows a table under it) the tables under the main tables have buttons that when clicked on inserts texts in the textarea. Any help would be much much appreciated! One more thing, how would I do it so it enables the submit button once the message is Avaliable username. I have this code: PHP Code: <script type="text/javascript"> //function to create ajax object function pullAjax(){ var a; try{ a=new XMLHttpRequest() } catch(b) { try { a=new ActiveXObject("Msxml2.XMLHTTP") }catch(b) { try { a=new ActiveXObject("Microsoft.XMLHTTP") } catch(b) { alert("Your browser broke!");return false } } } return a; } function validate() { site_root = ''; var x = document.getElementById('uname'); var msg = document.getElementById('msg'); var submituser = document.getElementById('submituser'); user = x.value; code = ''; message = ''; obj=pullAjax(); obj.onreadystatechange=function() { if(obj.readyState==4) { eval("result = "+obj.responseText); code = result['code']; message = result['result']; if(code <=0) { x.style.border = "1px solid red"; msg.style.color = "red"; } else { x.style.border = "1px solid #000"; msg.style.color = "green"; usersubmit.style.display = 'block'; } msg.innerHTML = message; } } obj.open("GET",site_root+"js/user_availability.php?username="+user,true); obj.send(null); } </script> and the form is he PHP Code: echo "<form action='' method='POST'>"; echo ' User Name : <input type="text" onblur="validate();" id="uname" name="uname" value="" /> <div id="msg"></div>'; echo "next info"; echo "<input name='step3' value='Next' id='submituser' style='display:none' type='submit' />"; echo "</form>"; I set it as display none as a default and then when the box is green for the box to show as a block. Its not showing up tho after the box becomes green When I click the button, the images hide/show in IE, but this doesn't work in Firefox. I've tried JSLint and JavascriptLint, but haven't figured out what the issue is. Any help would be much appreciated!! This is the code below: <script language="Javascript"> <![CDATA[ function openConsole(docId, attachmentFileName, name) { if (window.customOpenConsole) { customOpenConsole(encodeURIComponent(attachmentFileName), name); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null){ headerFrame.openDocAttachment(docId, attachmentFileName, name); } } } function STGhide() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display="none"; } } var link = document.getElementById("ShowHideButton"); //alert(link.innerHTML) link.innerHTML ="<img alt='' src='img/hideshow/showimage.gif' border='0' onclick='javascript:STGshow();' />"; } function STGshow() { var x=document.getElementsByName("ImageControlZone"); for(j=0;j<x.length;j++) { var imgs = x[j].getElementsByTagName('img'); for(i=0;i<imgs.length;i++) { imgs[i].style.display=""; } } var link = document.getElementById("ShowHideButton"); link.innerHTML ="<img alt='' src='img/hideshow/hideimage.gif' border='0' onclick='javascript:STGhide();' />"; } function openDocumentLink(externalId, languageId) { if (window.parent.openDocLink != null) { window.parent.openDocLink(externalId, languageId); } else { headerFrame = window.parent.parent.frames["Header"]; if (headerFrame != null && headerFrame.openDocLink != null) { headerFrame.openDocLink(externalId, languageId); } else { setTimeout("openDocumentLink('"+externalId+"','"+languageId+"')",500); } } } ]]> </script> Help is greatly appreciated!! I have two radio buttons on a form. I wish for one button to show a div that's hidden with {display:none;}, and the other to put it back to being hidden when selected. My code seemed sound to me but in firefox it doesn't really work, only in internet explorer. I would like to keep the coding as simple as possible: Code: style:
.hidden{display:none;}
script:
function show() {document.getElementById("hide").style.display = 'inline'}
function hidden() {document.getElementById("hide").style.display = 'none'}
body:
How old are you?<br/>
<input type="radio" name="age" onclick="return hidden();" value="yes"/>over 25<br/>
<input type="radio" name="age" onclick="return show();" value="no"/>25 or under<br/>
<div id=hide class="hidden">
Do you have over 2 years of experience?<br/>
<input type="radio" name="experience" value="yes"/>yes<br/>
<input type="radio" name="experience" value="no"/>no<br/>
</div>
Hi need a bit of expert help with some thing i am trying to achive but cant find any code on line. all i want to do is to have a list of items in a div box on the left of the screen and when i click on one of them it shows a div box with the related text on the right side of screen in the second div box and hides any previouse showing divs on the right. Thanks Ralph HI, I have a website with a Login page (no username only password required), but at the moment it only works when you click Login after entering the password. How could i make it so that pressing Enter will do the same???? here is the full index.html file 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>Please login</title>
<link rel="stylesheet" href="css/login.css" type="text/css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="css/style.ie7.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="Main">
<div class="corner TL"></div>
<div class="corner TR"></div>
<div class="corner BL"></div>
<div class="corner BR"></div>
<div class="logo"></div>
<div class="loginForm">
<form name="login-form">
<script language="javascript">
<!--
/*Change the usename,password and the page to redirect the user to to suit your own site*/
function login(form)
{
if (form.password.value=="england2000")
{
location="/en"
}
else {
alert("Sorry Invalid Password")
}
}
//-->
</script>
<label>PASSWORD</label> <input class="field" name="password" type="password" />
<input type="button" value="Login" class="loginB" onClick="login(this.form)">
</form>
</div>
<div style=" clear:both;"></div></div>
</body>
</html>
|
|||||||