Login template Using jQuery


lets make simple Login page using jQuery we will give some animation to login.

login.js contains

1)

$(function() {
var button = $(‘#loginButton’);
var box = $(‘#loginBox’);
var form = $(‘#loginForm’);

loginButton , loginBox, loginForm are id’s declared in login.html

here we are making variables of those.

2)

button.mouseenter(function(login) {
box.toggle();
button.toggleClass(‘active’);
});
button.mouseleave(function(login) {
box.toggle();
button.toggleClass(‘active’);
});

mouseenter is declared in jQuery script file which we are including in html file only.

button.mouseenter declares that after mouse enters button perform following operations.

login.js

CSS

login.html

in login.html

<link rel=”stylesheet” href=”jquery/jquery-ui.css” />

<script src=”jquery/jquery-1.9.1.js”></script>

<script src=”jquery/jquery-ui.js”></script>

jquery-1.9.1.js , jquery-ui.js are the javascript files required for jQuery animations.

You can Download it from here 

Download my login template from here 

login

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s