This ones old school , but as usual it is my memory supplement …
So is disabled=”true” and disabled=”false” same?Yes
… Don’t believe, well! thats the way it is … here is some quick explanation…
“disabled” is an attribute of any form element/field and hence can accept any value by its nature.

As long as this attribute is present, the element will be disabled regardless of its value. for eg.
<input type=”text” value=”This is disabled” disabled>
<input type=”text” value=”This is disabled” disabled=”disabled”>
<input type=”text” value=”This is disabled” disabled=”true”>
<input type=”text” value=”This is disabled” disabled=”false”>

All of the above will make the this form field “DISABLED”.

Simply not providing the attribute “DISABLED” keeps the Field “ABLED” … like below

<input type=”text” value=”This is not disabled” />

Remember “Any value (or no value at all) of the disabled attribute, the browser will render it disabled” . To keep things clear in our minds W3C recommends that we use disabled=”disabled” in these situations.

This is difference though when we use this attribute in javascript …

document.form.element.disabled = true; //the element will be disabled
document.form.element.disabled = false; //the element will be enabled

The above arguments are also true for these attributes and elements :

• checked (radio button and checkbox)
• selected (option)
• nowrap (td)

Heres another little peice of Javascript trickery that I had to dig around because the situation commaned it. In one of my web sites, I had this situation where I had to implement “windows.onload” twice. The first thing that would came to an inexperienced mind like mine ( I have to honestly say that, since I have been using javascript Frameworks and libraries, I have forgotton to do simple things on my own… sad but true), is the following method…

window.onload=onloadfn1;
window.onload=onloadfn2;
window.onload=onloadfn3;
etc...

Sorry to say but, this wont work… dont want to discuss the execution science of Javascript much … but according to my recent experience, only the last function (onloadfn3) will ill actually get executed.

In normal situations, unlike mine (which I’ll talk about a little later)… you could do one of the following to execute mutliple onload functions ….

OR something like this

function doOnLoad() {
        onloadfn1();
        onloadfn2();
        onloadfn3();
}
window.onload = doOnLoad;

For my current situation , I cannot use either of the above…
Why did I need to call windows.onload twice, rather that calling two functions within a single onload function? Here is quick look at my problem statement…

“My Site pages are structured like the WORDPRESS theme…. i.e. there is a common Header.php and Footer.php that gets included into all the site pages. There is an onload function implementaion in the Footer.php to do some common onload functions. AND there are few pages that need to something of their own ONLOAD , apart from those done by the common onload function. If I assign callback function directly to the window.onload handler, it will over-ride previously assigned callbacks in the Footer.php”

…. Is my problem understood ?

Well! there are few solutions that I did find. They all are very similar and mainly implementions of a solution given by Simon Willison (http://simonwillison.net/2004/May/26/addLoadEvent/)…

Solution :

Simply add this javascript code to site …

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
       window.onload = func
    } else {
       window.onload = function() {
           if (oldonload) {
                  oldonload()
          }
          func()
       }
   }
}

And call it instead of the usual “windows.onload”

addLoadEvent(FunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load *
}); 

Advantages of this code snippet …
1. Primarily, It lets you have multiple windows.onload events, called from seperate parts of your code, without overridding the previous definition
2. It is really unobtrusive. It can be placed in a file with your other scripts or in a separate file.
3. It works even if window.onload has already been set.

Sometimes to keep the pageweight down … we have split our scripts into fragments…These javascript fragments can be loaded as and when required ( on an event or on click of a  link or button etc.).

Loading Javascripts dynamically is simple and pretty straight forward  as below… 

<script type=“text/javascript”>
function loadNewScript(source){
  var s = document.createElement(’script’);
  s.setAttribute(‘type’,'text/javascript’);
  s.setAttribute(’src’, source);
  document.body.appendChild(s);
}
</script>

and you can have the following call link anywhere in the body , or you can have this script “onLoad” of the document itself…

<a href=“javascript:loadNewScript(‘myDynamicScript.js’);”>Load Dynamic Script</a>

or

<body onload=”loadNewScript(‘myDynamicScript.js’);”>

Not that there are only a few LIGHTBOX’s that you can find when you google. The issue with most of the lightboxes that I found was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the likes. They are all cool and swanky looking. But If your requirement is “BUT I WANT A SIMPLE AND LIGHTWEIGHT LIGHTBOX SCRIPT FOR MY SITE”, then here it is;

Some nice features of this lightbox

1. Very light
   a. 4kb of Scripts when packed (8 kb unpacked)
   b. 2 kb of CSS
   c. Few lines of HTML for the lightbox container
2. Simple to understand and implement
3. Can have multiple Lightboxes on the same page.
4. The same lightbox container is used to show, different content (which is separately included as hidden divisions in the page), depending on the link/option that is clicked.
5. Automatically centers itself, taking into consideration all factors such as, Window height and width (screen resolution), page scroll amount and the height of the contents of the lightbox
6. Tested in IE 7 & FF

View Demo |
Download Lightbox Source Zip (Downloaded 1040 times)

jo.js , jo_pack.js[packed version] :- a simple set of JAVASCRIPT OBJECTS [JO], which contains element, window and document positioning scripts. You can open JO.JS if you wish to get your hands dirty with some Advanced Javascripting, creating abstract functions, extending element properties and such. If you not too much in Javascripting , Leave it alone.

lightbox.js, lightbox_pack.js[packed version]:- Contain light box manager scripts. If you are page designer , also responsible with implementing the lightbox on the page, you need to understand the LightBoxManager . LightBoxManager basically contains just two functions showLightBox and closeLightBox.

lightbox.css :- If you know CSS , you can play around with lightbox.css to customize the look-n-feel lightbox.css

index.html: Sample implementation of the lightbox with two different content

lb_underlay_bkg.png :- This is light/simi transparent image that is used the background for the lightbox underlay [Underlay is the layer below the lighbox, which prevents the user from clicking any other entity on the page, while the lightbox is open]. You can use any image or even a solid color for this purpose, depending upon the page design and the requirement.

icon_lb_close.gif : – The image for close lightbox handle on the top right of the light box. Can use any image as per design

View Demo |
Download Lightbox Source Zip (Downloaded 1040 times)

Please let us have your comments and feedback …

Well , I must say, not such an usefull piece of science, but if you are a Web Developer, might come handy , someday ( or will it?). Here is small bookmarklet, which allows to edit the web page for any site .
And Sorry!  You can save the results on your local machine only.

javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0

Many a times we feel the need to write browser specfic hacks (though it is not a good practice, we UI developers have to resort to such evils until the great Browsers Wars comes to a truce). Earlier , I had mentioned in this article For your IEs Only, how to write a CSS snippet that would be visible to IE browsers < IE7 only.

Yesterday, I had a case, where I wanted to write some FireFox specific CSS snippets. Well! I am not sure if there is a CSS code for this but there is a HTML. THERE IS A CATCH THOUGH, this piece of HTML doesnot pass HTML validation. But , anywaz! If you are stuck badly or as such, have no-regards for validation (sometime we have to be cruel), you could use the following to declare a link to a FF only stylesheet or even just code the CSS within this block. The code is

<comment> Put your FireFox only HTML/CSS/Scripts here </comment>

e.g.
    <comment>
         <style>
             /* Styles for FF only  */
             fieldset{border:1px solid #dddddd;}
          </style>
     </comment>

I”m happy for the moment …

Here’s quick way of extending the native Javascript Array Object, just to do that…

Array.prototype.removeItem=function(str) {
   for(i=0; i<this.length ; i++){
     if(escape(this[i]).match(escape(str.trim()))){
       this.splice(i, 1);  break;
     }
   }
  return this;
}


So now you can do something like this…

var animals= new Array("dog","lion","cat","tiger","elephant");
animals.removeItem('tiger');

Now the animals array will contain “dog”,”lion”,”cat”,”elephant”;

 PS: And here is the String Trim Prototype too …

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

 
Enjoy….

Include JavaScript’s at the Bottom of the HTML Document

If you do not have document.write ( or any dynamic generation of page contents using javascripts) to insert part of the page’s content in your scripts, move the script include statement to the bottom of the page, before the end of the BODY tag.
The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
There are also ways to dynamically create SCRIPT nodes and load remote scripts after the page is loaded using AJAX .

Externalise you JavaScript’s

Using external JavaScript files will result in faster loading of pages because the JavaScript files are cached by the browser. Inline JavaScript’s’ in HTML documents get downloaded every time the HTML document is requested. This might actually reduce the number of HTTP requests made but it subsequently increases the size of the HTML document. External JavaScript’s are cached by the browser; the size of the HTML document is reduced without increasing the number of HTTP requests.
Please note that, if users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Pack Your Javascript Files

In case of JavaScripts , unlike CSS, the files could crunched using some standard algorithms that would give a reduced file size than simply removing spaces or tabs. An example of javascript packer can be found here http://dean.edwards.name/packer/

Get rid of any Duplicate Scripts

It is very unusual that entire scripts might be duplicated, but a review of the ten top U.S. web sites shows that two of them contain a duplicated script. Duplicate scripts but obviously reduces the performance by creating unnecessary HTTP requests and wasted JavaScript execution.
Also, in many instances, though the scripts names are different, there is a likelihood of duplicate scripts within the same page due to team size and number of scripts.

Minimize accessing DOM elements where possible

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:
• Cache references to accessed elements
• Update nodes “offline” and then add them to the tree
• Avoid fixing layout with JavaScript

Separate Behavior from Content and Presentation

Just as we separate Presentation (CSS/XSLT) from Content (XHTML/XML), we should also separate Behavior (Javascript). This is called unobtrusive Javascript. Just as we link to external CSS files, we should link to external javascript files.

Instead of hard coding behavior into the content (e.g. onmouseover, onclick, etc.), behavior should be dynamically added to elements, classes, and unique elements (IDs) using the DOM. The foundational document, the content, should contain only valid XHTML/XML and no javascript.
Javascript should augment content by adding behavior. The content should remain useful and usable without javascript (or without full javascript support).

At several occasions, while doing  page layouts with popup divisions/ lightboxes/ Tips etc  we come across situations where  some Form SELECT  objects happens to be under these POPUP Divisions , by design and it shows through…. YUK!!!

Well! you could easily FIX this by adjusting your Z-INDEX values appropriately for FF and IE7 . But Good Old ( pun intended) IE6  doesn’t  behave as intended…. The SELECT BOX show through , even after you apply some drastically high  Z-INDEX values to your PopUp Division… Bummer!!!!

There are NO FIXES for this problem , but there are , I believe,  more than a few way to work-around this problem , But Im here to tell you the simplest solution that I use, which works fine for me, in most of the cases ….

“HIDE THE ROUGE SELECT BOX WHEN YOU SHOW THE POPUP”

Simply in your script snippet where you show your popup, add a piece of script to set the visibility of the SELECT Box to “Hidden”

document.getElementById(‘my_select’).style.visibilty = “hidden”;

And remember to set it back on CLOSE of your PopUp Division

document.getElementById(‘my_select’).style.visibilty = “visible”;

where “my_select” is the ID of the irritation SELECT Box

Hope this helps…

PS. There are ofcourse other options like dynamically positionining an IFRAME ( same size as you PopUp) under the Popup DIV … This works well too , but with an addition of loads of DOM Elements, SCRIPTS and Headache . I have used this solution too, and  If you do need any help with this option, do let me know. Will be glad to help!

A few months earlier we saw , how we could include a piece of CSS that would be visible to IE6 only(For your IEs Only ). There are other ways to achieve this as well. Simply include a separate CSS, specific to your target IE. this could be achieved with what is called as Conditional Comments.

Conditional Comments is a way to detect the browser type and version. Browser detection is performed to ensure that the content presented to the browser specific. Browser detection can be done using many different techniques. This method has several advantages over earlier methods, that included style switching using javascript. To list important few, would be;

• Scripting is not required
• Cross-browser

How do we do this?

Do something in IE 5 only
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Do something in All IE versions
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Do something in All IE versions newer that IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

For more conditional vartiations , read this info on MSDN :
About Conditional Comment