JQuery focus event

Question

I am new to JQuery and trying to do some animation on h1 tag in header when page loads.But it doesn't seems to be working. I think it is not going in the load function.Can anyone tell me why? Is there any difference between calling .on('load',function(){}) and simply load(function(){})?

<html>
<head>      
    <title>UI Design Assignment</title>
<style>
        #header{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            text-align : center;
            color : white;
            box-shadow : 0 0 25px #5555FF;
        }
        #imagediv{
            height: 80%;
            width : 15%;
            padding-top : 50px;
            padding-left : 85px;
            -webkit-transform: rotate(-30deg);
            float : left;               
        }           
        #registrationdiv{
            width : 65%;
            height: 80%;                
            font-family : Calibri;
            font-size : 20px;
            border-radius : 2;
            float : left;
        }
        #registrationtable{
            position : relative;
            margin : 18px;
            align : center;
            background-color : #AAA;
            overflow-y : scroll;
            box-shadow : 0 0 17px gray;
            border-radius : 5%;
        }
        #footer{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            color : white;
            text-align : center;                
            margin : 0px auto 0px auto;
            padding : 2px;
            box-shadow : 0 0 25px #5555FF;
            clear : both;
        }

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        $(document).ready(function(){
            $( "#registrationimg" ).mouseenter(function() {

                $( this ).fadeOut( 1000 );
            });
            $( "#registrationimg" ).mouseleave(function() {
                $( this ).fadeIn( 1000 );
            });
            $("h1").load(function(){
                $(this).css({
                    "left": "500px",
                    "-webkit-transform":"rotate(360deg)",
                    "-webkit-transition": "1s"});
            });
        });

        function submitform(){

            if(document.getElementById("iaccept").checked==false){
                alert("You cannot go ahead without accepting the terms and conditions.");
            }
            else{
                alert("Registration completed.");
            }
        }   
        function resetform(){
            window.reset();
        }
    </script>
</head>
<body>
    <div id="header">           
        <h1>USER REGISTRATION</h1>
    </div>
    <div id="imagediv">
        <img id="registrationimg" src="registration.jpg"/>
    </div>
    <div id="registrationdiv"><center>      
    <form name="registrationform"  onsubmit="submitform()">
        <table id="registrationtable" cellspacing="10">
            <tr><td>Email <font color="red">*</font> : </td><td><input type="email" name="email" required></td></tr>
            <tr><td>Password <font color="red">*</font> : </td><td><input type="password" required></td></tr>
            <tr><td>Confirm Password <font color="red">*</font> : </td><td><input type="password" required></td></tr>
            <tr><td>First Name <font color="red">*</font> : </td><td><input type="text"  required></td></tr>
            <tr><td>Last Name : </td><td><input type="text" ></td></tr>
            <tr><td>Address : </td><td><input type="text" ></td></tr>
            <tr><td>City : </td><td><input type="text" ></td></tr>
            <tr><td>State : </td><td><input type="text" ></td></tr>
            <tr><td>Country : <font color="red">*</font></td><td><input type="text" required></td></tr>
            <tr><td>Phone : </td><td><input type="tel" ></td></tr>
            <tr><td>Zipcode : </td><td><input type="number" ></td></tr>
            <tr><td>Date of Birth <font color="red">*</font> : </td><td><input type="date" name="email" required></td></tr>
            <tr><td colspan="2">By submitting, I agree that all information entered was done accurately & truthfully.</td></tr>
            <tr><td>I accept <input type="checkbox" id="iaccept"></td></tr>
            <tr><td><input type="submit" name="Submit"></td><td><input type="reset" name="Reset"></td></tr>
        </table>
    </form></center>
    </div>
    <center></center>
    <div id="footer">Copyright &copy; <a href="https://harbingergroup.com"><font color="#00F"><b>Harbinger Group</b></font></a>
</div>
</body>
</html>

elixenide · Accepted Answer · 2015-02-02T06:28:33.820

1

You don't need a load handler for the h1; it's already loaded. Using $('h1').load(...) means "do something when the h1 loads (for example, via AJAX)." But this code runs after the page has loaded, and you never reload the h1, so that code never runs.

Instead, just apply the CSS directly. It's in a $(document).ready(...), so it will run when the page loads. Here's how you do it:

$("h1").css({
     "left": "500px",
     "-webkit-transform":"rotate(360deg)",
     "-webkit-transition": "1s"
});

Working demo on jsFiddle

edited Feb 02 '15 at 06:28

answered Feb 02 '15 at 06:23

elixenide

44,308
16
74
100

It works fine for me. Are you getting any errors in the console? – elixenide Feb 02 '15 at 06:31
P.S. The code in my answer does still need to be in the `$(document).ready(...)` block. – elixenide Feb 02 '15 at 06:32
Can you see the animation? – Vallabh Lakade Feb 02 '15 at 06:34
Yep. In the fiddle I posted, it rotates over the course of 1 second. – elixenide Feb 02 '15 at 06:35

JQuery focus event

1 Answers1