tag:blogger.com,1999:blog-207361302024-02-28T17:34:08.828+02:00Cute solutions and something else...Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-20736130.post-1157363620438552612006-09-04T12:53:00.000+03:002006-09-04T12:59:02.626+03:00Order of events: Game over<p>I wrote about events order in one of my previous <a href="http://cute-solutions.blogspot.com/2006/02/order-of-events.html">posts</a> and I found in commens some interesting ideas, like <a href="http://en.design-noir.de/webdev/JS/addEvent/" target="_blank">addEvent</a> (thx <strong>Dao</strong> and <strong>Diego</strong>). So, I wanted to have solution integrated in <a href="http://prototype.conio.net/" target="_blank">prototype</a> and I got it. <a href="http://svn.danwebb.net/external/lowpro/trunk/doc/README">Low Pro</a> is the extension to prototype.js and it also solves the problem of events order. New version of Event.observe is based on Dean Edwards' <a href="http://dean.edwards.name/weblog/2005/10/add-event/">addEvent</a>. BTW Low Pro requests prototype v.1.5.0 RC1 but I guess it's not a big deal.</p>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com0tag:blogger.com,1999:blog-20736130.post-1151967687606467052006-07-04T01:30:00.000+03:002007-02-20T07:01:19.746+02:00innerHTML vs createElementAFAIK creating DOM elements with the help of Javascript is a very popular task. And there exist two popular common methods to do it: to use <code>parentNode.innerHTML</code> property or methods <code>document.createElement() + parentNode.appendChild(node)</code>. Surely there are other methods like <code>table.insertRow()</code> or <code>select.options[index] = new Option()</code> but these ones are commonly used. Let's analyze them according to the following characteristics: <span style="font-style: italic;">compliance</span>, <span style="font-style: italic;">speed</span>, <span style="font-style: italic;">memory usage</span>. See the sample page <a href="http://rahman.roman.googlepages.com/20060704-innerHTML-vs-createElement.html" target="_blank">here</a>. It demonstrates how to insert 1000 equal images about 1Kb size in the DIV via innerHTML or createElement.<br /><br /><span style="font-weight: bold;">1. Compliance</span><br /><br /><a href="http://developer.mozilla.org/en/docs/DOM:element.innerHTML" target="_blank">DOM:element.innerHTML</a><br /><blockquote><p>As there is no public specification for this property, implementations differ widely. For example, when text is entered into a text input, IE changes the value attribute of the input's innerHTML property but Gecko browsers do not. </p><p>It should never be used to write parts of a table—W3C DOM methods are to be used for that—though it can be used to write an entire table or the content of a cell.</p></blockquote>createElement: <span style="font-weight: bold;">+1</span><br /><br /><span style="font-weight: bold;">2. Speed</span><br /><br /><span style="font-weight: bold;">Firfox 1.5.0.4</span><br /><ul><li>innerHTML — 1524, 1472, 1483</li><li>createElement — 4687, 2584, 2573 <span style="color: rgb(102, 102, 102);">(strange speed-up after page refresh)</span></li></ul><span style="font-weight: bold;">Internet Explorer 6.0</span> <span style="color: rgb(102, 102, 102);">(woah! really rocket-like speed)</span><br /><ul><li>innerHTML — 360, 320, 211</li><li>createElement — 360, 421, 390<br /></li></ul>Usually innerHTML is much more quicker than createElement in Firefox and a bit quicker in Inernet Explorer<br /><br />innerHTML: <span style="font-weight: bold;">+1</span><br /><br /><span style="font-weight: bold;">3. Memory usage</span><br /><br />See these two memory diagrams below (private bites of Internet Explorer process):<br /><div style="text-align: center;"><br /><img style="margin-right: 5px;" alt="use innerHTML" src="http://photos1.blogger.com/blogger/3026/2088/320/innerHTML-mem.gif" border="0" /><img alt="use createElement" src="http://photos1.blogger.com/blogger/3026/2088/320/createElement-mem.gif" border="0" /><br /></div><br />So... Internet Explorer uses more memory when you try to insert HTML with images via innerHTML instead of createElement. Don't forget it!<br />Firefox doesn't have similar memory problems.<br /><br />createElement: <span style="font-weight: bold;">+1</span><br /><br />The final score - <span style="font-weight: bold;">2:1</span> in favor of createElement<br /><br />In most cases createElement is a more powerful method. And using something like<br /><a href="http://pawel.saikko.com/domel-easier-dom-manipulation,20060325" target="_blank">domEl()</a> is more useful and quite simple.Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com2tag:blogger.com,1999:blog-20736130.post-1150973980643690402006-06-22T13:20:00.000+03:002007-02-07T10:48:00.553+02:00Unexpected smiles in Skype: Part 2So, new release of Skype is <a href="http://www.skype.com/download/" target="_blank">2.5</a> and certainly they've added new <span style="">smileys</span>. First of all every smile is animated now. There also appeared several new ones like (angel) and (hug) . And surely there are a few new "secret" combinations:<br /><ul><li>(drunk)</li><li>(smoking) (smoke) (ci)</li><li>(rock) i like it</li><li>(headbang) (banghead) - very useful indeed<br /></li><li>(flag:%%) e.g. (flag:gb), (flag:ua) etc.</li></ul>See below map of countries codes and flags:<br /><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/3026/2088/1600/1392.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://photos1.blogger.com/blogger/3026/2088/400/1392.png" alt="" border="0" /></a></div>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com14tag:blogger.com,1999:blog-20736130.post-1142872298090751142006-03-20T18:12:00.000+02:002006-03-20T19:05:49.700+02:00Internet Explorer's SELECT element vs DOM sandwich<p>If you are a web developer and use absolutely positioned layers in your HTML pages I guess you’ve ever come across the situation when SELECT element ignored z-index property and was rendered above the rest of element. I think this is the ugliest problem of Internet Explorer 6-. I read it was <a href="http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx" target="_blank">fixed</a> in the IE 7 beta 2 but this build will be popular much later. </p>Actually I know a couple of workarounds for this problem.<br><br /><p>1) Just hide SELECTs when DIV appears above them.<br /><a href="http://www.dynarch.com/projects/calendar/" target="_blank">JavaScript Calendar</a> by <a href="http://www.bazon.net/mishoo/" target="_blank">Mihai Bazon</a></p><b>Before:</b><br /><img height="145" src="http://photos1.blogger.com/blogger/3026/2088/1600/jscal-before.jpg" width="425" border="0" /><br /><p><b>After:</b><br /><img height="145" src="http://photos1.blogger.com/blogger/3026/2088/1600/jscal-after.jpg" width="425" border="0" /></p>Just in case, incorrect behavior of years and months drop-down lists:<br /><img height="145" src="http://photos1.blogger.com/blogger/3026/2088/1600/jscal-dropdown.jpg" width="425" border="0" /><br /><p>If you use this method don’t forget ­to use visibility:hidden instead of display:none.<br />Do you know why?</p><br>2) Replace drop-down SELECTs by INPUT[type=text]<br /><a href="http://www.fogcreek.com/FogBugz/">FogBugz</a><br /><p><b>Before:</b><br /><img height="120" src="http://photos1.blogger.com/blogger/3026/2088/1600/fogbugz-before.jpg" width="385" border="0" /></p><b>After:</b><br /><img height="120" src="http://photos1.blogger.com/blogger/3026/2088/1600/fogbugz-after.jpg" width="385" border="0" /><br /><p>Respect. Very smart, but script does it in Mozilla/Firefox as well. It isn’t necessary in non-IE browsers.</p>And I use my own solution. I know it’s not original and I saw a few sites use the same method. Look at drop-down "Address book" on <a href="http://singlescrowd.com/" target="_blank">Singlescrowd Dating Portal</a><br /><img alt="" src="http://photos1.blogger.com/blogger/3026/2088/320/singles.jpg" border="0" /><br /><p>How does it work? We use DOM sandwich from DIV and IFRAME. IFRAME is an element which could be rendered above the SELECT</p>This window-like UI element is based on library <a href="http://singlescrowd.com/scripts/layer.js">layer.js</a>.<br />All layers are instances of Layer Object which has a special method for preventing wrong rendering of SELECT tag. Even transparent IFRAME could cover SELECT, it’s really amazing.<br /><br /><DIV class="dp-highlighter"><TABLE class=syntaxHighlighter cellSpacing=0 cellPadding=0 border=0><TBODY><TR><TD class=line1><SPAN>Layer.prototype.fixIEListboxBug = </SPAN><SPAN class=keyword>function</SPAN><SPAN> _Layer_fixIEListboxBug() { </SPAN></TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>if</SPAN><SPAN>(</SPAN><SPAN class=client>document</SPAN><SPAN>.</SPAN><SPAN class=client>all</SPAN><SPAN> && !</SPAN><SPAN class=client>window</SPAN><SPAN>.opera) { </SPAN></TD></TR><TR><TD class=line1> </SPAN><SPAN class=keyword>var</SPAN><SPAN> content = </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.innerHTML; </SPAN></TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.innerHTML = </SPAN><SPAN class=string>'<iframe frameborder="0" style="position:absolute; left:0; top:0; width:100%; height:100%; margin:0; padding:0; background:transparent; filter:alpha(opacity=0);"></iframe>'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line1> </TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>this</SPAN><SPAN>.iframe = </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.firstChild; </SPAN></TD></TR><TR><TD class=line1> </TD></TR><TR><TD class=line2> child = </SPAN><SPAN class=client>document</SPAN><SPAN>.createElement(</SPAN><SPAN class=string>'DIV'</SPAN><SPAN>); </SPAN></TD></TR><TR><TD class=line1> </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.appendChild(child); </SPAN></TD></TR><TR><TD class=line2> child.style.position = </SPAN><SPAN class=string>'absolute'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line1> child.style.left = </SPAN><SPAN class=string>'0px'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line2> child.style.top = </SPAN><SPAN class=string>'0px'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line1> child.style.width = </SPAN><SPAN class=string>'100%'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line2> child.style.height = </SPAN><SPAN class=string>'100%'</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line1> child.innerHTML = content; </TD></TR><TR><TD class=line2> </TD></TR><TR><TD class=line1> child.className = </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.className; </SPAN></TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div.className = </SPAN><SPAN class=string>''</SPAN><SPAN>; </SPAN></TD></TR><TR><TD class=line1> </TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>return</SPAN><SPAN> child; </SPAN></TD></TR><TR><TD class=line1> </TD></TR><TR><TD class=line2> } </TD></TR><TR><TD class=line1> </SPAN><SPAN class=keyword>else</SPAN><SPAN> { </SPAN></TD></TR><TR><TD class=line2> </SPAN><SPAN class=keyword>return</SPAN><SPAN> </SPAN><SPAN class=keyword>this</SPAN><SPAN>.div; </SPAN></TD></TR><TR><TD class=line1> } </TD></TR><TR><TD class=line2>} </TD></TR></TBODY></TABLE></div>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com0tag:blogger.com,1999:blog-20736130.post-1140525024750715362006-02-21T14:10:00.000+02:002006-11-04T17:25:32.596+02:00Order of Events<p>I use <a href="http://prototype.conio.net/">prototype.js</a> as many other developers in the world do.<br>I guess one of the most useful objects in this framework is Event. It’s a really simple way for observing events without any thoughts about <a href="http://www-128.ibm.com/developerworks/web/library/wa-ie2mozgd/#event_differences">difference</a> between Event Model in Internet Explorer and "Truth Nice Browsers" (like <a href="http://www.mozilla.com/">Firefox</a>). </p>You can just write:<br><div class="dp-highlighter"><table class="syntaxHighlighter" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="line1">Event.observe(<span class="client">window</span>, <span class="string">"load"</span>, myLoadHandler); </td></tr></tbody></table></div><br>Dead easy!<br><p>But there’s a thing which drives me mad sometimes. It’s the order of event firing. And it’s not a problem of Prototype framework, but problem of Internet Explorer Event Model.</p>Just a small example (don't forget to include prototype.js):<br><div class="dp-highlighter"><table class="syntaxHighlighter" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="line1"><span></span><span class="keyword">var</span><span> count = </span><span class="number">2</span><span>; </span></td></tr><tr><td class="line2"><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i= </span><span class="number">1</span><span> ; i<=count; i++) { </span></td></tr><tr><td class="line1"> <span class="keyword">var</span><span> handler = </span><span class="keyword">new</span><span> </span><span class="native">Function</span><span>(</span><span class="string">'alert('</span><span> + i + </span><span class="string">')'</span><span>); </span></td></tr><tr><td class="line2"> Event.observe( <span class="client">window</span><span> , </span><span class="string">'load'</span><span> , handler); </span></td></tr><tr><td class="line1">} </td></tr></tbody></table></div><p>What order of alerts do you see in Firefox? Bingo! <strong>1</strong>, <strong>2</strong><br>In Internet Explorer? Huh, <strong>2</strong>, <strong>1</strong></p>Set count = 3 and repeat.<br>Firefox? Surely <strong>1</strong>, <strong>2</strong>, <strong>3<br></strong>IE? <strong>3</strong>, <strong>2</strong>, <strong>1</strong>? Sorry, actually not! <strong>2</strong>, <strong>3</strong>, <strong>1</strong>. Why? Don’t ask me, please.<br><p>Interested? Let’s continue with count = 4<br>Firefox: <strong>1</strong>, <strong>2</strong>, <strong>3</strong>, <strong>4</strong>. If we had got another result I would have eaten my <a href="http://visibone.com/javascript/">VisiBone<br>Javascript card</a><br>And extra-weird in IE: <strong>2</strong>, <strong>4</strong>, <strong>3</strong>, <strong>1</strong></p>What’s the method of events ordering that IE uses? Neither FIFO (like Firefox), nor LIFO.<br>This software makes me more and more unhappy.<br><p>BTW, I checked this code in IE 6.0 (Window 2000) and IE 7 b2 (Windows XP).<br>As you can suspect, the result was the same.</p>Why did I start from prototype and how is it related to the ugly IE Event Model?<br><p> I think it’d be very nice if <a href="http://conio.net/">Sam Stephenson</a> included algorithm which will correct this IE bug to prototype Event object I mean <span style="font-weight: bold;">Event.observe() </span>shouldn’t add event handler directly by calling <span style="font-weight: bold;">.addEventListener()</span> or <span style="font-weight: bold;">.attachEvent()</span> but store handlers in internal hash and call them in right order. </p>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com8tag:blogger.com,1999:blog-20736130.post-1138264438348431302006-01-26T10:30:00.000+02:002007-04-01T14:00:31.956+03:00Unexpected smiles in SkypeDo you use Skype?<br /><br /><span style="font-weight: bold; color: rgb(204, 0, 0);">No</span>?! Go <a href="http://www.skype.com/download/">http://www.skype.com/download/</a> and try it immediately.<br /><span style="font-weight: bold; color: rgb(0, 153, 0);">Yes</span><span style="color: rgb(0, 153, 0);">! </span>Well, you understand me. I like Skype for a lot of cute features including pretty smile-pack, but… there’re some unknown (and a bit abusive) smiles in Skype, which you’re not able to select from smiles drop-down list when you’re chatting. You just have to type (or copy and paste) them.<br /><br />Let’s try:<br /><ul> <li>(bandit) – some kind of ninja</li> <li>(toivo) – actually I don’t know what it is</li> <li>(finger) – use it in the chat with your boss ;-)</li> <li>(mooning) – lovely!!!</li> </ul>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com34tag:blogger.com,1999:blog-20736130.post-1138264100539827052006-01-26T10:22:00.000+02:002007-02-21T18:56:44.503+02:00AJAX becomes standard<p>Some skeptics said — AJAX isn’t a standard but a set of separated libraries.</p>Now this is just a question of time. "The W3C Web API Working Group is <strong>chartered</strong> to develop standard APIs..." blah-blah-blah.<br /><p>My friend asked me – who paid whom and how much?</p><a href="http://www.w3.org/2006/webapi/">http://www.w3.org/2006/webapi/</a>Роман Рахманhttp://www.blogger.com/profile/02056228767980705581noreply@blogger.com0