<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-19718317</id><updated>2012-01-25T20:52:09.245+01:00</updated><title type='text'>ajax.prototype</title><subtitle type='html'>Hacks for good prototyping of DOM elements with javascript in an Ajax manner</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>26</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-19718317.post-6045262896949011524</id><published>2009-10-15T14:22:00.003+02:00</published><updated>2009-10-15T14:30:08.729+02:00</updated><title type='text'>Detect local Server to Server Request in C#.NET</title><content type='html'>In my current project, I needed to secure file access.&lt;br /&gt;&lt;br /&gt;Not any file, but one file that could return any file that users have uploaded to the application!&lt;br /&gt;&lt;br /&gt;When Users try to access such an URL, let's say http://myapps/getFile.ashx?idFile=123, I chek the user right to see/access the file. If the user couldn't access the file, I just respond "You don't have access to this file" instead of the file Stream.&lt;br /&gt;&lt;br /&gt;For some reason, somewhere else in my app, I need to make an internal WebRequest to a file through getFile.ashx. The problem is I can't get the file because my app is not a granted user for that file.&lt;br /&gt;&lt;br /&gt;I need a way for getFile.ashx to know that it's the app itself that make a WebRequest to access the file and thus should be granted.&lt;br /&gt;&lt;br /&gt;After some diggin, I found the bool&lt;br /&gt;&lt;pre&gt;context.Request.IsLocal&lt;/pre&gt; that garantee that the WebRequest is internal.&lt;br /&gt;&lt;br /&gt;So getFile either check the user right or evaluate IsLocal and give access if True.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-6045262896949011524?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/6045262896949011524/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=6045262896949011524' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/6045262896949011524'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/6045262896949011524'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2009/10/detect-local-server-to-server-request.html' title='Detect local Server to Server Request in C#.NET'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-2660697007392377798</id><published>2009-10-02T09:45:00.004+02:00</published><updated>2009-10-02T09:53:56.688+02:00</updated><title type='text'>LINQ to Javascript - make a Where</title><content type='html'>I find LINQ very cool for Data querying.&lt;br /&gt;&lt;br /&gt;I tried to code a Where function for Javascript Arrays :&lt;br /&gt;&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;Array.prototype.where = function(condition) {&lt;br /&gt;  var list = [];&lt;br /&gt;  for (var i=0; i &lt; this.length; i++) {&lt;br /&gt;    if ( condition.call(this[i]) ) {&lt;br /&gt;      list.push(this[i]);&lt;br /&gt;    }&lt;br /&gt;  }&lt;br /&gt;  if ( list.length == 1) {&lt;br /&gt;    return list[0];&lt;br /&gt;  }&lt;br /&gt;  else {&lt;br /&gt;    return list;&lt;br /&gt;  }&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;&lt;br /&gt;You havre to send a "condition" function in the where that will test each element and return an array contained elements that verify the condition.&lt;br /&gt;&lt;br /&gt;The context of the condition is the element itself so you can easily access it with "this".&lt;br /&gt;&lt;br /&gt;Suppose you have INPUT form elements in your document and you want to retrieve those which id contains "browserWidth".&lt;br /&gt;&lt;br /&gt;Here is the code :&lt;br /&gt;&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;$$('input').where(&lt;br /&gt;  function() {&lt;br /&gt;    return (this.id.indexOf('serviceSelected') != -1);&lt;br /&gt;  });&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;&lt;br /&gt;If the return array contains a single element, it returns the element itself.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-2660697007392377798?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/2660697007392377798/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=2660697007392377798' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2660697007392377798'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2660697007392377798'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2009/10/linq-to-javascript-make-where.html' title='LINQ to Javascript - make a Where'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-2064199123210460404</id><published>2009-10-02T09:33:00.003+02:00</published><updated>2009-10-02T09:54:24.714+02:00</updated><title type='text'>Access C#.NET Server controls by id on client side</title><content type='html'>In C#.NET, when you declare a Control runat="server", the id of the Control is not the same on the client side.&lt;br /&gt;&lt;br /&gt;For example, a Control named "browserWidth" on the server side will have the following id on the client side : "ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_browserWidth".&lt;br /&gt;&lt;br /&gt;Thus, you can't access it with a classic Javascript $("browserWidth"), and it is very difficult to guess what client id the Control will have.&lt;br /&gt;&lt;br /&gt;My best hack for that is to use the "class" attribute, that can be multiple, and add a class which name is the same as the id of the Control, like this : class="browserWidth" or CssClass="browserWidth" if you work with an asp.net Control.&lt;br /&gt;&lt;br /&gt;This way, I can access my client control with Javascript $$("*.browserWidth")[0].&lt;br /&gt;&lt;br /&gt;The only problem comes with the asp:HiddenField Control that doesn't accept CssClass attribute.&lt;br /&gt;&lt;br /&gt;On the client side, I have a tricks to access to it :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;$$('input').where(function() { return (this.id.indexOf("browserWidth") != -1); })&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;The "where" fucntion is one of mine explain in the next Post.&lt;br /&gt;&lt;br /&gt;This tricks works under two conditions :&lt;br /&gt;&lt;br /&gt;- your Control has a unique ID&lt;br /&gt;- the Server ID of the Control is contained in the client ID "ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_browserWidth"&lt;br /&gt;&lt;br /&gt;If M$ changes the way client ID are made and decides to not add server control id at the end, that tricks would not work.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-2064199123210460404?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/2064199123210460404/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=2064199123210460404' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2064199123210460404'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2064199123210460404'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2009/10/access-cnet-server-controls-by-id-on.html' title='Access C#.NET Server controls by id on client side'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-8944065470656769019</id><published>2007-11-22T09:58:00.001+01:00</published><updated>2008-02-17T10:10:05.150+01:00</updated><title type='text'>Action-like URL</title><content type='html'>In VBScript, in an ASP page, I was looking for a way to declare a querystring parameter without giving it a specific value. In the requested page, I just wanted to check the presence of that particular parameter. My URL looks like this :&lt;br /&gt;&lt;br /&gt;&lt;a href="http://www.mesconges.fr/comprendre.asp?autoplay"&gt;http://www.mesconges.fr/comprendre.asp?autoplay&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;The presence of the autoplay parameter indicate to comprendre.asp to run the first flash video once the page is loaded. Requesting &lt;a href="http://www.mesconges.fr/comprendre.asp"&gt;comprendre.asp&lt;/a&gt; directly would result in no specific action after the load.&lt;br /&gt;&lt;br /&gt;Believe me, it was not easy to test the difference between a querystring parameter that has no value and no parameter at all !&lt;br /&gt;&lt;a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/vtorifunctions.asp"&gt;You have to play with&lt;/a&gt; :&lt;br /&gt;&lt;br /&gt;isObject&lt;br /&gt;isNull&lt;br /&gt;isEmpty&lt;br /&gt;&lt;&gt; ""&lt;br /&gt;and so on...&lt;br /&gt;&lt;br /&gt;The best way I found was : Not IsEmpty(request.querystring("autoplay"))&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-8944065470656769019?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/8944065470656769019/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=8944065470656769019' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8944065470656769019'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8944065470656769019'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2007/11/action-like-url.html' title='Action-like URL'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-9158878263402221567</id><published>2007-11-07T17:25:00.000+01:00</published><updated>2007-11-07T17:28:35.138+01:00</updated><title type='text'>Restart Windows Server</title><content type='html'>Under windows server as under windows since 2000 version, if you don't find the Shutdown button in the start menu, don't worry, you can easily restart whith the MS-DOS console.&lt;br /&gt;Click the start menu, choose "execute...", type "cmd" for opening the command line and type "shutdown -r".&lt;br /&gt;The -r option tells the system to shutdown and then restart. Very usefull if your server is located somewhere in India and you don't want to pay fees for a employee to go pressing physically on the server start button !&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-9158878263402221567?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/9158878263402221567/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=9158878263402221567' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/9158878263402221567'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/9158878263402221567'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2007/11/restart-windows-server.html' title='Restart Windows Server'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-5093965174560778438</id><published>2007-04-18T15:15:00.000+02:00</published><updated>2007-04-18T15:23:35.111+02:00</updated><title type='text'>Instructor for the NATIW</title><content type='html'>Next week, I am leading a &lt;a href="http://www.natiw.ch/workshop.html"&gt;workshop&lt;/a&gt; at &lt;a href="http://www.natiw.ch/"&gt;Nomades Ateliers in Geneva&lt;/a&gt;.&lt;br /&gt;The first day will be dedicated to AJAX and the second to the Dojo Toolkit.&lt;br /&gt;Just after that, &lt;a href="http://www.xilinus.com/"&gt;Sebastien Gruhier&lt;/a&gt; will lead a workshop about Ruby on Rails. Next week will 100% Web 2.0 !!&lt;br /&gt;Fell free to &lt;a href="http://www.natiw.ch/workshop.html"&gt;read about the workshop&lt;/a&gt; and &lt;a href="http://www.natiw.ch/formulaire_workshop.php"&gt;register&lt;/a&gt;.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-5093965174560778438?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/5093965174560778438/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=5093965174560778438' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/5093965174560778438'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/5093965174560778438'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2007/04/instructor-for-natiw.html' title='Instructor for the NATIW'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-2483797808467921318</id><published>2007-02-14T16:53:00.001+01:00</published><updated>2010-06-22T09:25:58.436+02:00</updated><title type='text'>workaround to make AJAX calls on Internet Explorer 6</title><content type='html'>I have found a nice alternative to the traditional try catch method to make AJAX calls work on every browser. Place the following code on top of your Javascript script.&lt;br /&gt;&lt;pre&gt;if (!window.XMLHttpRequest) {&lt;br /&gt;window.XMLHttpRequest = function() {&lt;br /&gt;return new ActiveXObject('Microsoft.XMLHTTP');&lt;br /&gt;}&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;This hack defines a function called XMLHttpRequest if XMLHttpRequest doesn't exist natively on the browser.&lt;br /&gt;With this method, you can make AJAX calls with 'new XMLHttpRequest()' even on IE 6 or 5.5.&lt;br /&gt;&lt;pre&gt;var ajax_call = new XMLHttpRequest();&lt;br /&gt;...&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;&lt;br /&gt;UPDATE : Thanks to &lt;a href="http://ajaxian.com/archives/make-the-xhr-abstraction-shorter"&gt;comments on Ajaxian&lt;/a&gt;, I added the "window." prefix to the declaration of the XMLHttpRequest function in order to work properly on IE 6 and not redefineing the XHR native object on IE 7.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-2483797808467921318?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/2483797808467921318/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=2483797808467921318' title='6 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2483797808467921318'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/2483797808467921318'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2007/02/workaround-to-make-ajax-calls-on.html' title='workaround to make AJAX calls on Internet Explorer 6'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>6</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-8917845625548341239</id><published>2006-12-29T18:00:00.000+01:00</published><updated>2006-12-29T18:08:44.456+01:00</updated><title type='text'>workaround to make firebug console.log function bug free on IE</title><content type='html'>&lt;a href="https://addons.mozilla.org/firefox/1843/"&gt;Firebug&lt;/a&gt; is very usefull for web development but its console only works great on Firefox for now.&lt;br /&gt;If you want to keep console.log calls in your app event when your app is used on Firefox without the Firebug plug-in or on IE, you can add this line at the very first start of your JS code :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;try { console.log('init console... done'); } catch(e) { console = { log: function() {} } }&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;This code tries to write some text in the Firebug console. If it fails (no Firebug plug in installed or under IE), it instantiate an object called 'console' that has a method called 'log' that does nothing !&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-8917845625548341239?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/8917845625548341239/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=8917845625548341239' title='3 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8917845625548341239'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8917845625548341239'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/12/workaround-to-make-firebug-consolelog.html' title='workaround to make firebug console.log function bug free on IE'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>3</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-8846722355889479273</id><published>2006-12-05T21:56:00.000+01:00</published><updated>2006-12-05T22:04:39.834+01:00</updated><title type='text'>BPM Counter</title><content type='html'>I have writtent a very, &lt;a href="http://lucca.fr/fr/samples/bpm-counter.html" target="_blank"&gt;very simple tool for counting BPM of a song&lt;/a&gt;. All you have to do is to press the button when the bit happens. The value of the button indicates you the Bit Per Minute rate of you beeing a DJ !! Enjoy..&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-8846722355889479273?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/8846722355889479273/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=8846722355889479273' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8846722355889479273'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/8846722355889479273'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/12/bpm-counter.html' title='BPM Counter'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-115977932991710271</id><published>2006-10-02T10:49:00.000+02:00</published><updated>2006-12-28T08:51:47.467+01:00</updated><title type='text'>AJAX : le guide complet</title><content type='html'>A &lt;a href="http://bruno.catteau.free.fr"&gt;collegue&lt;/a&gt; and me have written a book about AJAX. It's integrally in french but the tutorials are in Javascript, so you might be able to understand them!&lt;br /&gt;&lt;img src="http://www.microapp.com/images/visuels/150/7828V.jpg" /&gt;&lt;br /&gt;&lt;a href="http://www.microapp.com/livre_ajax_7828.html"&gt;Description of the AJAX book&lt;/a&gt;&lt;br /&gt;&lt;a href="http://www.alapage.com/-/Fiche/Livres/2742968288/?id=245841159285185"&gt;Buy our AJAX book at the best price!&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-115977932991710271?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/115977932991710271/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=115977932991710271' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115977932991710271'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115977932991710271'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/10/ajax-le-guide-complet.html' title='AJAX : le guide complet'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-115513151159556988</id><published>2006-08-09T15:36:00.000+02:00</published><updated>2006-08-09T15:59:24.910+02:00</updated><title type='text'>Passing an object reference to a function</title><content type='html'>Here is another proof of Javascript spectacular flexibility. We want to draw 10 DIV in a page, representing 10 people. When we click a DIV, we want a message indicating which person was clicked. Given an object named person, we could hard code this doing :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;  div.innerHTML = person.firstName+' '+person.lastName;&lt;br /&gt;  div.onclick = function() {&lt;br /&gt;    alert(this.innerHTML+' was clicked');&lt;br /&gt;  }&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;But the object model would be useless in this case !&lt;br /&gt;Our first try is to make a loop that creates 10 DIV and 10 objects and map each of it together. Let's look &lt;a href="http://www.lucca.fr/fr/samples/passing-object-reference-directly.html" target="_blank"&gt;how it works&lt;/a&gt; :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;  &amp;lt;div id="myGroup" style="border: 1px dashed #000; padding: 5px; width: 300px;"&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;And the script :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;  //A class Person&lt;br /&gt;  function Person( firstName, lastName ) {&lt;br /&gt;    this.firstName = firstName;&lt;br /&gt;    this.lastName = lastName;&lt;br /&gt;  }&lt;br /&gt;  //A function to be executed when onclick is fired&lt;br /&gt;  function clickFunction(person) {&lt;br /&gt;    alert(person.firstName+' '+person.lastName+' was clicked');&lt;br /&gt;  }&lt;br /&gt;  //We create 10 DIV representing 10 people&lt;br /&gt;  for (var i=0; i &lt; 10; i++) {&lt;br /&gt;    //Create a DIV&lt;br /&gt;    var div = document.createElement('DIV');&lt;br /&gt;    //Create an object&lt;br /&gt;    var person = new Person('firstName'+i, 'lastName'+i);&lt;br /&gt;    //Fill in the DIV with the object infos&lt;br /&gt;    div.innerHTML = person.firstName+' '+person.lastName;&lt;br /&gt;    //Some styling&lt;br /&gt;    div.style.border = '1px solid #CCC';&lt;br /&gt;    div.style.margin = '5px';&lt;br /&gt;    div.style.cursor = 'pointer';&lt;br /&gt;    //Set the event on the DIV&lt;br /&gt;    div.onclick = function() {&lt;br /&gt;      //Use the object matched with the DIV in a function&lt;br /&gt;      clickFunction(person);&lt;br /&gt;    }&lt;br /&gt;    document.getElementById('myGroup').appendChild(div);&lt;br /&gt;  }&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;We have a DIV named myGroup which contains our 10 DIV&lt;br /&gt;In each loop, we create a Person 'var person = ...' that is referred by the 'onclick' function of the DIV.&lt;br /&gt;Try clicking on the people of MyGroup, you'll be quickly disappointed.&lt;br /&gt;It refers to the last Person for any DIV we click on. WHY ?&lt;br /&gt;Because the variable 'person' is re-written in each loop for a new Person. In the end, it lasts only 1 Person, person number 9!&lt;br /&gt;&lt;br /&gt;One solution could be to push each Person in an Array and refer to the position of the Person in the 'onclick' function of the DIV. But Javascript has more to offer than this hack!&lt;br /&gt;In Javascript, when a function creates a local variable that is refered by other functions, the variable is stored in memory until its last use.&lt;br /&gt;We are going to exploit this capability &lt;a href="http://www.lucca.fr/fr/samples/passing-object-reference-through-function.html" target="_blank"&gt;like this&lt;/a&gt; :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;  //A class Person&lt;br /&gt;  function Person( firstName, lastName ) {&lt;br /&gt;    this.firstName = firstName;&lt;br /&gt;    this.lastName = lastName;&lt;br /&gt;  }&lt;br /&gt;  //A function to be executed when onclick is fired&lt;br /&gt;  function clickFunction(person) {&lt;br /&gt;    alert(person.firstName+' '+person.lastName+' was clicked');&lt;br /&gt;  }&lt;br /&gt;  //A function that is used to create a DIV matched with an object&lt;br /&gt;  function createDiv(index) {&lt;br /&gt;    //Create a DIV&lt;br /&gt;    var div = document.createElement('DIV');&lt;br /&gt;    //Create an object&lt;br /&gt;    var person = new Person('firstName'+index, 'lastName'+index);&lt;br /&gt;    //Fill in the DIV with the object infos&lt;br /&gt;    div.innerHTML = person.firstName+' '+person.lastName;&lt;br /&gt;    //Some styling&lt;br /&gt;    div.style.border = '1px solid #CCC';&lt;br /&gt;    div.style.margin = '5px';&lt;br /&gt;    div.style.cursor = 'pointer';&lt;br /&gt;    //Set the event on the DIV&lt;br /&gt;    div.onclick = function() {&lt;br /&gt;      //Use the object matched with the DIV in a function&lt;br /&gt;      clickFunction(person);&lt;br /&gt;    }&lt;br /&gt;    document.getElementById('myGroup').appendChild(div);&lt;br /&gt;  }&lt;br /&gt;  //We create 10 DIV representing 10 people&lt;br /&gt;  for (var i=0; i &lt; 10; i++) {&lt;br /&gt;    createDiv(i);&lt;br /&gt;  }&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;What we do here is to create an intermediate function that aims to create local variables. Now the variable 'person' is stored at each loop, event if it has the same name! And each 'onclick' function refers to the right 'person'.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-115513151159556988?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/115513151159556988/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=115513151159556988' title='3 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115513151159556988'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115513151159556988'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/08/passing-object-reference-to-function.html' title='Passing an object reference to a function'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>3</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-115038392090354700</id><published>2006-06-15T16:54:00.000+02:00</published><updated>2006-07-29T05:25:48.883+02:00</updated><title type='text'>IE AJAX memory leak</title><content type='html'>We already know about &lt;a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp"&gt;IE memory leak pattern&lt;/a&gt;. It's a matter of garbage collection between JS objects and DOM objects.&lt;br /&gt;Did you know about IE HttpRequest memory leak ??&lt;br /&gt;It seems that there is the same symptom with HttpRequest object instanciation. In IE, that objetc is not JS native. It is an ActiveXObject. So that might be the cause.&lt;br /&gt;I have recently faced important memory leaks in our new AJAX application. However, I had my own implementation working well for breaking DOM and JS cycling reference. The point was that my HttpRequest objets where refering to a higher level JS object that contained an array with references to these HttpRequest objets. So I had a cycling reference between standard JS object and ActiveXObject. I did the same breaking reference tool and it all disappeared!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-115038392090354700?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/115038392090354700/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=115038392090354700' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115038392090354700'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/115038392090354700'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/06/ie-ajax-memory-leak.html' title='IE AJAX memory leak'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-114588176163398161</id><published>2006-04-24T14:19:00.000+02:00</published><updated>2006-04-24T21:47:39.610+02:00</updated><title type='text'>AJAX training seminar</title><content type='html'>I am currently in &lt;a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;q=3260+N+Clark+St,+Chicago,+IL+60657&amp;ll=42.016652,-87.212219&amp;spn=0.96723,3.449707&amp;om=1"&gt;Chicago&lt;/a&gt; for the next &lt;a href="http://www.pragmaticstudio.com/ajax/index.html"&gt;Pragmatic Studio&lt;/a&gt;! That training will help me preparing our own &lt;a href="http://www.lucca.fr/fr/societe/formation-ajax.html"&gt;AJAX seminar&lt;/a&gt; taking place in Paris next month. If you are interested in such training, you can subscribe online.&lt;br /&gt;The next step is to write a book talking about AJAX. It's an "AJAX from scratch" book written for personal users. We will shortly release the full table of content in order to get feedback before going further with the work.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-114588176163398161?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/114588176163398161/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=114588176163398161' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114588176163398161'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114588176163398161'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/04/ajax-training-seminar.html' title='AJAX training seminar'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-114483447113601951</id><published>2006-04-12T11:22:00.000+02:00</published><updated>2006-05-29T15:54:57.313+02:00</updated><title type='text'>0 is false !</title><content type='html'>When using || or &amp;&amp; to test between several expressions which is the first to be true and taken as the whole value, be carefull with numbers! I had a bas experience this morning using a decremential counter.&lt;br /&gt;&lt;br /&gt;I was doing some code 10 times and then reinitializing the counter for the next use of the function. In the context of a DIV Element, my code was the following:&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;//Function to make DIV blink&lt;br /&gt;this.blink = function() {&lt;br /&gt;  //Blink 10 times&lt;br /&gt;  this.times = (this.times-1)||10;&lt;br /&gt;  //If not 10 times yet&lt;br /&gt;  if ( this.times &gt; 0 ) {&lt;br /&gt;    //Switch blink color&lt;br /&gt;    if ( this.times%2==0 )&lt;br /&gt;      this.style.backgroundColor = '#000';&lt;br /&gt;    else&lt;br /&gt;      this.style.backgroundColor = '#FFF';&lt;br /&gt;    this_ = this;&lt;br /&gt;    //Redo blink in 50 milliseconds&lt;br /&gt;    setTimeout('this_.blink()', 50);&lt;br /&gt;  else { //Times out, stop blinking, reset counter value&lt;br /&gt;    clearTimeout();&lt;br /&gt;    this.times = 10;&lt;br /&gt;  }&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;My point is on the very first line of the function:&lt;br /&gt;this.times = (this.times-1)||10;&lt;br /&gt;What it does is affecting 10 when this.times doesn't exist yet and then affects 9, 8, 7,...&lt;br /&gt;But when it comes to 0, then the right operand choose 10 instead of 0 because 0 is considered as false. So it's going again and again without stopping from blinking!&lt;br /&gt;I better stop at 1, which will work.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-114483447113601951?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/114483447113601951/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=114483447113601951' title='3 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114483447113601951'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114483447113601951'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/04/0-is-false.html' title='0 is false !'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>3</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-114477058064911802</id><published>2006-04-11T17:10:00.002+02:00</published><updated>2006-04-11T17:49:40.676+02:00</updated><title type='text'>split and regexp crossbrowser issue</title><content type='html'>Regexp are very powerfull when it comes to going deeper in string manipulation. However, in some cases, Internet Explorer and Firefow doesn't implement them strictly the same way. My best example is the following :&lt;br /&gt;You want to split a string with several separators. This is well illustrated when splitting a date to get day, month, year and time info.&lt;br /&gt;A Date in javascript prints as : Tue Apr 11 2006 17:15:27 GMT+0200&lt;br /&gt;If you want to get all the infos, you can make:&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;var dateInfos = (new Date()).toString().split(/ GMT|[ :]/);&lt;br /&gt;var day = dateInfos[0];&lt;br /&gt;var month = dateInfos[1];&lt;br /&gt;var date = dateInfos[2];&lt;br /&gt;var year = dateInfos[3];&lt;br /&gt;var hour = dateInfos[4];&lt;br /&gt;var minute = dateInfos[5];&lt;br /&gt;var second = dateInfos[6];&lt;br /&gt;var offsetUTC = dateInfos[7];&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;So you get all the infos in one shot! This works with IE or Firefox.&lt;br /&gt;Now imagine the first caracter of the splitted string is a separator:&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;var dateInfos = (' '+(new Date()).toString()).split(/ GMT|[ :]/);&lt;br /&gt;var day = dateInfos[0];&lt;br /&gt;var month = dateInfos[1];&lt;br /&gt;var date = dateInfos[2];&lt;br /&gt;var year = dateInfos[3];&lt;br /&gt;var hour = dateInfos[4];&lt;br /&gt;var minute = dateInfos[5];&lt;br /&gt;var second = dateInfos[6];&lt;br /&gt;var offsetUTC = dateInfos[7];&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;In this case, dateInfos[0] is empty in Firefox and 'Tue' is in dateInfos[1].&lt;br /&gt;In IE, it remains the same as before, namely 'Tue' is in dateInfos[0].&lt;br /&gt;And subsequently, the dateInfos Array is one element longer on Firefox than on IE.&lt;br /&gt;So be carefull when you play with RegExp!&lt;br /&gt;My best hack would be to ensure that the firsts caracters of the string are not a separator.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-114477058064911802?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/114477058064911802/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=114477058064911802' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114477058064911802'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114477058064911802'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/04/split-and-regexp-crossbrow_114477058064911802.html' title='split and regexp crossbrowser issue'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-114253398025761534</id><published>2006-03-16T19:12:00.000+01:00</published><updated>2006-03-16T19:34:05.070+01:00</updated><title type='text'>Numbers versus int values</title><content type='html'>In javascript, it is very usefull than one can prototype primary classes like String, Array or Date.&lt;br /&gt;&lt;br /&gt;Lot's of Ajax Frameworks do it. Prototype for example adds a 'return length;' command to the push Array method so that you can push an element into an array and get the new size in the while.&lt;br /&gt;&lt;br /&gt;In Ruby, you have the possibility to call integer methods to tell the script to do something special. For example if you want to do a loop 10 times, you can use the expression 'for 10.times'. You se that the method (or attribute) is attached directly to someting that looks like an integer. It doesn't event seem to be an object.&lt;br /&gt;&lt;br /&gt;In Javascript, it's different. You cannot call a method directly from an integer value. But you can do it from an object of class Number.&lt;br /&gt;Take the example of date attributes (day, month, year) that are numbers. You want to display them on the screen within a 2-digit format like this : '03/15/06'&lt;br /&gt;If you call theDate.toString() you get '3/15/2006' because they are numbers.&lt;br /&gt;Let's prototype the class String first and then Number :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;//Repeat a string 'many' times&lt;br /&gt;String.prototype.repeat = function(many) {&lt;br /&gt; var s = '', t = this.toString();&lt;br /&gt; while (--many &gt;= 0) s += t;&lt;br /&gt; return s;&lt;br /&gt;}&lt;br /&gt;//Left fill a number with zero so that the result has a length of 'many'&lt;br /&gt;Number.prototype.addZero = function(many) {&lt;br /&gt;  return ('0'.repeat(many)  + this.toString()).substring(('0'.repeat(many) + this.toString()).length - many);&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;And now you can do :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;var i = 5;&lt;br /&gt;i.addZero(10); //You get the string '0000000005'&lt;br /&gt;OR (new Number(5)).addZero(10);&lt;br /&gt;BUT NOT 5.addZero(10);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;What is cool is that any integer value return by the javascript primary classes is a real Number and not just an integer. So for dates formatting, you can use the following :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;Date.prototype.toFullString = function() {&lt;br /&gt; return this.getDate().addZero(2)  + '/' + (this.getMonth()+1).addZero(2) + '/' + this.getFullYear();&lt;br /&gt; }&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;Pretty cool hun ?!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-114253398025761534?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/114253398025761534/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=114253398025761534' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114253398025761534'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114253398025761534'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/03/numbers-versus-int-values.html' title='Numbers versus int values'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-114018341064242081</id><published>2006-02-17T14:27:00.000+01:00</published><updated>2006-02-17T14:36:50.670+01:00</updated><title type='text'>DOM vs LDOM</title><content type='html'>I would like to introduce some ideas about our vision of the framework.&lt;br /&gt;Lot's of Ajax frameworks come with cross-browser compatibility. That's a good point. But still they are working with DOM Element.&lt;br /&gt;&lt;br /&gt;We introduced new elements called LDOM Element.&lt;br /&gt;The priniciple is that for each important DOM Element on the web page, you have a corresponding LDOM Element.&lt;br /&gt;From your script, you don't "speak" to DOM Element anymore, but with theses LDOM Elements. Beyond that, LDOM Element are pure Javascript Objects so they are faster to query.&lt;br /&gt;I have made up a mere example of a property access to a DOM Element and to the same DOM Element, but through the LDOM Element. This is made possible because the LDOM Element listen to the changes of it's DOM and update it's value.&lt;br /&gt;Let see &lt;a href="http://www.lucca.fr/fr/samples/dom-access-versus-ldom-access.html"&gt;DOM access vs LDOM access&lt;/a&gt;.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-114018341064242081?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/114018341064242081/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=114018341064242081' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114018341064242081'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/114018341064242081'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/02/dom-vs-ldom.html' title='DOM vs LDOM'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113870090272273800</id><published>2006-01-31T10:21:00.001+01:00</published><updated>2006-01-31T10:55:43.570+01:00</updated><title type='text'>the wonderfulness of eval( ) and setTimeout( )</title><content type='html'>If have been diggin' into delaying code execution without context loss.&lt;br /&gt;One knows that when using setTimeout, you loose the context you where in when calling that function.&lt;br /&gt;The idea is to make javascript take a picture of the context, wait, wait, then execute some code in that memorized context. Plus, I want the way to do that being easy to understand and natural to write.&lt;br /&gt;So I came up with a couple of functions, each with a certain role to play:&lt;br /&gt;1. We need a global variable that stack the contexts and unstack them when time is out!&lt;br /&gt;2. We need an easy way of writing code to be executed.&lt;br /&gt;The solution here is to encapsulate the code within an anonymous function that we will call when time is out within the unstacked context! Wonderful, isn't it ?&lt;br /&gt;And here comes the code:&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;//A function that returns unique IDs&lt;br /&gt;//(it's like a class with a class attribute)&lt;br /&gt;getId = function() {&lt;br /&gt; if (!this.id)&lt;br /&gt;   this.id = 0;&lt;br /&gt; this.id++;&lt;br /&gt; return this.id;&lt;br /&gt;}&lt;br /&gt;//A function that acts like a stack (registers objects by unique IDs)&lt;br /&gt;registerObject = function(objType, id, o) {&lt;br /&gt; if (!this.objById)&lt;br /&gt;   this.objById = new Array();&lt;br /&gt; if (!this.objById[objType])&lt;br /&gt;   this.objById[objType] = new Array();&lt;br /&gt; if (this.objById[objType][id])&lt;br /&gt;   alert('Object already registered with this ID!!');&lt;br /&gt; else&lt;br /&gt;   this.objById[objType][id] = o;&lt;br /&gt;}&lt;br /&gt;//A function that unstacks the registered object with a given ID&lt;br /&gt;getObjectById = function(objType, id) {&lt;br /&gt; return this.objById[objType][id];&lt;br /&gt;}&lt;br /&gt;//We use objType for our stack to be reusable&lt;br /&gt;//in other parts of our program&lt;br /&gt;//This way, the stack can hold several object in different use contexts&lt;br /&gt;//A test class to be instantiate&lt;br /&gt;testClass = function() {&lt;br /&gt; //Attribute&lt;br /&gt; this.phrase = 'Cool! The context is saved!';&lt;br /&gt; //Method with reference to the class object&lt;br /&gt; this.doSomething = function() {&lt;br /&gt;   alert(this.phrase);&lt;br /&gt; }&lt;br /&gt;}&lt;br /&gt;//The function that delay code execution&lt;br /&gt;delay = function(code, contexte, time) {&lt;br /&gt; //We provide a unique ID for our context object to be memorized&lt;br /&gt; var id = getId();&lt;br /&gt; //We register our context object in the stack&lt;br /&gt; registerObject('delay', id, contexte);&lt;br /&gt; //When time is out, the code will be evaluated within the stacked context&lt;br /&gt; setTimeout('eval('+code+'.call(getObjectById(\'delay\','+id+')));', time);&lt;br /&gt;}&lt;br /&gt;//Then we run the test!!&lt;br /&gt;//Instantiate the test class&lt;br /&gt;var myTest = new testClass();&lt;br /&gt;//Call a method right now&lt;br /&gt;myTest.doSomething();&lt;br /&gt;//Call the same method in 5 secondes&lt;br /&gt;delay(function() { this.doSomething(); }, myTest, 5000);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;&lt;a href="http://www.lucca.fr/fr/samples/eval-settimeout-magic.html" target="_blank"&gt;And the magic operates&lt;/a&gt;!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113870090272273800?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113870090272273800/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113870090272273800' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113870090272273800'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113870090272273800'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/01/wonderfulness-of-eval-and-settimeout_31.html' title='the wonderfulness of eval( ) and setTimeout( )'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113757915622856701</id><published>2006-01-18T11:00:00.000+01:00</published><updated>2006-01-18T17:21:02.483+01:00</updated><title type='text'>width percentage issue</title><content type='html'>&lt;a href="http://ajax-prototype.blogspot.com/2005/12/browser-competition.html"&gt;&lt;br /&gt;In a previous post&lt;/a&gt;, I already pointed out the difference between IE and Firefox concerning the width property when set in pixel.&lt;br /&gt;It appears to work the same way when this property is set in percentage.&lt;br /&gt;Indeed, try setting the width of a bordered DIV to 100% of the BODY. For example, the DIV has a classic 1px black border. The body, depending of your screen resolution and the size of the IE (or Firefox) window, could be 950px large. On IE, you get a DIV which width is 950px (948 + 2 for the borders). That's what you expect, right ?&lt;br /&gt;On Firefox, you get a DIV which width is 950px. But remember, on Firefox, the padding and border are not included, so you get a border-to-border width of 952px (950 + 2 for the borders) and a hugly horizontal scrollbar at the bottom of the page. Plus, you don't see the right border of your DIV ! That's not really what you expected !?&lt;br /&gt;See my &lt;a href="http://www.lucca.fr/fr/samples/width-percentage-issue.html"&gt;width percentage issue sample&lt;/a&gt; for the visual proof.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113757915622856701?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113757915622856701/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113757915622856701' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113757915622856701'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113757915622856701'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/01/width-percentage-issue.html' title='width percentage issue'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113638087876348554</id><published>2006-01-04T14:04:00.000+01:00</published><updated>2006-01-04T14:31:56.703+01:00</updated><title type='text'>HTML, DOM and Ajax Features</title><content type='html'>Thinking about the HTML tree and the DOM capabilities, I come to the conclusion that you can very easily apply an Ajax feature to several HTML element at the same time. What you need is to have a common parent for them and apply the feature to the parent. If the parent moves, fades, resizes, disappear, change font style, etc... the children elements will act the same.&lt;br /&gt;What if you want to fade a thumbnail of a picture once the picture is faded ? God, you have to write specific code to indicate to fade the thumbnails each time a related picture is faded!&lt;br /&gt;To me, it's a big lack in HTML that you cannot group elements otherwise than in a tree style. Worse, doing so, HTML tags are used both ways : for graphic rendering and for encapsulation. Think about two HTML DIV you want to move together. You will create a tird DIV that contains them. First two DIV : graphical ; Tird DIV : encapsulation.&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;&amp;lt;div id="I'm here for non graphical reason"&amp;gt;&lt;br /&gt;  &amp;lt;div&amp;gt;First DIV&amp;lt;/div&amp;gt;&lt;br /&gt;  &amp;lt;div&amp;gt;Second DIV&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;In our framework, we introduce a non graphical element that contains graphical elements and responds to Ajax features as a graphical element would. This way, it is transparent for the developper to apply a feature to a graphical or a non graphical element. And there is NO DOM element which are used for feature managment.&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;firstDiv = new LDivElement('first', 'First DIV');&lt;br /&gt;secondDiv = new LDivElement('second', 'Second DIV');&lt;br /&gt;group = new LDomListElement(firstDiv, secondDiv);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;See the difference between the two classes LDivElement and LDomListElement while in HTML it's always HTMLDivElement.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113638087876348554?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113638087876348554/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113638087876348554' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113638087876348554'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113638087876348554'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2006/01/html-dom-and-ajax-features.html' title='HTML, DOM and Ajax Features'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113533538879094806</id><published>2005-12-23T11:42:00.000+01:00</published><updated>2005-12-23T12:08:56.993+01:00</updated><title type='text'>Transmitting arguments from a function to another</title><content type='html'>Lately, I was wondering how one could call a function from within another function and passing the arguments without knowing them. I point this out because it is very tricky to debug such a thing and Javascript already has the perfect hack to do that!&lt;br /&gt;Try the following :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;function test() {&lt;br /&gt;  return arguments.length;&lt;br /&gt;}&lt;br /&gt;test(1,2,3);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;It returns 3 as espected.&lt;br /&gt;Now try the call from within another function like this :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;function test_in() {&lt;br /&gt;  test(arguments);&lt;br /&gt;}&lt;br /&gt;test_in(1,2,3);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;It returns 1! Surprised ?&lt;br /&gt;As arguments is just a special Array, it is transmitted to the test function as is.&lt;br /&gt;So the test function receives only one argument which length is 3.&lt;br /&gt;I have come up with &lt;a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Function:apply"&gt;the solution at the mozilla developer center&lt;/a&gt;.&lt;br /&gt;The reserved words 'call' and 'apply' allow you to call a function in a different context than the function context. Using 'call', you give the context and the arguments, but using apply, you give the context and an array of arguments that becomes the arguments object of the called function! And that is just what we wanted.&lt;br /&gt;Doing this :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;function test_in() {&lt;br /&gt;  test.call(this, arguments);&lt;br /&gt;}&lt;br /&gt;test_in(1,2,3);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;It doesn't solve the problem, but doing that :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;function test_in() {&lt;br /&gt;  test.apply(this, arguments);&lt;br /&gt;}&lt;br /&gt;test_in(1,2,3);&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;It returns 3 as espected. Here is how javascript itself solves the nested blind call!&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113533538879094806?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113533538879094806/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113533538879094806' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113533538879094806'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113533538879094806'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/transmitting-arguments-from-function.html' title='Transmitting arguments from a function to another'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113515716196801890</id><published>2005-12-21T10:16:00.000+01:00</published><updated>2005-12-23T12:09:10.503+01:00</updated><title type='text'>IE memory leak</title><content type='html'>&lt;a href="http://www.quirksmode.org/blog/archives/2005/02/javascript_memo.html"&gt;Several articles have been published&lt;/a&gt; about the IE memory leak. One has come to the conclusion that the leak appear when two objects from different worlds (DOM vs Javascript) refer to each other. Here is an example :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;myDom = document.createElement('DIV'); //DOM world&lt;br /&gt;myJs = 'foo'; //JS world&lt;br /&gt;myJs.dom = myDom; //First reference&lt;br /&gt;myDom.js = myJs; //Second reference, creating a cycling reference&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;If you have this code in your page, you will see the corresponding iexplore.exe instance in your task manager increasing memory each time you reload . Here is the leak !&lt;br /&gt;&lt;br /&gt;I have tried two things to avoid the leak, one was successfull.&lt;br /&gt;The first thing I tried was to delete the reference from the Js object to the Dom object, writing this :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;myJs.dom = null;&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;It doesn't work! So I decided to delete the reference from the Dom object to the Js Object :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;myDom.js = null; // or myJs.dom.js = null;&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;And that worked. No more memory leak.&lt;br /&gt;In conclusion, I have made up a reference cleaner which would delete Dom reference to Js objects before the page unload. That object is part of the Util class and is defined as follow :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;Util.collector = new Array();&lt;br /&gt;Util.collector.register = function(object) {&lt;br /&gt;  this.push(object);&lt;br /&gt;}&lt;br /&gt;Util.collector.empty = function() {&lt;br /&gt;  for (var i=0; i &lt; Util.collector.length; i++)&lt;br /&gt;    Util.collector[i].dom.js = null;&lt;br /&gt;}&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;each time you create a Js object that will refer to a Dom object, you register it to the collector by calling&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;Util.collector.register( myJs );&lt;br /&gt;&lt;/pre&gt;&lt;br /&gt;and somewhere in your code, you add :&lt;br /&gt;&lt;pre&gt;&lt;br /&gt;window.onunload = function() { Util.collector.empty(); }&lt;br /&gt;&lt;/pre&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113515716196801890?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113515716196801890/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113515716196801890' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113515716196801890'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113515716196801890'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/ie-memory-leak.html' title='IE memory leak'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113448293906754131</id><published>2005-12-13T14:34:00.000+01:00</published><updated>2005-12-13T15:08:59.086+01:00</updated><title type='text'>the Util class</title><content type='html'>Introducing the class Util. Its a metling pot of methods that can be very usefull at any time when programming javascript. Theses methods are not meant for a particular type of object. For example, the dollar function ($) which is a shorthand for document.getElementById is not part of the Util class. It is in the Dom class as it plays with DOM Elements.&lt;br /&gt;Here are some methods :&lt;br /&gt;//A shorthand for document.write&lt;br /&gt;Util.dw = function(str) {&lt;br /&gt;document.write(str);&lt;br /&gt;}&lt;br /&gt;//You can alert multiple arguments send to that function&lt;br /&gt;Util.alert = function() {&lt;br /&gt;var str = '';&lt;br /&gt;for (var i=0; i&lt; arguments.length; i++) {&lt;br /&gt;str += arguments[i];&lt;br /&gt;if ( i != arguments.length-1 ) &lt;br /&gt;str += ' / ';&lt;br /&gt;}&lt;br /&gt;alert(str);&lt;br /&gt;}&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113448293906754131?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113448293906754131/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113448293906754131' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113448293906754131'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113448293906754131'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/util-class.html' title='the Util class'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113441202798310124</id><published>2005-12-12T19:17:00.000+01:00</published><updated>2005-12-13T09:23:38.496+01:00</updated><title type='text'>the layerX property in Firefox</title><content type='html'>When an element is clicked, you can get the mouse relative coordinates from the top left edge of the element with the e.layerX and e.layerY properties in Firefox. I discovered that the Firefox team made a change from version 1.0 to 1.5. In Firefox 1.0, if your mouse is over the very first top-left pixel of the element (including the border if existing), these properties indicates (0,0) as Safari 1.3 does. But in Firefox 1.5, these are (1,1) ! And you know what, I like the second way better. Because if your element is 200px width, you get layerX from 1px to 200px instead of 0px to 199px as if it was an array index.&lt;br /&gt;On IE, it's very different because the equivalent which is event.offsetX gives you the number of pixel from the left border excluding the border! So that you can get a negative value if your element is bordered. And from the first inside pixel, it works like Firefox 1.0, giving you a 0.&lt;br /&gt;This time, I would give the vote for Firefox 1.5 which convince me the best.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113441202798310124?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113441202798310124/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113441202798310124' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113441202798310124'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113441202798310124'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/layerx-property-in-firefox.html' title='the layerX property in Firefox'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113414954633218306</id><published>2005-12-09T18:13:00.000+01:00</published><updated>2005-12-09T18:38:22.606+01:00</updated><title type='text'>Browser competition</title><content type='html'>Before going further in a framework implementation, I had a look at the &lt;a href="http://www.w3schools.com/browsers/browsers_stats.asp"&gt;Browser Statistics&lt;/a&gt; from &lt;a href="http://www.w3schools.com"&gt;w3schools&lt;/a&gt;. As they mention, it's only statistics, but I come up to the idea that my framework would be compatible with IE 6.0 and 7.0, Firefox 1.0 and 1.5, Safari 1.3 and 1.4 and Opera 8.5.&lt;br /&gt;I will then gives you some feed back about cross-browser compatibility.&lt;br /&gt;Let's begin with a simple example, the width style property of a DOM element.&lt;br /&gt;Width is something abstract because from one browser to another, you don't see element the same size! In IE width is really what you see. It is the width of the element from one side to the other. In Firefox, width as a different meaning. It is the space available for displaying the child elements of a given element. On the screen, I would call it the internal width of an element. When you set the width of an element to a certain value, your element, from one side to the other as a total width of the value you specified plus the borders width plus the padding width.&lt;br/&gt;&lt;br /&gt;Let's see an &lt;a href="http://www.lucca.fr/fr/samples/browser-competition-width.html"&gt;example of the width style property&lt;/a&gt;.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113414954633218306?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113414954633218306/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113414954633218306' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113414954633218306'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113414954633218306'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/browser-competition.html' title='Browser competition'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-19718317.post-113413356054940805</id><published>2005-12-09T13:56:00.000+01:00</published><updated>2005-12-12T19:28:16.650+01:00</updated><title type='text'>Introduction</title><content type='html'>I am developing web applications in Ajax technology for &lt;a href="http://www.lucca.fr"&gt;LUCCA&lt;/a&gt;. In the past days, I was asked to dig into the Ajax framework folk and to come up with ideas for our new application. The goal of this blog is to share my feed back on what I see on the web about Ajax framework. I will also try to present a bunch of functions that we could bring together to build a new framework.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/19718317-113413356054940805?l=ajax-prototype.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://ajax-prototype.blogspot.com/feeds/113413356054940805/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=19718317&amp;postID=113413356054940805' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113413356054940805'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/19718317/posts/default/113413356054940805'/><link rel='alternate' type='text/html' href='http://ajax-prototype.blogspot.com/2005/12/introduction.html' title='Introduction'/><author><name>Nicolas Faugout</name><uri>http://www.blogger.com/profile/10011031717258507580</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>
