| | Chatbox latérale : positionnement et codage |  |
|
|
 Airmès 
{ Membre }
 Messages : 21
 | Bonjour ! J'ai deux questions au sujet de la chatbox latérale.
1. La première est un soucis que je rencontre avec ma chatbox latérale : j'ai immédiatement en face de l'image "ouvrir" un espace vide transparent non clicable. C'est dérangeant dans le sens ou lorsque l'on descend la page pour lire, notamment, le nom des catégories du forum, il est impossible de cliquer sur celles-ci pour les consulter lorsqu'elles se trouvent en face du petit logo "Ouvrir la Chatbox". Je n'ai malheureusement pas trouvé d'aide supplémentaire sur le forum... 2. Le second est une complexité de codage, je cherche vainement à "personnaliser" ma Chatbox latérale (installée grâce à votre tutoriel) pour faire que, au passage de la souris, l'image clicable pour ouvrir l'IRC change. Quoique je fasse, mon onmouseover fait sauter tout le code, et plus aucun de mes deux panneaux latéraux ne s'affiche... Voici mon code de base : - Code:
-
jQuery(document).ready(function() { jQuery('body').append(' <table style="position: fixed; bottom: 350px; left: -30px;z-index:10000;"> <tr> <td> <iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td style="vertical-align: bottom;"> <img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'block\':\'none\';this.src=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\';"/> </td> </tr> </table> '); }); Je vous remercie de l'aide que vous pourrez peut-être m'apporter. | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Salut, un lien vers le problème en question ne serait pas de refus  | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Biensûr ! Ici !  Les deux images clicables sont la lanterne et la mapmonde sur le côté. Merci ! | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Ok donc pour tes liens non cliquables, c'est normal car tu n'as pas donnés de largeur à tes tables celle-ci en l’occurrence : - Code:
-
<table style="position: fixed; bottom: 350px; left: -30px;z-index:10000;"> Trouve les et supprime le z-index puis rajoute une width de la taille de tes images (monde et lampe). Ensuite pour ce qui est du onmouseover, essaie ce code (je ne l'ai pas testé encore) : - Code:
-
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" /> Bien sure en remplaçant par les images appropriés Dis moi si c'est bon ou si tu rencontre le moindre problème PS: la chatbox fa n'as rien a voir avec l'irc. | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Merci beaucoup. Pour le problème de la largeur des images, j'ai fait indiqué et ça marche parfaitement bien. Pour le second soucis, par contre, ça ne donne rien de nouveau, voici mon essai de code : - Code:
-
jQuery(document).ready(function() { jQuery('body').append(' <table style="position: fixed; bottom: 350px; left: -13px; width : 100px;"> <tr> <td> <iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td style="vertical-align: bottom;"> <img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" name="image" onmouseover="image.src=http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png " onmouseout="image.src= http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png " onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'block\':\'none\';this.src=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\';"/> </td> </tr> </table> '); }); | | |
|
| | |
'Christa 
Lostmindy
 Messages : 2856
| Bonjour,
Il me semble que le code donné pour la chatbox est différent dans les tutoriels de CSSActif (j'avais viré tout le CSS du HTML). Avec tous ces scripts accumulés il y a des risques que ça coince en effet.
Sinon nos spécialistes javascript sont assez peu présents malheureusement, je fais remonter ta demande vers les concernés on va espérer qu'ils puissent t'aider. | | |
|
| | |
Doare 
{ Spécialiste }
Messages : 544
| Bonsoir Si j'ai bien compris, tu veux juste que l'image change au passage de la souris, mais pas quand on clique dessus, c'est bien ça ? Remplace le code de ton image : - Code:
-
<img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" name="image" onmouseover="image.src=http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png " onmouseout="image.src= http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png " onClick="document.getElementById(\'chatboxpop\').style.display=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'block\':\'none\';this.src=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\';"/> Par ceci : - Code:
-
<img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" onmouseover="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png\'" onmouseout="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\'" onclick="a=document.getElementById(\'chatboxpop\').style;a.display=(a.display==\'none\')?\'block\':\'none\';" /> Il manquait des ' pour entourer les liens dans les onmouseover et onmouseout, les \ pour les ellipser car le tout est intégré en javascript (sans ça, le javascript de départ n'irait pas jusqu'au bout, c'est comme si tu lui disais de s'arrêter avant d'avoir fini... et au final il ne ferait rien ). Je t'ai retiré la propriété "name" car tu n'en as pas besoin pour les évènements de l'image, on l'appelle par "this". Et puis naturellement j'ai nettoyé l'évènement onclick pour que la chatbox s'ouvre et se ferme sans problème, sans changement d'image... J'espère que c'est bien ce que tu voulais. | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Merci beaucoup à vous deux. Ca fonctionne parfaitement bien ! Merveilleux ! Il y a juste mon image "Fermer" qui a sauté au passage, mais je vais essayer de me débrouiller pour la remettre. Je crois que tu l'as sciemment supprimée Doare, mais j'ai qu'à mieux exprimer ma demande | | |
|
| | |
Psycho 
Psychopathe
Messages : 3407
| Hello ! Doit-on comprendre que le sujet est entièrement résolu ? Merci d'avance de ta réponse  | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Finalement, j'aurais bien aimé avoir un autre coup de pouce pour remettre mon image "Fermer" - Code:
-
http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png Je bidouille en CSS et Html, mais le javascript semble trop rigide pour moi ! | | |
|
| | |
Espeon 
Administrateur
Messages : 1819
| A priori je te dirais de rajouter simplement le petit bout de code qui n'a pas été repris. Lors du clic ( onclick) il faut changer la source de l'image, ce qui donne au final : - Code:
-
<img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" onmouseover="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png\'" onmouseout="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\'" onclick="a=document.getElementById(\'chatboxpop\').style;a.display=(a.display==\'none\')?\'block\':\'none\';this.src=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\';" /> Après je t'avoue que là où je suis je peux pas trop tester, mais de tête ça devrait être ça je crois. | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Merci de ton aide !
A priori je n'ai aucun changement. En essayant d'inverser les sources des images du code qui vient après onclick, je ne remarque aucun changement non plus. | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| En fait, c'est à cause de ces fichus backslashes (\) qui n'ont absolument rien à faire dans le code (que je sache, on n'échappe rien là ?). Bref, essaie avec ceci (chez moi ça fonctionne) : - Code:
-
<img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" onmouseover="this.src='http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png'" onmouseout="this.src='http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png'" onclick="a=document.getElementById('chatboxpop').style;a.display=(a.display=='none')?'block':'none';this.src=(this.src=='http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png';" /> | | |
|
| | |
'Christa
Lostmindy
Messages : 2856
| Il me semble me souvenir que ces backslashes sont là parce que ce HTML est lui même dans un code javascript x) | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Merci de vos réponses !
Comme l'explique 'Christa, il s'agit d'un javascript.
J'ai essayé la deuxième proposition, sans succès également. Toutefois je crois observer que suite à la première solution, l'image "Fermer" apparaît bien, mais elle remplace en fait l'image sur laquelle on a cliqué pour ouvrir la chatbox et non, comme elle devrait le faire, l'image clicable qui apparaît au bout de la chatbox déroulante.
Pour étayer un peu : LINK
Il s'agit du lampadaire.
En fait, je crois que notre image "Fermer" se trouve derrière la chatbox, une fois qu'on l'a ouverte.
Je l'ai remarqué en changeant les sources de telle manière que l'icône de la map-box (le globe terreste sous le lampadaire) n'ouvre pas ladite map-box mais ouvre lui aussi la chatbox. L'image "Fermer" avait alors remplacé le globe terreste, resté sur le côté gauche de l'écran. | | |
|
| | |
pamina
{ Membre actif }
Messages : 1170
| Hep, Juste pour aider, si ça peut servir :  quand on ouvre la CB, le "fermer" apparaît une seconde, puis il est remplacé par le lampadaire. (sur chrome) Même chose à la fermeture mais un quart de seconde (impossible à capturer). | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Non mais c'est moi qui l'ai essayé au bluff.
Je vais me pencher plus sérieusement sur ton soucis en reprenant depuis le début le sujet, et en allant voir ça de visu. Mais il te faudra attendre ce soir que je rentre chez moi (là je tourne sous IE6, sans éditeur potable, bref pas les outils pour t'apporter une vraie solution).
Si un codeur passe par là avant moi, aucun soucis si vous résolvez son petit problème dans la journée cela dit hein : c'est au niveau du changement de src, il est pas appliqué au bon élément dans le onclick(this actuellement, j'ai repris texto l'ancien code en supposant que l'effet fonctionnait). | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Trèèèèèès bien, je viens de comprendre : en fait, tu voudrais avoir ton lampadaire qui change lors du survol quand la chatbox est fermée. Quand la chatbox est ouverte, tu voudrais que le lampadaire soit remplacé par l'image " Fermer" pour indiquer qu'il faut cliquer ici afin de faire se fermer la chatbox (et de faire réapparaître le lampadaire). Est-ce correct ? Si c'est le cas, et pour ne faire aucune bêtise, peux-tu me fournir le code Javascript que tu as mis actuellement ? Merci | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| En fait, le souci, c'est qu'il y a conflit entre le changement au survol et l'évènement onclick. En limitant le survol à l'état fermé de la CB, on peut arriver à faire cohabiter les deux. Je suis arrivée à quelque chose d'assez lourd, mais qui marche... - Code:
-
<img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png" onmouseover="this.src=(document.getElementById(\'chatboxpop\').style.display==\'none\')?\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\'" onmouseout="this.src=(document.getElementById(\'chatboxpop\').style.display==\'none\')?\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\'" onclick="a=document.getElementById(\'chatboxpop\').style;a.display=(a.display==\'none\')?\'block\':\'none\';this.src=(a.display==\'block\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png\'" /> En gros j'ai ajouté une condition aux évènements onmouseover et onmouseout : si la CB est fermée, les évènements se déclenchent. Si la CB est ouverte, l'image reste celle de "Fermer". Si tu veux que l'image change au survol alors que la CB est ouverte, tu as une URL à changer dans l'évènement onmouseover uniquement : la dernière de l'évènement, celle du bouton FERMER : - Code:
-
onmouseover="this.src=(document.getElementById(\'chatboxpop\').style.display==\'none\')?\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\'" J'bosse sur une version ptet plus propre dans une fonction à part, mais j'ai un peu de mal ce soir. <_> Bref, en tout cas, ça devrait fonctionner... | | |
|
| | |
Espeon
Administrateur
Messages : 1819
| Doare, si tu bosse sur une version plus propre, peut-être serait-il judicieux de virer le JS du HTML généré et d'utiliser jQuery directement pour appliquer les effets lors des events. Ce sera beaucoup plus simple, et on pourra plus facilement se servir d'une variable (booléenne) pour stocker l'état de la variable. Ce sera plus lisible/maintenable. | | |
|
| | |
Airmès
{ Membre }
Messages : 21
| Merci à vous deux ! Espeon, c'est exactement ce que tu as décrit que je cherche à mettre en oeuvre ! Le code que j'utilise actuellement est celui-ci : - Code:
-
jQuery(document).ready(function() { jQuery('body').append(' <table style="position: fixed; bottom: 350px; left: -13px; width : 100px;"> <tr> <td> <iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td style="vertical-align: bottom;"> <img src="http://i35.servimg.com/u/f35/16/65/12/73/chatbo15.png" onmouseover="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo14.png\'" onmouseout="this.src=\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo15.png\'" onclick="a=document.getElementById(\'chatboxpop\').style;a.display=(a.display==\'none\')?\'block\':\'none\';this.src=(this.src==\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo14.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i35.servimg.com/u/f35/16/65/12/73/chatbo14.png\';" /> </td> </tr> </table> '); }); Mais vraiment, rien ne presse, vous êtes déjà super sympa de vous attarder sur mon soucis alors prenez votre temps ! | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| @Espeon, c'est ce que je voulais dire par "fonction à part". Soooo... - Code:
-
$(function(){ var imgOuvrir = 'http://i35.servimg.com/u/f35/16/65/12/73/chatbo12.png'; var imgSurvol = 'http://i35.servimg.com/u/f35/16/65/12/73/chatbo13.png'; var imgFermer = 'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png'; $('body').append(' <table style="position: fixed; bottom: 350px; left: -13px; width : 100px;"> <tr> <td> <iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> </td> <td style="vertical-align: bottom;"> <img id="btn_cb" src="'+imgOuvrir+'" /> </td> </tr> </table> '); $('#btn_cb').on({ click: function(){ $('#chatboxpop').toggle(); }, mouseenter: function(){ if($('#chatboxpop').css('display') == 'none'){ $(this).attr('src', imgSurvol); } else { $(this).attr('src', imgFermer); } }, mouseleave: function(){ if($('#chatboxpop').css('display') == 'none'){ $(this).attr('src', imgOuvrir); } else { $(this).attr('src', imgFermer); } } }); }); Tout d'abord 3 variables qui déclarent les URLs utilisées : imgOuvrir, imgSurvol, imgFermer. Si tu dois les mettre à jour, c'est le seul endroit où tu auras à le faire. Vient ensuite la première instruction : génération du code HTML. Dans ce code HTML, l'image est dotée de l'identifiant "btn_cb", auquel se rattache l'instruction déclarant les évènements liés à la souris. De plus, son URL est complétée directement par la variable imgOuvrir. Comme j'ai dit, seul endroit de mise à jour des liens, les variables ! Et enfin, la fameuse instruction qui rassemble nos trois évènements : le clic (click), le survol (mouseenter)... et le "non-survol" (mouseleave). Si tu souhaites ajouter un changement d'image au survol du bouton "Fermer" (imgFermer)... - avec la même image de survol : dans l'évènement "mouseenter", remplace la variable imgFermer par imgSurvol
- avec une autre image :
- ajoute une variable déclarant ton lien après les autres, ex : var imgSurvolFermer = 'http://';
- dans l'évènement "mouseenter", remplace la variable imgFermer par la nouvelle
| | |
|
| | |
'Christa
Lostmindy
Messages : 2856
| Je simplifierais même le tout en virant les styles et en mettant l'URL de la cb en variable (parce que FA a déjà cassé les chatbox latérales en changeant l'URL XD) Airmès, remplace ça : - Code:
-
<table style="position: fixed; bottom: 350px; left: -13px; width : 100px;"> Par ça : - Code:
-
<table class="ChatboxLaterale"> Et ça : - Code:
-
<iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe> Par ça : - Code:
-
<iframe src="/chatbox/index.forum?page=front&" id="chatboxpop" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> Et ensuite tu rajoute les styles dans ton CSS : - Code:
-
.ChatboxLaterale {
position: fixed; /* position fixe dans la fenêtre */
bottom: 350px; /* à 350px du bas */
left: -13px; /* et -13px du bord gauche */
width : 100px; /* dimension 100px */
}
.ChatboxLaterale iframe {
width: 800px; /* largeur */
height: 300px; /* hauteur */
display: none; /* caché par défaut */
} | | |
|
| | |
Doare
{ Spécialiste }
Messages : 544
| Yep, c'est mieux. Autant aller jusqu'au bout. Airmès, pour stocker l'URL de la Chatbox comme 'Christa dit de le faire, comme je t'ai expliqué plus tôt, tu crées une nouvelle variable après les autres : - Code:
-
var maVariable = '/url-de-la-chatbox'; - puis dans l'IFRAME de la Chatbox, tu remplaces le lien par ta variable, précédée et suivie de deux signes : - Code:
-
'+maVariable+' Ces signes permettent de dire à l'instruction Javascript : le HTML s'arrête là, j'ajoute une variable, cette variable s'appelle maVariable, j'ai fini d'ajouter la variable et j'ai encore des choses à ajouter, le HTML reprend. | | |
|
| | |
'Christa
Lostmindy
Messages : 2856
| Et voilà Doare, tu cherchais des trucs à faire : tu peux aller mettre à jour les tutoriels (il y en a trois si je ne me trompe pas) sur les chatbox o/ | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Chatbox latérale : positionnement et codage | |
|
