Afficher / masquer (encore !?)

[Résolu]
Signaler
Messages postés
4
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
26 mai 2009
-
Messages postés
4
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
26 mai 2009
-
Bonjour à tous,
Je pense avoir bien cherché dans le forum, mais je n'ai pas trouvé ce qu'il me faut (ou bien je n'ai pas su l'adapter à mes besoins, étant donné que j'y connais presque rien en javascript :p).
Donc sur une page web en php, j'ai un tableau et dans une des cellule, à l'aide d'une requête sql, j'affiche plusieurs images à la suite (donc je ne veux pas les mettre dans un div ou autre block).
Ce que je souhaiterais faire, c'est qu'au départ, on ne voit qu'une partie de la cellule contenant les images, et qu'on clique sur un lien si on décide de voir les autres images de la série.
Par exemple, sur cette page, le texte est en partie maasqué, et il faut cliquer pour lire la suite.
J'ai regardé le code source de la page, et je vois qu'il est question d'une fonction "limiter" basée sur "offsetHeight".
Je peux donner un id à ma cellule, donc je pense que je peux reprendre le principe du site montrer en exemple du genre if mon_id.offsetHeight > une_valeur { limiter }
Par contre, comme je n'ai jamais fait de javascript, je n'arrive pas du tout à mesurer la hauteur de ma cellule, et je ne parle même pas d'écrire cette fonction "limiter".
Y aurrait-il des ames charitable pour mener à bien mon projet ?
Cordialement,
Olivier.

PS: je sais que vous aimer bien lorsqu'on met le code source de la page en question, mais là, je ne voit vraiment pas l'utilité, mais si c'est nécessaire, dites le moi et j'y remédirais sans problème ;) (j'éspère ne pas mettre trompé de section :s)

10 réponses

Messages postés
135
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
8 mai 2010

Y'a surement moyen de faire mieu que ça, mais c'est ce que j'ai réussi à faire avec mes connaissances :

http://pagesperso-orange.fr/tivanbelle/script2.html
http://pagesperso-orange.fr/tivanbelle/script1.html

Tu verras qu'il y a un bug d'affichage au début, juste le temps de choper la taille de ta div

J'éspère t'avoir aidé
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
bonjour,
>>donc je ne veux pas les mettre dans un div ou autre block
ah alors, si tu ne veux pas...
>>http://www....-empecher-le-cache-d-une-partie-de-ma-page
si tu parles des questions/réponses,
elles sont dans un div ou "autre block" !!
@+
Messages postés
135
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
8 mai 2010

J'ai pris le code de http://www.editeurjavascript.com/scripts/scripts_navigation_3_812.php et je l'ai modifié pour faire ce que je crois que tu veux faire :

<head>
<script type="text/javascript">
function Suite(lien){
   
    var objet = document.getElementById('popup');
   
    if(objet.style.height == "100px"){
       
        objet.style.overflow = "hidden";
        lien.innerHTML = "-";
        var hFinal = 200;
        var hActuel = 100;
      
        var timer;
        var fct = function ()
        {
                hActuel += 20;
                objet.style.height = hActuel + 'px';
                if( hActuel == hFinal)
                {
                        clearInterval(timer);
                }
        };
        fct();
        timer = setInterval(fct,40);    //Toute les 40 ms
       
    }else if(objet.style.height == "200px"){
       
        var hFinal      =     100;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     200;         //Hauteur initiale (la hauteur dès le début !)
      
        var timer;
        var fct = function ()
        {
                hActuel -= 20;
                objet.style.height = hActuel+'px';
                if( hActuel == hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                }
        };
        fct();
        timer = setInterval(fct,40);    //Toute les 40 ms
        lien.innerHTML = "+";
       
    }
}
</script>
</head>

[[javascript:; +]]

1

2

3

4

5

6

7

8

9

10

Le offsetHeight sert seulement a récuperer la taille donc j'ai pas jugé utilise de m'en servir.
Messages postés
4
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
26 mai 2009

Bonjour !

@ Bul3 : Je me suis peut-être mal exprimé, mais je ne voulais pas mettre chaque image dans un div différent, à cause de l'affichage en block que cela implique. Par contre, rien ne m'empêche de mettre ma cellule <td> dans un
;)

@ Psyckan : Merci pour ton aide, je pense effectivement que tu as bien compris ce que je veux faire, l'exemple sur la page dont tu t'es inspiré me conviendrais parfaitement, mais en ne faisant pas complètement disparaitre la "boite", comme dans ton code.

Problèmes :
As-tu tester ton code ? Ou alors j'ai fait (ou oublier de faire ?) quelque chose, car cela ne fonctionne pas chez moi :( quand de je clique sur le [+] il ne se passe rien :'(
Sinon je ne sais pas si on peut vraiment se passer de "offsetHeight", car la hauteur de la <td> n'est pas fixe, elle varie en fonction du contenu que je met dedans ... ce qui voudrais dire, si je comprend bien, qu'il faudrait passer cette hauteur à une variable mais cela veut dire qu'on ne peut pas mettre le fonction "Suite()" dans le <head>. Enfin, même si j'ai (peut être) bien compris le pricipe (?), je suis largué quand à la réalisation du script :(

En tout cas toute aide est la bienvenue, et merci pour celle déjà apportée ;)

@++
Messages postés
135
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
8 mai 2010

Ben écoute moi tout marche trés bien sous FF et IE8
Tu peu le tester ici si tu veu : http://pagesperso-orange.fr/tivanbelle/script.html
T'es sous quel browser ?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>Je me suis peut-être mal exprimé,
je ne sais pas.
tu sais, moi je suis un peu limité
et je n'arrive pas à deviner quoi que ce soit
je répond, quand je comprend, ce que je crois
qui puisse résoudre la question.

>>mais je ne voulais pas mettre chaque image dans un div différent,
ce n'est pas ce que je proposais ! où as tu compris cela ????

>>à cause de l'affichage en block que cela implique.
ben, si ce n'est que cela ( mais à mon avis
absolument pas !! ) il suffirait de mettre inline !

>>Par contre, rien ne m'empêche de mettre ma cellule <td> dans un

je te disais exactement le contraire...
un
dans un <td>
Messages postés
135
Date d'inscription
vendredi 27 août 2004
Statut
Membre
Dernière intervention
8 mai 2010

Ah au fait, le offsetHeight prend en compte les bordures, donc pour une div de 600 avec une bordure de 1px en haut et en bas tu auras un offsetHeight de 602...
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
tu as peu-être raison psyckan...

perso de ce que j'ai vu et compris,
un simple
...<td>


contenu....


</td>....
suffit !
mais peut-être me goure-je....
Messages postés
4
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
26 mai 2009

Alors là BRAVO ! Et surtout MERCI Psyckan !

Sa fonctionne NICKEL et c'est EXACTEMENT ce que je voulais

@ Bul3 : Mea culpa, j'ai fait plusieurs erreurs : J'AI mal compris tes premières explications, au sujet des images dans un
, de plus, il est vrai que l'attribut "inline" aurait été une solution au fait de ne pas vouloir employé de
, et enfin, j'ai écrit que je pouvait mettre une <td> dans un
alors que c'est exactement le contraire que j'ai fait lors de mon test (comme tu me le suggérais donc). Par contre pour le "overflow: auto", cela ne pouvait pas convenir car je voulais que l'on doive cliquer sur un lien pour voir le reste de l'affichage.
Je te prie donc de m'excuser pour ces écarts, et te remercie de ta participation.

En fait cela n'a fonctionner du premier coup car j'avais oublier de désactivé une fonction qui affiche un message de chargement tant que la page n'est pas chargée completement, et il y avait donc un conflit.

En tout cas, encore bravo et merci Psyckan !

@++
Messages postés
4
Date d'inscription
vendredi 30 janvier 2009
Statut
Membre
Dernière intervention
26 mai 2009

Oups !

Une idée du pourquoi cela ne fonctionne pas sous IE ?

@++