How to add a nice jQuery slider

Wordpress- How to add a nice jQuery slider

This weekend fun was adding to my website the cool sliding control from JÃ©rÃ©mie Tisseau website. That pretty it was, I immediately started thinking it as a container to my BNR exchange rate page. The coded worked perfectly, with few modifications.

Firstly, WordPress uses the $ operator for Prototype library, so if you want to add your jQuery library the invocation to WordPress Firebug will report the error “$ is not a function”. So here’s the fix: you’ll have to change any occurrence of the $ sign to jQuery. Just like in the following example:

$(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();
	});		
		
});

TO:

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

Secondly, you’ll have to add the scripts to your current theme path (all except jquery from js and all css files except style.css from styles directory), and their declaration in the header.php file:

....

<!-- Sliding effect -->
  	
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->

<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('template_url') ?>/slide.css" media="screen" />
<script type="text/javascript" src="<?php echo get_bloginfo('template_url') ?>/js/slide.js"></script>
<!-- end Sliding effect -->

<?php wp_head(); ?>

Thirdly, you’ll have to add the code of the actual HTML elements to your webpage:

<!-- Panel -->
<div id="toppanel">
  <div id="panel">
    <div class="content clearfix">
      <div class="left">
        <h1>Welcome to Web-Kreation</h1>
        <h2>Sliding login panel Demo with jQuery</h2>    
        <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>Download</h2>
        <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article Â»</a></p>
      </div>
      <div class="left">
        <!-- Login Form -->
        <form class="clearfix" action="#" method="post">
          <h1>Member Login</h1>
          <label class="grey" for="log">Username:</label>
          <input class="field" type="text" name="log" id="log" value="" 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 me</label>
              <div class="clear"></div>
          <input type="submit" name="submit" value="Login" class="bt_login" />
          <a class="lost-pwd" href="#">Lost your password?</a>
        </form>
      </div>
      <div class="left right">      
        <!-- Register Form -->
        <form action="#" method="post">
          <h1>Not a member yet? Sign Up!</h1>        
          <label class="grey" for="signup">Username:</label>
          <input class="field" type="text" name="signup" id="signup" value="" size="23" />
          <label class="grey" for="email">Email:</label>
          <input class="field" type="text" name="email" id="email" size="23" />
          <label>A password will be e-mailed to you.</label>
          <input type="submit" name="submit" value="Register" class="bt_register" />
        </form>
      </div>
    </div>
  </div> <!-- /login -->  

    <!-- The tab on top -->  
  <div class="tab">
    <ul class="login">
        <li class="left"> </li>
          <li>Hello Guest!</li>
      <li class="sep">|</li>
      <li id="toggle">
        <a id="open" class="open" href="#">Log In | Register</a>
        <a id="close" style="display: none;" class="close" href="#">Close Panel</a>      
      </li>
        <li class="right"> </li>
    </ul> 
  </div> <!-- / top -->
  
</div> <!--panel -->

Radu Poenaru

Radu Poenaru

How to add a nice jQuery slider

AUTHOR

Radu Poenaru