Planète jQuery
Planète jQuery Francophone - L'actualité jQuery en français
  • Accueil
  • Top 10
  • Statistiques
  • Inscription
  • Archives
  • Contact

Informations

Planète jQuery est un site visant à regrouper un ensemble de flux RSS de divers sites/blogs parlant de jQuery en français.

N'hésitez pas à nous rejoindre, plus on est de fous plus on jQuery !

Abonnement

Abonnez vous au flux RSS Suivez nous sur twitter

Participer

  • meta Ajouter votre blog

Membres

  • feed  Babylon-design
  • feed  Creatiqfr
  • feed  Css4Design
  • feed  Damdec
  • feed  Dator
  • feed  Devload
  • feed  Devzonefr
  • feed  Excargot
  • feed  Jarodxxx
  • feed  jQuery.info
  • feed  Js4Design
  • feed  Kennyfeed
  • feed  LaFermeDuWeb
  • feed  Landier
  • feed  Les integristes
  • feed  LudiKreation
  • feed  OpenStudio
Filtrer les articles :     Articles du jour   -   Articles de la semaine   -   Articles du mois   -   Tous les articles
DualSlider - Un slider jQuery efficace à deux colonnes 
0 vote
Par LaFermeDuWeb le 03/09/2010 à 08:20
DualSlider est un plugin jQuery permettant de créer un slider / slideshow composé de deux colonnes de contenu.
Haut de page
elFinder - Gestionnaire de fichiers en jQuery 
0 vote
Par LaFermeDuWeb le 31/08/2010 à 10:15
elFinder est un gestionnaire de fichiers web écrit en javascript et utilisant jQuery UI pour son interface.Il se veut aussi simple d'utilisation que le Finder de Mac OS X.
Haut de page
Jquery Selected text searcher – Plugin jQuery 
1 vote
Par LudiKreation le 27/08/2010 à 14:27

Je reviens de nouveau avec jQuery, cette fois-ci avec un plugin nommé « Selected text searcher« . C’est un plugin qui va permettre de rajouter une sorte de tooltip lors de la sélection d’un texte que vous aurez préalablement déterminé.

Jquery-Selected-text-searcher-plugin

En fait, vous allez pouvoir y mettre des liens dans la tooltip, des liens avec favicon du site si vous le souhaitez. Vous pourrez y mettre un titre, du contenu et des éléments de recherche ou d’envoi.

Par exemple pour ajouter des éléments de partage :
code js :

$('.demo1').selectedTextSharer({
        lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/sharer.php?t=%s&u=http://google.com,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
        extraClass: 'dark',
        title: 'Share this text ...',
        borderColor: '#00ccff',
        hoverColor: '#FFFFCC'
    });

et le html :

<div class="demo1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>

On peut remarquer l’attribut favicon, pour ajouter automatiquement le favicon du site en question.

Pour effectuer des recherches sur un lieu, via googlemaps ou wikipédia par exemple :
code js :

$('.demo4').selectedTextSharer({
        lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
        title: 'Search this text ...',
        borderColor: '#009900',
        hoverColor: '#FFFFCC'
    });

code html :

<input class="demo4" type="text" />

Pour plus d’informations :
Le site du plugin
La démo

Articles qui peuvent vous intéresser :

  • jQuery – Afficher une adresse mail sans être spammé
  • Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant
  • Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
  • Pajinate – Plugin jQuery – La pagination en javascript
  • jQuery – 20 plugins jQuery à retenir

Partager

Haut de page
Stablet - Un template HTML / CSS / jQuery optimisé pour iPad 
0 vote
Par LaFermeDuWeb le 26/08/2010 à 10:13
Stablet est un template web réalisé en HTML, CSS et JS optimisé pour la navigation sur iPad.
Haut de page
Les attributs avec JQUERY 
0 vote
Par Creatiqfr le 25/08/2010 à 10:30

Bienvenue dans ce second chapitre consacré aux attributs en JQUERY.
Je vous souhaite un bon visionnage :) Have Fun !




Haut de page
jQuery – Afficher une adresse mail sans être spammé 
2 votes
Par LudiKreation le 20/08/2010 à 16:31

anti-spam-mail

En me baladant sur le net, je suis tombé sur un petit article sur le blog de Victor Coulon, qui explique d’une manière simple une petite astuce en jQuery sur comment camoufler son adresse mail aux yeux des robots spammeurs, mais pas à ceux des internautes.

Voici donc l’astuce :

Le code jQuery nécessaire :

<script type="text/javascript">
 $(document).ready(function(){
 $('.nospam').each(function(){
 var email = $(this).html();
 email = email.replace("[arobase]","@");
 email = email.replace("[point]",".");
 $(this).html("<a href=\"mailto:"+email+"\">"+email+"</a>");
 });
});
</script>

Et l’affichage HTML :

<span>contact[arobase]ludikreation[point]com</span>

Source

Articles qui peuvent vous intéresser :

  • Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant
  • Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
  • Pajinate – Plugin jQuery – La pagination en javascript
  • jQuery – 20 plugins jQuery à retenir
  • jqIsoText – Plugin jQuery – Effet de texte isométrique

Haut de page
Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant 
1 vote
Par LudiKreation le 20/08/2010 à 15:51

jQuery est un framework agréable et très apprécié des développeurs, notamment grâce à une fluidité et une maniabilité améliorée de coder en javascript. Et je suis tombé sur un tutoriel vraiment bluffant sur les possibilités données via jQuery et l’imagination de développeurs.

Avec Sponsor Flip Wall, vous allez pouvoir réaliser un mur de sponsors, ou autre, avec comme effet, qu’au clique la cellule d’image du sponsor sélectionné se retourne pour dévoiler des informations et un lien. Bien entendu tout ceci peut être adapté et l’effet, que l’on retrouve souvent dans des animations flash, est plutôt fluide et très agréable.

flip-jquery

Avec un peu de code PHP, CSS et javascript on peut arriver à ce résultat.

Un fichier css style.css :

body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;
}

.sponsor{
    width:180px;
    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */


    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
    /* Centering the logo image in the middle of the .sponsorFlip div */

    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

Un fichier php demo.php avec :

<?php

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

// Looping through the array:

foreach($sponsors as $company)
{
    echo'
        <div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'
.$company[0].'.png" alt="More about '.$company[0].'" />
            </div>

            <div class="sponsorData">
                <div class="sponsorDescription">
                    '
.$company[1].'
                </div>
                <div class="sponsorURL">
                    <a href="'
.$company[2].'">'.$company[2].'</a>
                </div>
            </div>
        </div>

    '
;
}

?>

Et du javascript dans un fichier script.js :

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

Bien entendu tout le code ici n’est pas complet, pour télécharger le code complet, rendez vous ici.

Démonstration
Source et tutoriel

Articles qui peuvent vous intéresser :

  • Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
  • Pajinate – Plugin jQuery – La pagination en javascript
  • jQuery – 20 plugins jQuery à retenir
  • jqIsoText – Plugin jQuery – Effet de texte isométrique
  • YoxView – Plugin jQuery – Une lightbox améliorée

Haut de page
La carte de l’Europe cliquable en Css + jQuery 
1 vote
Par Devzonefr le 20/08/2010 à 12:03

Impressionnante cette carte cliquable de l’Europe !

Pas coté graphique bien sur mais jeter un coup d’oeil au code source pour y découvrir le css et les quelques lignes de javascript utilisé (avec jQuery bien sûr ;) ).

Europe Css jQuery clickable map

Y’a eu du boulot pour arriver à ce résultat.

Liens :

  • Europe Css ans jQuery clickable map
  • via un tweet de @smashingmag
Haut de page
Les selecteurs JQUERY 
1 vote
Par Creatiqfr le 19/08/2010 à 14:36

Nous allons voir ensemble dans ce tutoriel les sélecteurs en JQUERY.

Haut de page
ScriptSrc.net - Copiez la déclaration des librairies JS en un clic 
0 vote
Par LaFermeDuWeb le 18/08/2010 à 10:25
ScriptSrc.net est un service web simple mais très pratique permettant de copier, en un clic, la ligne de code HTML permettant d'intégrer les différents frameworks JS à une page web.
Haut de page
Page suivante »
Propulsé par le BilboPlanet Retour au début