yensdesign – Tutorials, Web Design and Coding

An important feature of Javascript you must know is the events propagation. This what makes is trigger all events to the parents when a child event is captured (like a bubble). So, if you click in a div element, the click will active the onclick event in the div parent, and in the grandparent… and so until the body element.

This can often be helpful, but many others can be a big trouble. Of course you can disable this feature with the code below:

[code language="Javascript"]
/*DISABLE EVENTS PROPAGATION*/
//IE
if(!e)
	window.event.cancelBubble = true;

//OTHER NAVIGATORS*
else if(e.stopPropagation) e.stopPropagation();
[/code]

You can view a little example so that you can see it in action after the break.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

(more…)

Currently the search boxes are in the most of websites because the content is growing continually and it’s useful find out something with a simple search. In order to provide them more interaction I want to show you a simple but very useful javascript code snippet to show or hide the default contained text in a search box managing the events focus and blur.

So if we have this html input text box:

[code language="html"]

[/code]

The javascript code that you must put before closing the body element would be:

[code language="html"]



[/code]

The jQuery code would be as follows:

[code language="javascript"]
$(document).ready(function(){
	$("#txtSearch").blur(function(){
		if(!$(this).val()) $(this).val("Search the web...");
	});
	$("#txtSearch").focus(function(){
		if($(this).val() == "Search the web...") $(this).val("");
	});
});
[/code]

And that’s all guys, I hope you can use it for your search boxes and thanks for visiting us! We had a huge quantity unique visitors yesterday and it seems that today will be better