News submit

Starting soon you will be able to submit your own news to this webdesign and webdevelopment resources blog

Please submit here news or articles related to webdevelopment or webdesign.

Anyway, your post will be moderated before being displayed, so please submit only relevant news.
Promoting your own articles is allowed and welcomed but the quality of the posts will be accepted only if we consider to.

Stay tuned

A functional Mozilla menu roll-over effect - no preload necessary

Hi, I would like to write about preloading images in Mozilla. I faced this problem many times and for a while the long-used-trick with a display:none div worked very well. So I happily created roll-over effects in image-based menus until one day…

Now the old trick is not functioning on Mozilla. The good guy is Internet Explorer and the bad guy is suddenly Mozilla. Surprised? Me too…

THE SOLUTION - is not necessary original and brain-blowing - but it’s working beautifully and with no CSS/HTML crazy tricks.

Instead of having the menu background like this

and the roll-over image like this:

we will create the menu background like this:

You can see the menu has doubled the height and the roll-over image is above the normal one - and now has 78px instead 39px. The CSS code will then look like this:

a.menu_home {

height:39px;width:6.625em;color:#fff;text-decoration:none;float:right;

background: url(”images/home.jpg”) bottom left no-repeat;

}

a:hover.menu_home {

height:39px;color:#fff;text-decoration:none;

background: url(”images/home.jpg”) no-repeat top left;

}

this way the image will be loaded from the start and first we will display the bottom part and on mouse over we will display its top part. Simple, isn’t it?

You can see the working example and code here.

javascript carousels

Javascript carousels are used to display some images or content, in a often narrow space, allowing the webdesigner to show much info in a limited space. They add some functionality to page, and in the same time some visual candy.

Some of scripts that can help us to achieve this are presented below:

 Carousel Component

The script use YUI and has a nice list of features like vertical/horizontal mode, ajax fetch for content,animation control and works with most of  modern browsers

iCarousel

The iCarouel script has as base mootools framework, and works on  ie,frefox,opera and safari. We tested the script in konqueror and works fine too. It is pretty configurable, but require to tune the declaration of class for this (maybe a little hard for noobs).

 Carousel Slideshow

The script supports vertical and horizontal scrolling, optional linking, title attributes, configurable visible sides, and more.

Simple 3D Carousel using Mootools

As the name says, is a simple 3d mimic carousel, based on mootools.The site explain how to implement the script.

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

 Prototype Carousel w/ Scriptaculous (version 2)

This script  is a prototype based carousel that allows for n-item paging. It utilize the scriptaculous effects library for carousel paging/movement. Additionally, the items within the carousel are extracted from the HTML itself so that they can be indexed in search engines.

 ScrollShow

ScrollShow is a very customizable slideshow, that relies on jQuery.ScrollTo, to slide(scroll) the items.

Let me know for other scripts is same category.