12 November 2011

Small blog cleanup...

Hi everyone,

While I try to create something useful for my beloved visitors and add new plugins code to my blog, first page becomes slow and overloaded with different things.
That's why I have to do a small cleanup on the main page. I'm going to move all existing demos to separate pages and replace them with links/images on the existing pages.
Forgive me if my actions cause you any inconvenience, this is my first (and only for this moment) blog, so I'm just learning how to make it more user friendly.

Kind regards,
Your WebWorld-develop author.

11 November 2011

Cool HTML 5 select with jquery and css styles (rounded corners and gradient)

Demo

Click image to view Live Demo

How to use

Add reference to jQuery library to your page (I'm using this one).
Add reference to wwselect.css to <head> section (<link rel="Stylesheet" type="text/css" href="wwselect.css" />).
Note that css requires 2 images for arrows that can be found in archive. Don't forget to update urls in css if you move them to another directory.
Add reference to wwselect.min.js (<script type="text/javascript" src="wwselect.min.js"></script>).
Init plugin code.
$(window).load(function(){ {$("select").wwselect(); }); - to update all selects on the page
$(window).load(function(){ {$("#example2").wwselect(options); }); - to update all single select with some options
Take a look at demo page source for more details.

Settings description

Setting name	Description	Example
width	Indicates maximum width of generated select. When this value is exceeded option text will be minified.	Any number greater then 0. $(<selector>).wwselect({ width: 100 });
height	Indicates maximum height of generated list of options. When this value is exceeded vertical scroll will appear.	Any number greater then 0. $(<selector>).wwselect({ height: 100 });

Download

Download page

See demo.html for more details.

!!! Note: Some browsers may have invalid gradient and rounded corners handling!!!

Like this article?