Archive for the ajax Category

30 11 2007

Totally useless ‘ajax’ ‘loading’ image in the address bar as a spinning thing

Posted by: Ori Pekelman in ajax, javascript

Welcome to probably the most useless blog post on the web.

Now you can happily animate stuff in the address bar (do you remember the nineties and nice status bar animations ? :) ) .

The beautiful online demo can be found here : Demo of animated address bar

PLAIN TEXT
HTML:
  3. <title>Totally usesless 'ajax' 'loading' image in the address bar as a spinning thing</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta name="author" content="AF83.com" />
  6. <script language="JavaScript">

PLAIN TEXT
JavaScript:
  1. <!--
  2. /**
  3. *  Copyright (c) 2007, AF83
  4. *  All rights reserved.
  5. *
  6. *  Redistribution and use in source and binary forms, with or without modification,
  7. *  are permitted provided that the following conditions are met:
  8. *
  9. *  1° Redistributions of source code must retain the above copyright notice,
  10. *  this list of conditions and the following disclaimer.
  11. *
  12. *  2° Redistributions in binary form must reproduce the above copyright notice,
  13. *  this list of conditions and the following disclaimer in the documentation
  14. *  and/or other materials provided with the distribution.
  15. *
  16. *  3° Neither the name of AF83 nor the names of its contributors may be used
  17. *  to endorse or promote products derived from this software without specific
  18. *  prior written permission.
  19. * 
  20. *  THIS SOFTWARE IS PROVIDED BY THE COMPANY AF83 AND CONTRIBUTORS "AS IS"
  21. *  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  22. *  THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  23. *  PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
  24. *  CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  25. *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  26. *  PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  27. *  PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  28. *  OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
  29. *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
  30. *  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  31. *
  32. *  @copyright  2007 AF83 Ori Pekelman
  33. *  @license    BSD License (3 Clause) http://www.opensource.org/licenses/bsd-license.php
  34. *  @package    Useless Stuff
  35. */
  36. // Configure :
  37. var TextBefore=' ...  Loading ... ';
  38. // End configuration
  39. var AddressBarLoaderTimeOut;
  40. var OriginalLocationHash = document.location.hash; // so we can restore original url
  41.  
  42. function loc_hash(a){
  43.  document.location.hash =TextBefore+a;
  44. }
  45.  
  46. function spinStart(){
  47.     AddressBarLoaderTimeOut=setTimeout("spinStart()",100);
  48.     loc_hash("|");
  49.     loc_hash("/");
  50.     loc_hash("-");
  51.     loc_hash("");
  52.     loc_hash("|");
  53.     loc_hash("/");
  54.     loc_hash("-");
  55.  }
  56.  function spinStop(){
  57.      document.location.hash=OriginalLocationHash;
  58.      clearTimeout(AddressBarLoaderTimeOut) ;
  59.      }
  60. // -->

PLAIN TEXT
HTML:
  1. </script>
  2. </head>
  4. <h1>Totally usesless 'ajax' 'loading' image in the address bar as a spinning thing</h1>
  5. <div style="margin:100px;height:100px;width:100px; background-color:#333;font-size:18;color:white;" onclick="spinStart();">Click on me to start address bar ajax loader</div>
  6. <div style="margin:100px;height:100px;width:100px; background-color:#333;font-size:18;color:white;" onclick="spinStop();">Click on me to stop</div>
  7. </body>
  8. </html>

Click to continue reading

Comments 5 Comments »

31 05 2007

Google Developer Day presentation

Posted by: Ori Pekelman in ajax, events, google maps, php

For the benefit of those who participated in the Google developers day presentation a French only post.

Dans ce billet vous trouverez les sources et les présentation de la session Google Maps lors du Google Developers Day à Paris du 31 mai 2007 . Dans le poste du 25 mai vous pouvez trouver le code pour travailler avec les adresses françaises... Suivez ce lien pour la présentation de Clément Hallet sur les bases d'utilisation de Google Maps API et celui ci pour la présentation sur des thèmes plus avancés (géocodage côté serveur, chargement asynchrone des marquers et calcul des distances).

Ici vous pouvez télécharger le code d'exemple utilisé dans la présentation Google Maps API - Basics. Notez que la clé utilisée (ABQIAAAAyzlxpGWavaTREVb4HcYiUhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSYK1OvuhDXV84EQwe2sBFw6vUHtg) marchera sur http://localhost - adaptez la à vos besoins, pour générer votre propre clé Google Maps API cliquez ici (vous pouvez consulter mon billet sur la gestion de configuration par virtual host pour résoudre le problème des clés google utilisé conjointement avec mod_proxy et PHP ).

Click to continue reading

Comments 2 Comments »

22 02 2007

$(Nicer) - a nicer dollar javascript function, prototype style

Posted by: Arthur Wolf in Uncategorized, ajax, javascript

You must know the $ Function in prototype (also in jQuery and mootools) that helps you target elements in Javascript. Well, here's my take on it.

Here's the code :

PLAIN TEXT
JavaScript:
  1. function $( magic , node ){
  2.       //model : [@][id][:][tag]
  3.  
  4.       var keys = /^([\@]*)([\w+]*)([\:]*)([\w+]*)$/(magic);
  5.       var isArray = keys[1];
  6.       var id = keys[2];
  7.       var tag = keys[4];
  8.      
  9.       if( tag == "" ){tag = "*"}
  10.       if( node == undefined ){ node = document }
  11.      
  12.       var nodes = node.getElementsByTagName(tag);
  13.       var ret = new Array;
  14.       for( var i=0; i &lt;nodes.length; i++ ){
  15.             if( id != "" &amp;&amp; nodes[i].id != id ){continue}
  16.             ret.push( nodes[i] );
  17.       }
  18.      
  19.       if( isArray == "@" ){
  20.             return ret;
  21.       }else{
  22.             return ret[0];
  23.       }
  24.  
  25. }

How to use it :


$("mainHeader") : returns the first node in document having "mainHeader" for id and anything for tag name.

$("clickMe:a") : returns the first node in document having "clickMe" for id and "a" for tag name.

$("@clickMe:a") : returns all nodes ( as an array ) in document having "clickMe" for id and "a" for tag name.

$("@:div") : returns all divs in document.

$(":img") : returns first img in document

$("@clear:div" , subNode ) : returns all nodes in DOM node "subNode" having "clear" for id and "div" for tag name.

$("@") : returns all DOM nodes in document.

And so on ...

Click to continue reading

Comments No Comments »

Creative Commons License
This work is licensed under a Creative Commons Attribution 2.0 License.