Web-kreation » AJAX / Javascript

Sponsor list with CSS Sprites and Mootools 1.2

Jeeremie — Mon, 28 Sep 2009 11:44:59 +0000

Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:

Preview / Download

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

<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:

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:

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

^?View Code CSS

</script>
<script src="js/colorize.js" type="text/javascript"></script>

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

Hidden jQuery Drop Down Menu for Minimalist Design

Jeeremie — Tue, 08 Sep 2009 10:46:06 +0000

When I work for my clients, I always try to figure out the best way to organize content and hide elements that doesn’t require immediate action to clean up the page a little bit while making sure to give the best user experience.

A while ago, I started to sketch a few menus in my notebook. I wanted a menu that would be minimalist – almost invisible – but still accessible, some kind of button or maybe a link that would open the menu. I started to think where would be the best place to put it. In the upper left corner? The right one? Next to the logo? And why not the logo or title itself?! That’s it. Users are most likely to hover the logo or header, right? That made the most sense.

That was now time to roll my sleeves up and see how to implement this. After a few hours and some headaches, I came up with a nice hidden jQuery Drop Down Menu.

Here’s how it works. When user put his cursor over the header, the script hides the logo/title and reveals the navigation along with a search bar (not functional in this demo). When user leaves the menu, navigation fades out after 3 seconds and logo/title comes back.

Preview/Download

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.

Screenshots

Navigation – initial state:

Navigation – on mouseenter:

Step 1: HTML

We need to create two containers inside our header: “nav-disabled” and “nav-enabled”. By default, “nav-enabled” is hidden. This will be the container for our navigation.

^?View Code HTML4STRICT


<div id="header" colla="-">
	<div class="nav-disabled">
		[LOGO OR TITLE HERE]
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>

Add your logo. For this example, we are only going to use plain text but feel free to replace it by anything you want.

^?View Code HTML4STRICT


<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>↑ MENU</small>
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>

Finally, create an unordered list for your top navigation. Then simply nest another unordered list for your sub-navigation. My jQuery script only allows for a two level navigation which I think should be enough in most cases.

^?View Code HTML4STRICT


<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>↑ MENU</small>
	</div>
	<div class="nav-enabled">
		<ul class="nav">
			<li>Navigation →</li>
			<li><a href="http://web-kreation.com">Home</a></li>
			<li><a href="http://web-kreation.com/index.php/services">Services</a>
				<ul class="dropdown">
					<li>↓</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/category/portfolio">Portfolio</a></li>
			<li><a href="http://web-kreation.com/index.php/blog">Blog</a></li>
			<li><a href="http://web-kreation.com/index.php/about">About</a>
				<ul class="dropdown">
					<li>↓</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/contact">Contact</a></li>
			<li><a href="http://web-kreation.com/index.php/articles/hidden-jquery-drop-down-menu-for-minimalist-design">Go Back to Article »</a></li>
		</ul>
		<small>Pretty cool this menu, huh? You could replace the title by your own logo, an image... anything you want really. This menu will fade out after 3 seconds. Seach bar is not functional. This is just a demo.</small>
		<form method="get" id="search" action="">
			<input class="search-input" type="text" value="" />
			<input class="search-submit" type="submit" value="SEARCH" />
		</form>
	</div>
</div>

That’s it for the HTML.

Step 2: CSS (minimalist-menu.css)

Next, style your header and navigation with CSS.

^?View Code CSS

body {
    font-size: 80%;
}
 
#header {
	padding: 40px 40px 0;
	clear: both;
  	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
#header a {
	text-decoration: none;
}
 
#header small {
	color: #999;
	font-size: 0.8em;
	margin-top: 5px;
	float: left; 
	width: 600px;
	padding-left: 10px;
}
 
#header .nav-disabled, #header .nav-enabled {
	display: block;
	clear: both;
	height: 70px; /* Fixed height to make sure navigation doesn't flick on mouseleave - set it to anything you want */
}
 
#header .nav-disabled h1 {
	background: url('../images/ui-menu-disable.png') no-repeat 6px 3px;
	padding-left: 26px;
	display: block;
	height: 21px;
	padding-top: 3px;
	color: #709A71;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
ul.nav {
  	display: block;
	border: 1px solid #E6E6E6;
	text-transform: uppercase;
	height: 22px;
	background: #F3F3F3 url('../images/ui-menu.png') no-repeat 5px 3px;	
	padding-left: 20px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 
ul.nav li {
	display: block;
	float: left;
	height: 12px;
	padding: 5px 10px;
	border-right: 1px solid #E6E6E6;
	color: #666; 
	position: relative;  
}
 
ul.nav li a {
	color: #666; 
}
 
ul.nav li a:hover {
	color: #333; 
	text-decoration: none;
}
 
/* Subnav */
ul.nav li.btn a {
	background: url(../images/subnav_btn.gif) no-repeat right 4px; /* add arrows next links when subnav exists */ 
	padding-right: 20px;
}
 
ul.nav li.btn a:hover, ul.nav li.hover {
	background-position: right -35px;
}
 
ul.nav li ul.dropdown {
	display: none;
	list-style: none;
	position: absolute;
	float: left;
	left: 0; 
	top: 22px;
	width: 160px;
	background: #F3F3F3;
	margin: 0; 
	padding: 0;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
}
 
ul.nav li ul.dropdown li {
	margin: 0; 
	padding: 0;
	border-top: 1px solid #E6E6E6;
	clear: both;
	height: 14px;
	width: 139px;
	padding: 5px 10px;
	display: block;
}
 
ul.nav li ul.dropdown li a {
	text-transform: none;
	background: transparent!important;
}
 
html ul.nav li ul.dropdown li a {
	float: left;
}
/* Search Form */
#header #search {
    background: transparent url('../images/search.gif') no-repeat 0 0;
    height: 20px;
    width: 240px;
    float: right;
	margin-top: 5px;
	padding-right: 10px;
}
 
#header .search-input, #header .search-submit {
    background: transparent;
    border: none;
    float: left;
	color: #999 !important;
}
 
#header .search-input {
    padding: 2px 6px;
    width: 170px;
}
 
#header .search-submit {
    cursor: pointer;
    padding: 3px 0;
    width: 56px;
    font: 0.85em Georgia, "Times New Roman", Times, serif;
}

Step 3: JS (minimalist-menu.js)

This menu requires jQuery 1.3.2 and jquery.event.hover.js from Three Dub Media.

Below is the code that will do all the magic:

^?View Code JAVASCRIPT

// ##################################
//Variables
// YOU CAN EDIT BELOW
 
var navFadeOutDelay = 3000; // Set delay for drop down to slide down (in ms)
var slideDownDelay = 200; // Set delay for drop down to slide down (in ms)
 
 
// DO NOT EDIT BELOW THIS LINE
// ##################################
 
 
 
$(document).ready(function(){
 
	// Plugin: Delay
	// http://tech.apt.no/2009/04/01/delay-in-jquery/
	(function($){
		jQuery.fn.delay = function(millis,callBack){
			var object = $(this);
			$.extend(object,{callBack:callBack});
			return window.setTimeout(function() {
				object.callBack();
				return object;
			}, millis);
		}
	})(jQuery);
 
 
	// Navigation:
	// requires jquery.event.hover-1.0 plugin : http://blog.threedubmedia.com/2008/08/eventspecialhover.html 	
	var nav = {count:0};
 
	$("#header .nav-enabled").hide(); //hide navigation on page load. 
	$(function(){
		$('#header').bind('hover',function(){ // On mouseenter, hide title and show navigation
	        $("#header .nav-disabled").hide();
	        $("#header .nav-enabled").fadeIn();
			nav.count += 1;
		}).bind('hoverend',function(){ // On mouseleave, fade out navigation and show title
			var tmp = nav.count;
			$("#header .nav-enabled").delay(navFadeOutDelay, function(){ // Delay: wait X ms before navigation FadeOut                
                if (tmp == nav.count) { // prevent delay from firing if user hovers navigation before the end of delay
			        $(this).fadeOut('slow', function(){ //Callback					
						$("#header .nav-disabled").show(); 
					}); 
                }				
		    });   
		});
	});
 
 
	// Drop Down Navigation
	$("ul.dropdown").parent().addClass("btn"); // hide sub-navigation on page load and adds class to li in topnav
 
	$("ul.nav li.btn").hover(function() { 
		$(this).find("ul.dropdown").slideDown(slideDownDelay).show(); //Slide subnav down on mouseenter
	}, function(){
		$(this).find("ul.dropdown").slideUp('slow'); //Slide subnav up on mouseleave
	}); 
 
 
});

Preview/Download

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

Conclusion

The menu is really simple and should be easy to customize as it only makes use of CSS (no images except for the menu icon). I have added rounded corners to the demo with CSS3. However, this is only supported by Firefox, Chrome and Safari. If your site needs to be CSS compliant, I recommend you remove the CSS code from line 50 to 53 (in CSS code above).

This menu has been tested in IE6+, FF3.5, Opera 10, Safari 4, Chrome 2 in Windows XP only. If you find a bug or have a suggestion, concern, feedback… leave your comments below and I will make my best to answer you.

The template used for this demo was inspired from my Pignews theme (coming soon!). Use this template as you wish but just please give me credits.

Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Jeeremie — Tue, 07 Apr 2009 12:08:51 +0000

About one week ago, I introduced the Nice & Clean Sliding Login Panel built with jQuery which was a redesigned of my popular Mootools sliding panel. Today, we will see how to implement it in WordPress 2.7+. Please note I am not going to cover any previous version of WordPress in this tutorial.

Before I give you the code, let me briefly explain you what we want to achieve.

If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

Once user is logged in, we will change panel content to show a dashboard menu with a short “Welcome Back” message. This is what our code will look like:

^?View Code PHP


<div id="toppanel">
 
	global $user_identity, $user_ID;	
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) { 
?>
 

 
 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
 

 
 } ?>	
div>

Simple, isn’t it?

WordPress, since version 2.0, introduced user roles and capabilities. To take advantage of this, we are going to use the current_user_can() function to control what links users can or cannot see depending on the role attributed to them. This is done like this:

^?View Code PHP

1
2
3

 if ( current_user_can('level_10') ) : ?>
		
 endif ?>

“level_10″ is the highest level in WordPress and gives user full control and access to the site. This level is reserved to the owner of the site and admins. You can read more about user roles here »

Below is a screenshot of the panel display for admins (‘level_10′):

Below is a screenshot of the panel display for authors (‘level_2′):

Below is a screenshot of the panel display for subscibers (‘level_0′):

The last screenshot looks really empty because Subscribers have only a limited access to the dashboard. You can try to fill the panel with some extra content for subscribers and contributors if you don’t want your panel to look so empty. It is up to you.

STEP 1: The HTML code

(Note: For the sake of this tutorial, I am going to implement the script into the default WordPress 2.7 theme (wp-content/themes/default).)

Open header.php in your text editor or log in to your dashboard and navigate to Appearance > Editor and select this file. Find the code below and delete it:

^?View Code PHP

1
2
3

 wp_head(); ?>
head>
<body>

Replace it by this:

^?View Code PHP

 wp_head(); ?>
 
  	
  	
	
 
    
	<script src="/js/jquery-1.3.2.min.js" type="text/javascript">script>
	
	<script src="/js/slide.js" type="text/javascript">script>
 
head>
<body>

<div id="toppanel"> 
 
	global $user_identity, $user_ID;	
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) { 
?>
	<div id="panel">
		<div class="content clearfix">
			<div class="left border">
				<h1>Welcome back  echo $user_identity ?>h1>
				<h2>Headlineh2>				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.p>
				<h2>Dashboardh2>
				<ul>					
					<li><a href="/wp-admin/index.php">Go to Dashboarda>li>
				ul>
			div>
			<div class="left narrow">			
				<h2>My Accounth2>				
				<ul>					
					<li><a href="/wp-admin/index.php">Global Dashboarda>li>
					<li><a href="/wp-admin/profile.php">Edit My Profilea>li>
					 if ( current_user_can('level_1') ) : ?>
						<li><a href="/wp-admin/edit-comments.php">Commentsa>li>
					 endif ?>
	        		<li><a href="" rel="nofollow" title="">php _e('Log out'); ?>a>li>
				ul>	
				 if ( current_user_can('level_10') ) : ?>		
				<h2>Appearanceh2>				
				<ul>						
					<li><a href="/wp-admin/themes.php">Themesa>li>
					<li><a href="/wp-admin/widgets.php">Widgetsa>li>
					<li><a href="/wp-admin/theme-editor.php">Theme Editora>li>
				ul>
				 endif ?>
			div>
			 if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">			
				<h2>Postsh2>				
				<ul>					
					<li><a href="/wp-admin/post-new.php">New Posta>li>
					<li><a href="/wp-admin/edit.php">Edit Postsa>li>
				 if ( current_user_can('level_3') ) : ?>
					<li><a href="/wp-admin/edit-tags.php">Tagsa>li>
					<li><a href="/wp-admin/categories.php">Categoriesa>li>
				 endif ?>
				ul>
				 if ( current_user_can('level_10') ) : ?>		
				<h2>Pluginsh2>				
				<ul>						
					<li><a href="/wp-admin/plugins.php">Pluginsa>li>
					<li><a href="/wp-admin/plugin-install.php">Install a Plugina>li>
					<li><a href="/wp-admin/plugin-editor.php">Plugin Editora>li>
				ul>
				 endif ?>
			div>
			 endif ?>
			 if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">
				 if ( current_user_can('level_3') ) : ?>	
				<h2>Pagesh2>				
				<ul>		
					<li><a href="/wp-admin/post-new.php">New Pagea>li>
					<li><a href="/wp-admin/edit-pages.php">Edit Pagesa>li>
				ul>
				 endif ?>			
				<h2>Libraryh2>				
				<ul>					
					<li><a href="/wp-admin/upload.php">Librarya>li>
					<li><a href="/wp-admin/media-new.php">Add Newa>li>
				ul>
				 if ( current_user_can('level_3') ) : ?>		
				<h2>Usersh2>				
				<ul>						
					<li><a href="/wp-admin/users.php">Author &amp; Usersa>li>
					<li><a href="/wp-admin/user-new.php">Add Newa>li>
				ul>
				 endif ?>
			div>
			 endif ?>
			 if ( current_user_can('level_10') ) : ?>
			<div class="left narrow">			
				<h2>Settingsh2>				
				<ul>						
					<li><a href="/wp-admin/options-general.php">Generala>li>
					<li><a href="/wp-admin/options-writing.php">Writinga>li>
					<li><a href="/wp-admin/options-reading.php">Readinga>li>
					<li><a href="/wp-admin/options-discussion.php">Discussiona>li>
					<li><a href="/wp-admin/options-media.php">Mediaa>li>
					<li><a href="/wp-admin/options-privacy.php">Privacya>li>
					<li><a href="/wp-admin/options-permalink.php">Permalinksa>li>
					<li><a href="/wp-admin/options-misc.php">Miscellaneousa>li>
				ul>
			div>
			 endif ?>
		div>
	div> 	
 
    	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;li>
	    	
	        <li><a href="" rel="nofollow" title="">php _e('Log out'); ?>a>li>
			<li class="sep">|li>
			<li id="toggle">
				<a id="open" class="open" href="#">Show Dashboarda>
				<a id="close" style="display: none;" class="close" href="#">Close Panela>	
			li>
	    	<li class="right">&nbsp;li>
		ul> 
	div> 
 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
	<div id="panel">
		<div class="content clearfix">
			<div class="left border">
				<h1>Welcome to Web-Kreationh1>
				<h2>Sliding login panel Demo with jQueryh2>		
				<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!p>
				<h2>Downloadh2>
				<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/articles/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27" title="Download">article &raquo;a>p>
			div>
			<div class="left">
				
				<form class="clearfix" action="/wp-login.php" method="post">
					<h1>Member Loginh1>
					<label class="grey" for="log">Username:label>
					<input class="field" type="text" name="log" id="log" value="$user_login), 1) ?>" size="23" />
					<label class="grey" for="pwd">Password:label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember melabel>
        			<div class="clear">div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<input type="hidden" name="redirect_to" value="$_SERVER['REQUEST_URI']; ?>"/>
					<a class="lost-pwd" href="/wp-login.php?action=lostpassword">Lost your password?a>
				form>
			div>
			<div class="left right">
			 if (get_option('users_can_register')) : ?>	
				
				<form name="registerform" id="registerform" action="" method="post">
					<h1>Not a member yet? Sign Up!h1>	
					<label class="grey" for="user_login">php _e('Username') ?>label>
					<input class="field" type="text" name="user_login" id="user_login" class="input" value="$user_login)); ?>" size="20" tabindex="10" />
					<label class="grey" for="user_email">php _e('E-mail') ?>label>
					<input class="field" type="text" name="user_email" id="user_email" class="input" value="$user_email)); ?>" size="25" tabindex="20" />
					 do_action('register_form'); ?>
					<label id="reg_passmail">php _e('A password will be e-mailed to you.') ?>label>
					<input type="submit" name="wp-submit" id="wp-submit" value="" class="bt_register" />
				form>
			 else : ?>
				<h1>Registration is closedh1>
				<p>Sorry, you are not allowed to register by yourself on this site!p>
				<p>You must either be invited by one of our team member or request an invitation by email at <b>info {at} yoursite {dot} comb>.p>
 
				
				<p style="border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;margin-top:10px;color:white"><em>Note: If you are the admin and want to display the register form here, log in to your dashboard, and go to <b>Settingsb> > <b>Generalb> and click "Anyone can register".em>p>
			 endif ?>			
			div>
		div>
	div> 	
 
    	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;li>
	    	
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Registera>
				<a id="close" style="display: none;" class="close" href="#">Close Panela>			
			li>
	    	<li class="right">&nbsp;li>
		ul> 
	div> 			
 } ?>	
div>

STEP 2: Copy the CSS in style.css

Expand the code below, copy it and save it at the bottom of your theme stylesheet (e.g. wp-content/themes/default/style.css):

^?View Code CSS

/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
 
#panel {
	width: 100%;
	height: 280px;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}
 
#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel p {
	margin: 5px 0;
	padding: 0;
}
 
#panel a {
	text-decoration: none;
	color: #15ADFF;
}
 
#panel a:hover {
	color: white;
}
 
#panel a-lost-pwd {
	display: block;
	float: left;
}
 
#panel ul {
	margin: 0 0 5px 0;
	padding: 0;
	line-height: 1.6em;
	list-style: none;
}
 
#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}
 
#panel .content .left {
	width: 280px;
	float: left;
	margin-bottom: 25px;
	padding: 0 15px;
	border-right: 1px solid #333;
	min-height: 220px;
}
 
#panel .content .border {
	border-left: 1px solid #333;
}
 
#panel .content .narrow {
	width:120px !important;
}
 
#panel .content form {
	margin: 0 0 10px 0;
}
 
#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}
 
#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}
 
#panel .content input:focus.field {
	background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}
 
#panel .content input.bt_login {
	width: 74px;
	background: transparent url(images/bt_login.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(images/bt_register.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
}
 
/* Panel Tab/button */
.tab {
  	background: url(images/tab_b.png) repeat-x 0 0;
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}
 
.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
}
 
.tab ul.login li.left {
  	background: url(images/tab_l.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li.right {
  	background: url(images/tab_r.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url(images/tab_m.png) repeat-x 0 0;
}
 
.tab ul.login li a {
	color: #15ADFF;
}
 
.tab ul.login li a:hover {
	color: white;
}
 
.tab .sep {color:#414141}
 
.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
}
 
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}

Note: I have set font-size to 130% for #toppanel because the panel font was too small in the Default theme. If you use this code with another theme and font is too big, modify this value or just delete “font-size: 130%;”.

STEP 3: Add the Javascript files & Images to your theme.

Click here to download the sliding panel from my previous article. When prompted save Sliding_login_panel_jquery.zip on your desktop. Uncompress the file (with 7zip for example) and copy the “js” folder (all of it) into wp-content/themes/default/. Copy all the images from the zip file and save them in wp-content/themes/default/images/.

By now, if you saved the files to the right folders and added the HTML and CSS code to the right files, the panel should slide as expected. To test your sliding panel, you can create different users in Users > Add New and select a different role for each. Then sign in with the different accounts you just created to see how the panel behaves.

Let’s now take care of the register form.

STEP 4 (Optional): Register form

If you want the register form to appear in your panel, you will need to follow one last step. Go to Settings > General and check “Anyone can register”. If you don’t check this box, this is what you will see:

When you succesfully register or get an error you will be redirected to http://yoursite.com/wp-login.php?action=register. I would have prefered to handle errors and messages directly from the sliding panel but that was not possible without adding a lot of code to it.

I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting.

If you know something interesting about it, let me know.

Not Working. Help!

You followed all the steps above but it didn’t work. Don’t worry! I have bundled this jQuery Sliding Panel with the default theme. Just download it below and install it as you would normally do for any theme:

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

If it still doesn’t work, make sure jQuery doesn’t conflict with another AJAX library (Mootools, Prototype…).

Conclusion

I tried to make this tutorial as simple as I could for you to implement this script into your WordPress theme. However, depending on the theme you use, you might run into a problem. If so, ask your questions below and I will try to help you.

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

It seems this sliding panel has inspired many people. Some of them even have created some plugins for WordPress, Drupal…:

Sliding Panel: WordPress Plugin by Justin Tadlock.
SuperSlider-Login by Twincascos.
Making A Cool Login System With PHP, MySQL & jQuery by Tutorialzine.com.
SlipJaq – A Drupal module for a sliding login panel by Daniel Norton
Aevis / Sliding-Login-Panel a Joomla plugin by Aevis

Enjoy!

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

Nice & Clean Sliding Login Panel built with jQuery

Jeeremie — Thu, 26 Mar 2009 06:27:48 +0000

Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but with jQuery this time.

Preview/Download

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

This script is distributed under the GNU General Public License version 3.

The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet. Let me know if it does.

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)!

What’s new in this version?

Panel has been redesigned to be “slicker”.
Panel overlaps content instead of “pushing” it.
Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images:

Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:

^?View Code HTML4STRICT

1
2
3

	<li id="toggle">
	<a id="open" class="open" href="#">Log In | Register</a>
	<a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>

… and the javascript to expand/collapse panel and switch the buttons on click:

^?View Code JAVASCRIPT

$(document).ready(function() {
 
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");
	});	
 
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		
 
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
 
});

Check the jQuery documentation for usage.

Known Bugs

Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug.

Preview/Download

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

How to have the panel “push” the content down?

Many people ask me how to have the panel “push” the content down instead of overlapping it so I thought I would answer it here instead of answering each comment individually. This is actually extremely easy to do so. All you have to do is open slide.css (Appearance>Editor) and find:

^?View Code CSS

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Change position:absolute; for position:relative;. That’s it!

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

It seems this sliding panel has inspired many people. Some of them even have created some plugins for WordPress, Drupal…:

Sliding Panel: WordPress Plugin by Justin Tadlock.
SuperSlider-Login by Twincascos.
Making A Cool Login System With PHP, MySQL & jQuery by Tutorialzine.com.
SlipJaq – A Drupal module for a sliding login panel by Daniel Norton
Aevis / Sliding-Login-Panel a Joomla plugin by Aevis

Enjoy!

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Jeeremie — Tue, 16 Dec 2008 08:15:38 +0000

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

<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 »</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Second Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More »</a>
    </li>
    <li>
        <img src="images/img.jpg" alt="" />
        <h1>Third Post</h1>
        <p>Our Description... </p>
        <a href="#" title="Read more">Read More »</a>
    </li>
</ul>

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

^?View Code CSS

#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

$('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 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

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

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.

48 incredible Mootools Scripts

Jeeremie — Mon, 06 Oct 2008 00:41:00 +0000

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

Web-kreation » AJAX / Javascript

Sponsor list with CSS Sprites and Mootools 1.2

Preview / Download

Step 1: The HTML

Step 2: CSS Sprites

Hidden jQuery Drop Down Menu for Minimalist Design

Preview/Download

Screenshots

Step 1: HTML

Step 2: CSS (minimalist-menu.css)

Step 3: JS (minimalist-menu.js)

Preview/Download

Conclusion

Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

STEP 1: The HTML code

STEP 2: Copy the CSS in style.css

STEP 3: Add the Javascript files & Images to your theme.

STEP 4 (Optional): Register form

Not Working. Help!

Conclusion

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

Nice & Clean Sliding Login Panel built with jQuery

Preview/Download

What’s new in this version?

Known Bugs

Preview/Download

How to have the panel “push” the content down?

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

Morph Effect on mouseenter/mouseleave with Mootools 1.2

Preview / Download

What you will need

The HTML and CSS code – Creating an unordered list

Mootools – The Basics

The Javascript

48 incredible Mootools Scripts

MochaUI

Mootools Ext Adapter

Milkbox

NoobSlide

(E)2 Photo Gallery

Pathfusion : Slideshow

MooSlide

SmoothGallery

MooFlow

Viewer – mootools

Slimbox

BarackSlideshow

SlideShow 2

PathFusion : multibox

SqueezeBox – Expandable Lightbox

MediaBox

Javascript Image Gallery Using Mootools (part 2)

Sliding Tabs

Mootabs

SimpleTabs – Unobtrusive Tabs + Ajax

Custom Form Elements

FormCheck

fValidator

ForMoo – Form Tools for Mootools

MOOdalBox – an HTML Lightbox

Javascript Fisheye Example

FancyUpload – Swiff meets Ajax

UI TESTS :: Drop Menu

ddmenu

Fancy Menu

Mootools :: Drop Menu example

UvumiTools drop down menu

Drop Down Menu

MenuMatic – Drop Down Menu

PathFusion : image menu

Calendar (date picker)

Unobtrusive JavaScript date-picker widgit

Another date picker

wysiwyg – mootools

Pathfusion – Sortable table

Mootable

Reflection.js

Autocompleter

Tipsx3

Mootools Split Panes – Work in Progress

(E)² Photo Gallery