Problème d'affichage d'un JAVASCRIPT

[Runa Moon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès la création.
Lien du forum : https://insane-werewolves.forumactif.org/

Description du problème

Bonjour,
J'ai suivi ce tutoriel Javascript et il y a des choses qui échappent à ma compréhension XD.

Vous constaterez sur la capture d'écran que lorsque le code est ouvert il y a un espace transparent entre le bord de page et l'image du rouleau, et on voit le mot "fermer" à gauche. Or le mot "fermer" devrait être à droite et le rouleau devrait être collé au bord de page.

Je pose ici le Java afin que vous puissiez jeter un œil. Merci d'avance !

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="yes" style="width: 260px; height: 570px; display: none; float:right;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Miettes]

Coucou

On ne voit pas ton image. tu pourrais la réuploader stp ?

[Runa Moon]

Étrange, moi je la vois parfaitement bien....?
Quoi qu'il en soit, je l'i hébergée sur un autre site au cas où, voici :

[Miettes]

Essaie de remplacer le float:left ici :

Code:

<div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><

par un float: right

(on va déjà tester ça )

[Runa Moon]

Comme ça ?

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="yes" style="width: 260px; height: 570px; display: none; float:right;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

Désolée si je met tout le code à chaque fois, j'ai du mal à m'y retrouver >.<'

[Miettes]

Oui on peut tester ça :/

Même si je ne suis pas certaine que ça règle le problème ^^

[Miettes]

Oh attend

Ici :

Code:

<iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="yes" style="width: 260px; height: 570px; display: none; float:right;" marginwidth="0" marginheight="0" frameborder="0"></iframe>

il faut laisser float left par contre. Voilà le bon code :

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="yes" style="width: 260px; height: 570px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Runa Moon]

Je ne te le dirais jamais assez, Miettes je t'adore !
Le dernier code fait tout fonctionner à la perfection !

Il mes reste une question : est-ce possible d'enlever les scrollbar de ce java ?
L'image que j'utilise est taillée au bon format, et je n'ai pas besoin des scrollbar du coup

[Miettes]

On va indiquer qu'on ne veut pas de scrolling du coup :

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="no" style="width: 260px; height: 570px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Runa Moon]

Ouah super !

Une dernière question, après promis j'arrête :3

Je voudrais mettre des liens, style répertoire de liens utiles, oû est-ce que je peux placer ça dans le code ?

[Miettes]

ah bah c'est exactement ce qui est mis au début du tuto :
https://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant

a la place de "Texte", tu peux mettre l'iframe de ta Chatbox et en dessous ou au dessus, tu peux ajouter des liens de cette façon :

Code:

<a href="http://tonlien"> texte</a>

[Runa Moon]

Ch'uis un boulet....
J'ai essayé de mettre 3 liens bateau, mais ils ne s'affichent même pas T_T
C'est dire si codage et moi ça fait 15)

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="no" style="width: 260px; height: 570px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Miettes]

il faut les mettre en dehors de l'iframe

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="no" style="width: 260px; height: 570px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Runa Moon]

Ils apparaissent à côté de l'image

Entre-temps j'ai transféré le code sur mon futur forum : http://les-mondes-sauvages.forumsrpg.com/

[Miettes]

Essaie comme ça

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><div style="width: 260px; height: 570px; display: none; float:left;"><iframe src="https://zupimages.net/up/19/48/jzpx.png" id="chatboxpop" scrolling="no"  marginwidth="0" marginheight="0" frameborder="0"></iframe><br /><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a></div>div><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Runa Moon]

Y a plus rien qui s'ouvre et j'ai un bout de "div>" qui traîne

Je suis totalement larguée je t'avoue

[Miettes]

Ah la div qui traine, c'est ma faute

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><div style="width: 260px; height: 570px; display: none; float:left;" id="chatboxpop"><iframe src="https://zupimages.net/up/19/48/jzpx.png" scrolling="no"  marginwidth="0" marginheight="0" frameborder="0"></iframe><br /><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a></div><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

essaie ça

[Runa Moon]

Pas de soucis, tout le monde peut oublier des.... MIETTES #okjesors

J'ai que le haut de l'image et les liens sont hors de l'image

[Miettes]

Coucou

Essaie avec ce code :

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style=" position: fixed; bottom: 230px; height: 350px; left: 0px; z-index:1000;"><div style="width: 260px; height: 600px; display: none; float:left;position:relative;" id="chatboxpop"><iframe src="https://zupimages.net/up/19/48/jzpx.png" scrolling="no"  marginwidth="0" marginheight="0" frameborder="0" style="width: 260px; height: 570px;"></iframe><div style="position: absolute; top: 100px;left: 20px;"><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><br /><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a><br /><a href="http://les-mondes-sauvages.forumsrpg.com/t1-votre-1er-sujet"> texte</a></div></div><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},2000); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:right"><img src="https://www.zupimages.net/up/15/50/m95i.png" id="chatboxopen"/><img src="https://www.zupimages.net/up/15/50/plhq.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

[Runa Moon]

Hello :3

Je m'incline devant ta science infuse, la dernière version fonctionne, tu es une reine !

Rien à redire et applaudissements !