JavaScript Articles ::
Geo-Enable Websites With JavaScript
Posted on :: Mar 12
JQuery 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.7 reasons why you really should learn jQuery
Posted on :: Dec 16
In the last 2 or 3 years, we have all experienced the comeback of javascript. A language cursed in many ways, for its lack of consistency across browsers, slow runtime performance and poor tooling (debugging). The revival of Javascript is hard to miss though, given the jungle of frameworks and effects libraries that are becoming available. Even browser manufacturers are jumping on this trend by delivering javascript engines that dramatically speed up javascript execution. Javascript "2.0" seems to be the fuel for the next generation of web applications.
For long I have more or less ignored this whole trend. Most developers have enough new things to learn already, and javascript is often not the top priority. The fact that there are a lot of different frameworks (MooTools, Dojo, Prototype, jQuery, etc) does not make it any easier either.
Below are my 7 reasons why you should learn a javascript framework, and that the best one to learn about is jQuery.
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.Detecting Mobile Browsers
Posted on :: Nov 30
It's becoming more and more common that Users are accessing your website from a mobile web browser (like that from an IPhone, Blackberry, Android or other mobile device). It's also becoming more prevelant that you need to start supporting and developing for the mobile platforms. But how would you begin?
Conditional Comments :: What they are & how to use them
Posted on :: Nov 24
One of the most common operations performed in a Web page is to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser is compatible and renders correctly. The browser type can be detected using many different techniques. Most methods of browser detection make use of script on the server or client.
This article introduces conditional comments, which offer certain advantages over scripted browser detection techniques.
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...Designing Your Site for IE & Firefox
Posted on :: Nov 20
Hiding Styles from IE 6
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
A CSS / JQuery Framework you can use...
Posted on :: Nov 3
Better quality and coherence coding inside a front-end team
Preset CSS classes, know where your going with highly reusable classes
A collection of some of the best jquery scripts
A solid cross browser compatible stylesheetA new project means getting JS plug-ins together, clean a CSS and restart. This framework is intended to be your project starter, and in most case, you can jump in the project right away with a solid css foundation. This is not really a CSS “framework” but more a website starter kit.
The framework is based on a 960px grid, but is very easy to manipulate to get the grid you want. It is however not intended to be used as a liquid grid.
This is a CSS/Jquery Framework you can use and build upon.
10 Steps to Generate More Leads
Posted on :: Oct 9
Is your website a lead generation machine?
For professional service firms and others engaged in complex sales processes, pushing users toward a shopping cart isn’t the primary goal. The main objective is to persuade visitors to contact you to generate leads for your sales team, to nurture those prospects and convert them into new and repeat business.
One of the best ways to ensure websites are producing the most possible leads is to evaluate your site from a visitor’s perspective. Follow these steps for numerous, qualified leads.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.
AJAX Development Gotchas
Posted on :: May 1
This Article goes over some of the Quirks and Browser behaviors and quirks you hsould be aware of when developing AJAX Applications. We'll be covering browser quirks, limitations and bugs you should watch out for.
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.
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.