yensdesign – Tutorials, Web Design and Coding

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

Posts Tagged ‘jquery’

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…)

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! :)

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…)

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…)

How to create a stunning and smooth popup using jQuery

Friday, September 26th, 2008

Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial, the first one of this new blog. Just enjoy it and tell me uf you can not understand something because my english sucks…

You can test the tutorial working overhere.

Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome.

(more…)