The shopping cart will:

• be hidden at the top of the page that can be displayed with a show/hide link
• open when an item is added to the basket & auto-close
• require a manual "hide" click if opened manually
• enable us to delete products

The HTML

For The Sliding Basket:

<div id="slidingTopWrap">
	<div id="slidingTopContent">
		<div id="basketWrap">
			<div id="basketTitleWrap">
				Your Basket <span id="notificationsLoader"></span>
			</div>
			<div id="basketItemsWrap">
				<ul>
				<li></li>
				<?php getBasket(); ?>
				</ul>
			</div>
		</div>
	</div>
	<div id="slidingTopFooter">
		<div id="slidingTopFooterLeft">
			<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>
		</div>
	</div>
</div>

The Highlights

• the div slidingTopWrap is positioned absolutely with top: 0 CSS value to stick to the top of the page
• the div slidingTopContent is hided via JavaScript when the page loads & it is actually the part which slides
• the div basketWrap, nothing unusual, wraps the contents of the basket

The JavaScript (jQuery)

Manual Show/Hide Part

$("#slidingTopContent").hide();

$("#slidingTopTrigger").live("click", function(event) {
	$("#slidingTopContent").slideToggle("slow", function(){
		if ($("#slidingTopContent").is(":visible")) {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
		} else {
			$("#slidingTopFooterLeft").html('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
		}
	});
}); 

The Highlights:

• we have $("#slidingTopContent").hide(); in the beginning to hide the div in the initial load
• when the #slidingTopTrigger is clicked, we use the slideToggle function to show/hide the #slidingTopContent. To understand whether it is open or not, we have an if then else clause as if ($("#slidingTopContent").is(":visible")) {
  • if the #slidingTopContent is visible, we insert the "hide HTML"
  • if the #slidingTopContent is not visible, we insert the "show HTML"
• you’ll see that we used the $("#slidingTopTrigger").live("click", function(event) { rather than a standard click function. The reason is adding the new created HTMLs to the DOM

Adding Products

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	if ($("#slidingTopContent").is(":visible")) {

		$("#notificationsLoader").html('<img src="images/loader.gif">');

		$.ajax({
		type: "POST",
		url: "inc/functions.php",
		data: { productID: productIDVal, action: "addToBasket"},
		success: function(theResponse) {

		if( $("#productID_" + productIDVal).length > 0){
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).before(theResponse).remove();
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
			$("#notificationsLoader").empty();

		} else {
			$("#basketItemsWrap li:first").before(theResponse);
			$("#basketItemsWrap li:first").hide();
			$("#basketItemsWrap li:first").show("slow");
			$("#notificationsLoader").empty();
		}

		}
		}); 

	} else {

		$("#slidingTopContent").slideToggle("slow", function(){		

			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
			$("#notificationsLoader").html('<img src="images/loader.gif">');

			$.ajax({
			type: "POST",
			url: "inc/functions.php",
			data: { productID: productIDVal, action: "addToBasket"},
			success: function(theResponse) {

			if( $("#productID_" + productIDVal).length > 0){
				$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
				$("#productID_" + productIDVal).before(theResponse).remove();
				$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
				$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
				$("#notificationsLoader").empty();

			} else {
				$("#basketItemsWrap li:first").before(theResponse);
				$("#basketItemsWrap li:first").hide();
				$("#basketItemsWrap li:first").show("slow");
				$("#notificationsLoader").empty();
			}

			}
			}); 

			$("#slidingTopTrigger").fadeTo(4000, 1, function(){
				$("#slidingTopContent").slideToggle("slow", function(){
					$("#slidingTopFooterLeft").html('<img src="images/arrow-down.png" alt="Show Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>');
				});

			});

		});
	}

});

The Highlights:

As "how-to" on sending the Ajax query & fading animations are described in the previous post, we won’t repeating the same info here & focus on the effects.

• we again run the same if-then-else clause
  • if the #slidingTopContent is open send an Ajax query to functions.php and add-the-products to basket
  • if the #slidingTopContent is closed:
    • slideToggle the div
    • insert the "hide HTML" to #slidingTopFooterLeft"
    • send an Ajax query to functions.php and add-the-products to basket
    • wait for x seconds: $("#slidingTopTrigger").fadeTo(4000, 1, function(){
    • slideToggle the div
    • insert the "show HTML" to #slidingTopFooterLeft"

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Use PHP Functions In JavaScript: PHP.JS
• Use Any Font In Your Websites With FLIR
• Track Mouse Activities With JS And PHP: (smt)
• Tiny Content Management System: OneFileCMS
• TestSwarm: Continious & Distributed JS Testing

Rather than the complete HTML structure & PHP code that adds/removes the products, we’ll be focusing on the details related with  the effect.

To findout the details of the complete HTML structure & PHP code, please check our post: Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP. And, a full working example can be found in the download package.

The HTML

HTML For The Product’s Wrapper:

<div class="productWrap">
	<div class="productImageWrap">
		<img src="images/product1.jpg" alt="Product1" />
	</div>
	<div class="productNameWrap">
		Krups Coffee Maker
	</div>
	<div class="productPriceWrap">
		<div class="productPriceWrapLeft">
			$95
		</div>
		<div class="productPriceWrapRight">
			<a href="inc/functions.php?action=addToBasket&productID=1" onClick="return false;">
				<img src="images/add-to-basket.gif" alt="Add To Basket" width="111" height="32" id="featuredProduct_1" />
			</a>
		</div>
	</div>
</div>

The part we’ll focus is the contents inside <div class="productPriceWrapRight"> which wraps the "add-to-basket" button.

The Highlights:

• a link with onClick="return false; value which means it won’t be active if JavaScript is active (to make the script unobtrusive)
• add-to-basket image has an unique ID: id="featuredProduct_1" which we’ll use to understand the button of which product is clicked

HTML For The Basket:

<div id="basketWrap">
	<div id="basketTitleWrap">
		Your Basket <span id="notificationsLoader"></span>
	</div>
	<div id="basketItemsWrap">
		<ul>
		<li></li>
		<?php getBasket(); ?>
		</ul>
	</div>
</div>

The Highlights:

• we have an empty <span> with id="notificationsLoader" to show a loading image
• we keep an empty div to be able to insert any data before/after them
• we call a PHP function: <?php getBasket(); ?> to get the basket data when the page is first loaded.

The JavaScript (jQuery)

$("#basketItemsWrap li:first").hide();

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	var productX 		= $("#productImageWrapID_" + productIDVal).offset().left;
	var productY 		= $("#productImageWrapID_" + productIDVal).offset().top;

	if( $("#productID_" + productIDVal).length > 0){
		var basketX 		= $("#productID_" + productIDVal).offset().left;
		var basketY 		= $("#productID_" + productIDVal).offset().top;
	} else {
		var basketX 		= $("#basketTitleWrap").offset().left;
		var basketY 		= $("#basketTitleWrap").offset().top;
	}

	var gotoX 			= basketX - productX;
	var gotoY 			= basketY - productY;

	var newImageWidth 	= $("#productImageWrapID_" + productIDVal).width() / 3;
	var newImageHeight	= $("#productImageWrapID_" + productIDVal).height() / 3;

	$("#productImageWrapID_" + productIDVal + " img")
	.clone()
	.prependTo("#productImageWrapID_" + productIDVal)
	.css({'position' : 'absolute'})
	.animate({opacity: 0.4}, 100 )
	.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
																																																																												$(this).remove();

		$("#notificationsLoader").html('<img src="images/loader.gif">');

		$.ajax({
		type: "POST",
		url: "inc/functions.php",
		data: { productID: productIDVal, action: "addToBasket"},
		success: function(theResponse) {

		if( $("#productID_" + productIDVal).length > 0){
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).before(theResponse).remove();
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
			$("#notificationsLoader").empty();

		} else {
			$("#basketItemsWrap li:first").before(theResponse);
			$("#basketItemsWrap li:first").hide();
			$("#basketItemsWrap li:first").show("slow");
			$("#notificationsLoader").empty();
		}

		}
		});  

	});

});

Highlights:

• splitting the ID of the clicked "add-to-basket" image which is "featuredProduct_1" from the "_" character & get the databaseID of the product
• using jQuery’s offset, we get the current x-y position of the product
• run a "if-then-else" clause which:
  • if that product is already in the basket: if( $("#productID_" + productIDVal).length > 0){ (if an element with that ID exists in the basket), if exists, then we get the x-y positions of that element using "offset" again, so we can target that element while flying our product
  • if that product isn’t in the basket: then we get the x-y positions of a static element in the basket HTMl area (#basketTitleWrap in our case)
• very important: we create 2 variables; gotoX & gotoY by subtracting the element in the basket’s position from the product’s position. And we get the distance product needs to animate (fly) in x’s & y’s
• again create 2 variables named newImageWidth & newImageHeight which are x times (3 in our case) smaller the size of our product’s image. This is used to create a resizing effect while flying the product to the basket
• and, let’s fly the product: targeting the product image to be flied; $("#productImageWrapID_" + productIDVal + " img"). We clone it with jQuery’s clone, place inside the same element where the original image exists with prependTo & set it’s position to absolute. The next thing, we decrease its opacity so it starts in a little transparent look before the animation. And, we fly it by mentioning the marginLeft & marginTop values we calculated. At the same time, we make it more transparent & resize it. Also, we set the duration of the animation (1200 in our case).
• As a callback function (after the animation ends), we remove the cloned image from the DOM, show the Ajax loader & post a query to our PHP page. That’s all.

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Use PHP Functions In JavaScript: PHP.JS
• Use Any Font In Your Websites With FLIR
• Track Mouse Activities With JS And PHP: (smt)
• Tiny Content Management System: OneFileCMS
• TestSwarm: Continious & Distributed JS Testing

For an e-commerce website, this can mean a better shopping experience for customers where they can concentrate more on the products which may result in better sales.

This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

The main functions of the cart will be adding/removing items to the basket without the need of refreshing the page & displaying the actions with effects.

Other Add-To-Basket Tutorials Built on This Example:

• Fly-To-Basket Effect With jQuery
• Ajaxed Sliding Shopping Cart With jQuery

To try the demo or download the script:

The HTML

Rather than the formatting of the page, as you can design it however you prefer, we’ll be focusing on the vital parts which does all the tricks.

HTML For The Product’s Wrapper:

<div class="productWrap">
	<div class="productImageWrap">
		<img src="images/product1.jpg" alt="Product1" />
	</div>
	<div class="productNameWrap">
		Krups Coffee Maker
	</div>
	<div class="productPriceWrap">
		<div class="productPriceWrapLeft">
			$95
		</div>
		<div class="productPriceWrapRight">
			<a href="inc/functions.php?action=addToBasket&productID=1" onClick="return false;">
				<img src="images/add-to-basket.gif" alt="Add To Basket" width="111" height="32" id="featuredProduct_1" />
			</a>
		</div>
	</div>
</div>

The part we’ll focus is the contents inside <div class="productPriceWrapRight"> which wraps the "add-to-basket" button.

The Highlights:

• a link with onClick="return false; value which means it won’t be active if JavaScript is active (to make the script unobtrusive)
• add-to-basket image has an unique ID: id="featuredProduct_1" which we’ll use to understand the button of which product is clicked

HTML For The Basket:

<div id="basketWrap">
	<div id="basketTitleWrap">
		Your Basket <span id="notificationsLoader"></span>
	</div>
	<div id="basketItemsWrap">
		<ul>
		<li></li>
		<?php getBasket(); ?>
		</ul>
	</div>
</div>

The Highlights:

• we have an empty <span> with id="notificationsLoader" to show a loading image
• we keep an empty div to be able to insert any data before/after them
• we call a PHP function: <?php getBasket(); ?> to get the basket data when the page is first loaded.

The JavaScript (jQuery)

We have 2 main jQuery functions:

Function For Adding To Basket:

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	$("#notificationsLoader").html('<img src="images/loader.gif">');

	$.ajax({
	type: "POST",
	url: "inc/functions.php",
	data: { productID: productIDVal, action: "addToBasket"},
	success: function(theResponse) {

		if( $("#productID_" + productIDVal).length > 0){
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500, function() {
				$("#productID_" + productIDVal).before(theResponse).remove();
			});
			$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
			$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
			$("#notificationsLoader").empty();
		} else {
			$("#basketItemsWrap li:first").before(theResponse);
			$("#basketItemsWrap li:first").hide();
			$("#basketItemsWrap li:first").show("slow");
			$("#notificationsLoader").empty();
		}

	}
	});  

});

The Highlights:

• splitting the ID of the clicked "add-to-basket" image which is "featuredProduct_1" from the "_" character & get the databaseID of the product (1)
• inserting the loader.gifimage inside the element with id="notificationsLoader"
• posting a data with Ajax to our functions.php fil which handles all the server-side jobs. 2 data are posted: productID and the action to be done which is addToBasket
• There are 2 possibilities when the data is posted, the items may already be inside the basket or it may be a new item. So, we have an if clause: if( $("#productID_" + productIDVal).length > 0){ which checks if an element with ID: productID1 (1 is a variable) exists in the page
  •  if it exist:
    • we change the opacity of that object to 0 (make it invisible)
    • load the new <li>product info</li> response that comes from the functions.php
    • remove the original <li>product info</li> object whose opacity was 0
    • and play with the new <li>product info</li> object’s opacity to create a blinking effect
    • empty the contents inside id="notificationsLoader" to stop the loading animation
  • if it does not exist:
    • we insert the response from the functions.php before the first hidden <li> and hide it
    • then use jQuery’s show function to display it with an effect
    • empty the contents inside id="notificationsLoader" to stop the loading animation

Function For Removing From Basket:

$("#basketItemsWrap li img").live("click", function(event) { 

	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];	

	$("#notificationsLoader").html('<img src="images/loader.gif">');

	$.ajax({
	type: "POST",
	url: "inc/functions.php",
	data: { productID: productIDVal, action: "deleteFromBasket"},
	success: function(theResponse) {

		$("#productID_" + productIDVal).hide("slow",  function() {$(this).remove();});
		$("#notificationsLoader").empty();

	}
	});  

});

The Highlights:

• As the objects are inserted to basket via Ajax, the new HTML items inside the basket are normally not loaded to the DOM and we can’t reach them via JavaScript. jQuery offers an event named "live" (starting from jQuery 1.3) which loads the new created items to the DOM. So we used this event.
• All other tasks are similar to adding an item, we splitted the HTML element from the "_" character and got the productID to be deleted and sent it to functions.php via Ajax.

The Database

We have used a MySQL database in this example with 2 tables:

Products:

Baskets (for keeping the shopping cart of every different session)

The PHP

There is nothing complicated on the PHP part.

Handle The Variables:

session_start();
$sessionID = $_COOKIE['PHPSESSID'];

if($_POST['action'] != '' || $_GET['action'] != '') {
	if($_POST['action'] == '')
	{
		$action 	= $_GET['action'];
		$productID	= $_GET['productID'];
		$noJavaScript = 1;
	} else {
		$action 	= $_POST['action'];
		$productID	= $_POST['productID'];
		$noJavaScript = 0;
	}
}

The Highlights:

• we create a session variable so every different user will have their own baskets
• understand if the request comes from a POST (Ajax) or GET (JS disabled) request and get the action & productID variables
• if it is a GET request we change the value of a variable named $noJavaScript to 1

PHP For Add To Basket:

if ($action == "addToBasket"){

	$productInBasket 	= 0;
	$productTotalPrice	= 0;

	$query  = "SELECT * FROM products WHERE productID = " . $productID;
	$result = mysql_query($query);
	$row = mysql_fetch_array( $result );

	$productPrice 		= $row['productPrice'];
	$productName		= $row['productName'];	

	$query = "INSERT INTO baskets (productID, productPrice, basketSession) VALUES ('$productID', '$productPrice', '$sessionID')";
	mysql_query($query) or die('Error, insert query failed');	

	$query  = "SELECT * FROM baskets WHERE productID = " . $productID . " AND basketSession = '" . $sessionID . "'";
	$result = mysql_query($query) or die(mysql_error());;

	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		$totalItems 	= $totalItems + 1;
		$productTotalPrice 	= $productTotalPrice + $row['productPrice'];
	}

	if ($noJavaScript == 1) {
		header("Location: ../index.php");
	} else {
		echo ('<li id="productID_' . $productID . '"><a href="inc/functions.php?action=deleteFromBasket&productID=' . $productID . '" onClick="return false;"><img src="images/delete.png" id="deleteProductID_' . $productID . '"></a> ' . $productName . '(' . $totalItems . ' items) - $' . $productTotalPrice . '</li>');
	}

}

The Highlights:

• we insert the product to the database. If $noJavaScript to 1 we redirect to the index.php else we create a <li> element including the product’s details & echo it so we can insert it via jQuery.

PHP For Delete From Basket:

if ($action == "deleteFromBasket"){

	$query = "DELETE FROM baskets WHERE productID = " . $productID . " AND basketSession = '" . $sessionID . "'";
	mysql_query($query) or die('Error, delete query failed');

	if ($noJavaScript == 1) {
		header("Location: ../index.php");
	}
}

The Highlights:

• we delete the product to the database. If $noJavaScript to 1 we redirect to the index.php

PHP For Getting The Basket (For Initial Load)

Like mentioned before, we create a function to get the basket’s current situation, so it can be loaded in the initial loading of the page.

function getBasket(){

	session_start();
	$sessionID = $_COOKIE['PHPSESSID'];

	$query  = "SELECT * FROM baskets WHERE basketSession = '" . $sessionID . "' GROUP BY productID ORDER By basketID DESC";
	$result = mysql_query($query);
	//echo $query;

	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
	{

		$query2  = "SELECT * FROM products WHERE productID = " . $row['productID'];
		$result2 = mysql_query($query2);
		$row2 = mysql_fetch_array( $result2 );

		$productID	 		= $row2['productID'];
		$productPrice 		= $row2['productPrice'];
		$productName		= $row2['productName'];	

		$query2  = "SELECT COUNT(*) AS totalItems FROM baskets WHERE basketSession = '" . $sessionID . "' AND productID = " . $productID;
		$result2 = mysql_query($query2);
		$row2 = mysql_fetch_array( $result2 );
		$totalItems = $row2['totalItems'];
		$basketText = $basketText . '<li id="productID_' . $productID . '"><a href=inc/functions.php?action=deleteFromBasket&productID=' . $productID . ' onClick="return false;"><img src="images/delete.png" id="deleteProductID_' . $productID . '"></a> ' . $productName . '(' . $totalItems . ' items) - $' . ($totalItems * $productPrice) . '</li>';

	}
	echo $basketText;
}

The Highlights:

• This is a standard PHP function which creates the HTML for the items in the basket with a loop

And, the Ajaxed basket built with jQuery & PHP is ready-to-use.

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• TestSwarm: Continious & Distributed JS Testing
• PHP Shoutbox Script: wTag
• Display MySQL Data In Google Maps Using DrasticMap
• Ajaxed Drag’n Drop Shopping Cart With jQuery & PHP
• Ajax Star Rating With PHP & MySQL

jQuery

On the other hand, there are much more codes/modules, from simple alert functions to complex galleries/form validation methods, that are hard-coded inside websites & not converted to plugins.

For sure, not every code must become a plugin, that would be meaningless. But converting the ones to be re-used will save a lot of re-development time & if shared with the community, will make the code itself better.

jQuery offers an easy to learn & flexible environment for creating plugins. Here are 10 tutorials to get you started:

Why Create A jQuery Plugin?

James Padolsey discusses the need & reasons for creating a jQuery plugin.

He clearly puts of the advantages provided like portability, time to be gained & more. 

Plugins/Authoring From jQuery.com

The first stop for everyone planning to create a jQuery plugin.

It covers the logic, naming patterns & steps like:

• Collecting static functions in objects
• Options
• Customizing animations

Developing A jQuery Plugin

Jonathan Snook is sharing his thoughts on developing a jQuery plugin.

A quick look to the basics & advantages of "why we need a plugin".

jQuery Plugin Tutorial, In-Depth For Absolute Beginners

A tutorial for absolute beginners, including fresh JavaScript developers.

It clearly shows the advantages of jQuery & creates a simple plugin named "Shuffle" by describing every step in detail.

Building jQuery Plugins

A tutorial for creating 2 different plugins:

• jQuery.tabify: for creating tabbed contents easily
• jQuery.lessMore: a plugin that can hide any number of childs of a given parent object

The Definitive Guide to Creating a Practical jQuery Plugin

NETTUTS shows the steps of a jQuery plugin development by creating a simple image loader plugin.

The plugin loads the images at the backstage, they are saved in the visitor’s browser cache, so, they will be usable throughout the rest of the site.

How To Create A Plugin For jQuery

yensdesign describes the basics needed like the difference between jQuery & jQuery.fn objects. Then creates an input highlighter plugin.

Building Your First jQuery Plugin

This is the tutorial for creating the jTruncate plugin, a well-known plugin for truncating text.

It includes tips like using jQuery rather than $, usage of extend method & more. At the end of the tutorial, you’ll be created a fully-functional plugin.

Learn How to Create a jQuery Plugin

A step-by-step tutorial on creating a jQuery plugin that dynamically adjusts the styling of a specified element for always keeping it vertically and horizontally centered on the page.

The tutorial is supported with a screencast as well.

A Plugin Development Pattern

Karl Swedberg, a developer who already created several plugins, is sharing his experiences for a better jQuery plugin development process.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• What You See Is What You Ajax: WaveMaker
• wForms: Easy JavaScript Form Controls
• Web Based FTP Client Similar To Windows Explorer

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

And when opened:

Click here to see the final working demo of this jQuery sliding menu.

Step 1 – HTML:

<div id="sliderWrap">
    <div id="openCloseIdentifier"></div>
    <div id="slider">
        <div id="sliderContent">
            Isn't this nice?
        </div>
        <div id="openCloseWrap">
            <a href="#" class="topMenuAction" id="topMenuImage">
                <img src="open.png" alt="open" />
            </a>
        </div>
    </div>
</div>
 

Step 2 – CSS:

<style type="text/css">
body {
margin: 0;
font-size:16px;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
}
#sliderWrap {
margin: 0 auto;
width: 300px;
}
#slider {
position: absolute;
background-image:url(slider.png);
background-repeat:no-repeat;
background-position: bottom;
width: 300px;
height: 159px;
margin-top: -141px;
}
#slider img {
border: 0;
}
#sliderContent {
margin: 50px 0 0 50px;
position: absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#header {
margin: 0 auto;
width: 600px;
background-color: #F0F0F0;
height: 200px;
padding: 10px;
}
#openCloseWrap {
position:absolute;
margin: 143px 0 0 120px;
font-size:12px;
font-weight:bold;
}
</style>
 

With the CSS file there are few major points:

• #slider has to be positioned absolutely, so it can overlay the other content.
• #slider has a negative top-margin which hides it.
• #sliderContent is positioned absolutely to not to crack the open/close buttons
• #openCloseWrap holding the buttons are positioned absolutely too.

Step 3 – jQuery / JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $(".topMenuAction").click( function() {
        if ($("#openCloseIdentifier").is(":hidden")) {
            $("#slider").animate({
                marginTop: "-141px"
                }, 500 );
            $("#topMenuImage").html('<img src="open.png"/>');
            $("#openCloseIdentifier").show();
        } else {
            $("#slider").animate({
                marginTop: "0px"
                }, 500 );
            $("#topMenuImage").html('<img src="close.png"/>');
            $("#openCloseIdentifier").hide();
        }
    }); 
});
</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

P.S. Down & up arrow icons are from the Crystal Clear icon set.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Winners Of The Flowplayer Contest
• Table Sorter Plugin For jQuery: tablesorter
• Tabbed Content Area With jQuery And CSS
• Smart Floating Banners
• Slideshow JS: Unobtrusive JavaScript Slideshow

I always loved the dZone’s Ajax content loading while scrolling feature and created a similar one using jQuery.

I’m pleased to share with WebResourcesDepot readers (Check the demo – scroll down to see new content in the demo)

This Ajax auto content loading can very be handy in almost every project. Don’t forget to bookmark it (del.icio.us link).

Download package includes a working demo coded with ASP with a test MySQL database. ASP code is just a simple query so you can switch it with a one you like easily.

What is loading content while scrolling?

When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content.

Why to use it?

It helps increasing the initial load speeds of pages faster and users will have to load only the content they see.

How it works? (Check the demo)

In our case, we have DIVS holding contents where every DIV ID is content’s database ID.

• Content structure is like:

<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>

• We create a function sending a query to a dynamic file with the DIV ID of the latest wrdLatest DIV (and also put a loader image):

function lastPostFunc()
{
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),    


    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);           
        }
        $('div#lastPostsLoader').empty();
    });
}; 


• When a user scrolls down, we understand that the scroller is at the bottom with teh function below and fire the lastPostFunc function.

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

I have applied the demo to the DNSPinger service. Simply scroll down to see new content loading.

Dependencies

This is a very simple code that uses jQuery’s great dimensions plugin that helps us understand that we are at the bottom of the page. Update: Dimensions plugin is included with jQuery 1.2.6 and no need to include it as an extra.

Besides that, you can improve the code to detect the users sceen-size and load your initial content according to that screen size.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Table Sorter Plugin For jQuery: tablesorter
• Smart Floating Banners
• Slideshow JS: Unobtrusive JavaScript Slideshow
• Skin Your Ajax Applications: ThemeRoller
• Rounded Corners With No Images Using curvyCorners