Imitation based on jQuery code flash photo album to enlarge
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.
We've been down the jQuery "sliders" path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider. Many of the concepts presented in those tutorials are the same with this slider, so I'm not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out. Fun!
Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.
By far one of the most requested features by Tutorialzine’s readers, is building a site-wide search. One way to do it, is to build it yourself from the ground up. That is, to use a server-side language like PHP and run search queries on your database, displaying the results to the user. Another way is to use the services of the one search engine that already knows everything about everyone. Yep, you guessed it. In this tutorial we are using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site.
The first Tutorialzine giveaway has finished! Now is the time to draw the winners. But, as this is a web development blog, we cannot just run an ORDER BY RAND() MySQL query in phpMyAdmin. Even more, three different sets of prizes must be awarded. This calls for a bit more stylish approach – a dedicated randomizer jQuery app, especially made for choosing winners in competitions and giveaways. The app is divided in three steps – in step one you provide a list of the contestants’ name and email, divided by a comma (each contestant on a separate line). In the second step, you provide a prize name and a number, signifying the number of copies that have been offered. In the last step, you get a randomly selected list of contestants and their prizes.
In part two of this two-part tutorial, we will be creating the jQuery and CSS front end of our AJAX Web Chat. In the first part, we discussed the PHP & MySQL side.
When discussing real time communication, there aren’t many solutions that can rival the power of a simple webchat. What is even better, is that you already have all the tools you need to create one – your web browser. This, coupled with the fact that this is also one of the most requested tutorials by Tutorialzine’s readers, means that it is about time to start coding. In this two-part tutorial, we will be creating an AJAX Web Chat using PHP, MySQL and jQuery. In this first part, we will be discussing the PHP & MySQL side, and next week we will continue with the jQuery and CSS front-end.
The Beatles are on iTunes! Or, if you are like me and don’t care that much about it, you’ve probably noticed the awesome splash screen that Apple used to promote the event. Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us.