Astuce Panneau latéral by Alex Fowl

+2
Adam_sfp
Horatio
6 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Dim 17 Juil 2011 - 20:18

Bonsoir

Aucun effet sous Invision.

Y-a-t-il une astuce ?

Merci


Dernière édition par FANCH 56 le Mer 20 Juil 2011 - 13:34, édité 1 fois
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par Horatio Lun 18 Juil 2011 - 0:20

Bonsoir,

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

Cordialement
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Lun 18 Juil 2011 - 7:41

FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par Adam_sfp Mar 19 Juil 2011 - 20:28

Bonsoir


Un effet comme celui ci peut il convenir?
Slide Panel

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Mar 19 Juil 2011 - 20:31

Oui

Quoique l'ouverture est très lente.

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

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par Ea Mar 19 Juil 2011 - 20:43

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.

FANCH 56 a écrit: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.


Dernière édition par Etana le Mar 19 Juil 2011 - 20:46, édité 2 fois
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Mar 19 Juil 2011 - 20:44

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

Bonne nuit
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Mer 20 Juil 2011 - 8:23

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>\'); } );
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par Ea Mer 20 Juil 2011 - 13:16

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 ) ).
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par FANCH 56 Mer 20 Juil 2011 - 13:34

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
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par doro matra Mer 20 Juil 2011 - 16:38

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 .
doro matra

doro matra
****

Masculin
Messages : 472
Inscrit(e) le : 25/08/2008

http://www.recettesgustatif.net
doro matra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par devil92140 Ven 22 Juil 2011 - 2:02

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

devil92140
***

Masculin
Messages : 188
Inscrit(e) le : 06/03/2011

http://dwight-schultz-fan.forumgratuit.org
devil92140 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Astuce Panneau latéral by Alex Fowl

Message par Ea Ven 22 Juil 2011 - 2:45

Bonjour,

doro matra a écrit: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> ).

devil92140 a écrit:ç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.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum