Panneau coulissant sur le forum

[AenigmA]

Bonjour/bonsoir à vous qui me lirez.

En voyant le script panneau latéral coulissant, cela m'a donné une idée. Je souhaite faire un truc particulier de ce style.

Je vous explique, je souhaiterais qu'il soit centré en bas et ouvert, avec un hover de fermeture quand la souris se trouve dessus.
Pouvez vous m'aider svp ? merci d'avance.

[kheino]

Salut AenigmA,

Quand tu parles de panneau coulissant, tu penses à celui de la CB ?

D'autre part, tu ne voudrais que script, c'est ça ?
Parce que si tu veux le tuto complet, "en bas" c'est vague... (-:
Un petit schéma serait, dans ce cas de figure, le bienvenu.

[AenigmA]

Bonsoir FB, merci déjà de répondre.

Oui le même type de script que la cb, car je n'ai pas accés aux templates.
Pour arriver à faire ce style rideau : http://www.awesomestyles.com/phpbb3-styles/demo/zone-blue
Mets ta souris au bord sur la page et tu comprendras.

[kheino]

Ha, c'est assez top ! (et c'est aussi le cas de le dire...)

Si ça se fait ce serait même réalisable qu'en CSS, ce qui serait la classe non ?
Il faut que je cherche, il me semble avoir vu passer un tuto du genre, pour un plus petit champ que toute une page, et rien qu'en CSS.

Mais si c'est impossible, et qu'il faut du js ou autre, n'hésitez pas à vous manifester les pros !

[AenigmA]

Je te remercie de ton temps FB

[kheino]

Bonjour AenigmA,

Après avoir télécharger le thème sur un forum en phpBB3 créé que pour ça, je n'y suis pas arrivée, parce qu'il y a des fichiers.cfg que je ne connais absolument pas et dont je ne sais pas (encore!) faire usage.
Le CSS est néanmoins très intéressant.

Bref, il faudrait que quelqu'un m'explique aussi.

J'essaie une autre application juste en CSS (et un tout petit script), mais ce n'est pas encore au point... /-:
Je m'accroche !

[AenigmA]

Coucou, ce serait plus compréhensible en V2 c'est sûr, hormis si quelqu'un regarde pour un script. Mais bon ... déjà bien si tu t'y intéresses.

[kheino]

Bonsoir,

ce serait plus compréhensible en V2 c'est sûr

Wouoh, rien de moins sûr puisque j'ignore aussi ce qu'est V2...
Version phpBB2, c'est ça ?

Roh, la cruche, je ne te dis pas !

[AenigmA]

Bonjour, un petit up

[AenigmA]

Bonjour et bon week-end
Un dernier petit up.

[AenigmA]

Merci à ceux qui ont fait un effort, j'annule.

[kheino]

Oh c'est dommage. J'étais aussi très curieuse de voir comment pouvoir réaliser cela et je cherche encore dans mes moments de libre.

Bizarre, il y avait une réponse de Etana non ?
Là j'ai eu l'espoir de voir la solution...
Il est où ce post ?

[Lixyr]

Bonjour.

Il y a des tutos, oui.
J'ai trouvé celui-ci :
https://forum.forumactif.com/t315332-positionner-une-chatbox-laterale-a-partir-du-bas-de-l-ecran-javascript?highlight=panneau+lat%E9rale

il y en a encore un, d'Adam, que j'avais utilisé. Je le cherche.
tapez "panneau latérale" dans les recherches. Vous tomberez surement dessus.

*edit*
voici le tuto que j'avais trouvé :
https://forum.forumactif.com/t314153-panneaux-coullisant-qui-ne-fonctionne-pas


Cordialement.

[kheino]

Bonsoir Lixyr Yrna,

Merci de ta réponse, même si ce n'est pas moi qui ai ouvert le sujet, je m'y intéresse fortement.

Je ne suis pas sûre que nous parlions du même panneau latéral :

Pour arriver à faire ce style rideau : http://www.awesomestyles.com/phpbb3-styles/demo/zone-blue
Mets ta souris au bord sur la page et tu comprendras.

Si toutefois nous parlons bien du même effet, je ne vois pas bien comment délimiter et installer un tel "rideau" qui "slide-up-n'down" sur toute la page ?

[Lixyr]

Ce n'est pas tout à fait la même chose, même si ça y ressemble.
Vous avez essayé de download le code ?

[AenigmA]

Oh c'est dommage. J'étais aussi très curieuse de voir comment pouvoir réaliser cela et je cherche encore dans mes moments de libre.

Bizarre, il y avait une réponse de Etana non ?
Là j'ai eu l'espoir de voir la solution...
Il est où ce post ?

Bonjour FB et Lixyr
Oui il y avait une réponse + un de mes messages à la suite ... sans commentaire.

Regarde ceci :
http://kirian2.superforum.fr/h4-pagehtml

Si tu trouves à me le positionner en PunBB ça m'arrangerait ...

[kheino]

Bonjour AenigmA,

Pas mal du tout.

Que veux-tu dire par "le positionner" ?
Qu'il soit collé en haut de page c'est ça ?

Bonjour Lixyr Yrna,

Vous avez essayé de download le code ?

Download quel code ?

[AenigmA]

Coucou FB, le mettre dans les templates de PunBB

[kheino]

le mettre dans les templates de PunBB

Erf, tu ne pouvais me demander en phpBB2 ?
Je ne connais pas du tout les templates de punBB.

Je vais essayer de mettre ce rideau sur mon FT en BB2 et certainement que nous trouverons l'équivalence du punBB...

[AenigmA]

Ok, merci

[AenigmA]

Bonsoir à tous
Un petit up

[kheino]

Bonsoir AenigmA,

J'y suis justement.
Dis-moi, l'écart avec le haut de page est voulu ?

EDIT : Je teste le xHTML5 et le CSS3 pour cet effet.

[AenigmA]

Oui c'est l'emplacement de la barre, mais sans, ce n'est pas gênant.

[kheino]

Ok, je suis arrivée à le placer, mais hier ça fonctionnait dans une page html chez moi et maintenant plus alors que chez toi tout va bien.
J'ai le même souci maintenant sur le forum...

Pour ce qui est de le placer sur le forum, pas de souci.
Ce qui me pose problème, c'est de le faire coulisser...
C'est comme si un script ne fonctionnait pas.

[AenigmA]

C'est avec un overflow: hidden et une transition ton truc ?

Si tu peux me le faire passer en mp, j'essaierai aussi sur punbb

[kheino]

Ciao AenigmA,

Alors quand je te disais que j'avais su comment l'installé hier, c'était ce qui est dans ta page HTML, mais le script ne fonctionnait pas, donc l'image restait seulement là et ne se retirait pas.

Maintenant n'étant pas du tout une connaisseuse des scripts divers et variés, je me sens bien plus à l'aise avec le CSS et le HTML.
J'ai donc essayé avec la fonction "transition" du CSS3 et ça fonctionne super jouli, mais je ne sais pas comment faire s'arrêter l'image une fois qu'elle s'est ouverte.

Commençons déjà par le début qui est le template overall_header en phpBB2.
Après la l'ouverture de la balise "body" on peut installer le HTML du bins (chez moi) :

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
 
<div id="mon_div">
  <div class="imgviralgo"><img src="http://i40.servimg.com/u/f40/09/00/15/94/viralg10.jpg" alt="viralgo" />

Les deux div restent ouverts pour se refermer dans le template overall_footer, juste avant la fermeture de la balise >/body< :

Code:

</div></div>
</body>

Dans le CSS on reprend :

Spoiler:

Peut-être qu'il suffit d'inverser avec le hover ?
Je n'ai pas encore terminer tous les tests (ha, j'ai toujours rêver de dire ça !)

Quelle que soit la méthode que tu adoptes, il faut juste penser à refermer la ou les div(s) en fin de page, et en phpBB2 ça se situe dans un deuxième template qui couvre le pied-de-page, l'overall_footer.

[AenigmA]

Effectivement il faut ouvrir dans header et fermer dans footer, j'avais remarquer cela dans la SF.

[quierra]

Coucou Laurent, je l'ai fait et ça marche parfaitement : http://testcat.forums-actifs.net/forum

C'est bien ce que tu veux ?

Ouai certains éléments ne sont pas recouvert, c'est parce qu'ils ont un z-index plus important.
Je ne trouve pas ça très pratique, ni très jojo, mais bon si ça te plait...

Peut être utilisé sur phpBB2 et punBB, du moment qu'on a accès aux templates.

Tu places ce jQuery dans le HEAD d'overall_header :

Code:

<script type="text/javascript">
  $(document).ready(function() { 
        $('.bloc_animation').hover (function(){
            var distance = $(this).outerHeight();
            $(this).find('.mon_image').animate({ top : distance },{queue:false,duration:3000});
        }, function(){
            $(this).find('.mon_image').animate({ top : '0px' },{queue:false,duration:3000});
        });     
      });
</script>

Nomme les class et id comme tu veux, du moment qu'il coïncide avec le HTML et le CSS.

Juste après body, tu mets ton div qui va contenir tout le forum, donc on ne le ferme pas dans ce template, on va le refermer dans overall_footer.

Code:

<div class='bloc_animation'>

Un peu plus bas, tu mets ton image. Moi je l'ai placée après la navigation :

Code:

<img class='mon_image' src='http://i45.servimg.com/u/f45/11/95/30/70/zag11.jpg' style='width:100%' />

Tu enregistres et valides ton template.
Direction le template overall_footer, et tu refermes le div juste avant la fermeture de /body.

Code:

</div>

Maintenant tu vas mettre dans ton CSS :

.bloc_animation{
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
color: #fff;
z-index: 4;
}
.mon_image{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

Je me donne l'impression d'avoir volée un code... Mais bon il est plutôt simple, bien qu'astucieux.

[AenigmA]

Lol, moi qui voulait pas te déranger car je partais d'un de tes scripts. Qui marche d'ailleurs mais qui m'empêche l'accès au liens du forum. Gros merci

[kheino]

Bonsoir Quierra,

Dans le jQuery en question, n'y a-t-il pas moyen de slider le panneau sur la gauche ?