Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mer 3 Avr 2013 - 16:36
coucou ,

suite au tutoriel proposé par fascicularia que je remercie encore une fois clin oeil :
http://www.milouze14.com/t24270-infobulles-en-utilisant-tooltips#503451

Je vais vous proposer d'avoir un rendu vraiment superbe avec le plugin Jquery Vertigo Tip

L’aperçu en image :




On commence à placer par le plugin :
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Donnez un titre explicite hinhin puis cochez "Sur toutes les pages".


Code:

/**
Vertigo Tip by www.vertigo-project.com
Requires jQuery
*/

this.vtip = function() { 
    this.xOffset = 40; // x  distance sur la gauche de la bulle par rapport au curseur
    this.yOffset = 10; // y distance sur la hauteur de la bulle par rapport au curseur
 
    $(".vtip").unbind().hover( 
        function(e) {
            this.t = this.title;
            this.title = '';
            this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
         
            $('body').append( '<a id="vtip"><img id="vtipArrow" />' + this.t + '</a>' );
                     
            $('a#vtip #vtipArrow').attr("src", 'http://i74.servimg.com/u/f74/11/26/21/37/note-p10.png');
            $('a#vtip').css("top", this.top+"px").css("left", this.left+"px").fadeIn("slow");
         
        },
        function() {
            this.title = this.t;
            $("a#vtip").fadeOut("slow").remove();
        }
    ).mousemove(
        function(e) {
            this.top = (e.pageY + yOffset);
            this.left = (e.pageX + xOffset);
                     
            $("a#vtip").css("top", this.top+"px").css("left", this.left+"px");
        }
    );         
 
};

jQuery(document).ready(function($){vtip();})

Vous pouvez changer l'image dans le plugin qui sera présente dans l'infobulle :

https://i74.servimg.com/u/f74/11/26/21/37/note-p10.png


Cliquez enfin sur Valid .





Dans le template:
Affichage/Templates/Général/topics_list_box

Recherchez ceci:

Code:

<!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
<!-- END switch_description -->


Remplacez par ceci:


Code:

<!-- BEGIN switch_description -->
         <span class="genmed">
<br /><a class="vtip"title="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}">Description</a>
         </span>
<!-- END switch_description -->

Modifiez le titre "Description" si besoin clin oeil .

Pensez à enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:

/*Infobulle de la description des sujets*/
/*Le titre*/
a.vtip
{
color:black;/*le texte de couleur noire*/
margin-left:20px;/*on decale le texte de 20px de la gauche*/
text-decoration:none !important;/*on supprime le soulignement*/
cursor:pointer;/*on donne un type de curseur  */
}
/*L apparence de l infobulle*/
a#vtip
{
display: none;/*NE PAS CHANGER*/
position: absolute;/*NE PAS CHANGER*/
padding: 10px;/*on aura un espace de 10px sur l ensemble de l infobulle*/
font-size:10px;/*on donne une taille de police*/
background-color:darkred;/*la couleur de fond rouge de l infobulle*/
color:#ffffff;/*le texte de couleur blanc*/
border: 1px solid blue;/*la bordure avec une epaisseur de 1 px etant solid et des couleur bleue*/
-webkit-border-radius: 6px;/*les bordures arrondies pour les navigateurs recents*/
-moz-border-radius: 6px;
border-radius: 6px;
}
/*le positionnement de l image dans l infobulle*/
a#vtip #vtipArrow
{
position: absolute;/*NE PAS CHANGER*/
top: -10px;/*l image sort sur la hauteur*/
left:2px ;/*l image se deplace de la gauche*/
}



Pensez à valider les modifications en cliquant sur le bouton Valid .



Le tutoriel est désormais terminé admirez le travail les ami(e)s hinhin .




oups Sniff çà marche pas :ggff:

regardeplusbas



Si rien ne fonctionne:

Si le plugin ne fonctionne pas , il s'agit en fait d'un conflit avec d'autres scripts.

Dans ce cas éditez votre plugin et décochez toutes les cases et validez de nouveau.

Repérez ensuite le lien de votre javascript qui devrait ressembler à ceci:
http://votreforum/000000.js
et insérez le à la la place de:
"LE LIEN DU JAVASCRIPT"

Code:
<script src="LE LIEN DU JAVASCRIPT"type="text/javascript"></script>

Dans le template:

Dans le template:
Affichage/Templates/Général/topics_list_box

Copiez tout en bas de page le code avec le lien du JAVASCRIPT
Code:
<script src="http://votreforum/000000.js"type="text/javascript"></script>


Pensez à enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout

Voilà, c'est tout pour le moment clin oeil .













Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mer 1 Mai 2013 - 8:22
coucou,
petite correction dans la C.S.S sur un commentaire qui faisait bugger l'apparence du forum clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

  
  • © PunBB | Signaler un abus