Le Pingouin des @lpes

Du nouveau sur ce blog !

Vous pouvez désormais utiliser en haut de la barre latérale un menu dynamique. Un clic sur un des éléments du menu fait apparaître une nouvelle page avec une animation glissée.

Son intérêt ?

Utiliser au mieux l'espace d'affichage du blog sans « encombrer » la page.
Il est possible d'afficher cette animation dans l'en-tête (header), le pied de page (footer), la barre latérale (sidebar) ou tout simplement dans un article.

Comment faire ?

Il suffit de renseigner trois fichiers : le « header » pour y insérer le script, le fichier d'accueil des textes (sidebar, header, footer etc.) ; nous l'appelerons « contenu » et enfin le fichier « style.css » de votre thème (pour le look).

Allons-y !

L'exemple donné est minimaliste et permettra à chacun d'y ajouter son style. Un clic sur les éléments du menu vous indiquera comment alimenter les fichier pour obtenir ce résultat.

<script type="text/javascript">
	//<![CDATA[	
	function AfficheTexte(nom_du_bloc)
	{
		var id_du_bloc_a_ouvrir = "#bloc_" + nom_du_bloc;
		$(".bloctexte:visible").slideUp(300, function() {
			$(id_du_bloc_a_ouvrir).slideDown(300);
		});
	}
	//]]>
</script>

<div>
<a href="#" onclick="AfficheTexte('item1'); return false;" class="onglet">texte 1</a>
<a href="#" onclick="AfficheTexte('item2'); return false;" class="onglet">texte 2</a>
<a href="#" onclick="AfficheTexte('item3'); return false;" class="onglet">texte 3</a>
		
<div style="clear: both;"></div>
</div>

<div>
<div id="bloc_item1" class="bloctexte" style="display: block;">
			texte 1
</div>
<div id="bloc_item2" class="bloctexte" style="display: none;">
			texte 2			
</div>
<div id="bloc_item3" class="bloctexte" style="display: none;">
			texte 3			
</div>		
</div>	

#menu {margin:auto;}
#menu a {font-size: 1em; font-weight:bold;}
.bloctexte {padding: 10px 0; font-size: 0.9em;}
.bloctexte img {margin-left: 5px; float:right;}

Conclusion

Cette solution peut sembler très bricolée, mais ça fonctionne plutôt bien en laissant pas mal de souplesse.

Dans les documents imprimés, et avec l’aide de logiciel de mise en pages professionnel, on peut insérer une espace fine sécable ou une espace fine insécable. Il en est de même pour la plupart des espaces qui existent dans leurs versions sécables ou insécables.

Dans les documents HTML, l’exemple le plus connu d’espace insécable est l’entité : «   », celle-ci a les mêmes propriétés que l’espace régulière, avec l’avantage de garder sur une même ligne les caractères étant de chaque côté. Pour l’espace fine, l’entité «   » est supportée par la plupart des navigateurs récents. Mais l’entité «   » est sécable, ce qui veut dire qu’en fin de ligne les caractères suivants seront poussés à la ligne suivante.

S’il y a bien une espace difficile à reproduire sur Internet, c’est bien l’espace fine insécable.
Celle-ci n’est tout simplement pas définie dans la norme Unicode.
Alors que plusieurs opteront pour l’utilisation de l’espace insécable ordinaire «   », ce n’est pas la bonne solution.

Heureusement, Unicode définit le « NARROW NO-BREAK SPACE », utilisant l’entité numérique : «   ». Cette espace étroite est insécable et peut être utilisée à la perfection comme espace fine insécable dans tout document HTML.

En typographie soignée, on prendra donc soin d’utiliser l’entité «   » comme espace fine insécable.

Utilisation dans Pluxml

La marche à suivre

<?php
/**
 * button.guillemets
 *
 * @package PLX 5.1
 * @author	Patrice Blondel
 * @version 1.0
 **/
?>
<?php if(!defined('PLX_ROOT')) exit; ?>

<script type="text/javascript">
<!--
plxToolbar.addButton( {
		icon : '<?php echo PLX_PLUGINS ?>plxtoolbar/custom.buttons/guillemets.png',
		title : 'Mettre entre guillemets',
		onclick : function(textarea) {
			plxToolbar.insert(textarea,'« ',' »', '', '');
			return '';
		}
});
-->
</script>

Les différents affichages

Les marges par défaut dans le traitement de texte de LibreOffice sont très importantes (2cm).
Il n'est pas intéressant d'utiliser de telles marges surtout avec une imprimante laser.
Afin de ne pas avoir à les rectifier à chaque création de document, vous pouvez changer ces réglages par défaut.

Comment faire ?

1. Créer un modèle

2. Choisir ce modèle par défaut

Déroulez le menu :
Menu > Fichier > Modèles > Gérer
Ouvrez « Mes modèles » par double clic, choisissez « marges1cm ».
Clic droit dessus : Choisir dans le menu contextuel « Définir comme modèle par défaut »

Charger un modèle par défaut dans LibreOffice

Voilà, au prochain démarrage de LibreOffice le traitement de texte ouvrira un document vierge avec des marges de 1 cm.

PS: Le fonctionnement est identique pour OpenOffice

Installation sous Debian/Ubuntu

Installons

Pour lancer le jeu

Une capture

Comment procéder ?

<!--Bouton haut de page -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load('jquery', '1.4.2');</script>
	<script type="text/javascript">
  		//<![CDATA[
		$(window).scroll(function() {
  		if($(window).scrollTop() == 0){
   	 	$('#scrollToTop').fadeOut("fast");
  		} else {
    		if($('#scrollToTop').length == 0){
     	 	$('body').append('<div id="scrollToTop">'+
        	'<a href="#">Retour en haut</a>'+
        	'</div>');
   	 	}
   	 	$('#scrollToTop').fadeIn("fast");
  		}
		});
		$('#scrollToTop a').live('click', function(event){
  		event.preventDefault();
  		$('html,body').animate({scrollTop: 0}, 'slow');
		});
  		//]]>
	</script>
<!--Fin du bouton haut de page -->

Et maintenant, le look de ce bouton

/** Bouton haut de page **/
#scrollToTop {font-size: 0.9em;}
#scrollToTop a{
    color: #fff;
    position: fixed;
    right: 10px;
    bottom: 16px;
    background-color: rgb(67,52,64); /** rgba fallback**/
    background-color: rgba(67,52,64, 0.7);
    padding: 7px 10px;
    border: 1px solid #433E36;
    }
#scrollToTop a:hover{
    color: #B9624E; 
    background-color: rgb(67,52,64); /** rgba fallback**/
    background-color: rgba(67,52,64, 0.2);
    }