Jump to content

Image Button Switch And Delay


jmc92
 Share

Recommended Posts

You can use the functionsetTimeoutI've had some trouble to execute a function with parameters, but I'm not an expert, and you will find a lot of pages explaining setTimeout anyway.If you want to completely "freeze" your browser (code copied from some site/s I don't remember):function sleep(milliseconds2sleep) {var start = new Date().getTime();while ((new Date().getTime() - start) < milliseconds2sleep);However, it's rather dangerous on non-threaded browsers since it freezes the browser, i.e. every "Tab".

Link to comment
Share on other sites

I have this codebut it does it onunclick even though I said for it to do a onclick

<head><script TYPE="text/javascript"><!--// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/// Distribute this script freely, but keep this // notice with the code.var submitRolls = new Object();function submitroll(src, oversrc, name){this.src=src;this.oversrc=oversrc;this.name=name;this.alt="Submit Query";this.write=submitroll_write;}function submitroll_write(){var thisform = 'document.forms[' + (document.forms.length - 1) + ']';submitRolls[this.name] = new Object();submitRolls[this.name].over = new Image();submitRolls[this.name].over.src = this.oversrc;submitRolls[this.name].out = new Image();submitRolls[this.name].out.src = this.src;document.write	(	'<A Onclick="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + 	' Onclick="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + 	' HREF="java script:'	);if (this.sendfield)	{	if (! this.sendvalue)		this.sendvalue = 1;	document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';");	}document.write(thisform + '.submit();void(0);"');if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');document.write('>');document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');if (this.height)document.write(' HEIGHT=' + this.height);if (this.width)document.write(' WIDTH='  + this.width);if (this.otheratts)document.write(' ' + this.otheratts);document.write('></A>');if (this.sendfield)	{	document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');	document.forms[document.forms.length - 1].elements[this.sendfield].value='';	}}//--></SCRIPT></head><FORM ACTION="../cgi-bin/mycgi.pl">email: <INPUT NAME="email"><script TYPE="text/javascript"><!--var sr = new submitroll("submit.out.gif","submit.over.gif","mysubmit");sr.write();//--></SCRIPT><NOSCRIPT><INPUT TYPE=SUBMIT VALUE="Go!"></NOSCRIPT></FORM>

Link to comment
Share on other sites

unclick? You mean when the mouse is released? That's a click. If you want just the mousedown, use mousedown. Just know that users dislike that.That's pretty old code, BTW. You don't see stuff like that too much these days

Link to comment
Share on other sites

Coding for older browsers is something I do alotOk I have a working script for the image switchBut the delay of page load after I click the button wont work

<head><script>function showLoading(button) {	button.style.backgroundImage = 'url(loading-arrows_12x12.gif)';	button.style.color = '#676561';	wait(400);  // Else the form will submit before the background image changes	return true;}function wait(ms) {	var date = new Date();	var curDate = null;		do{		curDate = new Date();	} while(curDate - date < ms);}</script><script>function myfunction() { } var delay = 5000; setTimeout( myfunction, delay )</script><style>.submitBtn {	background-image: url('blank.gif');	background-repeat: no-repeat;	background-position: 100% 50%;	padding-right: 15px;	text-align: center;}</style></head><FORM ACTION="../cgi-bin/mycgi.pl">email: <INPUT NAME="register"><button class="submitBtn" onclick="showLoading(this); setTimeout( myfunction, delay );">Submit</button></FORM>

Link to comment
Share on other sites

Coding for older browsers is something I do alot
Why? It's not really necessary to support anything before IE6, and IE6 is able to understand the more modern code.The wait function you're using isn't really a great idea. That function will basically max out your CPU while it continually runs in a loop. It's not exactly efficient for a "wait" method to max out the CPU. The setTimeout and setInterval functions are specifically for running a piece of code after a certain number of milliseconds. If you want to click the button, then wait a while, then submit the form, then you need to use an onsubmit handler on your form, not an onclick handler on your button. You can use onclick to change the button, but you need to use onsubmit to cancel the form's submit action and instead do it manually yourself after a certain amount of time. The form.submit method will submit a form, and your onsubmit handler can return false to cancel the default submit.
Link to comment
Share on other sites

It's important to grab the submit event also because forms can be submitted when the user hits enter when the focus is on a text input. So you'd have to invest a lot of code into grabbing the enter key. Or just do as JSG suggests.

Link to comment
Share on other sites

Just to see if this is what the site needs and the last posts suggest------------------------------------------<html><head><script>function showLoadingAndSubmit() { button = document.getElementById('myBtn'); button.style.backgroundImage = 'url(loading-arrows_12x12.gif)'; button.style.color = '#676561'; var delay = 5000; setTimeout("document.forms['myform'].submit()", delay); return false;}</script><style>.submitBtn { background-image: url('blank.gif'); background-repeat: no-repeat; background-position: 100% 50%; padding-right: 15px; text-align: center;}</style></head><body> <FORM name="myform" id="myform" ACTION="../cgi-bin/mycgi.pl" onsubmit="return showLoadingAndSubmit()"> email: <INPUT NAME="register"> <button class="submitBtn" id="myBtn">Submit</button> </FORM></body></html>------------------------------------------However, the field value (that of "register") will be assigned at the time the actual submit is made, not the time at which the form button or enter are "used", i.e. the user is able to change the value of "register" after the UI suggests it's loading the new page content. I think AJAX should be used to "solve" this, but maybe there are other ways...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...