JAVASCRIPT –JQUERY LOGIN SLIDER

In this exercise, you’ll get a little practice with using jQuery effects by creating a common user interface element - a panel that slides into and out of view with a click of the mouse.

Now you don’t see it, now you do. The login form is normally hidden from view (top), but a simple mouse click reveals the form - ready for the visitor to fill out and log on.

The basic task is rather simple:

  • Select the paragraph with the “Login” message on it. Remember that a lot of jQuery programming first begins with selecting anelement on the page. In this case, the “Login” paragraph will receive clicks froma visitor.
  • Attach a click event to that paragraph. JavaScript isn’t interactive without events: The visitor needs to interact with theselection (the Login paragraph) to make something happen.
  • Toggle the display of the form on and off.

You can make the form instantly appear (the show()function), slide into view(the slideDown()function), or fade into view (the fadeIn()function.)

  1. Copy and unzip the zipped filefrom BREO named jQuery - Login Slider - Student Filesto your MySites folder and rename the folder as jQuery_Login_Slider.
  1. Create a new Dreamweaver site called jQuery Login Sliderpointing to this folder.

The folder jQuery_Login_Slider contains all the files that you need – the jQuery library file, a CSS file and all the images required.

  1. Open the file signup.html.

This file already contains a link to the jQuery file, and the $(document).ready()function is in place. First, you’ll select the paragraph with the“Login” text.

  1. Click in the empty line after the $(document).ready() function, and thentype

$(‘#open’).

The “Login” text is inside a paragraph tag with the ID of open: <p id=“open” >Login</p>, so the code you just typed will select that element. Now, it’s timeto add an event handler.

  1. Amend the code as shown below:

$(document).ready(function() {

$('#open').click(function() {

}); // end click

}); // end ready

This code adds a click handler, so each time a visitor clicks on the paragraph,something happens. In this case, the form should appear when clicked onceand then disappear when clicked again, appear on the next click, and so on. Inother words, the form toggles between visible and invisible.

jQuery offers threefunctions that will serve this purpose: toggle(), fadeToggle() and slideToggle().

The difference is merely in how the effect looks.

  1. Click in the empty line inside the click function and type:

$('#login form').slideToggle(300);

This code selects the login form, then slides it into view if it currently isn’tvisible, and then slides it back out of view if it is visible.

Finally, you’ll changethe class of the paragraph, so that the “Login” can change appearance using aCSS class style.

  1. Amend the code as shown below:

$(document).ready(function() {

$('#open').click(function() {

$('#login form').slideToggle(300);

$(this).toggleClass('close');

}); // end click

}); // end ready

When you’re inside an event handler, you canuse $(this) to refer to the element that responds to the event. In this case, $(this)refers to the paragraph the visitor clicks on - the $(‘#open’).

ThetoggleClass() function simply adds or removes a class from the element. Likethe other toggle functions, toggleClass() adds the specified class if it’s missing orremoves the class if it’s present. In this example, there’s a class style - .close - ina style sheet on the page.

  1. Save the page signup.htmland preview it in a web browser.

Make sure you click the “Login” paragraph several times to see how it works.

Try out the other toggle effects as well, by replacing slideToggle()with toggle() or fadeToggle().

But what if you want two different effects? One for making the form appear - slidethe form down into view, for example - and a different effect to make it disappear - fade out of view, for example. The above code won’t exactly work, since the click()function doesn’t really let you choose between two different actions. However, jQuery offers a special event - the toggle() event - for dealingwith this kind of situation.

Not to be confused with the toggle() effect - which makesan element appear and disappear - the toggle() event lets you run different code alternatingbetween odd and even clicks. So on the first click, the form appears, andon the second click, it disappears. To make the form slide into view, and then fade out of view on alternating clicks, you can use this code:

$(document).ready(function() {

$('#open').toggle(

function() {

$('#login form').slideDown(300);

$(this).addClass('close');

},

function() {

$('#login form').fadeOut(600);

$(this).removeClass('close');

}

); // end toggle

}); // end ready

A - JavaScript - JQuery Login SliderVersion 1

Page 1 of 4