Advertise here with BSA

In this tutorial, we'll be creating an Ajax Poll Script that displays the results with colored and animated lines using PHP, MySQL and jQuery.

The script has a pretty easy logic and can be implemented into any website quickly by simply calling a php function like getPoll(2) which brings the second poll.

The code has 3 parts: HTML, JavaScript (jQuery) and PHP. Let's start with the easiest one:

HTML

The HTML for the poll is generated within the PHP function which is usually nice as it is only a 1-line-code and doesn't create a visual pollution in the overall HTML.

<div id="pollWrap">
    <form name="pollForm" method="post" action="inc/functions.php?action=vote">
        <h3>Poll Question 1</h3>
        <ul>
            <li>
                <input name="pollAnswerID" id="pollRadioButton1" value="1" type="radio">
                Answer1 for Poll1
                <span id="pollAnswer1"></span>
			</li>
            <li class="pollChart pollChart1"></li>
            <li>
                <input name="pollAnswerID" id="pollRadioButton2" value="2" type="radio">
                Answer2 for Poll1
                <span id="pollAnswer2"></span>
            </li>
            <li class="pollChart pollChart2"></li>
        </ul>
        <input name="pollSubmit" id="pollSubmit" value="Vote" type="submit">
        <span id="pollMessage"></span>
        <img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader">
    </form>
</div>

There is nothing original here. In one of the list items, we mention the answer and provide a unique ID for it which matches that answer's answerID in the database. For the other list item, we reserve it for the colored line, again by giving it the unique ID.

PHP

We first include our db connection file and handle the posted items from the Ajax requests

require("db.php");
//GETTING VARIABLES START
$action 		= mysql_real_escape_string($_POST['action']);
$pollAnswerID	= mysql_real_escape_string($_POST['pollAnswerID']);
//GETTING VARIABLES END

After that, create the function getPoll which simply loops through the database and creates the HTML for the poll mentioned above.

function getPoll($pollID){
	$query  = "SELECT * FROM polls LEFT JOIN pollAnswers ON polls.pollID = pollAnswers.pollID WHERE polls.pollID = " . $pollID . " ORDER By pollAnswerListing ASC";
	$result = mysql_query($query);
	//echo $query;jquery

	while($row = mysql_fetch_array($result, MYSQL_ASSOC))
	{
		$pollQuestion 		= $row['pollQuestion'];
		$pollAnswerID 		= $row['pollAnswerID'];
		$pollAnswerValue	= $row['pollAnswerValue'];

		if ($pollStartHtml == '') {
			$pollStartHtml 	= '<div id="pollWrap"><form name="pollForm" method="post" action="inc/functions.php?action=vote"><h3>' . $pollQuestion .'</h3><ul>';
			$pollEndHtml 	= '</ul><input type="submit" name="pollSubmit" id="pollSubmit" value="Vote" /> <span id="pollMessage"></span><img src="ajaxLoader.gif" alt="Ajax Loader" id="pollAjaxLoader" /></form></div>';
		}
		$pollAnswersHtml	= $pollAnswersHtml . '<li><input name="pollAnswerID" id="pollRadioButton' . $pollAnswerID . '" type="radio" value="' . $pollAnswerID . '" /> ' . $pollAnswerValue .'<span id="pollAnswer' . $pollAnswerID . '"></span></li>';
		$pollAnswersHtml	= $pollAnswersHtml . '<li class="pollChart pollChart' . $pollAnswerID . '"></li>';
	}
	echo $pollStartHtml . $pollAnswersHtml . $pollEndHtml;
}

This getPollID function below is for easily getting the ID of the related polls by providing an answerID:

function getPollID($pollAnswerID){
	$query  = "SELECT pollID FROM pollAnswers WHERE pollAnswerID = ".$pollAnswerID." LIMIT 1";
	$result = mysql_query($query);
	$row = mysql_fetch_array($result);

	return $row['pollID'];
}

And, the getPollResults function which is kinda tricky but not that much.

When ran, it returns a string like: 1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's animated line.

The last number is the sum of all points for easily calculating percentages.

The string is parsed in the JavaScript side later on.

function getPollResults($pollID){
	$colorArray = array(1 => "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099", "#ffcc00", "#00ff00", "#cc0000", "#0066cc", "#ff0099");
	$colorCounter = 1;
	$query  = "SELECT pollAnswerID, pollAnswerPoints FROM pollAnswers WHERE pollID = ".$pollID."";
	$result = mysql_query($query);
	while($row = mysql_fetch_array($result))
	{
		if ($pollResults == "") {
			$pollResults = $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
		} else {
			$pollResults = $pollResults . "-" . $row['pollAnswerID'] . "|" . $row['pollAnswerPoints'] . "|" . $colorArray[$colorCounter];
		}
		$colorCounter = $colorCounter + 1;
	}
	$query  = "SELECT SUM(pollAnswerPoints) FROM pollAnswers WHERE pollID = ".$pollID."";
	$result = mysql_query($query);
	$row = mysql_fetch_array( $result );
	$pollResults = $pollResults . "-" . $row['SUM(pollAnswerPoints)'];
	echo $pollResults;
}

The last PHP code is the voting part which also sets a cookie:

if ($action == "vote"){

	if (isset($_COOKIE["poll" . getPollID($pollAnswerID)])) {
		echo "voted";
	} else {
		$query  = "UPDATE pollAnswers SET pollAnswerPoints = pollAnswerPoints + 1 WHERE pollAnswerID = ".$pollAnswerID."";
		mysql_query($query) or die('Error, insert query failed');
		setcookie("poll" . getPollID($pollAnswerID), 1, time()+259200, "/", ".webresourcesdepot.com");
		getPollResults(1);
	}
}

jQuery (JavaScript)

It is only an Ajax request that posts the selected answer to the PHP code, gets the string in return, parses it and makes some show/hide tricks for displaying and hiding the messages or loaders.

Here it is:

$(document).ready(function() {   

	$("#pollAjaxLoader").hide(); //hide the ajax loader
	$("#pollMessage").hide(); //hide the ajax loader
	$("#pollSubmit").click(function() {
		var pollAnswerVal = $('input:radio[name=pollAnswerID]:checked').val();//Getting the value of a selected radio element.
		if ($('input:radio[name=pollAnswerID]:checked').length) {
			$("#pollAjaxLoader").show(); //show the ajax loader
			$.ajax({
				type: "POST",
				url: "inc/functions.php",
				data: { pollAnswerID: pollAnswerVal, action: "vote" },
				success: function(theResponse) {
					//the functions.php returns a response like "1|13|#ffcc00-2|32|#00ff00-3|18|#cc0000-63" which the first number is the answerID, second is the points it has and third is the color for that answer's graph. The last number is the sum of all points for easilt calculating percentages.
					if (theResponse == "voted") {
						$("#pollAjaxLoader").hide(); //hide the ajax loader
						$("#pollMessage").html("sorry, you already voted.").fadeTo("slow", 1);
					} else {
						var numberOfAnswers 		= (theResponse).split("-").length-2;//calculate the number of answers
						var splittedResponse 		= (theResponse).split("-");
						var pollAnswerTotalPoints 	= splittedResponse[numberOfAnswers+1];

						for (i=0;i<=numberOfAnswers;i++)
						{
							var splittedAnswer 		= (splittedResponse[i]).split("|");
							var pollAnswerID 		= (splittedAnswer[0]);
							var pollAnswerPoints 	= (splittedAnswer[1]);
							var pollAnswerColor 	= (splittedAnswer[2]);
							var pollPercentage		= (100 * pollAnswerPoints / pollAnswerTotalPoints);
							$(".pollChart" + pollAnswerID).css("background-color",pollAnswerColor);
							$(".pollChart" + pollAnswerID).animate({width:pollPercentage + "%"});
							$("#pollAnswer" + pollAnswerID).html(" (" + Math.round(pollPercentage) + "% - " + pollAnswerPoints + " votes)");
							$("#pollRadioButton" + pollAnswerID).attr("disabled", "disabled"); //disable the radio buttons
						}
						$("#pollAjaxLoader").hide(); //hide the ajax loader again
						$("#pollSubmit").attr("disabled", "disabled"); //disable the submit button
					}
				}
			});
			return false; 

		} else {
			$("#pollMessage").html("please select an answer.").fadeTo("slow", 1, function(){
				setTimeout(function() {
					$("#pollMessage").fadeOut("slow");
				}, 3000);
			});
			return false;
		}

	});

});

The JavaScript code is well-commented and is pretty self-explanatory. Don't let the number of lines afraid you, most of them are just the make-up.

That's all.

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

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

FeedBurner's popular chicklet FeedCount is the most-used way to display the number of subscribers for a feed.

Also, a similar design is used by TwitterCounter to display your Twitter followers.

We'll be creating a dynamic FeedCount-like interface that can display your website's statistics like pageviews, visits, etc. (one or all of them) using PHP.

At the end of this tutorial, we'll have 2 different counters:

• a counter that can display only one metric – basic version
• a counter that can display multiple metrics (some jQuery fun here) – advanced version

Basic Counter

Let's start with the PHP part:

How To Fetch Google Analytics Data With PHP?

We'll be using a PHP class named GAPI that makes using Google Analytics API so easy.

There are 3 variables we need to start using GAPI:

• Google Analytics user that has access to the website stats to be displayed (I suggest creating a new Google Account specifically for this purpose and provide only read access to that website's data. This will prevent using your real Google account in your code which is a good step for security).
• Google Analytics user password.
• Profile ID of the website (it is not the one that starts with UA, rather, it is the ID that appears on browser's address bar when a report of that website is clicked).

GAPI offers a simple usage to access Google Analytics data:

<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');

require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews'));
?>

Now we have the pageviews data of the last 30 days (it is possible to define custom dates, check the GAPI docs.)

(If you want to read more on GAPI, code-diesel has a great article on this class.)

Here is the HTML:

<div id="statsWrap">
	<div id="statsDetailsWrap">
		<div id="statsCount">
			<?php echo $ga->getPageviews() ?>
		</div>
		<div id="statsMetric">
			pageviews
		</div>
	</div>
	<div id="byGoogle">By Google Analytics</div>
</div>

And CSS

#statsWrap {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#statsDetailsWrap {
	background: #333333;
	float: left;
	padding: 1px 3px 1px 1px;
	border: #666666 1px inset;
}
#statsCount {
	float: left;
	padding: 1px 3px;
	background: #999999;
	color: #FFFFFF;
	border: #666666 1px inset;
}
#statsMetric {
	float: left;
	padding: 3px;
	color: #FFFFFF;
}
#byGoogle {
	clear: both;
	color: #666666;
	font-size: 10px;
}

 

Advanced Counter (With jQuery)

---

It is possible to fetch multiple data with GAPI & we'll be creating an auto-rotating counter that can display multiple metrics (visits & pageviews).

Let's use a little improved version of the PHP code:

<?php
define('ga_email','yourGoogleEmail');
define('ga_password','yourGooglePass');
define('ga_profile_id','yourProfileID');

require 'gapi.class.php';
$ga = new gapi(ga_email,ga_password);
$ga->requestReportData(ga_profile_id,array('browser','browserVersion'),array('pageviews','visits'));
?>

And a tiny update to the HTML by adding few spans to wrap every metric so we can show/hide them.

<div id="statsWrap">
	<div id="statsDetailsWrap">
		<div id="statsCount">
			<span id="statsPageviews"><?php echo $ga->getPageviews() ?></span>
			<span id="statsVisits"><?php echo $ga->getVisits() ?></span>
		</div>
		<div id="statsMetric">
			<span id="statsPageviewsText">pageviews</span>
			<span id="statsVisitsText">visits</span>
		</div>
	</div>
	<div id="byGoogle">By Google Analytics</div>
</div>

I have also updated the CSS a little bit by adding hard-coded width-heights to elements to make sure they will look ok when rotating:

#statsWrap {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#statsDetailsWrap {
	background: #333333;
	float: left;
	padding: 1px 3px 1px 1px;
	border: #666666 1px inset;
}
#statsCount {
	float: left;
	padding: 1px 3px;
	background: #999999;
	color: #FFFFFF;
	border: #666666 1px inset;
	width: 40px;
	height: 12px;
}
#statsMetric {
	float: left;
	padding: 3px;
	color: #FFFFFF;
	width: 50px;
	height: 12px;
}
#byGoogle {
	clear: both;
	color: #666666;
	font-size: 10px;
}

And here is the jQuery part which rotates metrics:

<script type="text/javascript">
$(document).ready(function() {   

	$("#statsPageviews").hide();
	$("#statsVisits").hide();
	$("#statsPageviewsText").hide();
	$("#statsVisitsText").hide();
	rotateMetrics(); 

	function rotateMetrics() {
		$("#statsPageviewsText").slideDown("slow");
		$("#statsPageviews").slideDown("slow", function() {
			setTimeout(function() {
				$("#statsPageviewsText").slideUp("slow");
				$("#statsPageviews").slideUp("slow", function() {
					$("#statsVisitsText").slideDown("slow");
					$("#statsVisits").slideDown("slow", function() {
						setTimeout(function() {
							$("#statsVisitsText").slideUp("slow");
							$("#statsVisits").slideUp("slow", function() {
								rotateMetrics();
							});
						}, 3000);
					});
				});
			}, 3000);
		});

	}
});
</script>

In the jQuery part, although it may look complicated, it is definitely not. We used callbacks for the slideUp/slideDown functions & added a little delay between transitions.

That’s all.

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

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/feedcount-like-google-analytics-counter/feed/ 20 http://www.webresourcesdepot.com/ajaxed-sliding-shopping-cart-with-jquery/ http://www.webresourcesdepot.com/ajaxed-sliding-shopping-cart-with-jquery/#comments Fri, 31 Jul 2009 08:53:24 +0000 Umut M. http://www.webresourcesdepot.com/?p=1084

Advertise here with BSA


With this 5th & last post of the "WRD E-Commerce Week" we will be modifying "our Ajaxed shopping cart" to create a one which is very ideal for designs with limited spaces. The shopping cart will: be hidden at the top of the page that can be displayed with a show/hide link open when an [...]]]>

Advertise here with BSA




With this 5th & last post of the "WRD E-Commerce Week" we will be modifying "our Ajaxed shopping cart" to create a one which is very ideal for designs with limited spaces.

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





Sponsors Of E-Commerce Week:



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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/ajaxed-sliding-shopping-cart-with-jquery/feed/ 40 http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/ http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/#comments Wed, 29 Jul 2009 07:52:37 +0000 Umut M. http://www.webresourcesdepot.com/?p=1080

Advertise here with BSA


In this 3rd day of the "WRD E-Commerce Week", we will be adding a chic fly-to-basket effect to our previously created Ajaxed shopping cart using jQuery. 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 [...]]]>

Advertise here with BSA




In this 3rd day of the "WRD E-Commerce Week", we will be adding a chic fly-to-basket effect to our previously created Ajaxed shopping cart using jQuery.

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.



Sponsors Of E-Commerce Week:



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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/fly-to-basket-effect-with-jquery/feed/ 39 http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/ http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/#comments Mon, 27 Jul 2009 07:05:40 +0000 Umut M. http://www.webresourcesdepot.com/?p=1071

Advertise here with BSA


It is a clear fact that Ajaxed interfaces, if not overused, eases using websites so much. 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 [...]]]>

Advertise here with BSA




It is a clear fact that Ajaxed interfaces, if not overused, eases using websites so much.

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:



Sponsors Of E-Commerce Week:



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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/feed/ 58 http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/ http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/#comments Thu, 12 Mar 2009 06:46:26 +0000 Umut M. http://www.webresourcesdepot.com/?p=848

Advertise here with BSA


jQuery, one of the most popular JavaScript library, has a huge selection of plugins which makes it more powerful. 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 [...]]]>

Advertise here with BSA




jQuery, one of the most popular JavaScript library, has a huge selection of plugins which makes it more powerful.

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:

You may also like: 9 Free And Open Source Bug Tracking Softwares.

 

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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/feed/ 11 http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/ http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/#comments Wed, 11 Jun 2008 05:01:36 +0000 admin http://www.webresourcesdepot.com/?p=341

Advertise here with BSA


Sliding menus are very effective in areas where we have limited space . 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 [...]]]>

Advertise here with BSA




Sliding menus are very effective in areas where we have limited space .

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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/feed/ 150 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/ http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/#comments Tue, 03 Jun 2008 05:01:40 +0000 Umut M. http://www.webresourcesdepot.com/?p=327

Advertise here with BSA


We generally have lots of content to present but can not load all of it at once as it may take too long. 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 [...]]]>

Advertise here with BSA




We generally have lots of content to present but can not load all of it at once as it may take too long.

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:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

]]> http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/feed/ 140