Menu déroulant en HTML et CSS

Posté le par scoco — 3 commentaires ↓
liste-deroulante

Voici une solution pour faire un menu déroulant simplement en utilisant uniquement HTML et CSS.

Vous avez le CSS et le HTML, à vous de l’adapter à vos besoins en modifiant ce qu’il vous faut.

#menu{
    height: 21px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#menu li{
    float: left;
    text-align:center;
    width: 150px;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu li a:link, #menu li a:visited{
    display: block;
    height: 1%;
    color: #FFF;
    background: green;
    margin: 0;
    padding: 4px 8px;
    border-right: 1px solid #fff;
    text-decoration: none;
}
#menu li a:hover {background-color: #F2462E;}
#menu li a:active {background-color: #5F879D;}
#menu .sousMenu{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
}
#menu .sousMenu li{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 149px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
}
#menu .sousMenu li a:link, #menu .sousMenu li a:visited{
    display: block;
    color: #FFF;
    margin: 0;
    border: 0;
    text-decoration: none;
}
#menu .sousMenu li a:hover{
    background-image: none;
    background-color: #F2462E;
}
#menu li:hover > .sousMenu {display: block;}
<ul id="menu">
	<li><a href="#">Fruits</a>
            <ul class="sousMenu">
                    <li><a href="#">Pomme</a></li>
                    <li><a href="#">Orange</a></li>
                    <li><a href="#">Banane</a></li>
                    <li><a href="#">Figue</a></li>
            </ul>
        </li>
	<li><a href="#">Sports</a>
            <ul class="sousMenu">
                    <li><a href="#">Basket</a></li>
                    <li><a href="#">Roller Derby</a></li>
                    <li><a href="#">Tennis</a></li>
            </ul>
        </li>
	<li><a href="#">Capitales</a>
            <ul class="sousMenu">
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Londres</a></li>
            </ul>
        </li>
	<li><a href="#">Prénoms</a>
            <ul class="sousMenu">
                    <li><a href="#">Emilie</a></li>
                    <li><a href="#">Pierre</a></li>
                    <li><a href="#">Lionel</a></li>
                    <li><a href="#">Virginie</a></li>
                    <li><a href="#">Sebastien</a></li>
            </ul>
        </li>
</ul>
Tagués avec : , , , ,
Publié dans Dev, Outils

Centrer du texte dans une image faite en php

Posté le par scoco — 1 commentaire ↓
Création d'image en php

Dans un article précédent, je vous montrai comment générer une images de type QRcode mais c’était avec un petit formulaire avec un couche de javascript.
Cette fois ci, on va se pencher sur la création d’image en avec la bibliothèque GD de PHP.

La création d’une image

Dans un premier temps, on va créer une image simple (toute rouge)

<?php
header('Content-type: image/png');
$image = imagecreate(150, 150);
$background = imagecolorallocate($image, 255, 0, 0);
imagepng($image);
?>
  • header(« Content-type: image/png »);
    C’est une fonction qui sert à définir quel type de document sera affiché, dans notre cas, il s’agit d’une image png
  • $image = imagecreate(150, 150);
    Pour définir la taille de l’image de l’image que l’on créé
  • $background = imagecolorallocate($image, 255, 0, 0);
    Nous définissons une couleur (en RGV) pour remplir l’image
  • imagepng($image);
    Et on créer l’image !

Ajouter du texte

<?php
header('Content-type: image/png');
$image = imagecreate(150, 150);
$background = imagecolorallocate($image, 255, 0, 0); /* On définie une couleur de fond (ici ROUGE) */
$noir = imagecolorallocate($image, 0, 0, 0); /* On définie une couleur que nous utiliserons après*/
imagestring($image, 5, 10, 10, "mon texte", $noir); /* On insère le texte "mon texte" avec une largeur de caractère de 5 à 10px du haut et 10px de la gauche*/
imagepng($image);
?>

Centrer le texte dans l’image

<?php
header('Content-type: image/png');
 
/* * *******************************
 * Parametre
 * ********************************
 */
$largeur = 150; /* longueur de l'image */
$hauteur = 150; /* hauteur de l'image */
$image = imagecreate($largeur, $hauteur);
/* Background */
$background = imagecolorallocate($image, 0, 255, 0);
/* Couleur du text */
$couleurTxt = imagecolorallocate($image, 255, 0, 0);
/* texte à mettre dans l'image */
$txt = "mon texte";
/* Taille du texte */
$font = 3;
/* Hauteur et largeur des caratères */
$largeurCaractere = ImageFontWidth($font);
$hauteurCaractere = ImageFontHeight($font);
/* Longueur du texte (taille caratère X nombre de caractère) */
$largeurTxt = $largeurCaractere * strlen($txt);
/* Recherche de la position horizontale centrale pour centrer le texte */
$positionCentreHor = ceil(($largeur - $largeurTxt) / 2);
/* Recherche de la position horizontale centrale pour centrer le texte */
$positionCentreVer = ceil(($hauteur - $hauteurCaractere) / 2);
/* Ajout du texte au centre de l'image */
$image_string = ImageString($image, $font, $positionCentreHor, $positionCentreVer, $txt, $couleurTxt);
/* Création de l'image */
imagepng($image);
?>

N’hésitez pas à contribuer à cet article en commentant, en apportant des conseils (ou mise en garde) sur la création d’image en php.

Tagués avec : , , , , , ,
Publié dans Divers

Quicksearch – Comment effectuer une recherche dans un tableau ?

Posté le par scoco — Aucun commentaire ↓
Rechercher

Quicksearch – Un plugin très utile !

Quicksearch est un plugin jQuery servant à rechercher une information dans un tableau de manière dynamique.

Pour le télécharger c’est ici : https://github.com/riklomas/quicksearch

Exemple



Effectuer une recherche Recherche…
Prenom Nom Pays Date Email
Aucuns résultats
Quintessa Kirk Nicaragua 31/08/2012 sociosqu.ad.litora@ornarefacilisis.ca
Rahim Bowen Norway 20/04/2013 purus.in@enim.ca
Clio Wong Cambodia 23/10/2012 et.malesuada@facilisis.edu
Adele Sandoval Greece 12/09/2013 tellus.non@elementum.com
Kaseem Ochoa Germany 06/06/2013 mauris.eu.elit@auguemalesuada.ca
Ori Daniels Mayotte 18/09/2012 est@nonummy.org
Akeem Grant Bosnia and Herzegovina 27/11/2012 sagittis@mipedenonummy.org
Nasim Lucas Chile 09/03/2014 ipsum@non.edu
Tate Walter Syrian Arab Republic 27/01/2014 in@egestasAliquam.com
Mariam Newman Madagascar 21/10/2012 Nunc@dictumeuplacerat.org
Barclay Sweet Slovakia 03/04/2013 facilisis.lorem@blandit.com
Kirsten Glover Reunion 07/10/2013 Mauris@ametlorem.com
Dorothy Bell Micronesia 04/11/2013 tortor.nibh.sit@augueidante.edu
Gail Park Cuba 29/01/2014 dictum@vulputate.org
Tana Macias Burkina Faso 16/08/2012 et.ipsum@magna.edu
Matthew Shields Denmark 14/01/2014 dictum@magnisdis.com
John Drake Gabon 02/05/2013 mattis.ornare.lectus@iaculisodio.com
Chester Franco France 01/04/2012 Nunc.lectus@a.edu
Linda Finch Sweden 22/08/2012 tincidunt@acarcuNunc.edu
Rose Lamb Korea, Republic of 05/06/2012 non.leo.Vivamus@faucibus.com
Helen Rice Hungary 18/11/2013 Sed@hendreritconsectetuer.com
Reagan Stuart Bangladesh 19/09/2013 justo@ullamcorper.org
Kadeem Carr Peru 29/11/2012 Nam@dignissimlacusAliquam.ca
Jolene Santiago Ukraine 22/07/2012 pharetra.sed@erosProin.com
Cadman Ellis Panama 17/01/2013 consequat.auctor@et.org
Camden Vazquez New Zealand 26/02/2014 mollis@bibendumullamcorperDuis.org
Audra Frazier Saint Lucia 09/09/2013 tincidunt@odio.ca
Tyler Benjamin Cook Islands 07/11/2013 Curabitur.ut.odio@eu.org
Garth Vazquez Wallis and Futuna 27/08/2013 augue@velfaucibusid.com
Petra Edwards Ireland 13/07/2013 felis.Nulla.tempor@eleifend.com
Germane Fleming Kiribati 04/07/2013 est.Mauris@sedleo.com
Matthew Meyers Christmas Island 27/09/2012 in@vellectus.edu
Georgia Munoz Brunei Darussalam 03/10/2013 molestie.tellus@mollislectuspede.edu
Alexis Fry British Indian Ocean Territory 24/05/2012 urna@tellusAeneanegestas.org
Xander Washington Greenland 10/03/2013 enim.Sed@lacusvestibulumlorem.edu
Harriet Snider Faroe Islands 22/03/2014 Morbi@sitametante.org
Lysandra Dyer Chad 06/01/2014 rutrum@odio.edu
Hammett Ingram Eritrea 04/06/2013 vitae.nibh.Donec@Donecfelisorci.edu
Neve Roman Korea 17/05/2013 turpis@varius.ca
Zachery Perry Andorra 14/07/2012 dis@vulputate.com
Holly Blanchard Hong Kong 16/03/2013 est.mauris@Aeneanegestashendrerit.org
Chloe Reese Ecuador 02/09/2013 sit.amet@velarcuCurabitur.edu
John Todd Kenya 18/12/2013 vehicula@aliquetnecimperdiet.edu
Lucian York Fiji 20/10/2012 nec@sapien.org
Dominic Wilson Western Sahara 07/04/2012 semper.pretium@miac.ca
Cullen Cline Djibouti 26/06/2012 nibh.Phasellus.nulla@SuspendisseduiFusce.com


Pour ce résultat, le code est le suivant

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.scoco.fr/wp-content/uploads/2013/03/jquery.quicksearch.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#id_search").quicksearch("#resultTable tbody tr", {
            noResults: '#noresults',
            stripeRows: ['odd', 'even'],
            loader: 'span.loading'
        });
    });
</script>
<form action="#">
    <fieldset>
        <input type="text" name="search" value="" id="id_search" />
        <span>Recherche...</span>
    </fieldset>
</form>
<table cellspacing="1" cellpadding="1" id="resultTable">
    <thead>
        <tr>
            <th>Prenom</th>
            <th>Nom</th>
            <th>Pays</th>
            <th>Date</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr id="noresults">
            <td colspan="5">Aucuns résultats</td>
        </tr>
        <tr>
            <td>Quintessa</td>
            <td>Kirk</td>
            <td>Nicaragua</td>
            <td>31/08/2012</td>
            <td>sociosqu.ad.litora@ornarefacilisis.ca</td>
        </tr>
        ...
        ...
        ...
        <tr>
            <td>Georgia</td>
            <td>Munoz</td>
            <td>Brunei Darussalam</td>
            <td>03/10/2013</td>
            <td>molestie.tellus@mollislectuspede.edu</td>
        </tr>
    </tbody>
</table>
 

 

Tagués avec : , , , , ,
Publié dans Dev, Outils

Gravatar – Afficher un avatar avec son mail

Posté le par scoco — Aucun commentaire ↓

Un gravatar qu’est ce que c’est ?

Un gravatar est un avatar que vous pouvez utiliser sur de nombreux sites ou blogs (wordpress, github,…) . Généralement les gravatar apparaissent à côté du pseudo que vous utilisez pour commenter ou rédiger des articles.  C’est un gain de temps dans la mesure où vous n’avez pas à uploader un avatar sur chaque site que vous fréquentez.

Comment appeler et afficher un gravatar

Une petite fonction php faite à partir des informations données sur Gravatar.com vous permet de faire ceci!

<?php
/*
* Fonction de récupération de l'avatar
*/
function get_avatar($monEmail, $taille = null)
{
$trimEmail = md5(strtolower(trim($monEmail)));
echo "<img src='http://www.gravatar.com/avatar/" . $trimEmail . "?s=" . $taille . "' />";
}
 
/*
* Affichage de l'avatar
*/
get_avatar('scoco@scoco.fr', 150);
?>

Explication des fonctions utilisées

  • md5() encode la chaîne passée en paramètre en un nombre hexadécimal de 32 caractères
    Exemple: md5(‘scoco’) retourne f7449c2cd0f9b029e33157459b3d0846
  • strtolower()  retourne la chaîne passée en paramètre en minuscule
    Exemple: strtolower(‘Je Suis SCOCO’) retourne je suis scoco
  • trim() supprime les caractères invisibles au début et à la fin de la chaîne passée en paramètre
    Exemple: trim(‘     scoco ‘) retourne scoco (sans les espace devant et après)
Tagués avec : , , , , , , ,
Publié dans Dev

JQuery – Listes déroulantes liées avec Chained Selects

Posté le par scoco — 9 commentaires ↓
liste-deroulante

En jQuery, on peut faire pas mal de choses. Cette fois ci, voici un tutoriel pour lier plusieurs listes déroulantes est une traduction et adaptation d’un article de Mika Tuupola (Créateur du plugin) à mes besoins.

Chained Selects est un plugin jQuery qui consiste à lier plusieurs  listes déroulantes entre elles.
Fichier disponible ici

Exemple

Dans une première liste déroulante, vous choisissez une région. Dans la seconde liste déroulante, vont s’afficher tout les départements qui appartiennent à cette région.

Dans ce tutoriel, nous allons utiliser le jeu d’exemple suivant: Les régions et les départements français ! (Fichier MySQL)

Mise en pratique

1ere liste déroulante

<select id="region">
 <option>---</option>
 <option value="1">Alsace</option>
 <option value="2">Aquitaine</option>
 <option value="3">Auvergne</option>
 <option value="4">Basse Normandie</option>
 <option value="5">Bourgogne</option>
 <option value="6">Bretagne</option>
 <option value="7">Centre</option>
 <option value="8">Champagne Ardenne</option>
 <option value="9">Corse</option>
 <option value="10">Franche Comté</option>
 <option value="11">Haute Normandie</option>
 <option value="12">Ile de France</option>
 <option value="13">Languedoc Roussillon</option>
 <option value="14">Limousin</option>
 <option value="15">Lorraine</option>
 <option value="16">Midi-Pyrénées</option>
 <option value="17">Nord Pas de Calais</option>
 <option value="18">P.A.C.A</option>
 <option value="19">Pays de la Loire</option>
 <option value="20">Picardie</option>
 <option value="21">Poitou Charente</option>
 <option value="22">Rhone Alpes</option>
 </select>

2nd liste déroulante

<select disabled="true" id="departement">
    <option value="">--</option>
    <option value="1" class="22">Ain</option>
    <option value="2" class="20">Aisne</option>
    <option value="3" class="3">Allier</option>
    <option value="4" class="18">Alpes de haute provence</option>
    <option value="5" class="18">Hautes alpes</option>
    <option value="6" class="18">Alpes maritimes</option>
    <option value="7" class="22">Ardèche</option>
    <option value="8" class="8">Ardennes</option>
    <option value="9" class="16">Ariège</option>
    <option value="10" class="8">Aube</option>
    <option value="11" class="13">Aude</option>
    <option value="12" class="16">Aveyron</option>
    <option value="13" class="18">Bouches du rhône</option>
    <option value="14" class="4">Calvados</option>
    <option value="15" class="3">Cantal</option>
    <option value="16" class="21">Charente</option>
    <option value="17" class="21">Charente maritime</option>
    <option value="18" class="7">Cher</option>
    <option value="19" class="14">Corrèze</option>
    <option value="21" class="5">Côte d'or</option>
    <option value="22" class="6">Côtes d'Armor</option>
    <option value="23" class="14">Creuse</option>
    <option value="24" class="2">Dordogne</option>
    <option value="25" class="10">Doubs</option>
    <option value="26" class="22">Drôme</option>
    <option value="27" class="11">Eure</option>
    <option value="28" class="7">Eure et Loir</option>
    <option value="29" class="6">Finistère</option>
    <option value="30" class="13"">Gard</option>
    <option value="31" class="16">Haute garonne</option>
    <option value="32" class="16">Gers</option>
    <option value="33" class="2">Gironde</option>
    <option value="34" class="13">Hérault</option>
    <option value="35" class="6">Ile et Vilaine</option>
    <option value="36" class="7">Indre</option>
    <option value="37" class="7">Indre et Loire</option>
    <option value="38" class="22">Isère</option>
    <option value="39" class="10">Jura</option>
    <option value="40" class="2">Landes</option>
    <option value="41" class="7">Loir et Cher</option>
    <option value="42" class="22">Loire</option>
    <option value="43" class="3">Haute loire</option>
    <option value="44" class="19">Loire Atlantique</option>
    <option value="45" class="7">Loiret</option>
    <option value="46" class="16">Lot</option>
    <option value="47" class="2">Lot et Garonne</option>
    <option value="48" class="13">Lozère</option>
    <option value="49" class="19">Maine et Loire</option>
    <option value="50" class="4">Manche</option>
    <option value="51" class="8">Marne</option>
    <option value="52" class="8">Haute Marne</option>
    <option value="53" class="19">Mayenne</option>
    <option value="54" class="15">Meurthe et Moselle</option>
    <option value="55" class="15">Meuse</option>
    <option value="56" class="6">Morbihan</option>
    <option value="57" class="15">Moselle</option>
    <option value="58" class="5">Nièvre</option>
    <option value="59" class="17">Nord</option>
    <option value="60" class="20">Oise</option>
    <option value="61" class="4">Orne</option>
    <option value="62" class="17">Pas de Calais</option>
    <option value="63" class="3">Puy de Dôme</option>
    <option value="64" class="2">Pyrénées Atlantiques</option>
    <option value="65" class="16">Hautes Pyrénées</option>
    <option value="66" class="13">Pyrénées Orientales</option>
    <option value="67" class="1">Bas Rhin</option>
    <option value="68" class="1">Haut Rhin</option>
    <option value="69" class="22">Rhône</option>
    <option value="70" class="10">Haute Saône</option>
    <option value="71" class="5">Saône et Loire</option>
    <option value="72" class="19">Sarthe</option>
    <option value="73" class="22">Savoie</option>
    <option value="74" class="22">Haute Savoie</option>
    <option value="75" class="12">Paris</option>
    <option value="76" class="11">Seine Maritime</option>
    <option value="77" class="12">Seine et Marne</option>
    <option value="78" class="12">Yvelines</option>
    <option value="79" class="21">Deux Sèvres</option>
    <option value="80" class="20">Somme</option>
    <option value="81" class="16">Tarn</option>
    <option value="82" class="16">Tarn et Garonne</option>
    <option value="83" class="18">Var</option>
    <option value="84" class="18">Vaucluse</option>
    <option value="85" class="19">Vendée</option>
    <option value="86" class="21">Vienne</option>
    <option value="87" class="14">Haute Vienne</option>
    <option value="88" class="10">Vosge</option>
    <option value="89" class="5">Yonne</option>
    <option value="90" class="10">Territoire de Belfort</option>
    <option value="91" class="12">Essonne</option>
    <option value="92" class="12">Haut de seine</option>
    <option value="93" class="12">Seine Saint Denis</option>
    <option value="94" class="12">Val de Marne</option>
    <option value="95" class="12">Val d'Oise</option>
    <option value="2a" class="9">Corse du Sud</option>
    <option value="2b" class="9">Haute Corse</option>
</select>

le script correspondant

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" charset="utf-8">
 $(function(){
 $("#departement").chained("#region");
 });
 </script>



Tagués avec : , , , , , , ,
Publié dans Dev