Drop Shadow Effect With JQuery

I am very excited  because for this post, I have created my first ever screencast that demonstrates how easy it is to actually create  the drop shadow effect with JQuery. In fact, we will be using four to five lines of JQuery code to achieve this cool effect. The shadow can be applied to just but anything not just the images. See the shadow effect in action first. Let’s see the idea behind this effect.

.

The Idea?

Absolute positioning in CSS is extremely useful allowing you to position elements just about any place on the page. This is exactly what we are going to do. For each element that is to be shadowed, we create a div and position it behind that element to create the shadow effect. The height and width of each created div is same as that of element which is to be shadowed. Note that all of that is done from JQuery code.

.

Screencast

In this video, I create the shadow effect from scratch. I recommend you to see the video in full screen for better viewing.

Advertisements

Creating Panel Menu with JQuery

Today, I am gonna show you how to create a very useful menu panel. Take a look at the demo of that first.

Well, this type of menu turns out to be very useful if you have a lot of links but you can’t show them in a drop down menu which may get very long. Other than that, it can also be used to allow quick form submissions or showing some piece of text. Basically, it is a div you can put just about anything in it. Let’s move on to creating this menu panel.

HTML

First of all, we create links which when hovered will show the associated panel.

  <div id="container">
    <ul id="menu">
      <li><a href="#" rel="panel_1">Link One</a></li>
      <li><a href="#" rel="panel_2">Link Two</a></li>
      <li><a href="#" rel="panel_3">Link Three</a></li>
    </ul>
  </div>

I will be using links’ rel attribute to refer to corresponding div element which is actually our panel element. Here is the html markup for our panel:

<div id="panel_1">
    <div class="left">
        <!-- The content for this panel goes here -->
    </div>
</div>

As can be seen, this panel has id panel_1 which is the same as rel value of the link shown above. That is how other two panels should be constructed.

CSS

First of all, we make sure that our menu is centered on the screen, so this is how we center the container div:

#container
{
  margin:0px auto;
  width:350px;
}

We make sure that there are no bullets there on the lists:

ul#menu
{
  list-style:none;
}

By default, list items are placed vertically because they are block-level elements, so we make them inline using this CSS so that they appear side by side with one pixel gap:

ul#menu li
{
  display:inline;
  background:#0099CC;
  float:left;
  margin-right:1px;
}

Then we make menu links as block-level elements because only after that we will be able to apply a width to them:

ul#menu li a
{
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  padding:5px;
}

Here is the CSS for any panel containing text. We will need to apply class text to any panel containing only text.

.text
{
  width:300px;
  text-align:justify;
  background:#333333;
  color:#CCCCCC;
  padding:15px;
}

Here is the CSS for any other panel:

div.left
{
  width:130px;
}

div.left ul
{
  list-style:none;
  margin-left:0px;
  padding:15px;
  background:#333333;
  color:#FFFFFF;
}

So for panels containing text, we will be using class text and for rest of the panels we will be using class left.

JQuery

First of all we create a global variable which will be equalized to opened panel later, so that we could use that variable later to operate on that opened panel like closing it.

<script type="text/javascript">

  var opened_one = null;

</script>

Now as mostly what we do, we use JQuery’s ready method to run our code. Our code will be run as soon as DOM becomes ready:

<script type="text/javascript">

  var opened_one = null;

  $(function(){
    // code here
  }

</script>

First of all we hide all panels using hide() method:

  // hide all panels first
  $('div[id*="panel"]').hide();

What it means is that hide all divs that have text panel anywhere in their id values. The *= means find given text anywhere in the provided attribute value.

To be able to actully position the panels right after the hovered links, we need to make them absolute positioned (I assume you have good understanding of CSS):

  // make the panels absolute positioned
  $('div[id*="panel"]').css('position', 'absolute');

Now we write the code for menu links which will be run when they are hovered upon using hover event:

  $('#menu a').hover(function(){
    // code here
  });

First we hide if there is a panel already open and get hovered link’s rel attribute value and store that in variable link_rel. We can get the attribute value using attr() method.

	// hide previously opened panel
	$(opened_one).hide();

	var link_rel = $(this).attr('rel');

Now we get the position of the hovered link (menu item) using offset() method and use that information to position the panels right after them using css() method of JQuery:

    //get the position of the hovered element
    var pos = $(this).offset();

   // get the panel near by hovered element now
    $('div#' + link_rel).css({
      'left': pos.left + 'px',
      'top': (pos.top + $(this).height() + 10) + 'px',
      'zIndex': '5000'
    });

As can be seen, we set the top of panel equal to that of hovered link plus its height plus 10 which we need because we have assigned in CSS with 5 pixels of padding. As per CSS box model, we need to calculate paddings for two sides thus equaling to 10. We also set the z-index of current panel to a larger value so that it appears over any other opened panel although possibility of this is less but we still want to make sure that it makes sense.

Then we show the corresponding panel using fadeIn() animation and once that it is opened/shown, we set the variable opened_one to this panel so that we could hide it later if another panel is to be opened.

    // finaly show the relevant hidden panel
    $('div#' + link_rel).fadeIn('slow');

   // this is currently opened
   opened_one = $('div#' + link_rel);

We want to hide the panel if the mouse moves away from its area using fadeOut():

    // hide it back when mouse arrow moves away
    $('div#' + link_rel).hover(function(){}, function(){
		$(this).fadeOut('slow');
    });

That’s all there is to it. Of couse explaining it takes more time and a lot of theory but if you think about it and practice, it should not be that hard to create this very useful menu panel using JQuery.

Download Code.

Creating Stylish Sliding Menu With JQuery

Today, we are going to create a very stylish sliding menu as shown in the picture on the left with the help of JQuery. Before we move on, please have a look at the demo of this menu.

In order to create this menu what is usually known as accordion, we will be adding HTML of course, CSS to style the menu and finally JQuery to create the kind of effect this menu has. Of course, once you create this menu, you can style it anyway you want; for example you can create background, active or hover images which can make this menu even more attractive or simply use colors instead. Ok, so let’s move on to creating this menu.

.

HTML

We will be using unordered lists for our menu. Here is how it looks like:

   <ul class="parent">
    	<li>
            <a href="#" class="slide">Title One</a>

            <ul class="child">
            	<li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            <!--<span class="hiddenSpellError" pre=""-->ul>

         </li>
    <!--<span class="hiddenSpellError" pre=""-->ul>
<!-- and more -->

As can be seen, there are two lists, the one with the class parent and other with that of child. The first list item of the parent list contains a link which is actually a heading that when clicked will show sub-links which are there in the child list. So the same markup structure goes for the rest of the headings and links.

The CSS

Here is the CSS for the menu:

a
{
	outline:none;
}

ul
{
	list-style:none;
}

ul.parent
{
	margin:0px;
}

ul.parent a
{
	display:block;
	width:200px;
	border-bottom:1px solid #336699;
	background:#3399FF;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding:7px;
}

ul.parent a:hover
{
	color:#000000;
	background:#66CC66
}

ul.child a
{
	background:#333333;
	color:#FFFFFF;
	border-bottom:1px solid #f6f6f6;
	font-weight:normal;
	margin-left:-40px;
	padding:7px;
	width:200px;
	display:block;
	line-height:10px;
}

ul.child a:hover
{
	color:#3333333;
	background:#CCCCCC
}

In some browsers, when you click on a link, an outline (sort of dotted border) is created around it, so we disable that behavior by setting:

a
{
	outline:none;
}

Then we remove the list style so that there are no bullets for ul lists and also remove any margins around it by setting value to 0:

ul
{
	list-style:none;
}

ul.parent
{
	margin:0px;
}

After that we set links’ display style to block so that we could apply a width to them and also set some other styles such as background:

ul.parent a
{
	display:block;
	width:200px;
	border-bottom:1px solid #336699;
	background:#3399FF;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding:7px;
}

Finally we set styles when mouse is over the links using :hover pseudo selector:

ul.parent a:hover
{
	color:#000000;
	background:#66CC66
}

JQuery

We use JQuery’s ready event which fires when DOM (document object model) becomes ready, the short version of this event is:

	$(function(){
	// code here
	});

When the page has loaded, we want to make sure that only the first heading and links are shown which can be done as follows:

	// hide all links except for the first
	$('ul.child:not(:first)').hide();

For each selected heading we set its color to #FF9900, so we want to change the color of the first heading so as to make it feel like selected by default when the page has loaded:

	$("a.slide:first").css("background-color","#FF9900");

Then we write the code for each heading’s click event:

	$('ul.parent a.slide').click(function(){
	});

What it means is that a link with class slide which is inside ul with class parent gets clicked, run the code specified. First, we set background color and mouse over and mouse out color for the current clicked heading and other headings:

	$('ul.parent a.slide').css("background-color","#3399FF");

	$('ul.parent a.slide').mouseout(function(){
		$(this).css("background-color","#3399FF");
	});

	$('ul.parent a.slide').mouseover(function(){
		$(this).css("background-color","#66CC66");
	});

	$(this).mouseout(function(){
		$(this).css("background-color","#FF9900");
	});

We now slide up all child elements:

	// slide all up
	$('ul.child').slideUp('slow');

Then we show the links of the current clicked heading:

	// show the links of current heading
	$(this).next().find('a').show();

$(this) refers to current clicked heading, that is $(‘ul.parent a.slide’, the next() method finds the next element in the hierarchy with respect to clicked element which is ul with class child, we find links inside that using find() method and finally show them. Finally, we slide down the ul with class child and prevent the default action of clicked link or heading.

Finally, we slide down the current heading:

  // slide down current heading
  $(this).next().slideDown('fast');

And we prevent default action of clicked heading which is actually
a link using:

// prevent default action
return false;

Here is the entire JQuery code:

	$(function(){
		// hide all links except for the first
		$('ul.child:not(:first)').hide();
		$("a.slide:first").css("background-color","#FF9900");

		$('ul.parent a.slide').click(function(){
			$('ul.parent a.slide').css("background-color","#3399FF");

			$('ul.parent a.slide').mouseout(function(){
				$(this).css("background-color","#3399FF");
			});

			$('ul.parent a.slide').mouseover(function(){
				$(this).css("background-color","#66CC66");
			});

			$(this).mouseout(function(){
				$(this).css("background-color","#FF9900");
			});

			// slide all up
			$('ul.child').slideUp('slow');

			// show the links of current heading
			$(this).next().find('a').show();

			// slide down current heading
			$(this).next().slideDown('fast');

			// prevent default action
			return false;
		});
	});

Download Code.

Creating CodeIgniter-Like User Guide Panel With JQuery

In this particular tutorial, I will show how to create CodeIgniter-Like User Guide Panel with the help of JQuery.  This panel is readily available on each user guide page of CodeIgniter which makes it very useful because you are able to browse through different topics which are always available and just a click away. Here are some of the most obvious benefits or uses of this panel:

  • Contains a host of links or content
  • Always available on the top
  • Can be used for any content or even a form

The HTML Markup

First of all, we create a panel container div with id panel and then put all content inside it. We will use this id in CSS as well as JQuery to style and manipulate the panel respectively. The html markup for the panel looks like this:

	<div id="panel"></pre>
<div style="padding: <span class=;">10px;"></div>
<pre>
			<div class="left">
				<div class="doc_heading">Basic Information</div>
				<ul>
<ul>
	<li><a href="#">&rarr; Server Requirements</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; License Agreement</a></li>
</ul>
<ul>
	<li><a href="#">&rarr; Credits</a></li>
</ul>
				</ul>
			</div>
		</div>
	</div>

The div with class left is where each distinct section goes and then each section is followed by another div with id divider which is basically a vertical line separating each section.

The CSS
This is the CSS for the panel:

	.left
	{
	 	float:left;
	}
	.right
	{
	 	float:right;
	}
	.clear
	{
	 	clear:both;
	}
	.doc_heading
	{
		font-weight:bold;
		margin:10px 0px 5px 0px;
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	body
	{
		margin: 0px auto;
		padding:0px;
	}
	div#panel
	{
		width:100%;
		height:400px;
		color:#FFFFFF;
		background:#666666;
		display:none;
		padding:0px;
	}
	div#btn
	{
		cursor:pointer;
		cursor:hand;
	}
	div#divider
	{
		background:url(images/dot.gif) repeat-y;
		height:350px;
		float:left;
		width:20px;
		margin-left:20px;
	}
	div#panel ul
	{
		list-style:none;
		margin:0px;
		padding:0px;
	}

	div#panel ul li a
	{
		color:#ffffff;
		font-weight:normal;
		text-decoration:none;
		font-size:11px;
		font-family:'verdana';
	}

	div#panel ul li a:hover
	{
		color:#cccccc;
	}

The JQuery
In the JQuery’s ready event which fires as soon as DOM becomes ready, we set the width of the panel so that it adjusts according to size of the browser window and also give appropriate width to the panel images based on the browser window size:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();
	});

Here is the setWidth function:

	function setWidth()
	{
		// get main document width
		var dimension = getPageDimensions();
		var doc_width = dimension[0];
		var slide_button_width = 143;

		// let's find out how much width should be given to each
		// of the left and right bar (slide_panel_01.gif) of the slide panel.
		var diff = doc_width - slide_button_width;
		// now divide diff with 2 to get width for each bar
		var bar_width = diff / 2;

		// now apply width to each bar
		$("div#left_bar, div#right_bar").css("width", bar_width);
	}

Now comes the magic. The JQuery has amazing function by the name of slideToggle which can be used to toggle content with sliding animation style. This function automatically takes care of current state of the sliding element. We put this function in ready even too:

	$(function(){
		// set appropriate width of the slide panel
		setWidth();

		// slide the panel when slide panel button is clicked !
		$("div#btn").click(function(){
			$("div#panel").slideToggle("fast");
		});

	});

Now what it basically means is that when a div with id btn (which is actually slide panel handle at the bottom of the panel) is clicked, slide toggle the div with id panel which is our panel.

See Demo.

Download Code.

Deleting Table Rows Using JQuery and PHP

jquery_delete_rowsIn this tutorial, I will show you how you can delete table rows from database using JQuery and PHP. The interesting thing here is that we will be able to delete the rows without reloading the page and present some cool animations while deleting those rows. You will also learn table stripping or alternate row coloring technique using JQuery.

Here is the heart of the entire logic coded with JQuery:

$(document).ready(function()
{
	$('table#delTable td a.delete').click(function()
	{
		if (confirm("Are you sure you want to delete this row?"))
		{
			var id = $(this).parent().parent().attr('id');
			var data = 'id=' + id ;
			var parent = $(this).parent().parent();

			$.ajax(
			{
				   type: "POST",
				   url: "delete_row.php",
				   data: data,
				   cache: false,

				   success: function()
				   {
					parent.fadeOut('slow', function() {$(this).remove();});
				   }
			 });
		}
	});

	// style the table with alternate colors
	// sets specified color for every odd row
	$('table#delTable tr:odd').css('background',' #FFFFFF');
});

Let’s find out what’s happening here using divide and rule methodology.

$(document).ready(function()

This is JQuery’s function which runs as soon as document becomes ready. This is similar to onload event but JQuery’s function is far more faster than that. So we want to be able to run this code when page is ready.

$('table#delTable td a.delete').click(function()

If you have worked on CSS selectors then above line should not be much of mystery to you. You can use the same syntax to target elements using JQuery. Basically it says that table with id delTable and TD inside it that has hyperlink with class delete when clicked runs the code specified within this function. So when hyperlink with class named delete within TD within table with id delTable is clicked then code specified will execute.

if (confirm("Are you sure you want to delete this row?"))

We want to be able to confirm if user really wants to delete a row.

var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();

Please keep in mind that in JQuery, the $(this) always refers to the target element which in our case is hyperlink with class delete. attr is used to get or set attributes of the tags. So the id variable refers to the parent of this hyperlink which is TD and then this TD’s parent which is TR. So here we get the id attribute of this TR. In HTML code, we will assign each row’s primary key field to these TRs to identify and delete records. The data variable makes data to be sent as part of the ajax request made using JQuery. The parent variable refers to each TR containing the target element which is hyperlink with class delete.

$.ajax(
{
	   type: "POST",
	   url: "delete_row.php",
	   data: data,
	   cache: false,

	   success: function()
	   {
		parent.fadeOut('slow', function() {$(this).remove();});
	   }
 });

The $.ajax function is used to send ajax requests. Amongst its arguments, the type refers to method of request whether it POST or GET, url refers to script which will get the ajax request data and return some response, data refers to data to be sent as part of the ajax request similar to query string form, cache controls whether cache will be on or off for the request because in IE requests are cached and success function which is also attribute of the $.ajax function runs the code inside it if the request went successful.

parent.fadeOut('slow', function() {$(this).remove();});

As explained before parent refers to the TRs in our case. fadeOut function needs two arguments; animation speed and function to execute. So what this line does is that it removes parent by fading it out and then the target link by using the remove() method. In this way entire row is gone and with the help of ajax request, the record from database is also deleted. Here we have used the fadeOut animation function of JQuery but there are more animations available.

$('table#delTable tr:odd').css('background',' #FFFFFF');

This line means that apply background style to each odd TR of the table with id delTable. Now because our code executes when page is ready, therefore our table will have alternate colors for each odd row.

So that’s all there is to it.

Wasn’t that awesome? It definitely was ! The good thing is that everything was so easy to implement.

Here is the demo.

You can download it here.

.
tweet_this
.