Here is my goal: I want to have my login form appear on the screen, after the link is clicked. It should then bounce on the screen ( the entire form ). The form is appearing, but the javascript function to bounce it is not working. Any help would be appreciated, im really only creating this so I can learn, but I don't understand why its not working.
The main file:
HTML Code:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function() {
});
function bounceLoginScreen()
{
var $=jQuery();
$('#finalDivBouncer').fadeIn(150).animate({top:"+=10px"},125).animate({top:"+=10px"},125).animate({top:"+=20px"},200).animate({top:"+=20px"},150).animate({top:"+=20px"},150).animate({top:"+=20px"},150).animate({top:"-=20px"},150).animate({top:"+=20px"},150).animate({top:"-=20px"},150);
alert("should have bounced");
}
//START: AJAX
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getLoginBox.php";
//url=url+"?q="+str;
//url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
spillTheBeans2('finalDivBouncer', xmlhttp.responseText);
bounceLoginScreen();
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
//END: AJAX
function spillTheBeans2(cont, textToChange)
{
var newdiv = document.createElement("div");
newdiv.innerHTML = textToChange;
newdiv.id = "finalDivBouncer";
var container = document.getElementById(cont);
var parentDiv = container.parentNode;
parentDiv.replaceChild(newdiv, container);
}
</script></head><body><div id = "finalDivBouncer"><b>Old div text.</b></div><a href = "#" onClick = "showUser('');"> link</a></body></html>
Maybe I'm misuderstanding the effect you want, but it appears to me you are over-sciencing the task by using ajax which could cause probllems with your animations if for any reason there are delays in ajax requests to the server completing.
As food for thought another approach could be, assuming all you want is your form to bounce around the page a few times and then settle so that the user isn't chasing input boxes around the screen to input data , is to put your form in a div, give it an id and then write what should be a simple javascript function to recalculate the div's top and left style positions according to how you want the form to bounce and then use setInterval() to run the function at set intervals to create an animation effect.
Then use setTimeout() to clear the setInterval() when you want the form to stop.
But this is just the way I would approach your requirement.
Thanks for the quick response!
I may indeed try your solution, but I also am still puzzled to know why the current solution is not working. As far as the Ajax delay being the issue, that is not very clear because I call my animation from a block where the condition is: xmlhttp.readyState==4
Is that not only true when the data has been received from the server?
I suspect that it may not be working, because of an error in that DOM code where I build the div, perhaps the ID is not setting or something? I haven't done much DOM coding (or Jquery) before.
Thanks again for that post, but I was able to solve it having it work with the ajax (which is nice, because this will now work with ANY included form, so I can re-use this code).
Below is the updated working main page, in case anyone is interested:
-note that the jquery was not working without the css absolute positioning set on the div, and the dom scripting to enter the text into the div also prevented the jquery from working, so it was replaced with innerHTML placement (which works on most browsers anyway and is less code).
HTML Code:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
function bounceLoginScreen()
{
$('#finalDivBouncer').fadeIn(150).animate({top:"+=10px"},125).animate({top:"+=10px"},125).animate({top:"+=20px"},200).animate({top:"+=20px"},150).animate({top:"+=20px"},150).animate({top:"+=20px"},150)
.animate({top:"-=20px"},150).animate({top:"+=20px"},150).animate({top:"-=20px"},150);
}
//START: AJAX
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getLoginBox.php";
//url=url+"?q="+str;
//url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
spillTheBeans2('finalDivBouncer', xmlhttp.responseText);
bounceLoginScreen();
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
//END: AJAX
function spillTheBeans2(cont, textToChange)
{
/*
var newdiv = document.createElement("div");
newdiv.innerHTML = textToChange;
newdiv.id = "finalDivBouncer";
var container = document.getElementById(cont);
var parentDiv = container.parentNode;
parentDiv.replaceChild(newdiv, container);
*/
document.getElementById(cont).innerHTML = textToChange;
}
</script><style type="text/css">
.loginBox{
border:1px solid #CCCCCC;
padding: 5px;
width: 320px;
background-color:#F4F4F8;
text-align:center;
position:absolute;
top:0px;}
</style></head><body><div id = "finalDivBouncer" class = "loginBox"><b><a href = "#" onClick = "showUser('');">Log In</a></b></div><br/><br/><br/><br/><br/><br/></body></html>
As far as the Ajax delay being the issue, that is not very clear because I call my animation from a block where the condition is: xmlhttp.readyState==4
Is that not only true when the data has been received from the server?
I'm glad you got your ajax animation working. Yes you are right, the form should only move when readyState = 4. My concern with using ajax was that depending on server load at the time and whatever else could be affecting internet traffic, the time interval between successive readyState = 4 might not be constant, but in reality they will be pretty close so it shouldn't be a major problem, and so the animation might appear a little jagged and not smooth.
Doing the animation totally within your browser in JS could give a smoother animation, but it's not a big deal.
Doing the animation totally within your browser in JS could give a smoother animation
Having ajax here wont get the animation less smoother, i dont know if you noticed or not, but the animation IS STARTED after the data are fetch into bouncing DIV.
cseigel good job. you managed it to work by yourself
so it became good lesson i think
Good luck !
Help creating simple animation
Reply With Quote
, is to put your form in a div, give it an id and then write what should be a simple javascript function to recalculate the div's top and left style positions according to how you want the form to bounce and then use setInterval() to run the function at set intervals to create an animation effect.
Originally Posted by tirna
Bookmarks