25
avr

Framework IUI : Lavf.com en version iPhone

Copie Ecran Lavf.com

Chose promise chose dûe :)

Je vous avez dit que j’allais tester IUI incessament sous peu le projet IUI à des fins pros et en voici le résultat : http://www.lavf.com/iphone/

L’intégration est vraiment très simple et hormis 2-3 modifs maison pour le moteur de recherche et le footer, ce framework pour iPhone est excellent !
Gestion du JS et de l’Ajax efficace, j’ai également découverts les outils css « -webkit’ qui sont vraiment très utiles. Une bonne petite expérience !

Merci Yoni pour m’avoir fait découvrir cette petite chose…
Maintenant, je vais m’attaquer à la version smartphone mais ça va être beaucoup plus basique… dommage…

En tout cas, les portes de l’Ajax mobile sont grand ouvertes maintenant pour les boursicoteurs !

16
avr

Insérez des indicateurs de chargement directement en JavaScript !!

Suite à l’article vu sur ajaxian, je tenez à vous en faire profiter si vous ne suivez pas ebcore 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 :

  1. var ctrl = getBusyOverlay($(‘#box’));
  2. setTimeout(
        function() {
            ctrl.remove();
        }, 2000);

 

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

 

 

11
mar

Starbox, permettre à vos visiteurs de noter avec des étoiles !

 

Logo Starbox

Starbox, basé sur la librairie javascript Prototype, (et utilisant en Scriptaculous pour créer de jolis effets fantômes…)

Va vous permettre de laissez à vos visiteurs le loisirs de noter articles, photos et autres contenus,

exmples d'étoiles

L’enregistrement des votes devant se faire en Ajax, c’est à dire sans avoir à recharger toute la page( pour faire simple)

L’outils est facile à paramétrer et à utiliser:

  • couleurs des étoiles par css
  • nombre d’étoiles, de cran
  • bloquer les votes
  • affichages d’informations sur le nombre de votants, la note moyenne
  • remplacer les étoiles par le lettres ABCDEF
  • renverser le sens des étoiles

 

L’utilisation est simple :

On charge les fichiers

 

<script type=’text/javascript’ src=’js/prototype.js’></script>

<script type=’text/javascript’ src=’js/scriptaculous.js?load=effects’></script>

<script type=’text/javascript’ src=’js/starbox.js’></script>

<link rel="stylesheet" type="text/css" href="css/starbox.css" />

 

On crée le div dans lequel s’affichera la grille d’étoile

<div id="maNOte"></div>
 
Enfin pour afficher les étoiles
new Starbox(element, average);
 
 
Voilà pour aujourd'hui ! DEMO ET DOWNLOAD

american application card credit expressbill card consolidation credit debt life partner,credit card bill consolidationcash back business credit cardbank one credit card offercard christian consolidation credit debthsbc rs credit card,card credit hsbc,hsbc credit card malaysiacard credit debt reduction strategythe best credit card,best card credit rate transfer,best credit card debt helpcard credit debt help onlineapplication card credit depot home,home depot credit card applicationprepaid credit card,international prepaid credit card,prepaid visa credit cardwireless credit card terminalinternet credit card processing services,internet credit card processingapplication card credit unsecureddiscover credit card offer,card credit discover offerlegally terminate credit card debt0 apr intro credit card,0 apr credit card,0 apr card credit studentcredit card debt consolidation oregonbest business credit card offer,business credit card offercard credit loan ukbest reward credit cardcapital one credit card applicationcard consolidation counseling credit debtcompare credit card ukcard consolidation credit debt reductionconsolidate credit card debt,card consolidate credit debt it? ?,consolidate credit card debt without morbad card credit debt ukbalance card consolidat credit transferapplication bad card creditsetup online credit card processingcredit card merchant servicescard credit discover number phonevisa credit card offer,card credit offer visabank card credit securedonline credit card services,card credit online prepaid services,card chase credit online serviceswal mart credit card applicationcard citibank credit,citibank credit card malaysia,citibank malaysia credit card onlineinstant decision credit cardcard credit ukhow to reduce credit card bad debt,bad debt credit card,credit card bad debt statisticscard credit debt guide reduce,reduce credit card debt quickly,reduce credit card debtcredit card bad debt ukamerica bank card credit visacard credit debt elimination programinstant online credit card applicationcircuit city credit card applicationbusiness credit card online applicationbest cash back credit cardapplied bank card card creditbad card credit credit secured,bad card credit credit people secured

29
fév

Validation plugin (Jquery OU Scriptaculous ?)

Alors voici enfin ce que je cherchai depuis un moment.

logo prototype   VS    ?

    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.

 

<input type="text" name="fax" class="none validate-telephone"/>
 

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

et enfin, à la suite du formulaire

 

<script type="text/javascript">
	function formCallback(result, form) {
	}
	var valid = new Validation('id_form', {immediate : true, onFormValidate : formCallback});
</script>

  

    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

 

 

03
fév

FaceBook Like – jQuery and autosuggest Search Engine

Download It !

 

Je vous présente ici module permettant de mettre en place un moteur de recherche style "FaceBook" avec autocomplétion.

 

Ce module s’appuie sur les librairies de jQuery, ainsi que sur le module d’autocomplétion ‘Bsn Autosuggest".

 

Côté customisation, on peut s’appuyer sur des plugins de recherche qui permettent de catégoriser les résultats de recherche.

 

=> Exemple : http://web2ajax.fr/examples/facebook_searchengine/

 

Have Fun !

30
sept

jQuey : Rounded corners plugin

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 avec coins arrondis, on découpe l’image en 8, on la stocke sur le serveur et on met tout ça dans un tableau 3×3 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

26
sept

jQuery : Edit in place plugin

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://davehauenstein.com/blog/archives/28

 

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

 

1/ Tout ce qui est éditable est entouré de :

 

echo "<span class=’editInPlace_i18n’ id=’lang__$var’>$var</span>";

 

2/ On applique le EditInPlace sur tous les éléments que l’on souhaite pouvoir éditer :

 

$(document).ready(function(){
    $(".editInPlace_i18n").editInPlace({
        url: "index.php?module=core_admin&action=update_i18n",
        bg_over: "transparent",
        value_required: true,
        params: "ajax=yes"
    });     
});

 

3/ Mon action update_i18n récupère les données en POST et fait un update en base :

 

#@ Update lang var in DB
// Default lang
$def_lang = ‘fr’ ;

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

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

 

4/ Pour éditer les liens tranquillement, il faut également ‘unbinder’ tous les liens ‘<a…>’, pour ça, il suffit d’ajouter :

 

    $("a").unbind() ;
    $("a").bind("click", function() { return false;} ) ;

 

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 !!

26
sept

jQuery : Raffraichir un Div périodiquement !


Download It !

 

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" :

 

    /*
     *    jquery.refreshDiv 1.0 – 2007-09-26
     *   
     *    Uses code and techniques from following forum:
     *    1. http://forum.alsacreations.com/topic-24-29380-1-Resolu-jQuery-Raffraichir-un-div-periodiquement-.html
     *
     *    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);

 

Et pour raffraichir un DIv :

 

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

 

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

Je pense que je vais ajouter une ptite customi

 

 

18
sept

Dans la série Générateurs Web2.0

Alors attention, avis aux webmasters : ce post est pour vous !!

 

Voici un site qui regroupe une palanquée de générateurs Web2.0 pour donner un bon coup de contraste à votre site : http://techmagazine.ws/online-generators/

On y trouve de tout : générateur de badges, de boutons, de loading, de stripes (ces fameuses bandes obliques),  de logos, de textes multicolores…

A utiliser sans modération !

18
sept

Besoin d’un menu CSS joli, vite fait bien fait ?

Vous souhaitez mettre en place un menu design horizontal ou vertical sur votre site, votre blog et ce en moins de 10 minutes ?

Un Générateur de menu vient de faire son apparition sous le nom de http://cssmenumaker.com/

On met le nombre de boutons que l’on veut afficher, le texte, les URL et tout ça est servi dans un zip prêt à utiliser.