une option "lire la suite" qui déroule la suite en dessous

[feoh]

Salut,

J'aurais besoin d'un petit conseil, qui à mon avis est somme toute assez simple, mais pas moyen de trouver sur le net.
Je programme une page qui doit afficher différents titres l'un après l'autre, et je voudrais qu'après chaque titre, un lien sous la forme ">" permette de dérouler, juste en dessous du titre, un bref contenu, sans m'amener directement à une autre page.

A mon avis, c'est possible. A mon avis, c'est du javascript. Mais mes recherches sur le net restent infructueuses. Quelqu'un aurait une idée ?

Merci.

 

[Meekh]

Salut,

tu dois pouvoir faire ça avec un évènement onclick en javascript ou comme ça (de mémoire) :

<a href="javascript:open_contain(nom_div);">lire la suite...</a>

function open_contain(nom_div) {
    document.getElementById(nom_div).style.display = "block";
    document.getElementById(nom_div).style.visibility = "visible";
}

avec comme css pour le div contenant ce que tu veux affiché : display:block;visibility:hidden;

Voilà un début de piste si j'ai bien compri.

 

[PA5CAL]

Bonjour

En partant du principe exposé ci-dessus par Meekh, on peut aussi donner une taille initiale réduite au <div>, conjointement à une propriété CSS overflow fixée à hidden, puis modifier cette taille pour le faire apparaître.

En procédant ainsi on peut même (en compliquant un peu le code) réaliser un effet dynamique qui agrandit progressivement la zone cachée.

 

[PA5CAL]

Voici un petit exemple (qui ne demande qu'à être amélioré).

.cadre {
    display:block;
    border: thin solid #bbb;
    background-color: #eee;
    color: #ccc;
    height: 0;
    overflow: hidden;
}

<script language="JavaScript"><!--
var speed = 10;
var finalColor = "#000";

var count;
var maxCount;
var timerID = null;
var timerRunning = false;
var animatedDiv = null;

function Anim(myDiv)
{
    if (!timerRunning) {
        animatedDiv = myDiv;
        count = 0;
        var height = parseInt(document.getElementById(animatedDiv).style.height);
        var initCount = height>0 ? height : 0;
        document.getElementById(animatedDiv).style.height="auto";
        maxCount = document.getElementById(animatedDiv).offsetHeight;
        document.getElementById(animatedDiv).style.height = height;
        if  (initCount<maxCount)
            RunAnim();
    }
}

function RunAnim()
{
    count += 2;
    if (count>maxCount)
        count = maxCount;
    document.getElementById(animatedDiv).style.height = count;
    if (count>=maxCount) {
        if(timerRunning)
            clearTimeout(timerID);
        timerRunning = false;
        document.getElementById(animatedDiv).style.color = finalColor;
        animatedDiv = null;
    } else {
        timerRunning = true;
        timerID = self.setTimeout("RunAnim()", speed);
    }
}
//--></script>

<a href="javascript:Anim('article1');">lire la suite...</a>
<div id="article1" class="cadre">
    Coucou !
</div>

<a href="javascript:Anim('article2');">lire la suite...</a>
<div id="article2" class="cadre">
    Pouet !<br>
    ... Lol
</div>

- fin -

 

[Benjamin D.C.]

Attention au comportement lorsque JavaScript est désactivé. C'est JavaScript qui doit se charger de masquer le contenu au chargement du document. Le lien d'ouverture / fermeture doit être généré en JavaScript également.

 

[dmo95]

Oui oui, bizarrement on m'a toujours appris que le JavaScript était un langage léger et interprété qui ne propose pas les fonctions d'accès au système de fichiers, et qu'il ne permet pas la manipulation de fichier... A quoi bon le désactiver ? Le jour ou les gens normaux auront compris cela, beaucoup moins de monde désactivera JavaScript, bien que celui-ci soit activé par la plupart des utilisateurs !

Surtout que le web à de plus en plus tendance à allé vers le tout JavaScript, il suffit de voir les sites comme FaceBook ou Flick'r, je me demande bien quel comportement ont ils lorsque JS est disable...

Bref, moi je te conseil l'utilisation d'un framework JS, tel que jQuery pour n'en citer qu'un. Celui-ci sera bien trop complet pour les faibles besoins que tu as, mais le découvrir te donneras de nombreuses idées. Il m'a fallu quelques mois (3, 4) pour pouvoir me balader avec ce framework. Puis tu pourras ajouter de très beaux effets pour l'apparition de ta div !

Bon courage.

PS : En fait avec un tel framework, les 40 lignes de PASCAL seront réduites à 4, 5 lignes

 

[Lapin Masqué]

Oui enfin bon utiliser un framework complet juste pour une fonction c'est un peu du gâchis. Surtout que bon le téléchargement du fichier .js, et le chargement des fonctions jQuery à un coût non nul. jQuery, mooTools, Prototype ont quand même une utilité plus grande que d'ajouter des effets à la page.

Et puis le JavaScript c'est encore assez lent, en plus d'induire de bonnes failles de sécurité et de nous ennuyer avec des fenêtre pop-ups et j'en passe. Produire du code dégradable restera toujours super important tant qu'on aura envie de le désactiver.

 

[Benjamin D.C.]

A quoi bon le désactiver ? Le jour ou les gens normaux auront compris cela, beaucoup moins de monde désactivera JavaScript, bien que celui-ci soit activé par la plupart des utilisateurs !

La question n'est pas là. Il s'agit simplement d'une séparation logique en couches contenu / présentation / comportement. Tu gagneras toujours à écrire du JavaScript non obstrusif. Les cas où les utilisateurs ne disposent pas de JavaScript sont imprévisibles et probablement plus fréquents que ce que tu crois. J'ai moi-même désactivé JavaScript manuellement à plusieurs reprises sur certains appareils portables qui avaient du mal à interpréter le code d'applications riches en ajax.
Ce n'est pas plus dur d'écrire du code de qualité, c'est juste une bonne habitude à prendre.

 

[PA5CAL]

Il s'agit simplement d'une séparation logique en couches contenu / présentation / comportement. Tu gagneras toujours à écrire du JavaScript non obstrusif. Les cas où les utilisateurs ne disposent pas de JavaScript sont imprévisibles et probablement plus fréquents que ce que tu crois.

Ce n'est pas plus dur d'écrire du code de qualité, c'est juste une bonne habitude à prendre.

Tout-à-fait d'accord.

Toutefois, là on donne seulement quelques idées sur le code, qui pourra être mis ensuite en place de manière plus adéquate (installation de l'appel JavaScript dans le lien hypertexte à l'aide d'un script, notamment).

Pour du code propre et complet, j'envoie aussi la facture.

 

[dmo95]

Je suis d'accord également sur vos raisonnements, sauf pour le :

en plus d'induire de bonnes failles de sécurité

JavaScript s'exécute côté client et permet juste de communiquer avec l'extérieur, grâce à XHR... à moins d'avoir des failles dans le code PHP, je ne vois pas trop comment JavaScript peut en ajouter de lui même. Mais je suis ouvert à toute explications

 

[PA5CAL]

Je suis d'accord avec le fait qu'il faut se méfier des failles de sécurité, même jusque dans JavaScript. Le propre d'une faille de sécurité, c'est d'être inconnue jusqu'à ce que quelqu'un la découvre.

D'une manière générale, la possibilité d'exécuter un code nouveau (même interprété) dans un dispositif sensé n'afficher qu'un document, c'est un peu tenter le diable. Si l'on veut pouvoir atteindre un bon niveau de sécurité, ça ne doit tout simplement pas être utilisé.

Je rappelle que dans le passé, le « bac à sable » de JavaScript s'est déjà avéré être beaucoup moins étanche que prévu. Et maintenant, même sans à en arriver à l'installation de rootkits, on assiste encore à des exploits menés à l'aide de JavaScript.

 

[Lapin Masqué]

JavaScript s'exécute côté client et permet juste de communiquer avec l'extérieur, grâce à XHR... à moins d'avoir des failles dans le code PHP, je ne vois pas trop comment JavaScript peut en ajouter de lui même. Mais je suis ouvert à toute explications

JavaScript s'exécute côté client, et à accès à tous les éléments de la page (notamment les formulaires). Le problème vient du moment où ton site communique avec d'autres sites, genre s'ils utilisent une API externe, un moteur de stats, des publicités. Les limitations du XHR, ne permettant pas ce genre de choses, on injecte des balises script à la volée dont on ne contrôle pas le contenu.
Le même problème peut venir des objets JSON qui sont la plupart du temps directement évalués, et qui peuvent contenir du code pas gentil. (Alors qu'on pourrait très bien ne pas les évaluer et fermer la porte à des tas de failles, mais bon...)

Donc pour ne pas se faire emmerder on peut avoir envie de le couper, on peut aussi le couper sur les téléphones portables qui eux ne sont pas capables de survivre à tant de JavaScript.

Du coup code dégradable.

 

[Anonyme]

Pour revenir au sujet j'avais jadis réalisé une page test sur le même principe mais il y a des choses à améliorer, je ferai ça demain soir.

 

[Benjamin D.C.]

Pour revenir au sujet j'avais jadis réalisé une page test sur le même principe mais il y a des choses à améliorer, je ferai ça demain soir.

Moui… il y a tout de même plus simple

 

[Anonyme]

Moui… il y a tout de même plus simple

Effectivement