[How To] Custom Checkbox using jQuery

Pocket

Here is how I managed to get the custom checkbox using jQuery. See the screenshot below

JQuery Custom CheckBox
JQuery Custom CheckBox

The simple idea is to put class where we want to display checkbox. Here I have used two classes .clear and .checked. The name are very obvious.

.clear holds the unchecked state of checkbox.

.checked holds the checked state of checkbox.

Whenever the click on the class .clear and .checked class is triggered, we change the background accordingly by adding and removing the corresponding CSS by jQuery, this is where we use jQuery in fact.

We have three files:

1. checkbox.html
2. checkbox.js
3. checkbox.css

Source code for checkbox.html

<html>
<head>
<title>JQuery Custom gnu CheckBox Demo</title>
<link rel="stylesheet" href="checkbox.css">
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="custom_checkbox.js"></script>
</head>
<body>
<h3>Show More Tutorials on :</h3>
		<ul id='langauges'>
			<li><p><span class='clear' rel='java'></span>Java</p></li>

			<li><p><span class='clear' rel='visual basic'></span>Visual Basic</p></li>
			<li><p><span class='clear' rel='python'></span>Python</p></li>
			<li><p><span class='clear' rel='ruby'></span>Ruby</p></li>
			<li><p><span class='clear' rel='c/c++'></span>C/C++</p></li>
		</ul>

	<p class='show_value'></p>

</body>
</html>

Sourcecode for custom_checkbox.js

$(document).ready(function() {
	var opt = $('p &gt; span');
	$(opt).click(function() {
		var value = $(this).attr('rel');

		if ($(this).hasClass('clear')) {
			$(this).removeClass('clear');
			$(this).addClass('checked');
			$('.show_value').text("Checked : "+value);
		} else {
			$(this).removeClass('checked');
			$(this).addClass('clear');
			$('.show_value').text("Unchecked : "+value);
		}
	});
});

Sourcecode for checkbox.css

body {
	background:#000;
	color:#fff;
}
ul#langauges {
	list-style:none;
	width:80%;
}
ul#langauges li {
	width:70%;
}

span.checked {
	background-image:url('checked.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
}

span.clear {
	background-image:url('clear.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
	}

.clear,.checked {
	float:left;
	margin-right:5px;
	display:block;
	background-image:url('clear.png');
	background-repeat:no-repeat;
	background-position:50% 50%;
	width:22px;
	height:22px;
}

That’s all, try and enjoy it.

[How To] Update Shutter

Pocket

Shutter is a screenshot tool for linux. For more information visit http://shutter-project.org

Now shutter can be updated using PPA. The benefit of using PPA is that whenever a new update is available it would be listed under Update Manager, this way we will always have a stable and latest software available for use.
Check your version of shutter.

1. Start Shutter

2. Click Help > About

At top is the version of shutter you are using which is in format 0.X.X.

1. sudo add-apt-repository ppa:shutter/ppa

2. sudo apt-get update

3. sudo apt-get install shutter

Shutter Update
Shutter Update

That’s all and now you’ve successfully updated shutter.

[Solved] Keyboard Lock problem in Linux (Ubuntu)

Pocket

I recently installed SCIM for using multiple input. Then I faced the problem of Keyboard locking in my system. Problem seems to occur usually, when I am working Eclipse IDE, and sometime it would also halt on some graphic applications. (GIMP & Inkscpae) No more keyboard inputs allowed. Then I have to kill SCIM daemon.

Q. How to kill SCIM daemon ?

1. System > Administration > System Monitor

System Monitor
System Monitor

2. Select Process tab page, then under Process Name, find the Scim-launch and then right-click on it and select End Process.

That will kill all the running instances of Scim, which causes the keyboard locking problem.

The above method will solve the problem of keyboard locking temporarily, till the system is on. On reboot, the SCIM will again start and you’ll have to manually kill the process, by repeating above steps.

Q. How to kill SCIM daemon permanently ?

-> Uninstall SCIM from Synaptic Package Manager.

2. System > Administration > Synaptic Package Manager

3. Search for SCIM and click on Mark for removal, then select Mark.

Then click on Apply and again click on Apply.

Now, SCIM has been uninstalled from the System.

How to remove Keystroke delay in Ubuntu

Pocket

I was having a very strange problem today in Ubuntu 10.04 (Lucid Lynx). All my keystrokes in keyboard were delayed. I am bit kind of touch typist and when I type I type a bit faster. My problem was none of the letters I typed were typed actually. I would have to hold a key to have it typed.

I backtracked all my works, my installation that I could remember of then suddently I found the solution, One of the option for press and hold keys (Fow Slow keys) was enabled. I unmarked that option and everything was back to normal.

Solution:

1. Click System > Preference > Keyboard

2. Select Accessibility

Then tick mark         [x] Accessibility features can be toggled with keyboard shortcuts

If this is already marked, then you will get a icon in gnome-panel at right.

Open Universal Access Preference, Unmark the option that says
[ ] Press and hold keys to accept them (Slow Keys)