Articles tagged as “javascript”

Here is a list of all articles tagged as “javascript”. If you enjoy the high-quality content that I provide here at Perishable Press, you may want to subscribe to our main content feed to stay current.

Best Method for Email Obfuscation?

Awhile ago, Silvan Mühlemann conducted a 1.5 year experiment whereby different approaches to email obfuscation were tested for effectiveness. Nine different methods were implemented, with each test account receiving anywhere from 1800 to zero spam emails. Here is an excerpt from the article: When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. But which obfuscation method is the best one? I drove a test to find out. After reading through the article and its many findings, here are what seem to be the best methods for obfuscating email ...

3 Ways to Track Web Pages with Google Analytics

Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ...

3 Ways to Preload Images with CSS, JavaScript, or Ajax

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site. Method 1: Preloading with CSS and JavaScript There are many ways to preload images, including methods that rely on CSS, JavaScript, and ...

Really Simple Browser Detection with jQuery

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like: p:first-child p:first-child:first-letter p:first-child:after p:first-child:first-line Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:...

Perfect Pre Tags

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the element. When left unstyled, wild tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect tags. First thangs first Before getting into it, let’s take a moment to ensure we’re all ...

Dynamic Link Insertion via Unobtrusive External JavaScript

In my recent guest post at The Nexus, I discuss Google’s new nofollow policy and suggest several ways to deal with it. In that article, I explain how Google allegedly has changed the way it deals with nofollow links. Instead of transferring leftover nofollow juice to remaining dofollow links as they always have, Google now pours all that wonderful nofollow juice right down the drain. This shift in policy comes as a terrible surprise to many webmasters and SEO gurus, especially those who have invested vast amounts of time, effort ...

9 Ways to Set Dynamic Body IDs via PHP and WordPress

When designing sites, it is often useful to identify different pages by adding an ID attribute to the element. Commonly, the name of the page is used as the attribute value, for example: In this case, “about” would be the body ID for the “About” page, which would be named something like “about.php”. Likewise, other pages would have unique IDs as well, for example: ..again, with each ID associated with the name of the page. This identification strategy is useful for a variety of reasons, including the following: Page-specific control over CSS via descendant selectors Page-specific DOM manipulation via ...

Unobtrusive JavaScript for ‘Print-This’ Links

One of the oldest JavaScript tricks in the book involves providing a “print this!” link for visitors that enables them to summon their operating system’s default print dialogue box to facilitate quick and easy printing of whatever page they happen to be viewing. With the old way of pulling this little stunt, we write this in the markup comprising the target “print this!” link in question: Print This! Big yuck there, of course, due to the obtrusive nature of the JavaScript implementation. Adhering to the principles of proper Web Standards, it is better practice to separate behavior from structure by placing this ...

PHP and JavaScript Fallbacks for Your Public Feedburner Count

With the recent Feedburner service outage, many sites across the Web experienced severe drops in their Feedburner subscriber counts. Apparently, Google is requiring all Feedburner accounts to be transferred over to Google by the end of February. In the midst of this mass migration, chaotic subscriber data has been reported to include everything from dramatic count drops and fluctuating reach statistics to zero-count values and dreaded “N/A” subscriber-count errors. Obviously, displaying erroneous subscriber-count data on your site is not a good thing. Fortunately, there are several ways to ensure that this doesn’t happen. Over at ...

Targeting External Links Intelligently

In the beginning... In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target="_blank" as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be cool, they thought. Alas, there came a great despair as the beloved target="_blank" attribute ...

New and Improved JavaScript Clock

Earlier this year, I posted an article explaining how to implement an unobtrusive JavaScript dynamic clock. While not completely earth-shattering or cutting-edge or anything like that, the dynamic JavaScript clock has received some great feedback from users who found the script to be exactly what they were looking for. In fact, a couple of weeks ago, Bill Brown went above and beyond by taking the time to improve the script with some great new features, including a “blinking seconds separator (for kicks)” and removal of “the need for the noscript tag.” Here is the complete script sent by Bill in a recent email (with ...

Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines

I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence. Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only ...

Save Bandwidth by Serving jQuery, MooTools, Prototype via Google’s AJAX Libraries API

A great way to save bandwidth is to take advantage of Google’s AJAX Libraries API to serve your favorite open-source JavaScript libraries. Here is how Google explains it in their official documentation: The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries. The AJAX Libraries API provides your applications with stable, reliable, high speed, globally available access to all of the most ...

The Ultimate Guide to swfIR Image Replacement

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation. The Challenge.. There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image ...

IE6 Support Spectrum

I know, I know, not another post about IE6! I actually typed this up a couple of weeks ago while immersed in my site redesign project. I had recently decided that I would no longer support that terrible browser, and this tangential post just kind of “fell out.” I wasn’t sure whether or not to post it, but I recently decided to purge my draft stash by posting everything for your reading pleasure. Thus, you may see a few turds in the next few weeks, but hopefully this ...

How to Deal with IE 6 after Dropping Support

As announced at IE Death march, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites. Now that I have dropped support for IE 6, I feel liberated, free of the constraints that once enslaved my time, energy, ...

Beware of Margins or Padding when Using the min-width Hack for IE

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this: /* set the minimum width for IE 6 */ #target_element { width: expression((document.body.clientWidth < 335)? "333px" : "auto"); /* min-width for IE6 */ min-width: 333px; /* min-width for all standards-compliant ...

Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus

In an effort to organize my pile of offline notes, I will be posting a number of quick, “to-the-point” tutorials on a number of useful topics. In this post, I share an excellent method for auto-clearing and restoring multiple form field inputs using a bit of unobtrusive JavaScript. This method was discovered at xy.wz.cz. There are two steps to this technique, which should take no longer than five minutes to implement. Step 1: Prepare the Form Begin by preparing your form as you would like it to function without JavaScript. For example, you may have a comment form that looks something like this: Name Email...

Use Your Browser to Edit Any Live Web Page Using a Single Line of JavaScript

This was just too juicy to pass up. Blogstorm recently blogged about an easy JavaScript technique for making any website editable. After checking it out for myself, I just had to share it here at Perishable Press. Here it is: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 Paste that single line of code into the address bar of any modern browser and have fun editing the page. Obviously, any changes will only apply to the page as seen in your browser, not the original document. Even so, it’s a fun trick to play around with, ...

CSS Hackz Series: Clearing Floats with the Clearfix Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques: First clearfix method: addresses several reported rendering and display bugs by ...

How to Cache Mint JavaScript

NOTE: This post was written many months ago under the erroneous assumption that caching Mint’s JavaScript was a good idea (for Y-Slow compliance, performance, et al); however, after a brief chat with the man himself, Shaun Inman, I was quickly informed that this was a bad idea: caching Mint JavaScript files will cause Mint to stop functioning. But, for what it’s worth, and for the sake of retaining potentially useful information, I present the original article here for your amusement.. Recently, I spent some time addressing a few of the ...

CSS Hackz Series: PNG Fix for Internet Explorer

In this CSS Hackz Series article, I outline several solutions for displaying alpha-transparent PNG (a.k.a. PNG-24 format) images in everybody’s favorite broken browser, Internet Explorer. Specifically, IE versions through 6 (excluding IE 5 for Mac) fail to support alpha-channel transparency for PNG images. In these versions of IE, every pixel containing alpha-transparency is displayed with an ugly, flat gray color. Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately, every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader transparency filter 1. Thus, if ...

CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6

Opening the CSS Hackz series is the infamous CSS-expression hack for achieving minimum and maximum widths in Internet Explorer 6. Here is how to set the maximum width for IE 6: #target_element { width: expression((document.body.clientWidth > 778)? "777px" : "auto"); max-width: 777px; } Here is how to set the minimum width for IE 6: #target_element { width: expression((document.body.clientWidth < 335)? "333px" : "auto"); min-width: 333px; } Here is how to set both maximum and minimum widths for IE 6: #target_element { width: expression((document.body.clientWidth < 335)? "333px" : (document.body.clientWidth > 778)? "777px" : "auto"); max-width: 333px; min-width: 777px; } To implement any ...

Toggle Element Visibility via JavaScript

Recently, while restoring the popular Jupiter! WordPress theme, which several readers use to “skin” the Perishable Press website, I found myself searching for a simple, effective JavaScript technique for toggling element visibility. Specifically, I needed to accomplish the following design goals: Users should be able to toggle the visibility of any division containing post-meta information The post-meta information should remain visible by default and when JavaScript is unavailable The JavaScript should be as unobtrusive as possible, requiring minimal scripting in the markup Here are a couple of screenshots demonstrating this repetitious toggling functionality as employed in the Jupiter! theme (click ...

Unobtrusive JavaScript Dynamic Clock

In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in.. Step 1: The JavaScript Place the following code into a JavaScript file called “xClock.js” (or whatever) and upload to your server: // Unobtrusive JavaScript Dynamic Clock // http://perishablepress.com/press/2008/03/04/unobtrusive-javascript-dynamic-clock/ function xClock() { xC ...