yensdesign – Tutorials, Web Design and Coding

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

Archive for the ‘Coding’ Category

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"]
/*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…)

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

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

Creating an OS Web Interface in jQuery (Part I)

Tuesday, December 16th, 2008

Finally here you have the First Part of this series of tutorials to recreate an OS Web Interface with our lovely jQuery javascript library.

As you could see in the preview of this tutorial we will focus to create the drag & drop interaction, the double click on icons and a basic taskbar with a start disabled button and a real clock of the system.

As always, here you have a preview of the final result:

It will be very interesting how we can achieve all our goals without using thir party plugins etc.

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 (bad display of PNG icons, IE bug) & 7, Opera, Safari & Chrome.

So let’s go guys!

(more…)

Fast Tip: How to cancel right click context menu in jQuery

Friday, December 12th, 2008

Hi there guys! While I was working in the next tutorial I have been encountered with a problem: How can I block / cancel the context menu when I do right click on the screen?

There are a lot of examples and scripts in javascript, but one more time jQuery makes it easy! Here you have the code:

[code language="javascript"]
$(document).ready(function(){
	$(document).bind("contextmenu",function(e){
		return false;
	});
});
[/code]

This code works in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

One more thing guys… the next tutorial will be released on next Monday as a part of serie of tutorials that will be very very BIG, interesting and useful :)

See you soon!

Create a smooth tabbed menu in jQuery

Tuesday, December 9th, 2008

Hi guys! As we have said many times, websites are evolving to rich online applications and tabbed menus can be very power and useful to show content to our visitors.

In this case, we are going to learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.

As always, here you have the live demo before starting the tutorial ;)

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

Interesting…? Just continue reading!

(more…)

Create an amazing music player using mouse gestures & hotkeys in jQuery

Thursday, December 4th, 2008

What’s up guys? Today I am very proud to announce a BIG & INTERESTING tutorial focused on improve the user’s interaction in your web applications.

We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Because I told you that it’s a big tutorial, this time I will show you a live working example in this video:

But as always, you can test the real demo over here ;)

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

So guys, come with me and jump into the tutorial :)

(more…)

Creating AJAX websites based on anchor navigation

Wednesday, November 26th, 2008

Hi again folks! As you can see, the amount of publications is increasing daily, it is because we realized that everyday more people come to read read the blog to learn about web design. So, we decided to spent more time to share our knowledge with you.

In this tutorial we will see how to create an AJAX website without lose the reference to the URL. What is that not lose the reference? If you have created some full AJAX website you have realized when you change the web content, the URL is not updated, so, the URL reference is lost. Services like Gmail uses it to increase the navigation’s user experience.

It can be very very useful to create awasome ajax based sites such as Gmail web application from Google, users will appreciate it so much. As always we will use jQuery to do the ajax part easier for all :)

Update: Now with loading division while you are waiting to load the current section!

You can test a working live example over here:

Try the tutorial!

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

(more…)

How to create a stylish loading bar as Gmail in javascript

Monday, November 17th, 2008

Hi folks! long time ago from last tutorial, eh? Sorry for that but now you know that I spent last days working hard on plusmusica.com a new online jukebox (for people who love music you know :P ). If you want to try it I will give you some invitations for the private beta to get feedback from you (post in comments!).

Well, let’s focus on the new tutorial called: “How to create a stylish loading bar as Gmail in javascript“. As you can suppose it will be about how to create the famous loading bar from gmail or other sites as tuenti.com (“the spanish facebook“), etc.

But the magic on this tutorial isn’t the loading bar, it’s the way to load all resources like javascript, css, and other static files that our web application will need, to delete user waiting times during his visit.

You can test a working live example over here:

Check out the final result!

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

As always, the rest of the tutorial after the jump ;)

(more…)

Extending Javascript classes

Thursday, October 23rd, 2008

Today I tell you about a Javascript feature that surely many of you already know it, the objects types extension. With this feature you can add methods and properties to classes defined by the user or predefined in the language, and so, resolve the trouble of miss methods in many base classes of Javascript.

(more…)

Create a professional interface for your web applications using jQuery

Tuesday, October 21st, 2008

I am very excited to see that a lot of people are linking our tutorials and this the best way to get the motivation to continue writing more and more tutorials. So thanks all for the comments, referrals and for visit yensdesign.com daily :)

In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery.

As always here you have a demo of the final result:

Image preview of the interface

Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome (file menu doesn’t works well).

Let’s begin the tutorial guys!

(more…)