Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
JavasScript | Expressing IT

Archive for the ‘ JavasScript ’ Category

IE Javascript Error : Object doesn’t support this property or method

Friday, February 18th, 2011 By Nikhil

Had this strange issue , where a piece of Javascript worked fine in all the browser  and as usual sans IE :) …  Simple it was, but since the script was not written by me, It took a while to debug this “Object doesn’t support this property or method” error, that only IE was throwing up. Probably! If  I were to write the script, I wouldn’t have got this error at all , as I tend not to mix my variable names with field Ids :).

Problem: Object doesn’t support this property or method (on line 3)


function funzoneSP(){
    document.getElementById('video_id').style.visibility="hidden";
    shortdesc = document.getElementById('shortdesc').value;
    ....
}

Solution:
The error is generated on the thirdrow in the example above(Line 3… “shortdesc = document.getE….”). I tried all sort of stupid things , that I dont is even worth the mention here and finally guess what!  just changing the shortdesc var to something else got rid of the error. Basically! The variable name had to different from the fieldID


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


IS disabled=”true” and disabled=”false” the same?

Tuesday, March 24th, 2009 By Nikhil

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)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Calling Multiple Windows Onload Functions In Javascript

Saturday, March 7th, 2009 By Nikhil

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.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Loading JavaScripts Dynamically

Thursday, December 25th, 2008 By Nikhil

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’);”>


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Simple, Lightweight, Cross Browser Lightbox for your webpage

Friday, October 3rd, 2008 By Nikhil

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 2263 times)


Using the Lightbox[Files in the zip file]

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 2263 times)

Please let us have your comments and feedback …


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


JavaScript: Edit web page in browser

Saturday, September 13th, 2008 By Nikhil

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


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


CSS hack: Javascript, CSS, HTML for Firefox only

Tuesday, September 2nd, 2008 By Nikhil

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 …


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Remove specific item from a javascript array that matches a passed string

Monday, September 1st, 2008 By Nikhil

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….


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Best Practices: Working with JavaScript’s

Thursday, May 15th, 2008 By Nikhil

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).


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


Irritating Select Boxes Visible Through the Popup Divisions

Saturday, March 15th, 2008 By Nikhil

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!


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter