yensdesign – Tutorials, Web Design and Coding

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

Posts Tagged ‘javascript’

Interview with John Resig: Creator of jQuery Javascript Library

Monday, February 2nd, 2009

Since we started the blog we haven’t stopped publishing tutorials mainly focused in web usability, interfaces and javascript. Specifically, we have been using in most cases the javascript jQuery library.

Today we are honored to interview one of the most responsible for integrating javascript much easier, more powerful and faster on our Web applications, today we are interviewing John Resig, creator of jQuery.

Let’s dive into the interview guys :)


Playing and Controlling MP3 songs and FLV videos with javascript

Tuesday, January 20th, 2009

Hi there guys! If you remember we have published a tutorial about How to create a music player interface in jQuery some weeks ago. Some of you have sent me e-mails, posted comments in the tutorial and in our forums asking about how to implement “the music” to the music player interface. And now I am here to show you the basics to acomplish it.

We are going to learn how to Load, Play and Control our MP3 songs and FLV videos to share them with our visitors in our websites by using javascript (some jQuery) and the flash player JW Player.

As always, you can try the living example over here.

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

Come on with me guys!


How to Validate Forms in both sides using PHP and jQuery

Tuesday, January 13th, 2009

Hi guys and welcome to a new tutorial of! Some of you ask us about the possibility of create a tutorial about how to validate forms in server side (using PHP). So i wrote a tutorial about it, adding some interesting features with jQuery:

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

As always, here you have a preview of what we are going to do:

You can try the living example before continue reading the tutorial. Remember that if you want to try the server side, you need to disable javascript in your web browser!

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

Let’s learn guys!


Create a shoutbox using PHP and AJAX (with jQuery)

Monday, January 5th, 2009

Continuing with the tutorials about AJAX and jQuery we will create a stunning and dynamic shoutbox based in PHP and AJAX (using jQuery).

We will learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.

Here you have a preview image:

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.

Come on guys, let’s dive into the tutorial!


How to create a plugin for jQuery

Tuesday, December 23rd, 2008

As you may notice we love jQuery over here because in addition to being one of the best javascript libraries on the web It can be extended so easily, from the basic to the advanced features.

In this case We will learn the basic theory about plugins in jQuery and how to create them with 2 real examples: a simple alert plugin & other plugin that will highlight all inputs in a page when them get the focus.

So get ready to learn guys!


Cheat Sheets Pack for Webmasters

Monday, December 22nd, 2008

If you are very forgetful as I am and sometimes when you are “in the flow” and you cann’t remember a javascript function, a CSS property you know, it can be very helpful take your cheat sheet and remember it with a simple glance. You can read your desired cheat sheet in your screen or maybe just print it as a lot of people used to do, with the time you will find it faster and faster because you know the specific area where you must look to find that CSS property that you forgot (remember that visual memory it’s very powerful!).

You can download the Full Cheat sheets pack for Webmasters or download one by one the cheat sheets:

I hope it be useful for those forgetful heads :P


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.


Useful jQuery Cheatsheet

Wednesday, December 17th, 2008

Finally I found a great, useful & free resource for our jQuery projects via Color Charge, a jQuery Cheatsheet available in printable A4 format:

jQuery Cheatsheet

It will be very useful for those who are very forgetful :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!


Preview: Creating an OS Web Interface in jQuery (Part I)

Friday, December 12th, 2008

Hi there guys! Since some of you are asking about the next big tutorial, here you have a brief of the first part of the tutorial in a video:

As you can see, it’s about creating (one more time) interfaces in javascript, this time we will try to recreate an operation web system from scratch without third party plugins as UI jQuery or the draggable.js.

We will release the first part tutorial this Monday, so stay tuned! :)