jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin) : The Official Microsoft ASP.NET Forums

Reply

jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 12, 2010 11:21 AM|LINK

Hello!

Few days ago I had problems with jQuery fancy checkbox plugin (http://forums.asp.net/t/1621396.aspx) and Raghav Khunger kindly helped me solved the problem.

However after that I want to "combine" 2 plugins, the one mentioned in first post:

http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

and this one ("Safari"):

http://widowmaker.kiev.ua/checkbox/

So I've changed the picture of checkbox and wanted to add hover effects as it is shown in second link (according to state of checkbox).

However since I'm quite noob with jQuery (and JS) the thing only works fine on "default" mode, when checkbox is not selected or checked on page load.

JS:

//##############################
 // jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
 // By Dharmavirsinh Jhala - dharmavir@gmail.com
 // Date of Release: 13th March 10
 // Version: 0.8
 /*
 USAGE:
 $(document).ready(function(){
 $(":radio").behaveLikeCheckbox();
 }
 */
      

 var elmHeight = "16"; // should be specified based on image size


 // Extend JQuery Functionality For Custom Radio Button Functionality
 jQuery.fn.extend({
     dgStyle: function() {
         // Initialize with initial load time control state
         $.each($(this), function() {
             var elm = $(this).children().get(0);
             elmType = $(elm).attr("type");
             $(this).data('type', elmType);
             $(this).data('checked', $(elm).attr("checked"));
             //added so disabled checkbox is not active
             $(this).data('disabled', $(elm).attr("disabled"));
             $(this).dgClear();
         });
         $(this).mousedown(function() { $(this).dgEffect(); });
         $(this).mouseup(function() { $(this).dgHandle(); });
     },
     //on page load, default
     dgClear: function() {
         if ($(this).data("checked") == true) {
             $(this).css({ backgroundPosition: "0px -16px"});
             //works strangely
             $(this).hover(function() {
                $(this).addClass('checkbox-hoverChk');
             }, function() {
                 $(this).removeClass('checkbox-hoverChk');
             });
         }
         else if (($(this).data("disabled") == true)) {
             $(this).css({ backgroundPosition: "0px -32px", color: "#808080" });
         }
         else {
             //$(this).css({ backgroundPosition: "0px 0px" });
             //works
             $(this).hover(function() {
                 $(this).addClass('checkbox-hoverUnchk');
             }, function() {
                 $(this).removeClass('checkbox-hoverUnchk');
             });
         }
     },
     //if you hold left mouse button pressed on (un)checked checkbox the icon gets darker
     dgEffect: function() {
         //added so disabled checkbox is not active
         if (!($(this).data("disabled") == true)) {
             if ($(this).data("checked") == true)
                 $(this).css({ backgroundPosition: "-16px -16px" });
             else
                 $(this).css({ backgroundPosition: "-16px 0px" });
         }
     },
     dgHandle: function() {
         //added so disabled checkbox is not active
         if (!($(this).data("disabled") == true)) {
             var elm = $(this).children().get(0);
             if ($(this).data("checked") == true)
                 $(elm).dgUncheck(this);
             else
                 $(elm).dgCheck(this);


             if ($(this).data('type') == 'radio') {
                 $.each($("input[name='" + $(elm).attr("name") + "']"), function() {
                     if (elm != this)
                         $(this).dgUncheck(-1);
                 });
             }
         }
     },
     //check
     dgCheck: function(div) {
         $(this).attr("checked", true);
         $(div).data('checked', true).css({ backgroundPosition: "0px -16px" });
     },
     //uncheck
     dgUncheck: function(div) {
         $(this).attr("checked", false);
         if (div != -1) {
             //after unchecking of the CB the default picture is shown
             $(div).data('checked', false).css({ backgroundPosition: "0px 0px" });
             //doesn't work
             if ($(div).data('checked') == false) {
                 $(div).hover(function() {
                 $(div).addClass('checkbox-hoverUnchk');
                 }, function() {
                 $(div).removeClass('checkbox-hoverUnchk');
                    

                 });
             }
         }
         else
             $(this).parent().data("checked", false).css({ backgroundPosition: "0px 0px" });
     }
 });

CSS:

.radio {
	height: 25px;
	width: 19px;
	clear:left;
	float:left;
	margin: 0 0 3px;
	padding: 0 0 0 26px;
	background: url("jQ_PLUG/Checkbox/radio.png");
	background-repeat:no-repeat;
	cursor: default;
}
.checkbox {
	float:left;
	margin: 0 0 3px;
	padding: 0 1px 0 0;
	background: transparent url("jQ_PLUG/Checkbox/safari-checkbox.png") no-repeat;
	cursor: default;
	text-align:left;
	width: 16px; height: 16px;
	background-position:0px 0px;
	vertical-align:middle;
	text-indent: 8px;
}
.checkbox-hoverUnchk {background-position:-16px 0px;}

.checkbox-hoverChk {background-position:-16px -16px;}

.checkbox input,.radio input {
	display: none;
}
.checkbox input.show,.radio input.show {
	display: inline;
}
.selected {
	background-position: 0 -52px;
}
.block {
	width: 50%;
	float: left;
}
label {
	padding-left:10px;
	float:left;
	text-align:left;
}

Thank you very much for help. I must start learning jQuery more intensely but don't have much time.

Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 12, 2010 01:46 PM|LINK

Hi Stark,
You can go with second link only as it has all the things which was in first + hover effect too

Raghav|My Articles|My Blog

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 12, 2010 01:51 PM|LINK

Hello!

I've tried it but it didn't work so great. If I try the demo page it's working so maybe I did something wrong although the use of plugin is pretty easy.

I wanted to modify the previous plugin as I think this is the best way to learn jQ.

Thanks!

Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 12, 2010 02:07 PM|LINK

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" href="http://widowmaker.kiev.ua/checkbox/jquery.checkbox.css" />
    <link rel="stylesheet" href="http://widowmaker.kiev.ua/checkbox/jquery.safari-checkbox.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://widowmaker.kiev.ua/checkbox/jquery.checkbox.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input:checkbox:not([safari])').checkbox();
            $('input[safari]:checkbox').checkbox({ cls: 'jquery-safari-checkbox' });
        });
    </script>
</head>
<body>
    <form runat="server">
    <h3>
        Safari skin</h3>
    <p>
        <input name="checkbox.2.1" type="checkbox" safari="1" onclick="jQuery('#check2').attr('checked', !jQuery('#check2').attr('checked') ? true : false)">
        Unchecked checkbox (by clicking on this checkbox you can check/uncheck the checkbox
        below)</p>
    <p>
        <input name="checkbox.2.2" type="checkbox" safari="1" id="check2" checked>
        Checked checkbox (this one)</p>
    <p>
        <input name="checkbox.2.3" type="checkbox" safari="1" disabled>
        Disabled & unchecked checkbox</p>
    <p>
        <input name="checkbox.2.4" type="checkbox" safari="1" disabled checked>
        Disabled & checked checkbox</p>
    </form>
</body>
</html>

Raghav|My Articles|My Blog

Marked as answer by Yanping Wang - MSFT on Nov 18, 2010 08:39 AM

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 16, 2010 12:50 PM|LINK

Hello!

I've tried the code above but there are borders around icons in all pictures and no icons in Firefox. Previous plugin work better but I have problems with hover effects.

Thanks!

all the best

Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 17, 2010 06:49 AM|LINK

Hi StarkWolf

Download the empty.png from their site and the square border will be removed. Here is the code which will work in all :

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>


    <script src="http://widowmaker.kiev.ua/checkbox/jquery.checkbox.min.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(function() {
            $('input[safari]:checkbox').checkbox({ cls: 'jquery-safari-checkbox' });
        });
			

		</script>


    <style type="text/css">
        .jquery-safari-checkbox
        {
            display: inline;
            font-size: 16px;
            line-height: 16px;
            cursor: pointer;
            cursor: hand;
        }
        .jquery-safari-checkbox .mark
        {
            display: inline;
        }
        .jquery-safari-checkbox img
        {
            vertical-align: middle;
            width: 16px;
            height: 16px;
        }
        .jquery-safari-checkbox img
        {
            background: transparent url(http://widowmaker.kiev.ua/checkbox/safari-checkbox.png) no-repeat;
        }
        .jquery-safari-checkbox img
        {
            background-position: 0px 0px;
        }
        .jquery-safari-checkbox-hover img
        {
            background-position: -16px 0px;
        }
        .jquery-safari-checkbox-checked img
        {
            background-position: 0px -16px;
        }
        .jquery-safari-checkbox-checked .jquery-safari-checkbox-hover img
        {
            background-position: -16px -16px;
        }
        .jquery-safari-checkbox-disabled img
        {
            background-position: 0px -32px;
        }
        .jquery-safari-checkbox-checked .jquery-safari-checkbox-disabled img
        {
            background-position: 0px -48px;
        }
    </style>
</head>
<body>
    <h3>
        Safari skin</h3>
    <p>
        <input name="checkbox.2.1" type="checkbox" safari="1" onclick="jQuery('#check2').attr('checked', !jQuery('#check2').attr('checked') ? true : false)">
        Unchecked checkbox (by clicking on this checkbox you can check/uncheck the checkbox
        below)</p>
    <p>
        <input name="checkbox.2.2" type="checkbox" safari="1" id="check2" checked>
        Checked checkbox (this one)</p>
    <p>
        <input name="checkbox.2.3" type="checkbox" safari="1" disabled>
        Disabled & unchecked checkbox</p>
    <p>
        <input name="checkbox.2.4" type="checkbox" safari="1" disabled checked>
        Disabled & checked checkbox</p>
</body>
</html>

Demo:http://jsbin.com/eremi3

Raghav|My Articles|My Blog

Edited by raghav_khunger on Nov 17, 2010 06:50 AM
Marked as answer by StarkWolf on Nov 18, 2010 02:11 PM

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 18, 2010 10:00 AM|LINK

Hello!

Thank you for your fast and kind response. Sorry but I don't understand where to put the empty.png.

However I've tried your demo and the checbox doesn't look right in any browser except Opera where problems occur after clicking checkbox.

picture

Thanks!

all the best

P.S. Sorry for pasting links like this but I can't paste them in Firefox.

Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.

Edited by StarkWolf on Nov 18, 2010 10:02 AM

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 18, 2010 10:04 AM|LINK

You will find empty.png in their sample download. After that square box will be removed.

Raghav|My Articles|My Blog

Reply

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 18, 2010 10:44 AM|LINK

Hello!

I've placed the empty.png but squares around checkboxes don't disappear. Also in Firefox there are no pictures just text beside. It's strangely because plugin in site works in all browers I've tested.

Thanks!

all the best

Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.

Reply

raghav_khung...

All-Star

32835 Points

5563 Posts

MVP

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

Nov 18, 2010 10:50 AM|LINK

I am sure you are missing something as the same stuff is working on their site.

Raghav|My Articles|My Blog

jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin) RSS

14 replies

StarkWolf

jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

raghav_khung...

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

StarkWolf

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

raghav_khung...

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

StarkWolf

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

raghav_khung...

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

StarkWolf

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

raghav_khung...

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

StarkWolf

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

raghav_khung...

Re: jQuery: problems with adding hover effect to checkbox (fancy checkbox plugin)

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft