Building a 5 Star Rating System with jQuery, AJAX and PHP In this tutorial, you'll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we'll also leverage the power of PHP so that you don't even need a database! Step 1. Building the HTML We're going to create a simple page that lists two movies, and allows you to rate them. Let's take a look at the HTML/CSS Notice how there are no graphics in this HTML? This first part of the CSS accomplishes a few things: Gives the default 'empty' start to each star locationSets up classes for filled in stars, and highlighted starsDefines and styles the stars' container. You can either use the graphics provided in the download, or make your own. Next we add a little more CSS to position the total votes box, and center the widgets so the page matches the graphic at the start of this section. Step 2. At this point, we have a very plain looking bunch of empty stars, but they don't do a whole lot at this point. Step 3. Step 4.
Labs - GreyBox A pop-up window that doesn't suck. Introduction GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox: It does not conflict with pop-up blockers It's only 22 KB! Examples One website To trigger GreyBox you'll only need to append a rel tag on your a tags: <a href=" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a> Website gallery Image gallery It takes very little code to display image galleries: Installation Step 1 Append following to your header section. <script type="text/javascript"> var GB_ROOT_DIR = " GB_ROOT_DIR should be absolute. Step 2 Append also following scripts and one stylesheet: AJS_fx.js is optional. Step 3 You are ready to use GreyBox. Where could it be used? Showing external pages AJAX uploading of files Showing internal pages (login, user preference, properties, contact formulas etc.) What browsers are supported? Other browsers may also be supported.
Top 10 jQuery Lightbox Scripts Everyone loves lightbox javascript effects, since the original Lightbox script there has been countless clones generated for all the popular Javascript libraries. This collection rounds up the top ten Lightbox scripts for jQuery in particular, so remember to keep it bookmarked for your next design project! jQuery Lightbox Plugin Supported Media: Images View Demo Download Fancybox Supported Media: Images, Inline HTML, iFrame View Demo Download Shadowbox Supported Media: Images, Inline HTML, iFrame, AJAX, Flash, Video View Demo Download ThickBox Supported Media: Images, Inline HTML, iFrame, AJAX View Demo Download Slightly Thickerbox Supported Media: Images, AJAX, Video View Demo Download Fancy Zoom Supported Media: Images, Inline HTML, Flash View Demo Download Facebox Supported Media: Images, Inline HTML, AJAX View Demo Download nyroModal Supported Media: Images, Inline HTML, iFrame, AJAX, Video View Demo Download Interface Imagebox Demo View Demo Download piroBox View Demo Download Greybox Redux View Demo Download prettyPhoto
Developing Sites With AJAX: Design Challenges and Common Issues - Smashing Magazine Advertisement Almost every movie has a scene in which a character pull the protagonist aside and says, “There’s something you should know about [insert another character's name here].” Most of the time, we find out some dark secret about a supposed friend of the protagonist or that the main ally is actually an evil overlord. We seem to have AJAX licked. For example, we could take the following HTML… <div id="target"></div><p><a href="#" class="ajaxtrigger">Let there be AJAX magic</a></p> … and add this jQuery code: $('.ajaxtrigger').click(function(){ $('#target').load('ajaxcontent.html'); }); In a browser, if we clicked on the link labelled “Let there be AJAX magic,” the content of the HTML document ajaxcontent.html would be loaded and written into the element with the ID target. What Is AJAX? After the main HTML document has loaded, AJAX loads content from the server and replaces parts of the document with that content rather than reload the main document. AJAX Should Not Break The Web <! <?