Animated Progress Bar in 4 lines of jQuery

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.

Continue reading “Animated Progress Bar in 4 lines of jQuery”

News Ticker in 4 lines of jQuery

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 of 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.

Continue reading “News Ticker in 4 lines of jQuery”

Image gallery in 4 lines of code with MooTools and Dojo

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. Continue reading “Image gallery in 4 lines of code with MooTools and Dojo”

Create image gallery in 4 lines of jQuery

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.
Continue reading “Create image gallery in 4 lines of jQuery”