Astuce Panneau latéral by Alex Fowl

[FANCH 56]

Bonsoir

Aucun effet sous Invision.

Y-a-t-il une astuce ?

Merci

[Horatio]

Bonsoir,

Pouvez vous être plus précis sur ce que vous désirez svp ?

Cordialement

[FANCH 56]

Bonjour

Ceci : https://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant

[Adam_sfp]

Bonsoir


Un effet comme celui ci peut il convenir?
Slide Panel

Cordialement.

[FANCH 56]

Oui

Quoique l'ouverture est très lente.

Mais si cela fonctionne sous Invision. Je suis preneur du code que j'essaierai demain.

[Ea]

Bonjour,


Sinon cela devrait marcher sur tout site web ^^

Mais en fait il ne faut pas de retour à la ligne, donc la partie :

Code:

<div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

    Texte

</div>

Il faut si vous voulez mettre " hip hip hourra " mettre :

Code:

<div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">hip hip hourra</div>

Un retour à la ligne de toute façon doit être mis avec :

Code:

<br />

Et il y a aussi le cas du ' pour pouvoir en mettre un il faut mettre à la place \' sinon ça fera fera une erreur dans le code et il ne fonctionnera pas.

Oui

Quoique l'ouverture est très lente.

Mais si cela fonctionne sous Invision. Je suis preneur du code que j'essaierai demain.

Pour ce qui est de l'ouverture lente, c'est juste car il est mis qu'il faut que ça prenne 6 secondes dans le code, juste en changeant ça ça changerait la vitesse =)


Cordialement.

[FANCH 56]

Merci à vous deux. Je ferais l'essai demain.

Bonne nuit

[FANCH 56]

Bonjour

Cela ne fonctionne pas.

Voilà ce que j'ai mis.

Je ne trouve pas le code pour le délai d'ouverture.

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">ESSAI</div><BR></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>\'); } );

[Ea]

En fait on utilise une "chaine de texte" du langage javascript.

Il y a 2 manières de faire, celle avec des " :

Code:

"chaine de texte entourée par des \" au début et à la fin, dans ce cas il faut mettre un \ avant les \" qui se trouvent dans la chaine"

Et celle avec des ' :

Code:

'chaine de texte entourée par des \' au début et à la fin, dans ce cas il faut mettre un \ avant les \' qui se trouvent dans la chaine'

Ici vu le nombre de " dans du html on utilise celle avec les ' aux bords ( donc on doit mettre \' à l'intérieur quand il y a un ' ), mais à la fin le \' de </table>\' est en fait le ' de terminaison donc il faut mettre '.

Enfin en retirant le dernier \ ça devrait fonctionner.

Sinon ce code ci est différent de celui de adam_sfp, il y a une ouverture / fermeture instantanée, pour avoir un "glissement" voici le code que ça donnerait :

Code:

$(function(){
 
  $('body').append('<div style="position: fixed; bottom: 50px; left: 0; z-index:10000"><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none; background-color: #ffffff;">ESSAI</div><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="$(\'#panneau\').stop(true, true).animate({width:\'toggle\'},1000);this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';" /></div>');

});

( par contre je ne suis pas arrivé à mettre l'image à cliqué à côté je l'ai mise en dessous, pour modifier la durée d'ouverture il faut changer le 1000 ( c'est juste la durée en milliseconde donc 1000 donne 1 seconde ) ).

[FANCH 56]

Merci ETANA cela fonctionne.

Reste à voir le changement de texte, et voir pour la mise en place d'images à la place du texte.

Résolu

[doro matra]

bonjour,
je peux me servir de se code?
si oui

comment faite vous ensuite pour mettre des lien merci .


je n'arrive pas a mettre la chatbox malgré le tuto .

[devil92140]

ça a fonctionné pour moi mais sans ' et " dur de pas se faire prendre pour un illettré

[Ea]

Bonjour,

comment faite vous ensuite pour mettre des lien merci ..

On peut mettre des liens en html ( donc <a href="http://adresse-lien">texte à cliquer</a> ).

ça a fonctionné pour moi mais sans ' et " dur de pas se faire prendre pour un illettré

Il suffit de mettre \' pour avoir un ' et sinon pour mon explication c'est soit ' soit " qu'il faut échapper ( pas les 2 ), si on utilise à gauche et à droite le ' il faut mettre \' à la place de ' ( c'est notre cas ).

Voilà un script qui fait l'échappement tout seul : http://pastehtml.com/view/b18prrqq8.html avec ce script.

Le problème de ce sujet semblant résolu, je le verrouille, la section est ouverte pour la création d'autres sujets de problèmes.