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:
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.
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.
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.
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.
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:
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.
The first stop for everyone planning to create a jQuery plugin.
It covers the logic, naming patterns & steps like:
Jonathan Snook is sharing his thoughts on developing a jQuery plugin.
A quick look to the basics & advantages of "why we need a plugin".
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.
Click here to see the final working demo of this jQuery sliding menu.
<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>
<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:
<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.
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.
