Monthly Archives: April 2010

by

Div with floated child nodes doesnt grow to fit them

This was a week of learning. I hit upon an strange issue in my UI page – though the content was fitting absolutely fine – it was having an unnecessary horizontal scroll bar.

After much deliberation with the layout tab in firebug – I found that this div (with no explicit height set) was not expanding  to accommodate the children inside. Further investigation pointed to the fact that the child nodes in question were actually floated & therefore they were outgrowing the parent.

http://www.tangible.ca/article_resources/expanding_divs_around_floats/ had described this exact problem succintly & provided an simple solution.

Consider the code snippet

<div id=”parent”>

<div id=”floatedchild1″></div>

………………..

<div id=”floatedchildn”></div>

</div><!– parent node ends –>

Before the parent div is closed – we would need to introduce

<div style=”clear:both”></div>

that would solve this seemingly complex issue. 🙂

Happy Coding & learning!!!!

by

Console API in Firebug

Other than the console.log, console.dir, console.info, console.warn, console.error that developers are used to, I found more useful ones like

1. console.exception(error object) – to print stack trace

2. console.time(“some message”);…..piece of code to measure time…..console.timeEnd(“some message”); – to print the time taken of the code in between

3. console.group & console.groupEnd – print messages in Hierarchy/Groups

More such functions in Console API Documentation of Firebug

by

Debugging Dojo Part1 : djConfig.debugAtAllCosts

More often than not, we use the dojo.require(“dependant modules”) to load various dependent modules into our pages. But when we set a debug break point in firebug & step into, we see the following code – almost a deadend since dojo uses evals for loading the modules

Dojo dead end - not able to see the code of internally loaded modules

Other alternative is to use the djconfig.debugAtAllCosts by making the following change.

Enabling debugAtAllCosts

Thus we could use this flag to make sure dojo uses dynamically inserted script tags to load the various modules.

With any facility, comes its own caveats to be beware of – debugAtAllCosts is no exception.

Kindly refer to the How DebugAtAllCosts Works for a detailed explanation on reasons related due to debugAtAllCosts can fail.

More into this my next post

by

“Object doesn’t support this action” error in IE7/IE8

Yet another IE woe – if you want your code to work on IE – be forewarned that harmless looking like the one below would break with “Object doesn’t support this action” error.

items=[];//define a array
length=items.length;//throws error since the term length is treated special in IE
for(item in items){
//again the term item is treated in a special way in IE – would throw the same error.
}

Either make sure these are local variables by prefixing them with var.

items=[];//define a array
var length=items.length;//throws error since the term length is treated special in IE
for(var item in items){
//again the term item is treated in a special – would throw the same error.
}
otherwise rename the variables
items=[];//define a array
mylength=items.length;//throws error since the term length is treated special in IE
for(myitem in items){
//again the term item is treated in a special – would throw the same error.
}

After a lot of digging, I found that any variable declared without the var keyword is considered to global in Javascript. Specifically in IE – They get attached to a global collection called document.all.

So helper methods associated with document.all such as

  1. item
  2. namedItem
  3. tags
  4. urns

and the property “length” are all considered reserved with respect to global variables in IE.

Also refrain from using these words as IDs for any HTML element.

by

Dojo ItemFileReadStore or store that implements Identity API

When using stores that implement the Identity API – json passed to store has a identifier attribute – make sure that this is maintained as unique. Otherwise, it throws an error

dojo.data.ItemFileReadStore: The json data as specified by: [/serverURL/that/returns/json/data] is malformed. Items within the list have identifier: [displayLabel]. Value collided: [<Actual value that collided >]