Archive for the ‘Tutorials’ Category

Animated Progress Bar in 4 lines of jQuery

Friday, December 28th, 2012

Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the start.

progress-bar-in-4-lines

jQuery UI have progress bar widget and you can find a lot of other plugins which do the same thing. But if you learn how to write your own progress bar you’ll have more ability to change and adjust to your needs. And it’s only 4 lines of jQuery code.

(more…)

News Ticker in 4 lines of jQuery

Tuesday, September 20th, 2011

There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?

new-ticker-in-4-lines

Idea is pretty simple, take first element from list, apply some disappearing effect on it and on callback attach it to the end of the list.

(more…)

Image gallery in 4 lines of code with MooTools and Dojo

Friday, August 27th, 2010

Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.

Image gallery in 4 lines of code with MooTools and Dojo

Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. Same rules, HTML and CSS code as here will be used. (more…)

Create image gallery in 4 lines of jQuery

Saturday, July 3rd, 2010

Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image should have bar with description. When user click on thumb large image and description should change.

gallery-4-lines

My idea was to use alt tag of thumb image for large image description. I already did that for jqFancyTransitions. Also, I was impatient to use jQuery’s delegate method in real life. So this is my image gallery with thumbs and description in 4 lines of jQuery.
(more…)