infobulle sur les acronymes et liens: comment faire?

par **BeRoots** » 15 avr. 2008, 19:18

oki je vient de m'apercevoir que tout fonctionne sous FF mais rien sous les autres navigateur (opera, IE5, IE7...)

j'ai télécharger le framework mootools en complet chez eux en version full (avec doc, commentaire,...)
j'ai fait des tonne de test sur ma methode d'utilisation mais rien de mieux

Voici mon script JS d'utilisation

Code : Tout sélectionner

var SFX = {

    start: function () {

        /**
         * definition de tout liens contenant l'attribut rel=="smooth_anchors"
         * avec un nouvelle Href d'ancre suffixer via #smooth_ 
         */
        var anchors = document.getElementsByTagName("a");
        var j = 0;

        for(var i=0; i<anchors.length; i++){
           var anchor = anchors[i];
           if(anchor.getAttribute("rel") == "smooth_anchors"){
              j++;
              anchor.href = '#smooth_'+j;
           }
        }
        /*instanciation de SmoothScroll*/
        new SmoothScroll({transition: Fx.Transitions.Quad.easeOut});

        /* on definit nbr à vide pour definir tout les id suffixer à smooth_[+QQchose] */
        var nbr = '';

        if($('smooth_'+nbr)) {
            SFX.navAppear();
        }

        if($$('acronym', '#menu_horizontal a', '#footer a', '#go_top a', 'span.info', 'span.info2', 'input.bouton_form')) {
            SFX.bubble1();
        }

        if($$('a.JS_bubble', 'a.lien_externe')) {
            SFX.bubble2();
        }
    },

    navAppear: function () {

        var topStart  = -4;
        var topNormal = 0;
        var navblock = $('body'); /*body est mon haut de page*/
        var fx = new Fx.Style(navblock, 'smooth_top',
                              {wait: false,
                               unit: 'em',
                               duration: 500,
                               transition: Fx.Transitions.Quint.easeOut}
                              );

        navblock.setStyle('smooth_top', topStart + 'em');
        fx.start(topNormal);
    },

    bubble1: function () {

        new Tips($$('.JS_bubble_notitle', '#JS_bubble_notitle', 'acronym', '#menu_horizontal a', '#footer a', '#go_top a', 'span.info', 'span.info2', 'input.bouton_form'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            className: 'bubble_notitle',
            maxTitleChars: 150,
        });
    },

    bubble2: function () {

        new Tips($$('.JS_bubble', '#JS_bubble', 'a.lien_externe'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            maxTitleChars: 150,
        });
    }
}

window.addEvent('domready', SFX.start);

J'ai inclue une feuille de style pour les Tips de mootools.

Je comprend pas comment est ce possible que cela fonctionne à merveille sous FF et pas sous les autres navigateurs.

C'est étrange mais sur les démos en ligne de mootools, tout fonctionne sous tout navigateur

Si vous souhaiter vous rendre compte par vous même, cliquer ici

Merci d'avance pour vos conseils éclairé

par **BeRoots** » 03 avr. 2008, 06:39

hmmm j'avais oublier les appel aux fonctions bubble dans ma fonction Start

J'ai aussi recuperer la derniere version sur leur site (1.11)

maintenant j'ai mes 3 divs de classe tool-tip, tool-title et tool-text et j'ai ma div bubble_notitle-tip

voici je html inserer par Tips

Code : Tout sélectionner

<div class="bubble_notitle-tip" style="position: absolute; top: 0pt; left: 0pt; visibility: hidden; opacity: 0;">
   <div/>  // noter ici le default sur div !!!! au lieu d'avoir div bubble_notitle-titre en hidden et bubble_notitle-text
</div>
<div class="tool-tip" style="position: absolute; top: 401px; left: 417px; visibility: hidden; opacity: 0;">
   <div> 
      <div class="tool-title">
         <span>Chapitre 1</span>
      </div>
      <div class="tool-text">
         <span>Derrière le pseudonyme</span>
      </div>
   </div>
</div>

voici je js:

var SFX = {

    start: function () {

        var anchors = document.getElementsByTagName("a");
        var j = 0;

        /* loop through all anchor tags */
        for(var i=0; i<anchors.length; i++){
           var anchor = anchors[i];
           if(anchor.getAttribute("rel") == "smooth_anchors"){
              j++;
              anchor.href = '#smooth_'+j;
           }
        }

        new SmoothScroll({transition: Fx.Transitions.Quad.easeOut});
        

        /*XXXXXXXXXX execution des divers fonctions appeler XXXXXXXXXX*/
        /* on definit nbr à vide pour definir tout les id suffixer à smooth_[+QQchose] */

        var nbr = '';
        if($('smooth_'+nbr)) {
            SFX.navAppear();
        }

        if($$('acronym a.info a.info2 #aide #info #font_size_less #font_size_more #mailto #alternate_stylesheet')) {
            SFX.bubble1();
        }

        if($$('a.JS_bubble')) {
            SFX.bubble2();
        }
    },

    navAppear: function () {

        var topStart  = -4;
        var topNormal = 0;
        var navblock = $('body');
        var fx = new Fx.Style(navblock, 'smooth_top',
                              {wait: false,
                               unit: 'em',
                               duration: 600,
                               transition: Fx.Transitions.Quint.easeOut}
                              );

        navblock.setStyle('top', topStart + 'em');
        fx.start(topNormal);
    },

    bubble1: function () {

        new Tips($$('acronym a.info a.info2 #aide #info #font_size_less #font_size_more #mailto #alternate_stylesheet'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            className: 'bubble_notitle',
            maxTitleChars: 150,
            showDelay: 200,
            hideDelay: 200,
            fixed: true
        });
    },

    bubble2: function () {

        new Tips($$('a.JS_bubble'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            maxTitleChars: 150,
            showDelay: 200,
            hideDelay: 200,
            fixed: true
        });
    }
}

window.addEvent('domready', SFX.start);

mon soucis est maintenant le plantage de mes mise en style des acronym qui ne sont plus souligner. Dans le HTML, au survole des differents objets cibles pour les infobulles, j'ai bien mes divs qui prennent un style pour les position mais visibility reste à hidden au lieu de passer à visible et opacity ne passe pas non plus à 1 mais reste à 0...

pourtant aucune erreur sur mon script n'est retourner par firedebug...

j'ai bien essayer de faire tres simple en appelant uniquement la fonction bubble2 sur les lien d'id #JS_bubble mais cela ne fonctionne pas non plus

si quelqu'un à une idée car là je commence à secher...

EDIT: OK J'AI REUSSI A FAIRE CE QUE JE SOUHAITAI ... ENCORE MERCI

par **Hywan** » 02 avr. 2008, 22:49

Bah je sais pas. Montre le code pour voir ?
Sinon va voir sur le forum de Mootools, il est vraiment très très bien.

par **BeRoots** » 02 avr. 2008, 20:55

oui oui. l'objet Tips est bien dans le framfork

j'ai fait des essai mais rien faire

je n'est pas création des 3 divs de classe : tool-tip, tool-title et tool-text !!!

j'ai essayer avec leur syntaxe et la tiennes aussi. j'ai aussi fait essai sur aronym uniquement et même vider cache de FF au cas où mais rien de mieux

par **Hywan** » 02 avr. 2008, 17:07

Est-ce que l'objet Tips est dans ta version de Mootools ? Par défaut, il n'y est pas je crois, même en version complète (du moins à l'époque

).

par **BeRoots** » 02 avr. 2008, 08:24

oki merci grand chef

pour ta question, je dirai CSS oui et JS plutot bien mais mon réel default du moment reside encore sur la programation orienté objet et la bonne comprehention des classe (mieux en php que JS en tous cas)

sinon, je pense que je vais pouvoir m'en sortir comme un chef

EDIT: j'ai parlé trop vite je croit...

j'ai suivit la procedure pour les scrolls et les tips. mon scroll marche bien mais pour ce qui est des Tips, j'ai pas moyen d'avoir quoi que ce soit...

voici mon JS:

var SFX = {

    start: function () {

        var anchors = document.getElementsByTagName("a");
        var j = 0;

        // loop through all anchor tags
        for(var i=0; i<anchors.length; i++){
           var anchor = anchors[i];
           if(anchor.getAttribute("rel") == "smooth_anchors"){
              j++;
              anchor.href = '#smooth_'+j;
           }
        }

        new SmoothScroll({transition: Fx.Transitions.Quad.easeOut});
        // on definit nbr à vide pour definir tout les id suffixer à smooth_[+QQchose]
        var nbr = '';
        if($('smooth_'+nbr)) {
            Site.navAppear();
        }
    },

    navAppear: function () {

        var topStart  = -4;
        var topNormal = 0;
        var navblock = $('body');
        var fx = new Fx.Style(navblock, 'smooth_top',
                              {wait: false,
                               unit: 'em',
                               duration: 400,
                               transition: Fx.Transitions.Quint.easeOut}
                              );

        navblock.setStyle('top', topStart + 'em');
        fx.start(topNormal);
    },

    Bubble1: function () {

        new Tips($$('acronym a span.info span.info2'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            className: 'bubble_notitle',
            maxTitleChars: 150
        });
    },

    Bubble2: function () {

        new Tips($$('a.JS_screenshoot'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            maxTitleChars: 150
        });
    }
}

window.addEvent('domready', SFX.start);

je n'est pas création des 3 divs de classe : tool-tip, tool-title et tool-text !!!

si quelqu'un à une idée sur le pourquoi du comment ?
merci d'avance

par **Hywan** » 02 avr. 2008, 07:44

Salut,

est-ce que tu as été voir le code source ? Il y a deux parties à voir pour faire les infobulles : Asset/Script/Site.js et Css/Base.css ; à chaque fois, tout en bas des fichiers.
Je te mets le code Javascript :

Code : Tout sélectionner

var Site {
    title: function () {

        new Tips($$('[title]'), {
            initialize: function () {
                this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 300, wait: false}).set(0);
            },
            onShow: function(toolTip) {
                this.fx.start(1);
            },
            onHide: function(toolTip) {
                this.fx.start(0);
            },
            showDelay: 200,
            hideDelay: 200,
            fixed: true
        });
    }
}

Ce code Javascript va générer des div. On va donc les habiller. Voici le CSS :

Code : Tout sélectionner

.tool-tip {
    color: #fff;
    z-index: 13000;
    background: transparent url("../Image/TitleBkg.png") 0 0 repeat;
}

.tool-title {
    display: none;
}

.tool-text {
    font-size: 80%;
    margin: .5em 1em;
    padding: 0 0 0 25px;
    background: transparent url("../Image/Title.png") 0 50% no-repeat;
}

J'ai un peu personnalisé le CSS mais tu devrais comprendre qu'il génère 3 divs de classe : tool-tip, tool-title et tool-text. Amuses toi à bidouiller, tu vas comprendre comment ça marche.

Quelques liens :

Avec ça, t'es équipé

.

Questions maintenant : est-ce que tu comprends le Javascript ? Est-ce que tu comprends le CSS ?

par **BeRoots** » 02 avr. 2008, 02:24

salut à tous

J'aimerai avoir des infobulles en png sur mes acronym et liens (sauf menus). j'ai regarder sur mootools qui est un p'tits frameforws JS mais pas moyen de bien comprendre comment il s'utilise...

j'aimerai bien faire un truc du genre comme sur le site HOA de notre fidele compagon Hywan...

si quelqu'un à des conseils pour l'utilisation de mootools pour créé mes infobulles pour les accronym et touts les liens (de tel ou tel class ou tel ou tel conteneur)?

merci d'avance

infobulle sur les acronymes et liens: comment faire?

Répondre

Étendre la vue Revue du sujet : infobulle sur les acronymes et liens: comment faire?

infobulle sur les acronymes et liens: comment faire?