dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help creating simple animation

  1. #1
    Join Date
    Jul 2008
    Posts
    7

    Cool Help creating simple animation

    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>
    The form file:

    HTML Code:
    <div>
    User Name : <input name="username" type="text" id="username" value="" maxlength="20" />
    </div>
    <div style="margin-top:5px" >
    Password :
    &nbsp;&nbsp;
    <input name="password" type="password" id="password" value="" maxlength="20" />
    </div>
    <div>
    <input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> <span id="msgbox" style="display:none"></span>
    </div>
    The backend:

    HTML Code:
    <?php
    $myFile = "loginBox.html";
    $fh = fopen($myFile, 'r');
    $theData = fread($fh, filesize($myFile));
    fclose($fh);
    echo $theData;
    ?>

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  3. #3
    Join Date
    Jul 2008
    Posts
    7
    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.

  4. #4
    Join Date
    Jul 2008
    Posts
    7

    Issue Resolved!

    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>

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  6. #6
    Join Date
    Feb 2010
    Posts
    73
    Quote Originally Posted by tirna View Post
    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 !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles