Checkbox tree with jQuery

Update:

With nothing to do, I remembered the failure with the checkbox tree, and I started re-thinking it. With nothing else on my mind, took me very short time to figure my mistakes; …so now i will update this post and the demo. Of course my opinion about checkboxtree jQuery plugin remains the same, but if you don’t want to use an entire plugin, then you can always use the code here.


Sometime ago I needed an “checkbox tree” ( a nested list with checkboxes in every node ), for options that have sub-options. I decided to write one of my own.

After some try & error, I come up with the following code :

Below is the new improved and corrected code.


(function($){

$('ul#checkboxes input[type="checkbox"]').each (
 function () {
  $(this).bind('click change', function (){
   if($(this).is(':checked')) {
    $(this).siblings('ul').find('input[type="checkbox"]').attr('checked', 'checked');
    $(this).parents('ul').siblings('input[type="checkbox"]').attr('checked', 'checked');
   } else {
    $(this).siblings('ul').find('input[type="checkbox"]').removeAttr('checked', 'checked');
   }
  });
 }
);

})(jQuery);

you can see it in action here. (updated demo, with the new code).

I also found this checkboxtree jQuery plugin . I gave it a try, and worked perfectly, and you just have to write:

$('ul#checkboxes').checkboxTree({ });

and you will have a checkboxtree. This plugin has a lot of options, that you will find on the plugin homepage.

I made a simple demo using the plugin, that you can see it here, but you can see a lot more here.

Ancient babylonian math problem

Last week i was watching a documentary that  i wanted to see for some time. it is about this documentary from BBC, story of maths . If you didn’t see it, i recommend it to you.

The documentary has 4 parts, and i believe that in the first part, “The Language of the Universe”, i saw an interesting problem from the time of babylonians.

Like the most math problems of the time is about areas; the modern math has it’s roots to the desire of man to be able to calculate and store information about distances, surfaces and patterns.

Archaeologists found pieces of clay with inscriptions that are believed to be children homework, one of them captivated my attention, it was something like this, ( please excuse my lack of talent for graphic art ) :

Let say we have a square with four circles inside it ( equal radius circles ), all circles are tangent to the square and to one each other. The square has a given length of it sides, let say x, for algebraic purpose.

The question is, what is the area of one circle ?


You will say, “what is so hard ?

We know the length of the square’s side ( x = any pozitive real number ), so we can extrapolate the circle radius ( r = one circle radius), and then calculate  the surface of the circle.” … simple, huh ?!

r = x / 4

Scirc = πr2 = π(x / 4)2 = πx2 / 16 , for a discrete value, let’s say x = 5,  Scirc = π52 / 16 = 0.5625 * π

The fun part is that the ancient babylonians did not have a precise method to calculate the surface of a circle, this was done by considering the circle a polygon with “many” sides.

Other method is to calculate the area of the square, and then subtract the area of the shapes between the circles and the square’s sides ( approximating those to known geometric figures, 8 triangles and a square ), and divide the result by four … quite laborious and not so precise.

Math sophism on Pythagorean theorem

Good way to keep an idiot busy for a couple of hours.

cos2x + sin2x = 1 is the trigonometric form of the Pythagorean theorem

cos2x + sin2x = 1
cos2x = 1 – sin2x
cos x = (1 – sin2x)1/2
1 + cos x = 1 + (1 – sin2x)1/2
(1 + cos x)2 = (1 + (1 – sin2x)1/2)2
for x = π (pi = 3,14159265…), we have,
(1 – 1)2 = (1 + (1 – 0)1/2)2
0 = (1 + 1)2
0 = 4 //interesting ?!

Clear form fields on focus

If you want to make a form without labels for text inputs or textareas, and instead give the fields default values, you will encounter a little annoying  problem, when you focus the field to write something the default value stays there. To make the default value disappear you will need a few lines of javascript.

$('textarea, input:text').bind('focus click', function(){
		if (this.value == this.defaultValue) {
		this.value = '';
		}
	}).bind('blur', function(){
		if (this.value == '') {
		this.value = this.defaultValue;
		}
	});

Note that this script uses jQuery so in order to work you’ll need to have jQuery installed.

To make all clear here is a demo.

CSS fixed background

Sometimes you will need to make a background image fixed ( not to scroll with the page ), that because you have a very large image that does not repeat, or you want to make something like an watermark, the solution is simple and is around for ages, all you have to do is use the CSS background-attachment property.

Background-attachment supports three values: scroll ( which is default ), fixed and inherit.

In most cases the fixed background is applied to the body element, but can be applied to any HTML element. Without further ado, … the CSS code.

body {
      background-image: url('path/to/background.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
}

Below is the shorthand version .


body {
      background: url('path/to/background.jpg') no-repeat fixed center;
}

Here you have a demo.

jQuery title tooltip

If you need a simple way to replace the anchor’s ( <a href=”” ></a> ), title=”” attribute with a nice customizable tooltip, below is the code and a demo.

The script adds a html <div> at the end of the <body> tag, and as you hover the specified elements it get’s the title attribute and include it in the <div id=”tooltip”>, the last part of the script is what makes the tooltip move along with mouse cursor.

The nice part is that you can make your tooltip look however you want with CSS.


<ul id="links">
 <li>
   <a href="#" title="This is one">One</a>
 </li>
 <li>
   <a href="#" title="This is two">Two</a>
 </li>
 <li>
   <a href="#" title="This is three">Three</a>
 </li>
 <li>
   <a href="#" title="This is four">Four</a>
 </li>
 <li>
   <a href="#" title="This is five">Five</a>
 </li>
</ul>


#tooltip {
 padding: 10px 15px;
 position: absolute;
 font-size: 14px;
 color: #4E4E4E;
 background: #C4E424;
 z-index: 10;
}


(function($){
	$('body').append('<div id="tooltip"></div>');
	$('#tooltip').hide();
	var $tooltip = $('#tooltip');
    $('ul#links a').each(function(){
        var $this = $(this),
			$title = this.title;
			
        $this.hover(function(){
			this.title = '';
			$tooltip.text($title).show();
        }, function(){
			this.title = $title;
			$tooltip.text('').hide();
        });
		
		$this.mousemove(function(e){
			$tooltip.css({
				top: e.pageY - 10,
				left: e.pageX + 20
			});
		});
    });
})(jQuery);

Here is a demo