Javascript

A CSS Style Switcher Without Javascript

There has been a recent trend as of late for Web sites to provide visitors with alternate page view styles to enliven the browsing experience.

While this is a positive for Web standards and accessibility (as it gives those users with vision impairments an option to view high contrast page styles), it also makes for a pretty cool way to spice up a page with a previous-had or down-right different user interface.

Most solutions to this CSS Style Switcher require that users click a link which triggers a Javascript behavior-level function to switch the current stylesheet and set a cookie to the user’s computer to save their page-style preference for the remainder of the browsing session.

While I don’t feel that this is a bad solution - I actually have employed this in the past - I do feel that there are quite a few different ways one can achieve this same effect.

In the following entries on Taming the Wild Wild Web, we’ll be constructing a Server Side CSS Style Switcher using a small amount of PHP, HTML and CSS only.

Our Style Switcher will be a cursory introduction to a simple method that gives users the ability to switch page view styles via an on-screen link while keeping the toolbar functionality of choosing the Web page’s stylesheet. The style switcher will also save their preference in a PHP Session, thereby requiring no cookies being set on the user’s machine.

What is required for this project:

• One HTML file
• One PHP include (to keep our markup a little cleaner)
• One PHP file to route our page style request
• Two CSS files (to provide our choice of page views)

In the next installation of Taming the Wild Wild Web, we’ll construct our two different page styles so that we can get ready for some dynamic server side switching.

jQuery PNG Fix for IE6 - Single Instance Images

For quite some time there have been a few Javascript fixes freely available for download which can correct the lack of alpha transparency handling for png images in archaic versions of Internet Explorer (archaic, in my opinion being anything less than IE 7) - but even to this day, not one of these scripts completely solves this issue with seamless integration and out-of-the-box working functionality.

The best installations require the external linkage and path updating of lengthy Javascript file(s) and 1×1 pixel transparency blocks. While not entirely inconvenient, at times all this seems like overkill just to correct one or two images that require the correct use of alpha transparency on your Web site.

With this being so, I found it generally more convenient to just make the required fix myself for these simple images using a little jQuery and some guidance from Microsoft’s Internet Explorer knowledge base.

Since I usually only need, say, a container div with a drop shadow or a small graphic with known dimensions to require such alpha transparency (both being CSS background images), I constructed this little personal fix that will correctly handle full png functionality for one CSS background image in IE 6.

The (X)HTML:

<!–[if lt IE 7]>
<script src=”path/to/javascript/pngfix.js” type=”text/javascript”></script>
<![endif]–>

The Javascript (pngfix.js):

$(document).ready(function(){

$(’.pngfix’).each( function() {
$(this).attr(’writing-mode’, ‘tb-rl’);
$(this).css(’background-image’, ‘none’);
$(this).css( ‘filter’, ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”path/to/image.png”,sizingMethod=”scale”)’ );
});

});

Just add the class pngfix to the image that requires alpha transparency and update the path in the Javascript file. When you add the class png fix, our jQuery selector applies a ‘top-bottom-right-left’ attribute to it in order to be sure it has layout, removes its already defined background image, and applies the new fully functional PNG image to its filter property using Microsoft’s proprietary Alpha Image Loader.

I have thus far used this with little to no problems - but like I said this was simple personal fix that best works for background images that are attached to selectors that have layout or have known dimensions.

Customize it to meets your needs or use it as a base for a new out-of-the-box jQuery fix for the comprehensive use of alpha transparency in IE 6.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

jQuery Tip: Override Default Behaviors

jQuery is great for providing uobtrusive, progressive enhancements to your HTML pages.

If you choose to markup your data with a strict doctype, there are certain liberties that you can longer take on the front-end if you want your document to validate according to it’s specified recommedation.

One example of this is the target attribute for the anchor element in XHTML 1.0 Strict.

By employing jQuery, one can easily assign event handlers across selected anchors to make sure that they open in new windows without specifying a target attribute, thereby prompting a doctype invalidity.

With jQuery, one would assign a new window to open upon the click event of your links, whilst returning a value of false to override the anchor’s default behavior (opening the link in the present browser window).

The return value of false is jQuery’s method of overriding default behaviors for on page elements such as anchors and form submits.

Proper use of such methodology can help developers craft unobtrusive, accessible Web site that are compliant with standardized devlopment best practices.

jQuery Tutorial: Submitting a User-Defined Set of Input (e.g. File Uploads, Checkboxes)

Hot on the tail of Saturday’s Taming the Wild Wild Web blog entry comes another jQuery tutorial as to aid developers in their behavior-level endeavors.

Tonight, we’ll tackle how one can submit a user-defined set of input, like file uploads or an array of checkboxes, without sacrificing elements of onscreen presentation.

Not quite following? Here’s a hypothetical to help bridge you along:

Suppose we had a simple file upload form that allowed users of our site to upload no more than ten images. The files would have to be processed all at once, however, screen real estate is tight and there is no reason why ten ugly file input fields should mar the front-end of our display if there is a great chance that majority of these will go unused. By having the user select the amount of files they want to upload, we can adjust the display of the screen without forcing a page reload to delegate the proper amount of fields that each user requires. If the user changes their mind mid-stream (whether they want to add more or lessen the amount file entries), our script will adjust the display accordingly without losing their already entered file paths.

Sounds good? Then let’s take a look at our form:

Nothing special going on here. Just a typical form with a select box to govern the number of files to be uploaded, followed by ten file upload fields (the maximum amount allocated for our project). The class imageFile acts as a hook for our jQuery wrappers. Notice that the file upload name attributes end with an array minded sequencing beginning with 0 rather than 1. This is important for the backend handling of these uploads, however we will not get into that here.

This is a good time to note that if you plan on using this for a real, production-level file upload script, be sure to take all proper precautions to avoid malicious files being placed on your server. In the live demo I implement absolutely no checks only because it is a dummy form. No files will be processed there.

Now let’s see how our jQuery script can add some magic to this form:

Our onChange() function is the engine here. It simply grabs the value of whatever option attribute is selected and proceeds to slice up the wrapped set accordingly. File upload fields from the start of our input list up to and including the selected value will be shown, while the rest will be hidden from screen display.

We also make sure to run this function on page load in order to hide all but the first input field (there is no selected attribute in play on this form, and as such, the default selected value will be the first option present in our select element).

And there you have it. Short, simple and sweet. The user has the illusory power of governing their screen display and input options with this form setup. By making them declare how many files they wish to upload, or whatever situation you can think of that can effectively use this method, you are essentially adding tighter controls to your backend processing as well. Without counting the files that will post, you will already have a good metric for the user’s expected amount of input. Of course users can leave fields empty, but any backend script should check such happening by default.

That concludes this jQuery simple solution tutorial. View the live demo of this example at the flexible philosophy.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

jQuery Tutorial: SELECT-to-INPUT Toggle

* I’m having a hard time describing this tutorial in the least amount of words possible. Think about it as a jQuery solution to a select box - input toggle, where if you don’t see the option you want in a given select box, you can write-in your desired option via an input element. - JO *

* Update: I did not anticipate the traffic that this article has been receiving, and as such I am sort of embarrassed by the rather inefficient coding and implementation. Like I said in the post, this was a scaled down, simple solution to a problem that I encountered on a larger project - but that does not make it the best way to go about it countering it.

Read the comments on Ajaxian, where you’ll find more efficient renderings of this code and a Prototype version as well (courtesy of davecardwell and jdalton, respectively) *

Recently, when scripting an application that needed to provide users with the functionality to either select an option from a drop-down list or to enter their own text as an option value for the same data item, I began to think that a solution to this situation was going to unachievable via front-end and behavior-level code alone.

You see, similar form field options also appeared in two other instances within the same form and each had to pre-populate themselves with results from a relational database. Things were starting to get a little murky.

Luckily, by employing jQuery for this project, I was able to solve this issue in a mere dozen or so lines of Javascript coding.

The example I will walk you through below will not feature the back-end database connection or the data pre-load, but alas, if requested, I’ll show how simple it is to cross that bridge after you utilize the following method:

First let’s create our form:

Notice that both the select boxes and their corresponding input elements have the same name attribute. This will be important for toggling between the select and input modes. You can find this same value attached to the id attribute of each select box as well. Again, these are key in the implementation of our model.

If Javascript is disabled, the input box becomes the sole provider of our data input. We can handle non-Javascript situations in any way, shape or form due to jQuery’s ability to separate the behavior level code from our front-end HTML structure. This example is not production level, and as such, I did not make all attempts to allow for maximum progressive enhancement. A quick and dirty accessible workaround would be to keep the input field onscreen while setting the default display of the select box to none, or vice-versa.

Also note that each select box gets the class ‘leader’. This class will be the hook for our onChange() function, which we will use to toggle between the two input options.

And now for the script:

In the most primitive sense, this script checks a given element with a class of ‘leader’ and assigns its name attribute to a variable. We check against that same select box via its id. If the select box was changed to ‘other’, we remove the name attribute from the select box and display the input field. If the select box is set to anything else, we remove the name attribute from the input field.

You may be wondering why I continue to wrap my elements via their attributes rather than using the $(this) selector (as it already is assigned to my select box). While testing a more complex application of this method, the $(this) selector did not provide the functionality I required of it and was therefore dropped for this slightly more verbose workaround.

If you test the script, you’ll notice that it indeed works! However, on document load, the input field is still present.

Let’s fix that:

We’ll use the same skeletal structure of our onChange() function, save for setting it to iterate over each instance of the ‘leader’ class on document load.

In my script I use the fadeIn() and fadeOut() functions, but show() and hide() will work just fine. (What can I say? I’m a sucker for jQuery’s mediocre effects).

So that concludes our tutorial, and with that - there you have it - a simple jQuery solution to your select-input field toggling troubles.

View the Live Demo at Flexible Philosophy.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.

An Example in the Wild

Over the past week and a half we’ve covered a lot of development material here at Taming the Wild Wild Web.

Now’s the time to admit that my inspiration for these entries came entirely from a project that I was working on during that time period. While it had a very close deadline, it was ultimately a practice in efficient development. Continued »

Choosing a Javascript Framework That’s Right for You

Currently, there a quite a few Javascript frameworks available to developers that really simplify the process of adding dynamic functionality to your Web pages. Each has its pros and cons, with the most effective ones making it a breeze to return efficiently wrapped sets of DOM elements with semantically favored selectors. Aside from returning the elements that you plan to add into your pages’ behavior layer, some frameworks provide alliances with effect libraries or offer tons of plugins to create eye-popping animations and transitions to really spice-up your Web site’s user experience.

I personally favor jQuery above all. Authored by John Resig, jQuery provides it’s developers with unparalleled ease of use and functionality. jQuery also is totally unobtrusive and offers the perfect separation of behavior from your structured HTML document. This allows for more than graceful degradation . Rather,  it provides an avenue to ultimate progressive enhancment (a Web standardista’s dream!). Turn to jQuery for everything from collapsible menus, easy AJAX loading and simple form validation - to name a few. Continued »