Industrial Marketerjquery | Industrial Marketer http://www.industrialmarketer.com Wed, 22 May 2013 14:22:27 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Easily add a jQuery Sliding Panel to your site with SlidePanel http://www.industrialmarketer.com/how-to/developer-tutorials/jquery/easily-add-an-ajax-help-panel-to-your-site-with-slidepanel/ http://www.industrialmarketer.com/how-to/developer-tutorials/jquery/easily-add-an-ajax-help-panel-to-your-site-with-slidepanel/#comments Fri, 27 Jan 2012 03:20:03 +0000 William Golden http://www.industrialmarketer.com/?p=986 Call it a ‘help’ tab, a ‘slider’, a ‘panel’, or whatever you want. The fact of the matter is, sliding panels are a beautiful way to encapsulate information on a page that doesn’t need to be “front and center”. Using this code, you can quickly create a great-looking extension that can hold whatever your heart (or client) desires. Customize yours, and don’t forget to come back and drop us a link so we can see how you’re using it…

Try SlidePanel (opens in new window)

 

To get started follow the instructions below:

Download the plugin

Github: https://github.com/egdelwonk/SlidePanel/
Project Homepage: http://codebomber.com/jquery/slidepanel/

Include required files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.codebomber.panel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.codebomber.panel.css">

Add a panel element to your html

<div id="panel" class="cb_slide_panel">
<div class="wrapper">
<a class="close" href="#">Close</a>
<div class="inner">
<div class="wrapper"></div>
</div>
</div>
</div>

Load the plugin on your element

<script type="text/javascript">
$(document).ready(
function(){
$('#panel').codebomber_Panel();
}
);
</script>

Add a panel trigger


The href attribute is used to load external HTML content into your panel

<a href="external.php" rel="panel">Show Panel</a>

Misc

If you pass an element to the plugin that does not currently exist in the dom, the plugin will create a default element with the above format.

]]> http://www.industrialmarketer.com/how-to/developer-tutorials/jquery/easily-add-an-ajax-help-panel-to-your-site-with-slidepanel/feed/ 0