An AJAX Based Shopping Cart with PHP, CSS & jQuery

An AJAX Based Shopping Cart with PHP, CSS & jQuery

In this tutorial we are going to create an AJAX-driven shopping cart. All the products are going to be stored in a MySQL database, with PHP showing and processing the data.

jQuery will drive the AJAX-es on the page, and with the help of the simpletip plugin will add to an interactive check out process.

So go ahead, download the demo files and start reading.

An Awesome CSS3 Lightbox Gallery

An Awesome CSS3 Lightbox Gallery

In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost).

We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.

Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference.

So lets start with step one.

jquery - left navigation accordion

Making a Fresh Content Accordion

When developing a website, it is a great challenge to be able to organize the content in such a way, that it is both intriguing and eye-catching. Not to mention how important it is to prevent information overloading by exposing your visitors to too much data in a single view.

This is why there are certain techniques that help designers group content and show it only if the user is interested in what you have to offer and interacts with the page.

Today we are making a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

You can go ahead and download the demo files before we continue with step one.

AJAX-enabled Sticky Notes With PHP & jQuery

AJAX-enabled Sticky Notes With PHP & jQuery

Today we are making an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen. Every movement is going to be sent to the back-end via AJAX and saved in the database.

We are using version 1.4 of jQuery and the fancybox plugin (you can also check our CSS3 Lightbox Gallery Tutorial, where we also used fancybox).

You can download the example files and keep the demo site open in a tab so that it is easier to follow the steps of the tutorial.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Sweet AJAX Tabs With jQuery 1.4 & CSS3


Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

jquery - Full Calender

jquery - Full Calender

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

jquery - Google Map (All Functionalities)

jquery - Google Map (All Functionalities)

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

NOTHING MUCH YOU NEED TO DO & STUDY ALL GOOGLE API. THIS IS ONE DAMN SIMPLE.

Data to be in JSON format.

jquery : Transition Image Slide Effect

jquery : Transition Image Slide Effect

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

jQuery Shadow Motion Effect

jQuery Shadow Motion Effect

shadows following the motion of movements while in a fighting scene, some of my favorite scenes are from The Matrix, Kung Fu Hustle, etc. I don’t event know how this effect is called, but sure is an awesome effect. The good news is that now-a-days we can create animations and play with them. It’s no an easy task to control distance and motion (the complex the code, the better control). The amazing part is that something like this can be done with 5 lines of jQuery!

“Who Is Online” Widget With PHP, MySQL & jQuery

“Who Is Online” Widget With PHP, MySQL & jQuery

My boss is always coming into my office asking me to install things on our client’s sites. One of the items that’s been coming up more and more is “How can we tell who’s currently online?” So, the next time you need a tutorial idea, there you go – a php/mysql/jquery ‘online users’ widget. Oh, and a geomap of each visitor would be super rad too.

Thanks for everything you guys do,
Taylor

TTF to EOT Font Converter

TTF to EOT Font Converter

Use this tool to convert a TrueType (TTF) font file into an OpenType (EOT) font file, for use with Internet Explorer's embedded font support. After using this tool, you will be able to embed fonts on your web pages that can be seen on Internet Explorer 4 and higher, and all current modern web browsers that support embedded fonts via CSS3 (Firefox 3.5 and higher are among such browsers).

for custom font support in IE5.5 and above.

Good Tutorial

all free fonts - get here

I picked Agency font from here.... this is another best website for free fonts

HighFonts

image tool tip

Image w/ description tooltip

Move the mouse over a link and have the image of your choice plus corresponding description pop up, by using this image tooltip script. Each tooltip can have a different background color, just for aesthetics or in case the images are transparent gifs.

The code detects for window edges and keeps the tooltip inside. The tooltip moving with the mousemove is an option that can be turned off by setting the tipFollowMouse to false.

Ajax Availability Calendar is a php script

The Ajax Availability Calendar is a php script designed to show availability of whatever you might need it for (eg. holiday cottage, hotel rooms etc.).
Free to use on your website or application and is currently being used (v.2) by hundreds, if not thousands, of websites around the world.

books showcase - css / jquery / flash / mysql

This widget lets you display images in a rich interactive visualization similar to that of Apple iTunes known as Cover Flow. It is a Flash-based implementation.

flash book store shelf

Progressive enhancement: pure CSS speech bubbles

Progressive enhancement: pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

Yahoo Geo-Location Library

YQL Geo Library - get all your geo needs in JavaScript - geolocation, reverse geocoding, content analysis

As an aid for the Georgia Tech Hack 2010 and as a follow-up to my talk about geolocation here is a simple JavaScript library that answers most of your geo questions. It wraps the following services in a simple interface:

jquery accordian

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

jquery data picker

Using jsDatePick
jsDatePick is a javascript date picker that uses DOM techniques to generate its HTML code. Read the parameters and working examples below, and within minutes, you can have a popup date picking solution on your website.

Read below for full documentation of parameters, and to download jsDatePick. We developed jsDatePick as a custom date picking module for our web-based money management software - check it out if you like.

web resources - php / jquery / security references

web resources for php / jquery / html security / images / scripts available here

great treasure for scripts

simple slider - jquery

it's easy
The package is based around the way you already build your website, so you don’t have to retain swaths of arbitrary knowledge to use it on a regular basis.

simple slider - jquery

color codes - html

0to255 is a simple tool that helps web designers find variations of any color.

Basically, it's a simple tool that helps web designers find lighter and darker colors based on any color. Why is this necessary? Well, that takes a little more explanation.

color codes

CSS Audio Font

A web document can be rendered by a speech synthesizer. CSS2 allows you to attach specific sound style features to specific document elements.

Aural rendering of documents is mainly used by the visually impaired. Some of the situations in which a document can be accessed by means of aural rendering rather than visual rendering are the following.


CSS Voice & Speach Examples
http://www.cssdog.com/css_aural_media.html

http://www.w3.org/TR/css3-speech/

using custom font ::
http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

Using HTML Symbol Entities

Using HTML Symbol Entities

Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code. For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number). Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ ♫ ✓ ✗ • ☞ ✁ ★ “ ⊕. Have you seen the snowman ☃ symbol before? If not, continue on this post to find more surprises.

Facebook Style Footer Admin Panel

Facebook Style Footer Admin Panel

The popularity of social media has been booming in the past few years and Facebook definitely has climbed high to the top of the social network rankings. Facebook has many Ajax driven features and applications that are very impressive, and one of the things I particularly like is the footer admin panel, where it neatly organizes frequently used links and applications.

This week I would like to cover part 1 of how to recreate the Facebook footer admin panel with CSS and jQuery.

VALIDATE FORMS LIKE YOU'VE NEVER BEEN VALIDATING BEFORE!

VALIDATE FORMS LIKE YOU'VE NEVER BEEN VALIDATING BEFORE!

"But doesn't jQuery make it so very easy to write your own validation plugin?" Sure, but there still are a lot of subtleties that you have to worry about: You need a standard library of validation methods (think of emails, URLs, credit card numbers). You need to place error messages in the DOM and show and hide them when appropriate. You want to react to more than just a submit event, like keyup and blur. You may need different ways to specify validation rules, based on the server-side enviroment you are using on different projects. And after all, you don't want to reinvent the wheel, do you?

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!