Un menu surgissant en jQuery

Rédigé par govez le 11 février 2012

Voici comment utiliser un menu surgissant (popup) sous Pluxml.
Je l'appelle « popmenu ».
Il est possible de l'intégrer dans un article, dans la sidebar ou dans la barre de navigation.
Il faudra, bien sûr, utiliser des identifiants différents si vous souhaitez utiliser plusieurs menus et ne pas avoir d'erreurs W3C.

Son utilité

Il permet de gagner de la place sur l'espace d'affichage.

Un exemple

Un survol de la souris sur menu surgissant ▶ permet d'afficher un nouveau menu.
Il disparaîtra au survol d'un des items.

Comment procéder ?

Comme d'habitude, trois fichiers sont à renseigner : header.php de votre thème, l'article et le fichier style.css de votre thème.
Allons-y !
Le script à insérer dans le fichier header.php :
<script type="text/javascript">
    	$(function() {
        $('.popmenu_title').mouseover(function() {
        $('.popmenu').fadeIn("fast", "linear");
        });
        $('.popmenu').mouseleave(function() {
        $('.popmenu').fadeOut("fast", "linear");
        });
    	});
</script>
Renseignez les éléments du menu à afficher.
Ce code est à placer dans la sidebar, le pied de page, la barre de navigation ou dans un article
Vous devez régler les coordonnées de l'affichage pour ce nouveau menu (margin-left et margin-top).
<a class="popmenu_title" href="#">nom du menu</a>
	<div class="popmenu" style="margin-left:450px; margin-top:-255px;">
		<a class="more" href="url 1">Titre 1</a><br />
		<a class="more" href="url 2">Titre 2</a><br />
		<a class="more" href="url 3">Titre 3</a><br />
		<a class="more" href="url 4">Titre 4</a><br />
		<a class="more" href="url 5">Titre 5</a><br />
	</div>
Le style (c'est le mien ; à vous de l'adapter à votre thème).
/** Menu surgissant 1 **/
.popmenu_title {color: #8A4354;	text-decoration: none;}	
.popmenu{
    margin-top:5px;
	padding: 5px 10px;
	font-size: 0.9em;
	display:none;
	background:#DADACB;
	border: 2px solid #958573;
	position:absolute;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;	
	z-index:3; }
.popmenu a {color: #8A4354;}
.popmenu  a:hover {color: #999; }
.more {color: #555; text-decoration: none;}

Prolongements

Si vous souhaitez utiliser un deuxième menu surgissant indépendant, il faudra utiliser un autre script et une configuration Css différente : un exemple

Classé dans : Javascript - Mots clés : jquery, javascript, pluxml - 3 commentaires

Effet de fondu avec les onglets

Rédigé par govez le 29 janvier 2012

J'avais promis à KaySix de travailler sur un autre type d'animation pour les menus : c'est fait.
Voici donc un menu qui fait apparaître du texte avec une animation de fondu enchaîné.
La mise en place est simple et tout à fait modulable : à mon avis c'est le principe de Pluxml qui n'a pas vocation de ressembler à Wordpress ou Dotclear (qui par ailleurs sont excellents).

Le rendu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dui lacus. Pellentesque nibh ligula, fringilla quis luctus eget, vestibulum aliquam eros. Nulla facilisis ultrices ante, quis blandit ligula suscipit eu. Pellentesque tempor eleifend turpis non imperdiet. Vivamus ut orci nunc, ut tristique neque. Ut lobortis sem id magna pretium sit amet aliquam quam commodo. Etiam feugiat, erat eu imperdiet ultrices, risus ante rutrum orci, tempor molestie quam elit et sem. Sed at faucibus justo. Phasellus ligula tortor, bibendum vitae imperdiet eget, ullamcorper at sapien. Vivamus suscipit tincidunt turpis nec consequat. Praesent turpis lectus, rhoncus ac molestie ac, malesuada ut enim. Nulla facilisi.

Nullam a nunc enim. Donec posuere dignissim commodo. Fusce nec felis turpis, id lacinia nisi. Suspendisse rutrum lacus sit amet odio tristique fermentum tempus urna rutrum. Morbi elit nunc, mollis eget vulputate non, interdum vel orci. Integer vel diam a mauris scelerisque sodales ut non mi. Aenean quis ante in elit porta convallis at quis enim. Nam vitae mollis ante. Aliquam a tristique erat. Aenean condimentum quam vitae nisl adipiscing quis tincidunt leo vehicula. Sed commodo metus sapien, sit amet interdum eros. Nam eu dapibus nisl. Nulla facilisi. Aliquam ipsum odio, accumsan eget cursus consequat, aliquet a nunc. Suspendisse molestie arcu lectus, sit amet sagittis tellus.

Quisque commodo ullamcorper ante non rutrum. Praesent consequat egestas enim, eu condimentum leo imperdiet nec. Aenean tempor aliquet est, rhoncus porta erat pulvinar a. In egestas, eros laoreet malesuada imperdiet, purus eros laoreet mi, at dapibus est leo vitae dui. Aliquam erat volutpat. Nunc convallis odio quis turpis porta suscipit. Maecenas ac diam in nunc tincidunt vestibulum at at nisl. Donec vel neque vel nisi volutpat ullamcorper. Pellentesque vel justo metus. Vivamus eget nibh nec tortor iaculis auctor. Curabitur eu nunc tristique odio gravida ornare sed eu sapien.

Le clic sur un onglet fait apparaître un nouveau panneau avec une animation de fondu enchaîné.

Mode d'emploi

Le script est à insérer dans le fichier « header.php »
Il vous faudra d'abord télécharger le fichier jquery.tabs.pack.js et le placer dans un répertoire nommé script à la racine de votre blog.
<script src="script/jquery.tabs.pack.js" type="text/javascript"></script>
	
<script type="text/javascript">
	$(function() {
		$('.div-1').tabs({ fxFade: true, fxSpeed: 'slow' });
	});
</script>
Le contenu à insérer dans votre article :
<div class="div-1">
	<ul>
	<li><a href="#T-1"><span>Onglet 1</span></a></li>
	<li><a href="#T-2"><span>Onglet 2</span></a></li>
	<li><a href="#T-3"><span>Onglet 3</span></a></li>
	</ul>
	<div id="T-1">                  
		texte 1               
	</div>

	<div id="T-2">
		texte 2               
	</div>

	<div id="T-3">
		texte 3               
	</div>
</div>
Bien sûr, il faudra pour chaque onglet un « id » différent.
Le code est à jouter au fichier « style.css » de votre thème. À vous de le modifier selon votre convenance.
/* Fondu avec les onglets */

/* ne pas afficher les tabs cachées */
@media projection, screen { 
    .tabs-hide {
        display: none;
    }
}

/* ne pas imprimer */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Le look */
.tabs-nav {
	position: relative;
    	list-style: none;
    	margin: 0;
    	padding: 0 0 0 4px;
	left:0px;	
}
.tabs-nav:after { 
    	display: block;
    	clear: both;
    	content: " ";
}
.tabs-nav li {
	background: url('img/grain_dark.gif');	
    	float: left;
    	margin: 0 0 0 2px;
    	min-width: 40px; 
}
.tabs-nav a, .tabs-nav a span {
    	display: block;
    	padding: 2px 8px;
}
.tabs-nav a {
    	position: relative;
    	top: 0px;
    	z-index: 2;
    	padding-left: 0;    	
    	font-size: 1em;
    	line-height: 1.2;
    	text-align: center;
    	text-decoration: none;
    	white-space: nowrap;    	
}
.tabs-nav a:hover {
	color: #999;
}
.tabs-nav .tabs-selected a {
	background: url('img/grain_light.gif');
    	color: #958573;
}
.tabs-nav a span {
    	width: 54px; 
    	min-width: 54px;
    	height: 18px; 
    	min-height: 18px;
    	padding-top: 6px;
    	padding-right: 0;		
}
*>.tabs-nav a span { 
    	width: auto;
    	height: auto;
}
.tabs-nav .tabs-selected a span {
    	padding-top: 7px;
}
.tabs-container {
	text-align: justify;
    	padding: 5px 5px;
	background: url('img/grain_dark.gif');
	margin-bottom: 5px;
}

Classé dans : Javascript - Mots clés : jquery, javascript, pluxml - 2 commentaires

S'amuser avec jQuery

Rédigé par govez le 28 janvier 2012

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript et HTML, et a pour but de simplifier des commandes communes de JavaScript.
Grâce à jQuery, nous pouvons facilement créer des animations. En voici un exemple tout simple.
Le bouton « + » permet d'agrandir le texte, le bouton « - », de retourner à la situation initiale.

Voyons cela

Salut les pingouins !

Allons-y !

1. D'abord, renseigner le fichier header.php de votre thème.
<script type="text/javascript">google.load('jquery', '1.4.2');</script>

<script type="text/javascript">
$(document).ready(function(){  		
$("#aller").click(function(){
$("#salut").animate({ 
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em", 
borderWidth: "10px"
}, 500 );
});
// Animation dans le sens inverse
$("#retour").click(function(){
$("#salut").animate({ 
width: "70%",
opacity: 1,
marginLeft: "0.",
fontSize: "1em", 
borderWidth: "10px"
}, 500 );
});
});
</script>
2. Rentrez le code dans l'article
<button id="aller">+</button>
<button id="retour">-</button>
<div id="salut">Salut les pingouins !</div>

Quelques explications

Le texte animé a pour identifiant « salut » ; vous pouvez donc le modifier dans votre fichier style.css.
Vous pouvez également changer la transparence « opacity » , la rapidité de l'animation (le nombre 500 est à baisser si vous souhaitez plus de rapidité) et la taille de la police d'écriture (ici 3em).
À vous de jouer !

Classé dans : Javascript - Mots clés : jquery, javascript, pluxml - aucun commentaire

Faire défiler des panneaux

Rédigé par govez le 20 août 2011

Slider Kit

L'objectif de Slider Kit est de simplifier l'utilisation d'animations jQuery de type slider (défilement d'actualités, diaporama, galeries photos, menu avec onglets, etc.) en utilisant un unique plugin.
La différence principale entre les animations résidant dans le CSS.
J'ai trouvé le site (en français) très bien documenté ; il suffit de suivre les explications.

J'ai retenu 3 animations que je vais utiliser sur ce site

  1. un défilement vertical de documents ;
  2. un défilement horizontal de documents ;
  3. une galerie photo.

Caractéristiques

  • Plusieurs façons d'agencer les éléments du slider ;
  • Différentes façons de naviguer : boutons, molette de souris, clic sur image, clavier (beta) ;
  • Orientation verticale ou horizontale du carrousel ;
  • Orientation verticale ou horizontale du contenu (photo ou texte) ;
  • Défilement automatique / Défilement en boucle ;
  • 2 transitions : fondu et défilement ;
  • Possibilité d'ajouter un effet de 'easing' sur les défilements ;
  • Slider Kit génère un minimum de CSS 'inline'. L'habillage se fait par la feuille de style ;
  • Petit poids : < 8 Ko (pack).

Un défilement vertical

Les panneaux défilent au passage de la souris sur les onglets.

Installation

Téléchargez le dernier squery.sliderkit puis décompressez-le à la racine de votre site.
Avant toute chose, lisez la documentation du site : elle est claire, précise et en français. Elle permet de bien comprendre le fonctionnement du système.

en savoir plus

Renseignez l'en-tête de votre page HTML




 

Un défilement horizontal

Le déplacement se produit avec le clic sur l'onglet ou l'action de la molette de la souris.

La bibliothèque jQuery

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. La première version date de janvier 2006. jQuery1 se présente comme un unique fichier de 227 ko (31 ko dans sa version compressée).
Le framework contient notamment les fonctionnalités suivantes :

  • Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ;
  • Événements ;
  • Effets et animations ;
  • Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ;
  • AJAX ;
  • Plugins ;
  • Utilitaires (version du navigateur…).

Un texte illustré

Richard Matthew Stallman (né à Manhattan, le 16 mars 1953), connu aussi sous les initiales RMS, est un programmeur et militant du logiciel libre.
Il est à l’origine du projet GNU et de la licence publique générale GNU connue aussi sous l’acronyme GPL, qu’il a rédigée avec l’avocat Eben Moglen. Il a popularisé le terme anglais copyleft. Programmeur renommé de la communauté informatique américaine et internationale, il a développé de nombreux logiciels dont les plus connus des développeurs sont l’éditeur de texte GNU Emacs, le compilateur C de GNU, le débogueur GNU mais aussi, en collaboration avec Roland McGrath, le moteur de production GNU Make.
Depuis le milieu des années 1990, il consacre la majeure partie de son temps à la promotion du logiciel libre auprès de divers publics un peu partout dans le monde. Depuis quelques années, il fait campagne contre les brevets logiciels et la gestion des droits numériques (DRM). Le temps qu’il alloue encore à la programmation est dédié à GNU Emacs, bien qu’il ne soit plus mainteneur principal depuis février 2008. Il gagne une partie de sa vie avec les cachets de conférencier qu’on lui donne à l’occasion ou des prix qu’on lui remet.

Du code : Perl, pour l'exemple

# Prints the message using two different delimeters.
print "Hello, world!\n";
print qq=Did you say "Hello?"\n=;

Même la coloration syntaxique fonctionne !

Nostalgie d'Amiens

Une galerie photo avec un menu, le clic sur une photo ouvre une "lightbox"

Les hortillonnages

Un espace de 300 hectares d'anciens marais, comblés pour la culture maraîchère.

hortillonages
La Licorne

Le stade de la Licorne

Le nouveau stade ; sa capacité d'accueil est de 12 097 places.

La gare

La gare

Le parking extérieur a été démoli, un accès aux voies depuis l'extérieur, ainsi qu'une verrière l'ont remplacé.

 mairie

L'hôtel de ville

La place de la mairie

Saint Leu

Le quartier Saint Leu

Un des plus anciens quartier d'Amiens, maintenant très animé.

La cathédrale

La cathédrale d'Amiens

La cathédrale Notre-Dame d’Amiens est la plus vaste de France par ses volumes intérieurs (200 000 m3).

La cathédrale illuminée

La cathédrale illuminée

Un spectacle gratuit est donné en fin d'année et en période estivale permettant de voir la cathédrale en couleurs.

perret

La tour Perret

Haute de 104 mètres avec 30 étages, elle fut longtemps le plus haut gratte-ciel d'Europe de l'Ouest.


Classé dans : Réseau - Internet - Mots clés : jquery, javascript, pluxml - aucun commentaire

Highslide

Rédigé par govez le 14 août 2011

Highslide est un ensemble de bibliothèques JavaScript qui permet d'afficher des pages Web, des photos, et des diaporamas.
Il donne la possibilité d'effets d'agrandissements et de déplacements à partir d'une vignette ou d'un lien.

Installation

Tout est bien expliqué sur le site (en anglais) il faut télécharger le répertoire « highslide » sur votre espace puis indiquer dans l'en-tête (header) de votre site les appels à ce dossier (J'y ai intégré la traduction française pour les bulles d'aide javascript) :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" src="url_de_votre_site/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="url_de_votre_site/highslide/highslide.css" />
<script type="text/javascript">

	// les paramètres
	
  	hs.graphicsDir = '../highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
	//hs.dimmingOpacity = 0.75;
	hs.wrapperClassName = 'controls-in-heading';
	// la barre de contrôle

	hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	//fixedControls: 'fit',
	overlayOptions: {
	opacity: 0.75,
	position: 'top right',
	hideOnMouseOut: true
	}
	});
		
</script>
Je vous conseille de mettre également de le « head » le code de la traduction française

La traduction française

hs.lang = {
cssDirection: 'ltr',
loadingText : 'Chargement ...',
loadingTitle : 'Cliquer pour annuler',
focusTitle : 'Cliquer pour amener au premier plan',
fullExpandTitle : 'Afficher à la taille réelle',
fullExpandText : 'Taille réelle',
creditsText : '',
creditsTitle : '',
previousText : 'Précédent',
previousTitle : 'Précédent (flèche gauche)',
nextText : 'Suivant',
nextTitle : 'Suivant (flèche droite)',
moveTitle : 'Déplacer',
moveText : 'Déplacer',
closeText : 'Fermer',
closeTitle : 'Fermer (Esc)', resizeTitle : 'Redimensionner',
playText : 'Lancer',
playTitle : 'Lancer le diaporama (barre d\'espace)',
pauseText : 'Pause',
pauseTitle : 'Suspendre le diaporama (barre d\'espace)',
number : 'Image %1 sur %2',
restoreTitle : 'Cliquez pour fermer l\'image, cliquer et faire glisser pour déplacer, utiliser les touches flèches droite et gauche pour suivant et précédent.'
};
(à coller dans le « head » pour avoir des bulles d'aide en français)

Ma première réalisation

Voici le code pour afficher une image (il faudra remplacer "image" par l'url de l'image et "miniature" par l'url de la miniature)

Les options principales :

  • img style : marges et taille de la miniature
  • wrapperClassName : apparence (wide-border)
  • outlineType: affichage des outils (rounded-white)
<div>
<a id="thumb1" href="image.jpg" class="highslide"
onclick="return hs.expand (this, { wrapperClassName: 'wide-border'})">
<img style="margin-top: 15px" width="120" height="90"
src="image_mini.jpg" alt="" title="titre" />
</a>
</div>
Contrôles dans l'image ('wide-border'), opacité (dimmingOpacity: 0.75)
<a href="image.jpg" 	class="highslide" 
onclick="return hs.expand (this, 
{ wrapperClassName: 'wide-border', dimmingOpacity: 0.75})">
<img style="margin-top: 15px" width="120" height="90"
src="image_mini.jpg" alt="" title="titre" /></a>
Vous pouvez mettre ici un commentaire.
Barre de contrôle au dessus de l'image (outlineType : 'rounded-white')
<a href="image.jpg" 	class="highslide" 
onclick="return hs.expand(this,
{ outlineType: 'rounded-white' })">
<img style="margin-top: 15px" width="120" height="90"
src="image_mini.jpg" alt="" title="titre" /></a>
Un commentaire flottant
Le commentaire « flottant » ('borderless floating-caption')
<a href="image.jpg" class="highslide" 
onclick="return hs.expand(this,
{wrapperClassName: 'borderless floating-caption', 
dimmingOpacity: 0.75, align: 'center'})">
<img  width="120" height="90"
src="image_mini.jpg" alt="" title="titre" /></a>
<div class='highslide-caption'>légende</div>
On visite la galerie en utilisant la barre d'outils ou les flèches du clavier.
<div class="highslide-gallery">	
<a href="image1.jpg" 
class="highslide" onclick="return hs.expand(this)">
<img src="image1_mini.jpg" 
width="120" height="90" alt="" title="titre1" /></a>	
<div class="highslide-caption">légende 1</div>
<a href="image2.jpg" 
class="highslide" onclick="return hs.expand(this)">
<img src="image2_mini.jpg" 
width="120" height="90" alt="" title="titre2" /></a>	
<div class="highslide-caption">légende 2</div>
<a href="image3.jpg" 
class="highslide" onclick="return hs.expand(this)">
<img src="image3_mini.jpg" 
width="120" height="90" alt="" title="titre3" /></a>	
<div class="highslide-caption">légende 3</div>
</div>
Ouvrir Wikipédia dans une fenêtre
Afficher un site dans une fenêtre (« width » et « height » détermine sa taille)
<a href="url du site" onclick="return hs.htmlExpand(this, 
{ objectType: 'iframe' , width: 600, height: 400} )">
nom du site</a>
Une vidéo de youtube (« width » et « height » détermine la taille de la fenêtre)
<a href="url_vidéo?rel=0&wmode=transparent" 
onclick="return hs.htmlExpand(this, 
{objectType: 'iframe', width: 320, height: 240, 
allowSizeReduction: false, 
preserveContent: false, objectLoadTime: 'after'})"
class="highslide">Nom de la vidéo</a>
Lecture d'un fichier .swf
<a href="fichier.swf" onclick="return hs.htmlExpand(this, 
{ objectType: 'swf', width: 600, height: 500, 
objectWidth: 600, objectHeight: 500, 
maincontentText: 'Mettez à jour votre lecteur Flash',
swfOptions: { version: '7' }  } )"
class="highslide">un fichier .swf</a>
Déclaration universelle des droits de l'homme (les 5 premiers articles)

Article premier

Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.

Article deux

1.Chacun peut se prévaloir de tous les droits et de toutes les libertés proclamés dans la présente Déclaration, sans distinction aucune, notamment de race, de couleur, de sexe, de langue, de religion, d'opinion politique ou de toute autre opinion, d'origine nationale sociale, de fortune, de naissance ou de toute autre situation.
2.De plus, il ne sera fait aucune distinction fondée sur le statut politique, juridique ou international du pays ou du territoire dont une personne est ressortissante, que ce pays ou territoire soit indépendant, sous tutelle, non autonome ou soumis à une limitation quelconque de souveraineté.

Article trois

Tout individu a droit à la vie, à la liberté et à la sûreté de sa personne.

Article quatre

Nul ne sera tenu en esclavage ni en servitude; l'esclavage et la traite des esclaves sont interdits sous toutes leurs formes.

Article cinq

Nul ne sera soumis à la torture, ni à des peines ou traitements cruels, inhumains ou dégradants.
Ouvrir un texte dans une fenêtre surgissante
<a href="index.htm" onclick="return hs.htmlExpand(this)">
Un document</a>
<div class="highslide-maincontent">
<h3>Titre du document</h3>
Contenu du texte.
</div>	

Quelques liens

Classé dans : Réseau - Internet - Mots clés : javascript, pluxml - aucun commentaire

page 1 sur 2suivante

Ce blog est sous licence Creative Commons. Vous pouvez utiliser les publications, les modifier et même les publier à nouveau sous une licence identique à celle-ci. Vous ne pouvez pas utiliser ces écrits à des fins commerciales.

Patrice Blondel 
			alias Govez ou le Pingouin des @lpes

J'ai 56 ans, je suis retraité de l'Éducation Nationale.
Passionné d'informatique, je suis autodidacte en la matière.
J'utilise GNU/Linux exclusivement depuis plus de 10 ans. J'ai choisi Debian (après avoir testé beaucoup d'autres distributions). La meilleure distribution est, à mon avis, celle que l'on maîtrise.

Pour vous y retrouver :

Je vous conseille d'utiliser d'abord le bouton « recherche » en tapant un mot clé. Vous pouvez également naviguer en affichant les articles par catégorie.

Les commentaires :

En indiquant votre adresse mail, vous ferez afficher votre avatar au début du commentaire.
Je me réserve le droit de supprimer les commentaires désobligeants, commerciaux ou sans intérêt.

Catégories

Archives

Mots clés

Derniers articles

Derniers commentaires

L'actualité Debian

LinuxFr.org