[Réglé] Infobulle avancée

Forum pour rechercher des MODs.
Pas de support dans cette section

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com

Attention, aucun support de MODs n'est donné dans cette section.
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Infobulle avancée

Messagepar Selene Bathory » 10 Mar 2015 à 14:19

Bonjour à tous !

J'ai passé pas mal d'heures à chercher et à bricoler sur une version locale, en vain, pour installer un bbcode d'infobulle mais version améliorée. Je pense que le mieux est de passer par un script puisque j'aimerais pouvoir afficher dans la bulle aussi bien des liens que des images (y utiliser si possible les bbcodes existants) et pouvoir garder une petite fenêtre ouverte en cliquant dessus et cliquer sur les liens qui seraient inclus.

J'ai regardé du côté d'overlib suite à ce que j'ai trouvé sur ce topic mais ça ne fonctionne pas, je n'ai pas de texte ni au survol ni en cliquant. Mais comme je suis bidouilleuse du dimanche et que je fais plus de l'expérimentation autodidacte que de la vrai programmation, j'ai peut-être pas fait les bonnes choses aussi.

Si quelqu'un pouvait m'aiguiller, ce serait très gentil ^^. Merci d'avance :o !
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 10 Mar 2015 à 19:41

Hello,

Je peux te proposer ça même si cela demandera peut-être quelques ajustement par la suite, notamment pour les images de grande largeur affichés via la balise img.

Utilisation du BBCode :
Code: Tout sélectionner
[infobulle={TEXT1}]{TEXT2}[/infobulle]

Code HTML de remplacement :
Code: Tout sélectionner
<div class="infobulle">{TEXT1}<div>{TEXT2}</div></div>

Ligne d’aide :
Code: Tout sélectionner
[infobulle=texte affiché]contenu masqué, affiché au survol[/infobulle]

Ajouter ces règles dans le CSS :
Code: Tout sélectionner
.content {
	overflow: visible;
}

.content > img {
	width: 100%;
	height: auto;
}

.infobulle {
	display: inline-block;
	position: relative;
	border-bottom: 1px dotted;
}

.infobulle > div {
	background: white;
	left: 50%;
	bottom: 1.2em;
	position: absolute;
	display: none;
}
Le CSS est très basique, je l'indique pour l'exemple.

Et éventuellement un peu de jQuery si tu charges déjà la bibliothèque :
Code: Tout sélectionner
<script type="text/javascript">
$(function() { 
	$('.infobulle > div').hide();
	$('.infobulle').hover(
		function () {
			$(this).children('div').fadeIn();
		},
		function () {
			$(this).children('div').fadeOut(1000);
		});
});
</script>

La chaîne de symboles {TEXT2} pourra afficher des images, des listes et tous les BBCodes.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 10 Mar 2015 à 19:55

Merci de ta réponse. Le résultat n'est pas très probant, je n'ai rien au passage de la souris :? .
J'avais déjà ce problème avec d'autres essais que j'ai fait et qui semblait fonctionner chez d'autres.

J'ai fait les modifs sur mon forum en ligne si tu veux voir en direct ce qui pourrait clocher.
http://cieldenuit.verygames.eu
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 10 Mar 2015 à 20:05

C'est normal, j'ai oublié la règle pour le hover à ajouter dans le CSS. :mrgreen:

Code: Tout sélectionner
.infobulle:hover > div {
	display: block;
}


De plus tu peux aussi supprimer ces deux règles car il n'y en a pas besoin sur ton style :
Code: Tout sélectionner
.content {
	overflow: visible;
}

.content > img {
	width: 100%;
	height: auto;
}


edit : c'est normal qu'on puisse changer de compte avec le champ select ? :o
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 10 Mar 2015 à 20:13

Oh impeccable, merci beaucoup ! Par contre, y'a des retours à la ligne un peu bizarre.
Pour le changement de compte, j'ai installé le mod account link qui permet de switcher entre différents comptes qu'on lie dans le panneau d'utilisateur. Comme c'est un forum rp, certains ont plusieurs comptes et il y a un compte anonyme pour les rumeurs, ce genre de trucs ^^.
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 10 Mar 2015 à 20:31

Ah oui, crotte. C'est à cause du parent qui est en inline-block.
Je vais voir s'il est possible de faire autrement.

ps : j'ai mis les identifiants du compte dans une note destinée à l'équipe pour éviter tout problème.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 12 Mar 2015 à 13:34

J'ai essayé de bidouiller (oui hein, je bidouille comme je dis ^^) le .infobulle > div en ajoutant min-width et max-width pour voir. La valeur mini fonctionne bien mais visiblement pas la max. Du moins, le contenu se contente du minimum de place sans chercher à se mettre sur toute la largeur proposé par la valeur max.

Merci pour les identifiants ;).
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 12 Mar 2015 à 15:15

Ça ne fonctionnera pas car la div est sortie du flux en absolute.

J'ai trouvé une petite fonction jQuery qui va faire l'affaire.

Voilà le code adapté au BBCode déjà créé.

Ajoute dans la fonction avant la balise fermante body dans ton overall_footer :
Code: Tout sélectionner
<script type="text/javascript">
$(function() {
    //Infobulle dans les messages
    $(".infobulle").hover(function(){
        tip = $(this).children('div');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip
 
        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);
 
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>
J'ai volontairement laissé les commentaires mais tu peux les supprimer si ça te chante. ^^

Remplace toutes les règles CSS ajoutées, par ces deux-là :
Code: Tout sélectionner
/* Infobulle dans les messages
******************************/
.infobulle {
	display: inline;
	border-bottom: 1px dotted;
	cursor: help;
}

.infobulle > div {
	color: #fff;
	background: #1d1d1d;
	display: none;
	padding: 10px;
	position: absolute;
	z-index: 1000;
	border-radius: 3px;
}


edit : ah mais non ça ne va pas puisque tu veux pouvoir accéder au contenu. :|
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar cabot » 13 Mar 2015 à 17:18

J'ai trouvé un autre plugin qui correspond à ce que tu recherches.

Récupère le fichier smallipop.css, place-le dans le dossier /theme/ et ajoute à la fin :
Code: Tout sélectionner
.sushipop {
	display: inline; /* important pour afficher la div inline */
	border-bottom: 1px dotted; /* pas important, juste pratique * /
	cursor: help; /* pas important, juste pratique * /
}

Récupère les fichiers modernizr.js et jquery.smallipop.min.js, place-les dans le dossier /template/.

Charge le CSS ajouté dans stylesheet.css :
Code: Tout sélectionner
@import url("jquery-smallipop.css");

Charge les JS dans le overall_footer.html avant la balise </body> et initialise le bouzin :
Code: Tout sélectionner
<script type="text/javascript" src="{T_TEMPLATE_PATH}/js/jquery.smallipop.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/js/modernizr.js"></script> <!-- utile pour certains navigateurs mais tu peux le zapper -->
<script type="text/javascript">
// <![CDATA[
	$('.sushipop').smallipop();
// ]]>
</script>

Utilise ce code HTML de remplacement à la place de l'autre :
Code: Tout sélectionner
<div class="sushipop">{TEXT1}<div class="smallipop-hint">{TEXT2}</div></div>
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 13 Mar 2015 à 19:30

Modifs faites mais ça ne fonctionne pas :/. J'ai peut-être fait une bourde quelque part mais j'ai refais les manips au cas où et je ne pense pas avoir fait d'erreurs.
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 13 Mar 2015 à 19:41

C'est moi qui t'ai fait faire des caboteries.

Supprime js/ dans le chemin des fichiers javascript, et vérifie que tu aies bien envoyé le fichier jquery-smallipop.css dans le dossier /theme/ du style.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 13 Mar 2015 à 20:44

Nop, toujours pas :oops: .
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 13 Mar 2015 à 20:46

Rhâââ ! :mrgreen:

URL d'une page où est affiché un tootltip, stp ?
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Infobulle avancée

Messagepar Selene Bathory » 13 Mar 2015 à 20:48

Ici normalement ^^.
On va y arriver ! Enfin tu... Moi je fais pas grand chose en fait xD.
Image
Avatar de l’utilisateur
Selene Bathory
Posteur néophyte
Posteur néophyte
 
Messages: 57
Enregistré le: 10 Fév 2014 à 15:46
Localisation: Limousin

Re: Infobulle avancée

Messagepar cabot » 13 Mar 2015 à 21:02

Alors déjà, les CSS ne sont pas prises en compte. Vérifie que la feuille de style est chargée.

Tu as un petit problème de balise dans le overall_footer.html, je ne pense pas que ça ait une incidence mais autant le corriger.
La div #wrapfooter n'est pas fermée :
Code: Tout sélectionner
<div id="wrapfooter">
	<!-- IF U_ACP --><span class="gensmall">[ <a href="{U_ACP}">{L_ACP}</a> ]</span><br /><br /><!-- ENDIF -->
	<span class="copyright">{CREDIT_LINE}


Enfin, je vois que tu as ajouté des BBCodes dans {TEXT1}, cette variable ne peut contenir qu'une portion de texte. Seul {TEXT2} peut recevoir toutes sortes de BBCodes. Il y a peut-être moyen de faire autrement en construisant le BBCode différemment mais pour le moment il est préférable de faire fonctionner celui-ci.

On va y arriver, le BBCode fonctionne très bien sur mon fofo de test.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Suivante

Retourner vers Recherches de MODs

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 3 invités