If you are into writing a lot of Javascript like me, I’m sure you are frustrated with the lack of good debuggers in the Javascript world. Javascript alert(); statements were the best and the most annoying way to figure out what’s happening in most cases. But recently I discovered the wonders of the console.log. According to my tests, console.log is supported on every browser except IE (no surprise there). Safari, Opera and Chrome supports this out of …
6 articles Articles posted in JavaScript
The importance of "var" in javascript
Last Friday while doing some testing I came across an interesting javascript problem. I noticed that my for loop variables in the script were going nuts.. After a little bit of tinkering around (by tinkering I mean putting a ton of javascript alerts) I managed to identify the problem. Background Javascript has two scopes for variables, local and global. Variables assigned outside function are global and variables assigned inside the function call WITH the keyword …
Auto coloring of child nodes using Prototype
Inspired by David F. Miller's work in 2004 to color alternate table rows (Just like iTunes) I wrote this simple Prototype based script to do the same and a little but more. This script will color any list given that the list belong to a single parent. Check out the demo where the script is applied to a table and an unordered list. The script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span class="java_plain">function</span> <span class="java_type">Zebra</span><span class="java_separator">(</span><span class="java_plain">parentNode</span><span class="java_separator">,</span><span class="java_plain"> styles</span><span class="java_separator">)</span> <span class="java_separator">{</span><br /> <span class="java_keyword">this</span><span class="java_separator">.</span><span class="java_plain">colorMe</span><span class="java_separator">(</span><span class="java_plain">parentNode</span><span class="java_separator">,</span><span class="java_plain"> styles</span><span class="java_separator">);</span><br /> <span class="java_separator">}</span><br /> <br /> <span class="java_type">Zebra</span><span class="java_separator">.</span><span class="java_plain">prototype</span> <span class="java_operator">=</span> <span class="java_separator">{</span><br /> <span class="java_plain"> colorMe</span><span class="java_operator">:</span><span class="java_plain"> function</span><span class="java_separator">(</span><span class="java_plain">parentNode</span><span class="java_separator">,</span><span class="java_plain"> styles</span><span class="java_separator">)</span> <span class="java_separator">{</span><br /> <span class="java_keyword">if</span> <span class="java_separator">(</span><span class="java_plain">parentNode</span> <span class="java_operator">&&</span><span class="java_plain"> styles</span><span class="java_separator">)</span> <span class="java_separator">{</span><br /> <span class="java_plain"> var styleList</span> <span class="java_operator">=</span><span class="java_plain"> styles</span><span class="java_separator">.</span><span class="java_plain">split</span><span class="java_separator">(</span><span class="java_literal">","</span><span class="java_separator">);</span><br /> <span class="java_plain"> var parents</span> <span class="java_operator">=</span><span class="java_plain"> $$</span><span class="java_separator">(</span><span class="java_plain">parentNode</span><span class="java_separator">);</span><br /> <span class="java_keyword">for</span> <span class="java_separator">(</span><span class="java_plain">var i</span><span class="java_operator">=</span><span class="java_literal">0</span><span class="java_separator">;</span><span class="java_plain"> i</span> <span class="java_operator"><</span><span class="java_plain"> parents</span><span class="java_separator">.</span><span class="java_plain">length</span><span class="java_separator">;</span><span class="java_plain"> i</span><span class="java_operator">++</span><span class="java_separator">)</span> <span class="java_separator">{</span><br /> <span class="java_plain"> var currentParent</span> <span class="java_operator">=</span><span class="java_plain"> parents</span><span class="java_separator">[</span><span class="java_plain">i</span><span class="java_separator">];</span><br /> <span class="java_plain"> var children</span> <span class="java_operator">=</span><span class="java_plain"> currentParent</span><span class="java_separator">.</span><span class="java_plain">childElements</span><span class="java_separator">();</span><br /> <span class="java_keyword">for</span> <span class="java_separator">(</span><span class="java_plain">var j</span><span class="java_operator">=</span><span class="java_literal">0</span><span class="java_separator">;</span><span class="java_plain"> j</span> <span class="java_operator"><</span><span class="java_plain"> children</span><span class="java_separator">.</span><span class="java_plain">length</span><span class="java_separator">;</span><span class="java_plain"> j</span><span class="java_operator">++</span><span class="java_separator">)</span> <span class="java_separator">{</span><br /> <span class="java_plain"> var currentChild</span> <span class="java_operator">=</span><span class="java_plain"> children</span><span class="java_separator">[</span><span class="java_plain">j</span><span class="java_separator">];</span><br /> <span class="java_plain"> var k</span> <span class="java_operator">=</span> <span class="java_separator">(</span><span class="java_plain">j</span> <span class="java_operator">+</span> <span class="java_separator">(</span><span class="java_plain">styleList</span><span class="java_separator">.</span><span class="java_plain">length</span><span class="java_separator">))</span> <span class="java_operator">%</span><span class="java_plain"> styleList</span><span class="java_separator">.</span><span class="java_plain">length</span><span class="java_separator">;</span><br /> <span class="java_plain"> currentChild</span><span class="java_separator">.</span><span class="java_plain">addClassName</span><span class="java_separator">(</span><span class="java_plain">styleList</span><span class="java_separator">[</span><span class="java_plain">k</span><span class="java_separator">]);</span><br /> <span class="java_separator">}</span><br /> <span class="java_separator">}</span><br /> <span class="java_separator">}</span><br /> <span class="java_separator">}</span><br /> <span class="java_separator">}</span> |
Usage Usage is pretty simple. new Zebra(ParentNode, List of …
iFrame dynamic resizing revisited
Its time to revisit the burning question once again! “Is there a reliable way to dynamically resize the iFrame height according to its contents?” Well according to my previous post I thought I nailed it! But I soon found out it wasn’t all that reliable! So it wasn’t the silver bullet I was hoping for. So as a part of “E2″ development, my mate Rob and I started on a journey to conquer this once and for …
Using jQuery with Prototype – Sweet!!!
As many of us know there are 2 leading contenders for javascript frameworks. Prototype and jQuery. I have used prototype extensively in my applications but I do keep an eye on jQuery goodness from time to time. Being a Java developer, I personally like the syntax jQuery offers (pretty much OO looking syntax and therefore easy to read and understand) but prototype is not too bad either. Functionality wise none offers more than the other. …
"Fun" with Prototype and IE7 and Tables
Its a known fact that DOM manipulation on TABLE in IE is a mine field. I thought I could get lucky with prototype when it comes to creating DOM elements on the fly. But apparently not! In particular html TABLES. So here are some of the "gotcha" moments I've had! Every table needs a body var table = Builder.node("table", [Builder.node("tr", [Builder.node("td")])]); This piece of code will render a nice table on Firefox and Safari. But …
