CODEWITHSUNDEEP
jquery
Vallabh Lakade
Vallabh Lakade

Reputation: 832

JQuery focus event

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>

Upvotes: 0

Views: 56

Answers (1)

elixenide
elixenide

Reputation: 44823

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

Upvotes: 1

Related Questions