Scriptaculous problem

Question

Silvershaft 2 Junior Poster

14 Years Ago

Hey! I got a little problem with my websites login page what I started making when I try to run a function in onClick section of button I have to click it two times that the effect comes? If I put the code straight into the onClick it works properly I have no idea. I am really noob in JS as I haven't done it much, so sorry if this is stupid. You can see live demo here about the bug http://breakpoint.no-ip.org here is the HTML code which bugs

<!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>Welcome to breakpoint - Login</title>
<link href="style.css" type="text/css" rel="stylesheet"  />
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript">

function checkLogin()
{
	Effect.BlindDown('error'); return false;
}


function replacePass(obj){
	var newO=document.createElement('input');
	newO.setAttribute('type','password');
	newO.setAttribute('name',obj.getAttribute('name'));
	newO.setAttribute('id', 'password');
	obj.parentNode.replaceChild(newO,obj);
	newO.focus();
}

function replaceName(obj){
	
	if(obj.value == "ACCOUNT NAME")
	{
		var newO=document.createElement('input');
		newO.setAttribute('type','text');
		newO.setAttribute('name',obj.getAttribute('name'));
		newO.setAttribute('id', 'password');
		obj.parentNode.replaceChild(newO,obj);
		newO.focus();
	}
		
}



	
</script>


</head>



<body>
	<div id="logindiv">
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/welcome.png" />
       <div id="error" style="display:none; width:25%; height:40px; margin-left:39%; margin-right:auto; font-size:140%; background:#F33;
		height:30px;
		font-weight:bold;
		color:#000;
		display:none;
		background-color:#F30;">
 		Incorrect login!
		</div>
        <form action="#">
			<p><label for="name">Name</label> <input type="text" id="name" value="ACCOUNT NAME" onfocus="replaceName(this)"  /></p>
			<p><label for="password">E-mail</label> <input type="text" id="password" value="PASSWORD" onfocus="replacePass(this)" />
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="images/login2.png" id="submit"  onclick="checkLogin()" />
		</form> 
	</div>
</body>
</html>

This works

<!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>Welcome to breakpoint - Login</title>
<link href="style.css" type="text/css" rel="stylesheet"  />
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>

<script type="text/javascript">

function checkLogin()
{
	Effect.BlindDown('error'); return false;
}


function replacePass(obj){
	var newO=document.createElement('input');
	newO.setAttribute('type','password');
	newO.setAttribute('name',obj.getAttribute('name'));
	newO.setAttribute('id', 'password');
	obj.parentNode.replaceChild(newO,obj);
	newO.focus();
}

function replaceName(obj){
	
	if(obj.value == "ACCOUNT NAME")
	{
		var newO=document.createElement('input');
		newO.setAttribute('type','text');
		newO.setAttribute('name',obj.getAttribute('name'));
		newO.setAttribute('id', 'password');
		obj.parentNode.replaceChild(newO,obj);
		newO.focus();
	}
		
}



	
</script>


</head>



<body>
	<div id="logindiv">
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/welcome.png" />
       <div id="error" style="display:none; width:25%; height:40px; margin-left:39%; margin-right:auto; font-size:140%; background:#F33;
		height:30px;
		font-weight:bold;
		color:#000;
		display:none;
		background-color:#F30;">
 		Incorrect login!
		</div>
        <form action="#">
			<p><label for="name">Name</label> <input type="text" id="name" value="ACCOUNT NAME" onfocus="replaceName(this)"  /></p>
			<p><label for="password">E-mail</label> <input type="text" id="password" value="PASSWORD" onfocus="replacePass(this)" />
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="images/login2.png" id="submit"  onclick="Effect.BlindDown('error'); return false;" />
		</form> 
	</div>
</body>
</html>

Difference is that I put the code straight to the onClick and it works?, I really need to put it into function. Check the site and see how it bugs

javascript

4 Contributors
5 Replies
130 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by kamala555

fxm 23 Posting Pro

14 Years Ago

Difference is that I put the code straight to the onClick and it works?

If I undertand correctly, you think that when this onclick="Effect.BlindDown('error'); return false;" is in place, the code is working. It isn't. It merely displays a message with an effect and then stops (because of the 'return false').

On the other hand, you think that when this onclick="checkLogin()" is in place, nothing happens until the second click. You are mistaken. On the first click the script interacts with the server and [among other things] loads more code. I stopped testing at that point but I think it may then [at least try to] open a popup (which your browser may block).

Taywin 312 Posting Virtuoso

14 Years Ago

Do you completely understand how to use BlindDown? I am not sure whether you need 'new' in your code. Not sure whether the BlindDown really read it as it should be. I am not certain because I read this page about BlindDown...

Edited 14 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Silvershaft 2 Junior Poster · Answer 1 · 2010-07-13T19:21:51+00:00

Well that way it happens if I put it straight in onclick it works good but if it's in function I have to click it two times..

Silvershaft 2 Junior Poster · Answer 2 · 2010-07-14T02:38:29+00:00

I did like that but same effect.. With safari it won't even work if it's inside function.. I really don't understand

kamala555 0 Newbie Poster · Answer 3 · 2010-07-14T13:57:16+00:00

kamala555 0 Newbie Poster

14 Years Ago

i want to know more about web design.