jQuery LazyLoad Ad plugin has been updated and version is now 1.4.
Improved on a lot of features, plugin is more strong and have now the capacity to chain script loading.

For this new version, I've build a mini site (jqueryad.web2ajax.fr) focused on this plugin. You'll find a presentation of the plugin, some demos, how to implement it in your own blog or website and download links.

Some people ask me a new feature that is Lazyload for images too. I hope it could be implemented in the next version 1.5 soon.

For moment, this plugin was successfully tested on adSense, OpenX tags, BlogBang and GoViral platforms.
Let me your feedbacks !

jQuery Lazy Load Ad is a jQuery plugin that takes advantage of Lazy Load delaying ads loading.
- Highly improve general page load (Ads are displayed after the page load and only inside the viewport)
- Compatibility with AdSense and many other advertisers
– Cross Browser support (IE5.5+, Firefox, Opera, Chrome, Safari)

A new version of this post and of the jQuery Lazyload Ad plugin is available here

Gains on my blog : 65% for the page load, and 52% for page weight
-> Without lazy Load Ad : Page loaded in 8.88s (371.98kb)
-> With : page loaded and accessible in 3.17s (179.18kb)


Big thanks to Mika Tuupola for the Lazy load part
-> http://www.appelsiini.net/projects/lazyload

Another big thanks to FrankT and his document.write overload code
-> http://blog.phpbuero.de/?p=26

To View Demo, simply look at all the ads on web2ajax, they are loaded by Lazy Load Ad.
You can either view the full page Demo by clickinh on 'Demo' Button just below to know how to use it on your own website.


INSERT AD CODE

First, insert placements into your HTML code.
For that, you can use a 'div' tag.
Apply a specified class, only used for lazyLoad Ad uses, as example 'lazyLoadAd_places'
So you have this :
[sourcecode]<div class="lazyLoadAd_places"></div>[/sourcecode]

Now, call the ad publisher code and put it into the div attributes, named as 'original'.

For example with original BlogBang code :
[sourcecode]<div>
<script src="http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300" type="text/javascript"></script>
</div>[/sourcecode]

Becomes :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300'></div>[/sourcecode]

To finish you can put 'code' tags into the div, code will be evaluated as javascript, just before calling publisher script (look to adsense example).
You can put either HTML code, like tags or image mobile replacements. Degraded content will be replaced by document.write when called.


EXAMPLES

In your HTML code for adSense:
[sourcecode]<div class="lazyLoadAd_places" original='http://pagead2.googlesyndication.com/pagead/show_ads.js'>
<code><!--
google_ad_client = 'YOUR_AD_CLIENT_ID';
google_ad_slot = 'YOUR_AD_SLOT';
google_ad_width = 300;
google_ad_height = 250;
//-->
</code>
</div>
[/sourcecode]


In your HTML code for eBuzzing:
[sourcecode]<div class="lazyLoadAd_places" original='http://www.ebuzzing.com/player_blog/player.php?parametre=115660'></div>
[/sourcecode]


In your HTML code for BlogBang :
[sourcecode]<div class="lazyLoadAd_places" original='http://www.blogbang.com/d.php?id=a16a937291&n=1&p=L&o=SLW&w=300&c=2222222&bg=121212'>
<a href="http://www.blogbang.com/" target="_blank"><img src="http://www.blogbang.com/s.php" border="0" alt="BlogBang"></a>
</div>[/sourcecode]


HOW TO CALL LAZY LOAD AD

Insert the script declarations just before the 'body' endtag.

After loading the last jQuery version and document is ready, lazyLoad the Ads
[sourcecode] ...

<script type="text/javascript" src="/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.lazyLoadAd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// Load LazyLoad Ad on each dom with classname 'lazyLoadAd_places'
$(".lazyLoadAd_places").lazyLoadAd({
threshold: 200,
onComplete: function() {
// -- Pub is displayed !
}
}) ;
}) ;
</script>

...
</body>
</html>
[/sourcecode]

jDigiClock is a beautiful jQuery inspired by the HTC Hero Widget.
It displays local time and weather.

Simple to integrate, I'll include it in the new theme of web2ajax :)

Article : http://www.radoslavdimov.com/2010/03/08/jdigiclock%E2%80%93ver-2-1/#content
Demo : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/#Examples

Pour continuer avec l'iPhone, j'ai trouvé ce plugin hyper simple à installer pour transformer votre blog wordPress en version iPhone : WPTouch

Celui-ci détecte automatiquement le user agent et si vous surfez avec un iPhone, vous verrez le site en version optimisée pour l'iPhone.
Je l'ai installé en moins de 2 minutes :)

Et si jamais vous souhaitez tout de même voir le site en version nomale : il y'a un lien en bas de page.

Y'a pas plus simple !!

Suite à l'article vu sur ajaxian, je tenez à vous en faire profiter si vous ne suivez pas encore ce blog :)

Il s'agit en fait d'un js qui, utilisé sans aucune dépendance, permet d'insérer des indicateurs de chargemenr n'importe où et n'importe quand dans votre site !

Jettez un oeil à la démo et voyez par vous même en changeant les paramètres, c'est vraiment génial !!

Vous pouvez l'associer à jQuery par exemple en utilisant ce code :

[sourcecode]
var ctrl = getBusyOverlay($('#box'));
setTimeout(
function() {
ctrl.remove();
}, 2000);
[/sourcecode]

Pour télécharger la librairie et peut-être en faire un plugin jQuery :), cliquez-ici : busy.js

Alors voici enfin ce que je cherchai depuis un moment.

jQuery vs Scriptaculous

Habitué à utiliser Really easy field Validation (REFV pour nous ) avec prototype et scriptaculous, je m'attachai à ce plugin pour rester sur scriptaculous.

En effet, il est très simple à utiliser et facilement adaptable, paramétrable, couplé avec juste Prototype et Effects.js de Scriptaculous pour les tests et les effets d'apparition des messages d'erreur.

Facilement adaptable, vous pouvez consulté un exemple ici en anglais sur la demo de l'auteur  (telechargement)

ou  en francais sur un site client récent (pas de spam s'il vous plait)

Ses Avantages...

Des effets d'affichage des erreurs superbes, sobre mais efficaces.
facilité d'adaptation (ajout de types de test temporaires intégrable facilement dans la page ou généraux dans le fichier source)
permet la validation javascript des champs lorsque le champs perd le focus ou au submit du formulaire
une source legere
Mais alors allez vous me dire, comment ca marche ?

C'est simple, tout d'abord pour chacun de vos champs vous fixez une class css correspondante au type de test requis.

[sourcecode]

[/sourcecode]

Ensuite vous donnez un identifiant au formulaire ( par expérience toujours le faire dans tous les cas ;) !)

et enfin, à la suite du formulaire

[sourcecode]

function formCallback(result, form) {

}
var valid = new Validation('id_form', {immediate : true, onFormValidate : formCallback});

[/sourcecode]

Qu'est ce que je découvre aujourd'hui ? un plugin similaire (néanmoins plus puissant) existe aussi avec Jquery Jquery Validation Plugin !

Brièvement ? Ben c'est pratiquement le même principe, les mêmes options de bases, + ?

Eh bien ses avantages :

Reprend les mêmes options que celui utilisant Prototype
Ajoute la validation sur l'évenement 'onchange' (peut être pratique, croyez moi)
Ajoute la possibilité de mettre un Capcha
Ajoute la possibilité de valider un champs en ajax par la balise remote ( par exemple vérifier que ce mail n'est pas pris !)
Et cela me libère de scriptaculous ;) je vais enfin pouvoir tester JQuery, sachant que la communauté est beaucoup plus dynamique et que le nombre de plugins disponibles est... faramineux !

La démo et téléchargement sur le site de l'auteur

Tout est bon pour gagner de précieuses minutes pour un webdesigner, et ce plugin est vraiment très pratique.

Comment on fait pour créer une boite avec des coins arrondis en temps normal ? On prend photoshop, on dessine un rectangle avecSelon la variante du poker en ligne, qui est joue. coins arrondis, on découpe l'image en 8, on la stocke sur le serveur et on met tout ça dans un tableau 3x3 ou dans des div imbriqués...

Vous m'avez compris, celà prend du temps et peut devenir fastidieux si on veut changer la couleur, faire des boites de style différents...

Et bien c'est terminé tout ça ! Une ligne de commande suffit à donner le plus bel effet à un simple rectangle de couleur. Pour plus d'informations, lisez ce post : http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery

Avant toute chose : cet outil est magique !!

Le site que je suis en train de faire est un framework maison qui me permet entre autre de faire un site multilingue. Et c'est en ces moments que le EditInPlace prend tout sons sens : plutot que de passer par une interface d'admin pour traduire et déclarer une variable de langue une à une, je peux faire ça en live sur le site !

Pour ce qui est du plugin, tout se trouve sur le site : http://code.google.com/p/jquery-in-place-editor/

Quand à sa mise en place, c'est on ne peut plus facile :

1/ Tout ce qui est éditable est entouré de :
[sourcecode]
echo "<span class='editInPlace_i18n' id='lang__$var'>$var</span>";
[/sourcecode]

2/ On applique le EditInPlace sur tous les éléments que l'on souhaite pouvoir éditer :
[sourcecode]
$(document).ready(function(){
$(".editInPlace_i18n").editInPlace({
url: "index.php?module=core_admin&amp;amp;action=update_i18n",
bg_over: "transparent",
value_required: true,
params: "ajax=yes"
});
});
[/sourcecode]

3/ Mon action update_i18n récupère les données en POST et fait un update en base :
[sourcecode]
#@ Update lang var in DB
// Default lang
$def_lang = 'fr' ;

// Get var to update
$var_update = str_replace('lang__', '', $_POST['element_id']) ;

// Do update &amp;amp; write new text
if ( set_lang($var_update, $def_lang, $_POST['update_value']) ) {
echo $_POST['update_value'] ;
} else {
echo $_POST['original_html'] ;
}
[/sourcecode]

4/ Pour éditer les liens tranquillement, il faut également 'unbinder' tous les liens ', pour ça, il suffit d'ajouter :
[sourcecode]
$("a").unbind().bind("click", function(e) { e.preventDefault();} ) ;
[/sourcecode]

Je me sers d'une variable de session et d'un champ caché accessible par Javascript pour mettre à 'On' ou 'Off' le mode d'édition.

Bien sur, ce sera à adapter à votre environnement, mais tout est très bien expliqué sur le lien plus haut.

Vous savez tout maintenant, alors bon EditInPlace à tous !!

Je cherchais depuis hier soir un plugin jQuery qui puisse me permettre de raffraichir le code html d'une DIV a intervalle régulier pour un module de news et Ô, désespoir : celui-ci n'existait pas !

Donc Bibi, comme il en avait besoin et qu'il aime bien l'esprit communautaire, bah il a commencé à créer ce plugin pour sa bibine, et aussi et surtout à partager ce plugin à toute la communauté.

Pour le plugin jQuery "jQuery.refreshDiv.js" :

[sourcecode]
/*
* jquery.refreshDiv 1.0 - 2007-09-26
*
* All the new stuff written by Guillaume DE LA RUE (www.web2ajax.fr)
* Feel free to do whatever you want with this file
*
*/

(function($) {
$.refreshDiv = function(source, url, interval_ms) {
return setInterval(
function() {
return $(source).load(url) ;
}, interval_ms );
}

$.fn.refreshDiv = function(url, interval_ms) {
if (!url) return;
this.each(function() {
new $.refreshDiv(this, url, interval_ms);
});
return this;
};
})(jQuery);
[/sourcecode]

Et pour raffraichir un DIv :

[sourcecode]
jQuery(document).ready(function() {
// Refresh news div every 3000 sec
$('#news_panel').refreshDiv('/Actualites/module.html', 3*60*1000) ;
});
[/sourcecode]

Testez le et dites moi si c'est bon pour vous que je le mette directement sur le site officiel de jQuery !