Simple Yet powerful html Content rotator

I found this simple yet powerful html content rotator and using in few of my projects. I think its worth sharing with the community. The library named

jShowOff: a jQuery Content Rotator

You can download the script from this location. It requires two file only, on css which you can copy to your own css file and the other one is of course the java script , there are two distribution for this library, I strongly suggest that you should use the min version.

http://ekallevig.com/jshowoff/

There are some comprehensive set of examples given in the home page for the library. I would suggest to download and look for this examples.

 

Best of luck and happy programming.

Rounded Corner and other stuff in IE7 or IE8

Often we need to have rounded corner support for our html content, filefox, crome, safari and latest version of IE9 have native support for rounded corner for html div and other supported html elements. But Alas! we don’t have support in IE6, IE7 or IE8.

An interesting website is http://border-radius.com/ where we can generate rounded border radius. just visit this site and add your desired pixel. It will generate the required css for you.

 

It’s a copy and pest effort. Now if we need rounded corner in pre IE9 browsers we need some thing out of the box. Then come the custom css and JavaScript libraries and some time html “.htc” behaviors files.

In first option we are going to talk about css3pie it’s a simple yet powerful tool to get some html5 support in old ie browsers. You can download the libraries from its homepage at http://css3pie.com/

Add what ever border you need and at last include behavior:url(/pie.htc) that’s it.

Next we are going to see an query based rounded corner support, http://jquery.malsup.com/corner/ this is the site where from you can download the library its s single file and required to have query in advance. the use is very easy. bellow an screen shot from original site is given.

Try it you would love it. I am sure lots of you are already using it. Good luck and happy programming.

Custom style for your Radio Button,Checkboxes and Select Lists

I was searching for some easy JavaScript code via which I can change the style of html select. Its because we often have requirement to show different style of html select. When I say custom it mean how to entirely change the look and feel of a drop down.

Searching in Google I found couple of solutions to my problem. Most of the design is done via JQuery plugin. among those I find one easy one the link is given bellow.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

The usage is pretty simple just add the script in your project and add link to your master page or page.

Then add css for your items. example css is given bellow.

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(checkbox.gif) no-repeat;
    display: block;
    clear: left;
    float: left;
}
.radio {
    background: url(radio.gif) no-repeat;
}
.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) no-repeat;
    overflow: hidden;
}

Lastly add css class ‘styled’ tag to the element that you want to make custom. you can customize the script and css to get your designed theme.

"<input type="checkbox" class="styled" /> “

Both script and css is given in the above url. just download and use.

Note: I found a problem while using this. when I use this the auto post back feature of asp.net elements are not working. When I have the solutions will share again.

Update: You can find whole lot of html form element customization examples here. Just choose what ever best suites you. “http://www.netwaver.com/23/24-html-form-elements-customization-techniques/”

Best of luck and Happy programming