Attention
Peut-êtreUneRéponse
[PêUR]
Ce blog a pour but de vous apporter une aide en CSS et
HTLM. Vous y trouverez aussi des exemples de menu en CSS,
des tutoriaux et des aides animées sur l'utilisation et les
fonctionnalités d'Over-Blog.
Pour profiter pleinement des dernières mises à jour du CSS de ce blog, vider votre cache : Ctrl + F5
Pour naviguer sur ce blog, les articles sont classés en différentes catégories:
- Menu en CSS
- CSS
- HTML
- Questions courantes
- Tutoriaux
- Logiciels, utilitaires et internet
- La vie du blog
Vous pouvez aussi:
- Posez une question
- Accèder à la liste chronologique des articles
- Accèder à la liste thématique des articles
- Accèder à la liste des aides animées
Copyright © 2005 - PêUR | Powered by Over-Blog | CSS
Syndication : RSS : RSS2 : ATOM
Le code contenu dans les articles est sous licence Creative Common.
Comment puis-je faire un lien "Lire la suite..." afin de ne pas afficher tout mon article qui es très long?
Cette question a souvent été posé sur le forum, avec des solutions peu convainquantes: Créer 2 articles, créer 2 blog, etc...
Depuis la v1.91, Over-blog propose aux blogs Premiums cette possibilité.
Voici une solution en CSS avec une pointe de javascript accessible même en confiance!
ATTENTION: contrairement aux Premiums, cette méthode ne permet pas d'afficher un thumbnail et n'allège pas, en terme de poids, la page d'accueil (L'article est bien là en entier mais caché).
Merci à Fabrice qui a débloquer mon code pour Firefox ;-)
1 / Ce qu'il faut faire
Au préalable, et une fois pour toute, renseignez cette ligne tout à la fin de votre CSS:
CSS
#cache {display:none}
Ensuite écrivez entièrement votre article. Une fois mis en forme, il suffit d'ajouter ces quelques lignes de code en mode source (HTML) juste à l'endroit où l'on veut le lien "Lire la suite..."
HTML
<a href="#nogo" onclick="document.getElementById('cache').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a>
Sous ce lien, Il ne vous reste plus qu'à encadrer le texte à afficher lors du clique par des balises <div> comme ci-dessous
HTML
<div id="cache">... le texte à cacher ... </div>
2 / Explications
On crée un lien "Lire la suite..." qui ne pointe nul part (href=#nogo). Par l'evenement onclick (au clique) on impose au pavé de texte compris dans le block <div id=cache> d'apparaître en forçant son affichage (document.getElementById('cache').style.display = 'block') ce dernier étant non affiché par défaut via le CSS (#cache {display:none}). Enfin, toujours par l'evenement onclick (au clique) on impose au lien de ne pas s'afficher (this.style.display = 'none')
3 / Attention
Cette méthode ne fonctionne qu'avec l'affichage d'un article à la fois, en effet, si, sur une même page contenant plusieurs articles, vous utilisez la méthode sans modification, quand vous allez cliquer sur un lien "Lire la suite..." le navigateur ne va pas savoir quel identifiant "cache" il doit faire apparaître (car plus d'un identifiant "cache" par page).
Pour contourner ce problème il suffit pour chaque article de changer le nom de l'identifiant, par exemple cache1, cache2, cache3, toto, titi, tata... dans :
-
#cache1 {display:none}
-
document.getElementById('cache1').style.display = 'block'
-
et <div id=cache1>