Web-kreation » Mootools http://web-kreation.com Web & Graphic Design by Jeremie Tisseau, Web Design Consultant at Calleo Mon, 07 May 2012 04:27:42 +0000 en hourly 1 Sponsor list with CSS Sprites and Mootools 1.2 http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/ http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/#comments Mon, 28 Sep 2009 11:44:59 +0000 Jeeremie http://web-kreation.com/?p=1942 jQuery.com or JamieWhinCup. Before we start, have a look for yourself: view demo »]]> Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:

sponsor-list-sample

Preview / Download

sponsor list with CSS sprites and Mootools 1.2

view demoNote: There is a file embedded within this post, please visit this post to download the file.

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn’t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

nav_logo6

The main advantages of using sprites are:

  • Fewer images for the browser to download, which means less http requests.
  • Total images size is generally smaller.
  • Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

css sprites

Include the CSS code below in the head of your html document or in an external style sheet:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!--
#sponsors {
	width: 940px;
	display: block;
	clear: both;
	border: 1px solid #eee;
	padding: 10px 5px;
	margin: 15px auto;
	text-transform: uppercase;
	font-weight: bold;
	color: #666;
}
#sponsors span {
	display: block;
	float: left;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
}
#sponsors a {
	display: block;
	float: left;
	height: 20px;
	padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
	/*mouseover*/
	a:hover.mootools, 
	a:hover.drupal, 
	a:hover.technorati, 
	a:hover.jquery, 
	a:hover.miro, 
	a:hover.mozilla, 
	a:hover.nbc, 
	a:hover.twitter, 
	a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */
-->

In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -20px” to reveal the color version.

(If you want to learn more about sprites, check this excellent article from Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials)

Step 3: the Javascript (js/colorize.js)

I have commented the JS. It should be self-explanatory but if you have any question, ask in the comments below.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

window.addEvent('domready', function(){
 
	var sponsors = $$('#sponsors a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
	sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
		//On mouseenter
		'mouseenter': function(){
			this.setStyle('background-position','0 -20px'); //Reveal color image
			this.get('tween').start('opacity',1); //set opacity to 1
		},		
 
		//on mouseleave
		'mouseleave':function(){
			this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position for grayscale image
			var tween =  this.get('tween');
			tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
		}
 
	});
});

Step 4: Make it happen!

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

?View Code HTML4STRICT
1
2

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"><!--mce:0--></script>
<script src="js/colorize.js" type="text/javascript"><!--mce:1--></script>

Test your page in a browser and you will be all set.

]]> http://web-kreation.com/all/sponsor-list-with-css-sprites-and-mootools-1-2/feed/ 30 Morph Effect on mouseenter/mouseleave with Mootools 1.2 http://web-kreation.com/all/morph-effect-on-mouseenter-mouseleave-with-mootools-12/ http://web-kreation.com/all/morph-effect-on-mouseenter-mouseleave-with-mootools-12/#comments Tue, 16 Dec 2008 08:15:38 +0000 Jeeremie http://web-kreation.com/?p=1189 Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.]]> In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

What you will need

Before we start, you should get a little bit familiar with Element Method: morph and the custom mouseenter and mouseleave events on which this tutorial is based.

Also, you will need to download Mootools 1.2. Note that Mootools 1.2.1 is included in the source files above.

The HTML and CSS code – Creating an unordered list

We are going to create an unordered list (“ul li”) with ID=”posts” in our html document. Each list item (“li”) will contain a post image, title, description and a link to our article.

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="posts">
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>First Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Second Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Third Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More &raquo;</a>
    </li>
</ul>

Our unordered list is created. Let’s now give it its appearance within the CSS code:

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#posts {
    padding: 0;
    margin: 0;
    }
#posts li {
    width: 600px;
    border: 1px solid #eee;
    background-color: #F9F9F9;
    background-image: none;
    float: left;
    clear: both;
    list-style: none;
    margin: 0 0 5px 0;
    padding: 5px;
    }
#posts a {
    text-decoration: none;
    color: #999;
    font-size: 0.85em;
    }
#posts img {
    display: block;
    float: left;
    border: 1px #ccc solid;
    background: white;
    padding: 3px;
    margin: 0 10px 0 0;
    }
#posts h1 {
    padding: 5px 0 0 0;
    margin: 0;
    color: #CC0033;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    }
#posts p {
    margin: 0;
    padding: 0 0 10px 0;
    }

Here’s how it looks so far:

Mootools – The Basics

Before going any further, let me remind you some of the basic functions in Mootools:

$()
This is the base selector of mootools. It selects a single Element.

?View Code JAVASCRIPT
1
2

//select the element with id 'content'
$('content');

$$()
Same function as $() but it selects multiple elements. That’s what we are going to use in our code below.

?View Code JAVASCRIPT
1
2

//Select all li elements in #posts
$$('#posts li');

.setStyle()
Set styles properties

?View Code JAVASCRIPT
1
2

//Set width to 300px.
$('myElement').setStyle('width', '300px');

.addEvent()
Attaches an event listener to a DOM element.

?View Code JAVASCRIPT
1
2
3

$('myElement').addEvent('click', function(){
    alert('clicked!');
});

.addEvents()
The same as .addEvent, but accepts an object to add multiple events at once.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

$('myElement').addEvents({
    'mouseover': function(){
        alert('You mouseovered it!');
    },
    'click': function(){
        alert('You clicked it!');
    }
});

.morph
Allows for the animation of multiple CSS properties at once.

?View Code JAVASCRIPT
1
2

//Change the background color to red
$('myElement').morph({'background-color': 'red'});

The Javascript

We will create a new file clickMe.js including all the javascript code that will change the background color on mouseenter and mouseleave. First, add the code below within the <HEAD> section of your html document:

?View Code HTML4STRICT
1
2

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/clickMe.js" type="text/javascript"></script>

Now, create the clickMe.js file and paste the code below into it:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
});

At this point, the effects are pretty neat but you will notice that only the “Read more” text is clickable and not the whole LI region. We will add a few lines of code at the bottom of our JS file to fix this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

window.addEvent('domready', function(){
	var el = $$('#posts li'),
        color = el.getStyle('backgroundColor');
 
    $$('#posts li').addEvents({
        mouseenter: function(){
            // We set the cursor to pointer so users know they can click this region
            this.setStyle('cursor','pointer');
 
            // Change background color on mouseover
            this.morph({
    	        'background-color': '#FFF2E6',
                'background-image': 'url(images/arrow.jpg)', //Background image
                'background-repeat': 'no-repeat',
                'background-position': [0, 520], //image will move from left to right - Values are in pixels.
                'border': '1px solid #FFD5DF'
            });
		},
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                backgroundColor: color
            });
        }
    });
 
 
    //We retrieve the link location (href) and assign it to LI to make the whole region clickable
    var link = $$('#posts li a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
            // on click, background color and border will turn to a different color
            this.morph({
                'border': '1px solid #eee',
                'background-image': 'none',
                'background-color': '#fff'
            });
        });
    });
});

So now, not only it looks good but you can click anywhere inside a list item to read the full article.

Note: There is a file embedded within this post, please visit this post to download the file. ]]> http://web-kreation.com/all/morph-effect-on-mouseenter-mouseleave-with-mootools-12/feed/ 37 48 incredible Mootools Scripts http://web-kreation.com/all/48-incredible-mootools-sripts/ http://web-kreation.com/all/48-incredible-mootools-sripts/#comments Mon, 06 Oct 2008 00:41:00 +0000 Jeeremie http://web-kreation.com/?p=659 Ever wanted to add some AJAX effects to your site to create a great and interactive looking site. Here’s a list of 48 of the best Mootools scripts around there (e.g. image galleries, lightbox clones, tabbed contents, forms, menus, tables, date pickers…).

MochaUI

MochaUI is a web applications user interface library built on the Mootools JavaScript framework to develop great Web Applications, virtual desktop, modal windows, widget… Maybe the best mootools app I have seen so far. You should definitely check this one!
Mootools version: 1.2

Visit »

Mootools Ext Adapter

An attempt at creating a mootools adapter for the fantastic Ext library by Jack Slocum.
Mootools version: 1.2

Visit »

Milkbox

Another lightbox clone, but this time is written for Mootools 1.2.
Mootools version: 1.2

Visit »

NoobSlide

Nice and easy plugin for image slider. 8 slider samples in total.
Mootools version: 1.11 and 1.2

Visit »

(E)2 Photo Gallery

(E)2 Photo Gallery is a open source gallery. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.
Mootools version: 1.1

Visit »

Pathfusion : Slideshow

Slideshow with transition between images.
Mootools version: 1.11

Visit »

MooSlide

Can call several content sliders on one page.
Mootools version: 1.2

Visit »

SmoothGallery

This gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…
Mootools version: 1.2

Visit »

MooFlow

iTunes like image gallery. It is the script I chose to use to display my showcase on my homepage.
Mootools version: 1.2

Visit »

Viewer – mootools

Slideshow to display image galleries or page sections.
Mootools version: 1.2

Visit »

Slimbox

Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework.
Mootools version: 1.2

Visit »

BarackSlideshow

An elegant, lightweight slideshow script based on Obama’s homepage slideshow.
Mootools version: 1.2

Visit »

SlideShow 2

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.
Mootools version: 1.2

Visit »

PathFusion : multibox

Another lightbox clone that supports images, flash, video, mp3s, html.
Mootools version: 1.2

Visit »

SqueezeBox – Expandable Lightbox

SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your site. It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.
Mootools version: 1.2

Visit »

MediaBox

Using the MooTools javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window.
Mootools version: 1.2

Visit »

Javascript Image Gallery Using Mootools (part 2)

HTML friendly Javascript image gallery using mootools.
Mootools version: 1.2

Visit »

Sliding Tabs

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of the Panic Software’s Coda site.
Mootools version: 1.11

Visit »

Mootabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
Mootools version: 1.1

Visit »

SimpleTabs – Unobtrusive Tabs + Ajax

Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content.
Mootools version: 1.2

Visit »

Custom Form Elements

Style custom form elements to enhance checkboxes, radiobuttons, fileupload, textinput, textarea, select, submit, reset, image.
Mootools version: 1.2

Visit »

FormCheck

Form validator. It will pop up a message when a field is left empty.
Mootools version: 1.2

Visit »

fValidator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.
Mootools version: 1.2

Visit »

ForMoo – Form Tools for Mootools

Another Form Validator.
Mootools version: ??

Visit »

MOOdalBox – an HTML Lightbox

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
Mootools version: 1.2

Visit »

Javascript Fisheye Example

Impressive demo of Javascript Fisheye Menu for Mootools version 1.
Mootools version: 1.0

Visit »

FancyUpload – Swiff meets Ajax

Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar.
Mootools version: 1.11

Visit »

UI TESTS :: Drop Menu

A sweet drop down menu with two levels.
Mootools version: 1.2

Visit »

ddmenu

ddMenu is a simple MooTools-based script to create you’re own context menus.
Mootools version: 1.2

Visit »

Fancy Menu

The well known Fancy Menu from Devthought.
Mootools version: ???

Visit »

Mootools :: Drop Menu example

A drop down menu.
Mootools version: 1.0

Visit »

UvumiTools drop down menu

The UvumiTools Dropdown Menu is a very simple multi-level menu built from an HTML unorderd list.
Mootools version: 1.2

Visit »

Drop Down Menu

Another drop down menu.
Mootools version: ??

Visit »

MenuMatic – Drop Down Menu

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.
Mootools version: 1.2

Visit »

PathFusion : image menu

Horizontal menu, reveals more of the image as you rollover it.
Mootools version: 1.11

Visit »

Calendar (date picker)

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.
Mootools version: 1.2

Visit »

Unobtrusive JavaScript date-picker widgit

Unobtrusive date-picker.
Mootools version: ??

Visit »

Another date picker

Date picker.
Mootools version: ??

Visit »

wysiwyg – mootools

WYSIWYG editor (What You See Is What You Get). The page is in Spanish.
Mootools version: 1.2

Visit »

Pathfusion – Sortable table

Sort and filter tables.
Mootools version: 1.11

Visit »

Mootable

Sortable tables created from standard tables.
Mootools version: ??

Visit »

Reflection.js

Add reflections to your images.
Mootools version: 1.2

Visit »

Autocompleter

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.
Mootools version: 1.2

Visit »

Tipsx3

Add tooltips to your text or links.
Mootools version: 1.2

Visit »

Mootools Split Panes – Work in Progress

Split Panes.
Mootools version: ??

Visit »

iCarousel

iCarousel is an open source (free) javascript tool for creating carousel like widgets.
Mootools version: 1.1

Visit »

MooSocialize

Ajax based social network bookmark widget.
Mootools version: 1.2

Visit »

Pathfusion : Rounded Corner

Creates rounded corners on divs.
Mootools version: 1.11

Visit »

Updates

Update (Oct 14, 2008): I just discovered today a new lightbox clone: SexyLightBox. Pretty neat!
Update (Oct 14, 2008): heySilver – MooTools Edition – Navigation system for Web applications that provides extra functionality to any application.

Don’t know the Mootools framework? Learn it!

MooTools 1.2 for The Non Programmer – Part I Get started with Mootools. The tutorials comes with a lot of Mootools demos to see the scripts in action.

MooTools Basic Tips for Web Designer – (Lesson 1) Another basic (maybe too basic?) Mootools tutorial from Antonio Lupetti to get started.

30 Days of Mootools 1.2 Tutorials – Day 1 – Intro to the Library. Each tutorial comes with some advanced examples and demos. Really interesting.

A MooTools Tutorial :: The “Mootorial”. How-to tutorial on the MooTools library. Become a master!

Mootools: ‘Ajax & XHR’ classes – Solutoire.com

Mootools: JSON explained – Solutoire.com

Understanding Mootools Selectors $, $$, $E and $ES – Solutoire.com

]]> http://web-kreation.com/all/48-incredible-mootools-sripts/feed/ 46 Sliding login/Signup panel using MooSlide (Mootools 1.2) http://web-kreation.com/all/showhide-login-panel-using-mooslide-mootools-1-2/ http://web-kreation.com/all/showhide-login-panel-using-mooslide-mootools-1-2/#comments Thu, 18 Sep 2008 17:51:04 +0000 Jeeremie http://web-kreation.com/?p=473 MooSlideBox 3.2 that will slide-in and close with a nice fade out effect.]]> In my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your WordPress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools 1.2).

Colin complained that the login panel was pushing the content down and asked if it would be possible to display it above all page elements. I replied that it would be possible to do so with MooSlide which uses Mootools 1.2. (Thanks to Frank from ArtViper for this excellent script).

This will be the topic of our tutorial today.

The end result:

Clicking a link will slide-in a login/register form in the middle of the page with a nice bouncing effect. Clicking the “close” button will make the panel disappear with a fade-out effect. I kept the code and styling simple for the sake of this tutorial. You can see a more fancy login form at the bottom.

Preview / Download

Grab a copy of this tutorial. It includes Mootools framework, MooSlideBox and all the images needed for this tutorial:

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

Note: For this tutorial, I have slightly modified the original javascript file (mooSlide2-moo12.js) so the login and signup panel can slide in the middle of the page. I have also removed some code to make it lighter. If you want to download the original version of MooSlide with all the functionalities, go here.

Step 1: Creating the HTML structure

Create a new HTML document and add the following code into it: (Click [+] to expand the code)

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show/hide Login and Signup Panel using MooSlide (Mootools 1.2)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<!-- The main style sheet -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
 
 <!-- Login Panel using MooSlide -->
 <div id="loginPanel" class="mooSlide">
   <form class="left" action="#" method="post">
     <h1 class="padlock">Member Login</h1>
     <label for="log"><b>Username: </b></label>
     <input type="text" name="log" id="log" value="" size="23" />
     <label for="pwd"><b>Password:</b></label>
     <input type="password" name="pwd" id="pwd" size="23" />
     <label><input class="rememberme" name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Remember me</label>
     <input type="submit" name="submit" value="" class="button_login" />
     <label><a href="#">Lost your password?</a></label>
   </form>
 
   <div class="sep"></div>
 
   <form class="right" action="#" method="post">
     <h1>Not a Member? Sign Up!</h1>
     <label for="signup"><b>Username: </b></label>
     <input type="text" name="signup" id="signup" value="" size="23" />
     <label for="email"><b>Email:</b></label>
     <input type="text" name="email" id="email" size="23" />
     <input type="submit" name="submit" value="" class="button_register" />
   </form>
   <div class="clearfix"></div>
 
   <!-- The close button -->
   <div class="loginClose"><a href="#" id="close">&nbsp;</a></div>
 </div> <!-- / Login panel -->
 
 <div id="container">
  <div id="content">
   <a href="http://web-kreation.com" title="Web-Kreation"><img src="http://web-kreation.com/wp-content/themes/web-kreation_v2/images/logo.jpg" alt="Web-Kreation - Home" /></a>
   <!-- If javascript is disabled, display message below: -->
   <noscript><p style="color: red;">You must enable Javascript in you browser in order to try this demo.</p></noscript>
 
   <h1>Try the demo - Click "login" below:</h1>
   <!-- Below the link that will open the login/register form -->
   <p><a href="#" id="login"><b>Login</b></a></p>
  </div><!-- / content -->
  <div class="clearfix"></div>
 </div><!-- / container -->
 
</body>
</html>

<div id="loginPanel" class="mooSlide">...</div> is our login panel. You can place it anywhere on the page, preferably after the <body> tag.

Step2: Styling our login form

Create a new CSS document and save it as mooslide.css. Add the following code into it to style our login panel: (Click [+] to expand the code):

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

/*MooSlide stylesheet*/
 
.mooSlide {
	background-color: #000000;
	padding: 25px 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	color: #FFFFFF;
	border: 1px solid #33CCCC;
	margin: 0 auto;
	text-align: left;
	font-size: 0.85em;
	width: 525px; /* width of our login panel */
}
 
.mooSlide h1 {
	font-size: 1.6em;
	height: 20px;
	padding-top: 22px;
	color: white;
}
 
/* padlock icon from IconsPedia */
/* http://www.iconspedia.com/icon/padlocks-1464.html */
.mooSlide h1.padlock {
	background: url(images/padlock.jpg) no-repeat 0 0;
	padding-left: 35px;
}
 
a {
	text-decoration: none;
	color: #33CCCC;
}
 
a:hover {
	color: white;
}
 
.mooSlide form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
.mooSlide label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 180px;
	display: block;
}
 
.mooSlide .left {
	width: 200px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .right {
	width: 270px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .sep {
	width: 1px;
	height: 180px;
	margin-top: 25px;
	float: left;
	border-right: 1px solid #333;
}
 
.mooSlide input {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
	float: left;
	clear: both;
	display: block;
}
 
.mooSlide input:focus {
	background: #545454;
}
 
.mooSlide input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
.mooSlide input.button_login {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
.mooSlide input.button_register {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_register.jpg) no-repeat 0 0;
}
 
.mooSlide .loginClose {
	display: block;
	position: absolute;
	right: 20px;
	top: 10px;
	width: 26px;
}
 
.mooSlide .loginClose a {
	display: block;
	width: 100%;
	height: 26px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	font-size: 0.9em;
	color: white;
}
 
.mooSlide .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -26px;
}

Step 3: Linking the files together

Link to the stylesheet and to the Javascript files into the <head> section of your HTML document:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10

<head>
...
<link rel="stylesheet" href="mooslide.css" type="text/css" media="screen" />
 
<!-- Mootools - the core -->
<script type="text/javascript" src="js/mootools12.js"></script>
 
<!-- MooSlide  -->
<script type="text/javascript" src="js/mooSlide2-moo12.js"></script>
</head>

Step 4: Adding the Javascript effects

Now that we created our HTML and CSS, we will add into the <head> section of our HTML document the Javascript wich will toggle the login panel with some fancy effects (slide-in, fade-in and Bouncing effect):

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<head>
...
<script language="javascript" type="text/ecmascript">
 window.addEvent('domready',function(){
  var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content: 'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
  //optional: AutoStart the slider on page load:
  //MyLogin.run();
  $('close').addEvent('click', function(e){
    e = new Event(e);
    myLogin.clearit();
    e.stop();
  });
});
 
</script>
 
</head>

The first part (line 5 to 5) will create our panel. If you change “close:false” to “close:true”, the login panel will close every time you click on it. We don’t want that! Otherwise you would not be able to fill the form!

The options:

  • The slider DIV (content: ‘loginPanel’ – <div id="loginPanel" class="mooSlide">...</div>).
  • The slide in speed (slideSpeed)
  • The fade out speed (fadeSpeed)
  • Close on click true / False (close: false)
  • The height of the slider container (height:250)
  • The width of the slider container (width:550)
  • The type of effect used (see the mootools transitions effects here »)
  • The toggler element (toggler:’login’ – <a href="#" id="login">Login</a>)
  • Slide from (from:’top’ – I have removed the option from:’bottom’ in the MooSlide script to keep the code simple)
  • MyLogin.run(); will autostart the slider on page load. I have disabled this option as we don’t want it to slide in on page load.

The second part of the code ($('close').addEvent('click', function(e){ ... }); – line 8 to 12) close the login panel when someone click the “close” button. The HTML code is <a href="#" id="close"></a>.

Final Note

That’s all. Upload the files to your server and try it!

If you want, you can style MooSlide to get a more fancy login form like in the example shown below.

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

This nice slide-in login form will work on any kind of site where you have a login/register form (blogs, forums, CMS…). If you would like to use this script with your WordPress theme, read this article to get started. The code is different but you will get the idea.

Links of Interest

MooSlideBox – The script used in this tutorial.
Build An Incredible Login Form With jQuery – from Nettuts.com.
Build a Toggling Announcement Slider Using MooTools 1.2 – David Walsh blog
Sexy Alert Box – Coders.me

]]> http://web-kreation.com/all/showhide-login-panel-using-mooslide-mootools-1-2/feed/ 57 Implement a sliding login panel in to WordPress with Mootools http://web-kreation.com/all/add-a-showhide-login-panel-to-your-wordpress-theme-using-mootools/ http://web-kreation.com/all/add-a-showhide-login-panel-to-your-wordpress-theme-using-mootools/#comments Tue, 12 Aug 2008 11:13:35 +0000 Jeeremie http://web-kreation.com/?p=398 "Show/hide a nice Login Panel using Mootools 1.2". In this tutorial, we will now see how to add the show/hide login panel into your Wordpress theme, pretty much like what I did on top of this page (click "login" on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done. ]]> This is the second part of my tutorial “Sliding Login Panel With Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your WordPress theme, pretty much like what I did on top of this page (click “login” on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done.

The end result:

Here’s what we are going to achieve today:
Show/hide login panel in WordPress using Mootools 1.2

Step 1: The scripts and images

If you haven’t done it yet, download the source code on my previous tutorial:

Note: There is a file embedded within this post, please visit this post to download the file.

Copy the “js” folder (all of it!) and paste it in your theme folder (for the sake of this tutorial, we will use the “defaut” WordPress theme). The path to your “js” folder should be something like http://yoursite.com/wp-content/themes/default/js/.

Copy all the images and save them in the wp-content/themes/default/images/.

Step 2: The Javascript

Open header.php and add the code below in the <head> section:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8

<head>
...
<!-- Mootools CORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>
<!-- Mootools MORE -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-more.js" charset="utf-8"></script>
<?php wp_head(); ?>
</head>

Step 3: The HTML/PHP

Now add this code right after the <body> tag (click on [+] to expand the code):

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<body>
<!-- Login -->
<div id="login">
	<div class="loginContent">
		<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
			<label for="log"><b>Username: </b></label>
			<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
			<label for="pwd"><b>Password:</b></label>
			<input class="field" type="password" name="pwd" id="pwd" size="23" />
			<input type="submit" name="submit" value="" class="button_login" />
			<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
		</form>
		<div class="left">
        <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
		<div class="right">Not a member? <a href="<?php bloginfo('url') ?>/wp-register.php">Register</a> | <a href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a></div>
	</div>
	<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> <!-- /login -->
 
<!-- Start top Navigation -->
<div id="top">
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) {  ?>
<!-- If users logged in, display the dashboard navigation: -->
<!-- Admin navigation -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/">Dashboard</a></li>
 
	<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
	<?php endif // $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> <!-- / Admin Navigation -->
 
<?php } elseif (get_option('users_can_register')) { ?>
<!--Toggle effect (show/hide Login form) -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fx.slide.js"></script>
 
	<!-- ... else, display user navigation below: -->
	<!-- login -->
	<ul class="login">
		<li class="left">&nbsp;</li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#">Log In</a></li>
	</ul> <!-- / login -->
<?php } ?>
</div> <!-- / top -->

I should explain a little bit the code before we go on:

  • If you are logged in as admin, you will see the full navigation. (This is done with the code <?php if ( $user_level >= 1 ) : ?> ... <?php endif ?>. Anything you put within this code will only be seen by the admins).
  • If you registered to the site as a subscriber, you will only see the links “Dashboard”, “My Profile” and “log Out”.
  • If you are not logged in (which will definitely happen if you are a first time visitor), you will only see “Hello Guest!” and “Log In”. (Register to this site on top of this page if you want to see how it works).

If you wish to add more links to the top navigation, log in WordPress and over a link with your mouse (for example: Settings). Look at the url in the status bar (e.g. http://yoursite.com/wp-admin/options-general.php). Copy only /wp-admin/options-general.php and paste it in the code, like this:

?View Code HTML4STRICT
1
2
3
4
5

<?php if /* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">Settings</a></li>
...
<?php endif // $user_level >= 1 ?>

You can add as many links as you want. The only limit is the width of your site or your screen resolution.

Step 4: The CSS

Open style.css in a text editor and paste at the bottom the code below (click on [+] to expand the code):

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

/* Login Panel */
#top {
  	background: url(images/login_top.jpg) repeat-x 0 0;
	height: 38px;
	position: relative;
}
 
#top ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 38px;
	width: auto;
  	font-weight: bold;
	line-height: 38px;
	margin: 0;
	right: 150px;
  	color: white;
	text-align: center;
  	background: url(images/login_r.jpg) no-repeat right 0;
	padding-right: 45px;
}
 
#top ul.login li.left {
  	background: url(images/login_l.jpg) no-repeat left 0;
  	height: 38px;
	width: 45px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
#top ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
	color: #33CCCC;
}
 
#top ul.login li a:hover {
	color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
	width: 100%;
	color: white;
	background: #1E1E1E;
	overflow: hidden;
	position: relative;
	z-index: 3;
	height: 0;
	font-style: 1em;
}
 
#login a {
	text-decoration: none;
	color: #33CCCC;
}
 
#login a:hover {
	color: white;
}
 
#login .loginContent {
	width: 550px;
	height: 80px;
	margin: 0 auto;
	padding-top: 25px;
	text-align: left;
}
 
#login .loginContent .left {
	width: 120px;
	float: left;
	padding-left: 65px;
	font-size: 0.95em;
}
 
#login .loginContent .right {
	width: 290px;
	float: right;
	text-align: right;
	padding-right: 65px;
	font-size: 0.95em;
}
 
#login .loginContent form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
#login .loginContent input.field {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
}
 
#login .loginContent input:focus.field {
	background: #545454;
}
 
#login .loginContent input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
#login .loginContent input.button_login {
	width: 47px;
	height: 20px;
	cursor: pointer;
	border: none;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
	display: block;
	position: absolute;
	right: 15px;
	top: 10px;
	width: 70px;
	font-size: 0.9em;
	text-align: left;
}
 
#login .loginClose a {
	display: block;
	width: 100%;
	height: 20px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	color: white;
}
 
#login .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 5: WordPress Settings

You will need to follow one more step before you are done. Log in to WordPress, select “settings”, then scroll down to “membership” and select “Anyone can register”. Click save and you should be done. Open your site in your browser and you should see the top navigation. Click on “login” to slide the panel into view.

Done!

Troubleshooting

Not working yet? There could be a couple of things that would stop the script from executing. Here’s a few questions that might help you debug it:

  • Have you enabled Javascript in your browser?
  • Do you use another Ajax framework on your site (Jquery for example)?
  • Is Mootools compatible with your plugins?
  • Is the path to the javascript correct? (E.g. <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools-1.2-core-yc.js" charset="utf-8"></script>)
  • Do you use a modern browser such as Firefox 3, Opera or Safari? If not, maybe it is time to upgrade! This script works fine in Firefox 2+, IE6+, Safari, Opera, Netscape. However, I didn’t test it on a Mac or Linux.

Update

In answer to Thomas’ comment, I explain below how to add avatar next to “My Profile” in the navigation after user logged in. Here’s how to do:

Replace the code below in our script…

?View Code HTML4STRICT
1
2

<li>|</li>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">My Profile</a></li>

… by:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10

<li>|</li>
<li><a style="padding-left: 40px;" href="<?php bloginfo('url') ?>/wp-admin/profile.php">
  <?php global $user_email, $userdata;
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '<span class="NavAvatar">' . get_avatar($user_email, '16').'</span>'; //display user's Avatar
      echo($userdata->user_login); //Display user's name
    }
  ?>
</a></li>

Add this code into style.css:

?View Code CSS
1
2
3
4
5
6
7

span.NavAvatar {
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 1px;
	border: 1px #000 solid; /*Change border color*/
}

Last, add “position:relative;” to “#top ul.login li”:

?View Code CSS
1
2
3
4
5
6
7
8
9

#top ul.login li {
 	position: relative;
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}

Here’s a screenshot of an avatar display on this site after you logged in:

Thanks Thomas for the Avatar’s idea. That was a good one!

]]> http://web-kreation.com/all/add-a-showhide-login-panel-to-your-wordpress-theme-using-mootools/feed/ 108 Sliding Login Panel with Mootools 1.2 http://web-kreation.com/all/nice-login-and-signup-panel-using-mootools-12/ http://web-kreation.com/all/nice-login-and-signup-panel-using-mootools-12/#comments Sun, 03 Aug 2008 17:50:46 +0000 Jeeremie http://web-kreation.com/?p=384 "Night Transition"). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2. And next week, we will see how to use this script in Wordpress 2.5+ to display the login form on the front page.]]> Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2. And next week, we will see how to use this script in WordPress 2.5+ to display the login form on the front page.

Preview / Download

First, check out the
Show/hide login panel using Mootools 1.2

demoNote: There is a file embedded within this post, please visit this post to download the file.

Step 1: The structure

Before we get to the code, I would like to illustrate the HTML structure used in this script:

HTML structure of the login panel

The panel (<div id=”login”>) is hidden by default. When someone click “Login”, the login panel slide into view. If you click once more on “login” or on the button “Close Panel”, the panel will “toggle” or slide out.

Step 2: HTML Code

Create a new HTML page and save it as index.html in your root folder. Copy the code below and paste it into this page:

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Show/hide Login and Signup Panel using Mootools 1.2</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
</head>
<body>
 <div id="login">
  <div class="loginContent">
   <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
   </form>
   <div class="left">
     <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
   <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
   <ul class="login">
     <li class="left">&nbsp;</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
   </ul>
  </div>
 
  <div class="clearfix"></div>
 
  <div id="content">
   <p>The content of your page!</p>
  </div>
  <div class="clearfix"></div>
 </div>
</body>
</html>

Step3: The CSS

Create a new cascading style sheet in your web editor. Save it as fx.slide.css in your root folder. Copy the code below and paste it into your css page (Click on [+] to expand the code):

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

/* Login Panel */
#top {
 background: url(images/login_top.jpg) repeat-x 0 0;
 height: 38px;
 position: relative;
}
 
#top ul.login {
 display: block;
 position: relative;
 float: right;
 clear: right;
 height: 38px;
 width: auto;
 font-weight: bold;
 line-height: 38px;
 margin: 0;
 right: 150px;
 color: white;
 font-size: 80%;
 text-align: center;
 background: url(images/login_r.jpg) no-repeat right 0;
 padding-right: 45px;
}
 
#top ul.login li.left {
 background: url(images/login_l.jpg) no-repeat left 0;
 height: 38px;
 width: 45px;
 padding: 0;
 margin: 0;
 display: block;
 float: left;
}
 
#top ul.login li {
  text-align: left;
 padding: 0 6px;
 display: block;
 float: left;
 height: 38px;
 background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
 color: #33CCCC;
}
 
#top ul.login li a:hover {
 color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 height: 0;
}
 
#login a {
 text-decoration: none;
 color: #33CCCC;
}
 
#login a:hover {
 color: white;
}
 
#login .loginContent {
 width: 550px;
 height: 80px;
 margin: 0 auto;
 padding-top: 25px;
 text-align: left;
 font-size: 0.85em;
}
 
#login .loginContent .left {
 width: 120px;
 float: left;
 padding-left: 65px;
 font-size: 0.95em;
}
 
#login .loginContent .right {
 width: 290px;
 float: right;
 text-align: right;
 padding-right: 65px;
 font-size: 0.95em;
}
 
#login .loginContent form {
 margin: 0 0 10px 0;
 height: 26px;
}
 
#login .loginContent input.field {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
}
 
#login .loginContent input:focus.field {
 background: #545454;
}
 
#login .loginContent input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}
 
#login .loginContent input.button_login {
 width: 47px;
 height: 20px;
 cursor: pointer;
 border: none;
 background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
 display: block;
 position: absolute;
 right: 15px;
 top: 10px;
 width: 70px;
 font-size: 0.8em;
 text-align: left;
}
 
#login .loginClose a {
 display: block;
 width: 100%;
 height: 20px;
 background: url(images/button_close.jpg) no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}
 
#login .loginClose a:hover {
 background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 4: The Javascript

First, you will need to download Mootools core. So go visit this page and download Mootools 1.2 with YUI Compression. Create a new folder in your root directory and name it “js“. Save “mootools-1.2-core-yc.js” into it.

Now go to the “More Builder” page and select Fx.Slide. Scroll down to the bottom of the page and select “YUI Compressor” which is the default compression. Click “Download” and save the file (which name should be “mootools-1.2-more.js”) into your js/ folder.

Now, create a new Javascript document. Save it as fx.slide.js (should I tell you to save it into your js/ folder?). Here’s the code:

?Download download.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
 
    //Hide login panel when you click the button close on the upper-right corner of the login panel
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut(); //Hide login panel
		e.stop();
	});
});

Did you notice “toggleLogin” and “closeLogin”? They define the IDs used in our HTML code (<a id="toggleLogin" href="#">Log In</a> and <a href="#" id="closeLogin">Close Panel</a>). The first one add a “toggle” effect to our “login” link in the top tab. The second one add a “slide out” effect to our button “Close Panel”.

The line var mySlide = new Fx.Slide('login').hide(); will start the panel in a closed sate (.hide();).

You can read the Mootools documentation to get the most out of the Class:Fx.Slide.

You can also use the Class:Fx.Transition to add some nice transitions to your login panel such as a bouncing effect (Bounce.easeInOut) when the panel slide in and out:

?View Code JAVASCRIPT
1

var mySlide = new Fx.Slide('login', { duration:800, transition: Fx.Transitions.Bounce.easeInOut}).hide();

Check the documentation here.

Step 5: Insert Scripts into the <head> section

Add the following lines in the <head> section of your page and you should be done:

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9

<head>
[...]
 <!-- Mootools - the core -->
 <script src="js/mootools-1.2-core-yc.js" type="text/javascript"><!--mce:0--></script>
 <!--Toggle effect (show/hide login form) -->
 <script src="js/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script>
 <script src="js/fx.slide.js" type="text/javascript"><!--mce:2--></script>
 <!-- END Fx.Slide -->
</head>

Upload all your files and folder to your web server and open index.html in your browser. Everything should work fine. Don’t forget to enable Javascript in your browser.

demoNote: There is a file embedded within this post, please visit this post to download the file.

Conclusion

This tutorial explained you how to add some Mootools effects to your web pages to show/hide a login panel. Next week, we will see a real world application as I will explain you how to use this script to show/hide your WordPress login form on your front page (click “login” on the upper-right corner of this page to see an example).

So come back soon or subscribe to RSS to get notified when I publish the next post.

Update: read Add a show/hide login panel to your WordPress theme using Mootools »

]]> http://web-kreation.com/all/nice-login-and-signup-panel-using-mootools-12/feed/ 177