35 Advance Techniques Of JavaScript – Tutorials

JavaScript tutorials is very welcomed by the web developer or designers since many modern techniques relied on the world wide web. They need always follow various web techniques and scripts for best user experience. Then following we prepared some basic but helpful JavaScript tutorials maybe you wanted.

Giving users the ability to interact with your web site is one of the key elements to its success. Allowing users to post a comment or response and socially sharing are two of the basic fundamentals of web interaction, another, maybe less popular, is giving users the quickfire option of grading or rating a post, by using the super simple five star method or by the voting up or down approach.

In this industry – now more than ever – designers are becoming coders, and coders are becoming designers. The idea of a developer ONLY performing frontend or backend work is quickly becoming a dated concept. jQuery will help to bridge the gap. Javascript is not an unattainable skill.

If you like this post, share it with your friends through email and social networks. Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.

How jQuery Beginners can Test and Improve their Code

jQuery’s arrival has made the process writing JavaScript laughably easy. But, you’ll notice that making small changes to your code improves the readability and/or performance significantly. Here are some tips to get you on your way to optimizing your code.

Date / Time Picker

A date picker control. To open the calendar, click the icon at the right side of the input box.

SlideViewer

Textboxlist Auto-Completion

LavaLamp for jQuery lovers!

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

LightWindow

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

Other caveats were the complete lack of ability to style and position the system, and the insane over-kill of some of the systems trying to
reproduce either another desktop (As if most computer users aren’t confused enough) or the reproduction of a popup window (Show me someone
who likes popup windows…). Lastly, most people didn’t actually test for their media types and how they behaved in other browsers and operating
systems (Yes the movies and Flash work in Firefox for the Mac).

jQuery Tutorial – Create a Sliding Menu Using jQuery

This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits
and you get an entirely new effect.

jQuery Tutorial – How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu
and animate it with some smooth effects. The menu has such a smooth animation because of a thing called “easing”. Adobe’s definition in the
Flash Developer Center is a little more complete:

“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic.
Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.”

[ad name=”bnr-middle-post”]

How to Detect the Social Sites Your Visitors Use

One of the great things about the web is the relative ease with which one can set up a new service. In social bookmarking alone with have Del.icio.us, Digg, Facebook, Fark, Mister-Wong, Newsvine, Reddit, Technorati, Slashdot, and StumbleUpon, to name a few. That’s great for competition, and that’s great for users, but it’s not so good for bloggers and content creators.

What are you to do if you want readers to promote your content? Kevin Rose, of Digg, put it succinctly: “Encourage your visitors to submit
their favorite stories directly to Digg [with a Digg badge].” Not everyone uses Digg. You have to decide on which bookmarking site, if
any, to dedicate your precious screen real-estate. It’s a hard choice. If you choose poorly your reader won’t vote—it’s not a single click
coupled and out-of-sight means out-of-mind—and your content losses its chance to make it big. You have to choose your horse wisely.

Javascript Image Gallery Using Mootools

This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Making accordion menu using jquery

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

jQuery.Syntax

jQuery.Syntax is an extremely fast and lightweight syntax highlighter written in JavaScript. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.

Using CSS3 we can do away with what would have required the use of several background images and possibly an additional wrapping container or two and rely (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Again, not all browsers (cough, IE!) support these new rules, but we can very easily provide fall-back solutions for the browsers that can’t handle our styles.

jquery.timepickr.js

This is my humble attempt to enhence web time picking.

For the moment I’d call it a toy project, it might stay in experimental state evitam eternam.. I just wanted to see if I could create a better time picker. I’ve seen lots of time pickers styles and approaches, but none seems to focus on user experience accross many platforms and beautiful degradation.

SyntaxHighlighter

SyntaxHighlighter  is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Rich Text Editor

The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.

Sexy sliding JavaScript side bar menu using mootools

When trying to conceive ways in which space could be saved on a web page I decided a sliding menu would work well as shown in the images below.

Learning Basic JavaScript Faster Than Ever!

Before we begin to learn and practices with JavaScript, it’s going to make things a lot smoother if we are all using the same document setup. so for this tutorial I recommend you to practice with the following blank document.

jQuery Sliding Tab Menu for Sidebar Tutorial

This tutorial, we will be making a jQuery Sliding Tab Menu for sidebar. Previously, I made a tutorial about jQuery Tabbed Interface / Tabbed Structure Menu, if you have not read it yet, check it out. I’m using it for my sidebar at the moment. The differences between both tab menus are, the sliding direction and this time, we are using a little bit different HTML structure and massive change in jQuery script.

We will be using a famous plugin called jQuery.scrollTo. jQuery scrollTo is an amazing plugin and doing sliding menu has never been so easy! Please continue reading, As usual, this tutorial is separated into 3 sections: HTML, CSS and Javascript.

Use jQuery To Submit Form To PHP/MySQL

Using jQuery to submit a form, is something you are seeing more and more of as jQuery’s popularity builds. When I first started reading about jQuery and Ajax all I wanted to do was learn how to submit a form using jQuery.

I was so confused and lost, seeing the code was so abstract to me. So in this tutorial, I want to show you how to use the jQuery framework to submit data through a form using jQuery to a PHP page that submits to a database.

We are going to take form data and submit it to a jQuery Ajax call then send that to a PHP page with the data. Check out a live example of this post.

A Simple Movie Search App w/ jQuery UI

In this tutorial, we are using jQuery UI’s autocomplete widget, to build a simple AJAX movie search form. The script is going to use TheMovieDatabase.org’s free API, to provide auto suggestions against a vast database of movie titles.

For those of you who might not be familiar with TMDb.org, this is an open, community driven movie database. It is similar to IMDb, which you’ve probably heard about, but also provides a number of useful API’s for developers.

Photo Zoom Out Effect with jQuery

Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

A Fresh Bottom Slide Out Menu with jQuery

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Making a Mosaic Slideshow With jQuery & CSS

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.

Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

Quick Tip: Quick and Easy JavaScript Testing with “Assert”

Years ago, I learned a deceptively simple “assert” function from John Resig, for testing your JavaScript. Amazingly, at barely five or six lines, this code provides a great level of power and control over your code, when testing. I’ll show you how to use it in today’s video quick
tip.

jDigiClock – Digital Clock (HTC Hero inspired)

jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

Quick Tip: Dissecting jQuery – Filters

Sporadically, over the course of each month, we’ll post a “Dissecting jQuery” video quick tip. The idea behind these is that we’ll take a single chunk of the jQuery source  at a time, break it down, and determine exactly what’s going on under the hood, so to speak. Then, with that knowledge, we’ll learn how to better utilize the library in our coding. Today, we’ll review filters.

Quick Tip: An Introduction to Sammy.js

You’ve been seeing it for a while now with Google’s Reader, Gmail, and most recently, on Facebook. Probably, you, too, would like to write RESTful evented JavaScript applications. Well, fellow developers, meet Sammy.js, a tiny JavaScript framework built on top of jQuery.
Sammy utilizes the URL hash (#) to allow you to create single page AJAX applications that respond to your browser’s back button. Interested?

In this article, I’ll be providing a short overview of the framework, and then a brief demonstration of what it’s like working with Sammy.js, with the hope of enticing you enough to consider it for your projects.

Building Persistent Sticky Notes with Local Storage

HTML5 local storage is like cookies on steroids; it’s incredibly simple to use and yet still so powerful. In this tutorial, I’ll show you how to create “sticky notes” functionality, that allows your users to take persistent notes while browsing your site.

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

As you know there are a host of competing javascript libraries around these days. Though I prefer jQuery, I’ve always liked the way the menu on MooTools worked. So in this tutorial we’ll recreate that same effect … but we’ll do it in jQuery!

iPhoto-like image resizing using Javascript

Upon seeing the Fluxiom intro video, I was compelled to figure out how they pulled off iPhoto-like image scaling in a browser. Leveraging the work of others, it’s actually very simple.

If you use the script.aculo.us slider control to capture input values, it’s really just a matter of converting those values into something useful and modifying styles.

Building a 5 Star Rating System with jQuery, AJAX and PHP

In this tutorial, you’ll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we’ll also leverage the power of PHP so that
you don’t even need a database!

Drag & Drop Sortable Lists with JavaScript and CSS

In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification…boo.

Then I came across Simon Cozens’ example of rearranging a list via drag & drop. I was so inspired I had to try it out myself.