JavaScript Tutorials ::
Categorized List of JavaScript TutorialsJQuery Tutorial :: Show/Hide Multple Divs with a Select Field
Posted on :: Mar 3
In this Tutorial, I'm going to show you how, with the use of JQuery, and a simple form, I was able to create a very nice and simple effect for hiding and showing a Div, based strictly off of a value selected in a form's select box.
HTML 4 and XHTML 1 to HTML 5
Posted on :: Feb 20
HTML5 has several new block-level sectioning elements that we can use to give relevant parts of web pages more semantic meaning. These new elements are for ‘chunks of related content’—basically a logical section of the document:
Improve your JQuery :: 25 Tips to help you
Posted on :: Dec 16
In this Very extensive and long article/Tutorial, I'm going to give you some reasons as to how to and why you shouldimprove your JQuery Knowledge and Scripting.
jQuery is awesome. I've been using it for about a year now and although I was impressed to begin with I'm liking it more and more the longer I use it and the more I find out about it's inner workings.
I'm no jQuery expert. I don't claim to be, so if there are mistakes in this article then feel free to correct me or make suggestions for improvements.
I'd call myself an "intermediate" jQuery user and I thought some others out there could benefit from all the little tips, tricks and techniques I've learned over the past year. The article also ended up being a lot longer than I thought it was going to be so I'll start with a table of contents so you can skip to the bits you're interested in.New Google Analytics Code For Better Load Times
Posted on :: Dec 4
Google Analytics has recently announced a new asynchronous tracking code that can "optionally" be replaced with the old one.
The new code does not block the website while it loads which will improve the loading times.
It also aims to provide more accurate results as it can be installed inside
<head></head>tags (rather than before the</body>tag) and will be able to collect data from visitors that quit the webpage before it loads fully. This way, "any possible tracking errors from dependencies when the JavaScript not being fully loaded" are also eliminated.Should Designers & Developers be held liable for Internet Explorer Design Bugs?
Posted on :: Nov 23
This is a question I'm posing to the wild Development Community becasue it seems more and more prevelant that Designers and Developers alike are being held accountable for Bugs and lack-of-interoperability especially when designing an developing Websites that are Standards-Compliant and are 'Web 2.0' compatible.
Internet Explorer, and its inefficient JS engine, is off in its own little world and forces web developers, designers, and programmers to make special exceptions when it comes to CSS and JS. Although its improved a little with the advent of its latest 8 version IE is slowly falling behind and yet people continue to use it because it comes with Windows...How to Mimic the iGoogle Interface
Posted on :: Oct 12
In this tutorial I'll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!
This is a very long Tutorial. Includes source code download.Nice & Clean Sliding Login Panel built with jQuery
Posted on :: Jun 10
A while ago, I created a Slidedown Panel similiar to that on Dynaic Drive (though the script there isn't mine). Well I've re-tooled it to work with JQuery, and have included it in this here tutorial.
What's the scope of this tutorial?
- Panel has been redesigned to be “slicker”.
- Panel overlaps content instead of “pushing” it.
- Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
- Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images
AJAX APIs help for Dreamweaver
Posted on :: Jun 2
I didn't write these extensions, however I am making them available here.
These are Dreamweaver CS3 & CS4 extensions for both the JQuery and Prototype API's for Ajax.// Code jQuery FASTER in Dreamweaver!Reduce tons of typing. If you are into jQuery and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our jQuery API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every jQuery and jQuery UI function for you.
// Code Prototype FASTER in Dreamweaver!Reduce tons of typing. If you are into Prototype and use Dreamweaver then you really need this extension. Let us save you tons of time by reducing keystrokes with our Prototype API extension for Dreamweaver which provides code coloring, Snippets, and code hints that list every Prototype function for you.
AjaxContent :: JQuery Plugin
Posted on :: May 11
AjaxContent is a jQuery plugin build to make easier and fast to perform simple ajax calls. Some new feature like binding to form fields change and the extend functionality that parse the result of the first call applying a second ajaxContent event.
CSS and Jquery - Creating an Image Slider
Posted on :: May 1
In this tutorial I am actually going to be explaining how to do something which I created for one of my other projects. Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.
Changing a Document's Text size with JavaScript
Posted on :: Apr 30
Sometimes the text size you've specified for your webpage isn't suitable to the viewer, depending on his browser configuration or OS. This useful script uses Dynamic CSS to let the viewer himself modify the text size of the page on demand, by clicking on an Increase or Decrease Font Size link. Now that's a kind of personalization your viewers may just appreciate!
Creating Expanding Images with JavaScript
Posted on :: Apr 30
We're going to make a simple script for folks who want to have an image expand onMouseover (to its actual size). This lets you display large images at a reduced size initially (aka thumbnail size), and have them dynamically expand when the mouse rolls over them. Installation is simple- install the script in the HEAD section of the page, then give your "thumbnail" images a CSS class of "
expand". These thumbnail images should have an explicit width/height attribute that's less than the actual image's dimensions, so the script has something to expand to.This Script is AJAX friendly, meaning imported content with images with the "
expand" class will be immediately recognized by the script.Using JavaScript to access an HTML element with multiple class names
Posted on :: Apr 23
Occasionally I discover a nifty solution to a coding obstacle. Although seemingly small, these can be major productivity barriers, especially if you are only a recreational coder. The following is in response to an HTML element that has multiple class names declared.
Our HTML looks something like this:
Easily Add Social Networking Links to Your Website
Posted on :: Apr 23
It's becoming more and more standard practice for websites to be linking content to Social netowroks to in crease traffic, and link building. Most Sites however require some form of a plug-in or add-ons module to thier content management system to achieve this.
AJAX Form Validation (AJAX Tutorial)
Posted on :: Apr 1
I got tired of Traditional Javascript based Form Validation, only because despite the fact they work well, they don't validate the content of the Feild Immediately. So I got tired of this, and built this off of the Prototype Framework.
The basic method is to attach to the form'sonsubmitevent, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.IPhone Detection Scripts
Posted on :: Mar 31
With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.
Uploading Files Like GMail Attachments
Posted on :: Mar 15
Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code, it is indeed similiar to my Previous Post Uploading Files Like Gmail Attachements in PHP except this version uses HTML & JavaScript and is not dependant upon a Server Side Language (however i imagine you could easily apply it to any language).