yensdesign – Tutorials, Web Design and Coding

Daily free tutorials about web design, coding, jquery and more

Posts Tagged ‘tip’

Fast Tip: Breaking events propagation in Javascript

Friday, December 19th, 2008

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"]
	window.event.cancelBubble = true;

else if(e.stopPropagation) e.stopPropagation();

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.


Fast Tip: Show or hide text in a search box with focus / blur

Thursday, December 18th, 2008

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"]


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

[code language="html"]


The jQuery code would be as follows:

[code language="javascript"]
		if(!$(this).val()) $(this).val("Search the web...");
		if($(this).val() == "Search the web...") $(this).val("");

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 :D