You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.
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.
Introduction
In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
The final result is something like this:
Welcome to Galleria
Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project. Galleria clocks around 5k daily downloads, making it one of the most popular javascript galleries around. This site is now dedicated to version 1.2, currently in beta development at GitHub. Stable release is set to september 2010.
Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership. Stay tuned!
Introduction
Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links:
This tutorial is going to be awesome! I got inspired by my friend’s Image Splitting Effect from Tutsvalley. I decided to take one step further, create a four corners sliding door effect.
Introduction
Until this day, jQuery is still blowing me away with its simplicity and robustness. As you can see, I have been concentrated to produce tutorials about it, and I just couldn’t help it! Right, this time, we’re going to learn how to create a news slider that come with the following features:
- Slideshow with Image and description/caption
- previous, next, pause and play buttons
- On mouse over, pause the slideshow, and play it on mouse out
- Sliding effect for both gallery panel and excerpt panel
- Adjustable slideshow speed
- And, finally, smarter script that will calculate width and height for the slideshow
We’re going to use scrollTo jQuery plugin during the development. A huge thumb up and big thank you to Ariel Flesler who created the plugin.
Introduction
Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).
So, here we go again, I separated my codes into 3 sections: html, css and javascript and I will explain how it works in each section.
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
UIZE is a powerful, open source, object oriented JavaScript framework – supporting widgets, AJAX, DOM, templates, and more.
