Make Checkboxes Act Like Radio Buttons Using jQuery

This tutorial shows you how to make Check boxes act like radio buttons, this really need when the designer designed a quiz page with check boxes instead of radio buttons and the client wants only in that way. Sad isn’t it?

But don’t worry here is the solution for that,
jQuery Part:

Simple Image Scroll Using Javascript Marquee

Simple image scroll using javascript marquee, only with the help of jQuery and marquee.js. Only need to add the javascripts and the scrolling div. This script will only output a div with a number of images scrolling inside it. You can add more functionality to it later as per your need.

Then you need to add the css for image container and the images,

That’s it. You have integrated your scroll. You can download the attached zip file which contains the html and js files here.

Scroll To Specific Section Using jQuery

We can scroll to specific section using jQuery method .scrollTop(). .scrollTop() expects a parameter, that is , the pixel value where the scroll bar should scroll to.

is able to scroll the window ( if there is enough content in it ). You can also get desired value with offset() and position().

This will scroll the contact element to view. The non-jQuery alternate method is .scrollIntoView(). You can call that method on any DOM element like:

true indicates that the element is positioned at the top whereas false would place it on the bottom of the view. The nice thing with the jQuery method is, you can even use it with functions like .animate(). So you might smooth scroll something.

you can use a very lightweight approach by defining your custom scroll jquery function.

Scroll to a page using coordinates,

scrolling with window.scroll,

only to sum up, use the window.location.hash to jump to element with ID,

Happy Coding 🙂

Live URL Of jQuery UI Themes

jQuery UI is a JavaScript library that provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript library, that can be used to build interactive web applications.

You need to add the jQuery.ui.js file to enable your UI integration. And for the styles you need to include ui.css files. Switching with the themes is little difficult you you are downloading the files from the jQuery.ui site and including it to your html page.

A more easy way is there to play with all the themes provided by jQuery.ui without downloading all of them. Below are the live urls of the ui.css files for all the themes. Just put these urls in your scripting include and the ui theme for whole site will be changed and you can see the reflection at that instance.

Script to include your JS files to enable jQuery and jQuery UI Themes for your site,

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js”></script>

Now add you css file for UI CSS. The url should be chnaged to change the UI theme,

<link rel=”stylesheet” type=”text/css” href=”DYNAMIC URL HERE” media=”screen” />

Now find below your desired theme and place that URL into the above code.

BASE

http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css

BLACK-TIE

http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css

BLITZER

http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css

CUPERTINO

http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css

DARK-HIVE

http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css

DOT-LUV

http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css

EGGPLANT

http://code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css

EXCITE-BIKE

http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css

FLICK

http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css

HOT-SNEAKS

http://code.jquery.com/ui/1.9.1/themes/hot-sneaks/jquery-ui.css

HUMANITY

http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css

LE-FROG

http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css

MINT-CHOC

http://code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css

OVERCAST

http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css

PEEPPER-GRINDER

http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css

REDMOND

http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css

SMOOTHNESS

http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css

SOUTH-STREET

http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css

START

http://code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css

SUNNY

http://code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css

SWANKY-PURSE

http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css

TRONSTATIC

http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css

UI-DARKNESS

http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css

UI-LIGHTNESS

http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css

VADER

http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

 

All the css can be managed in the database also and you can have a nice UI theme chnager option for your site. I hope this post will help will somewhat.