[PHPBB3] Aller en bas de page mais plus haut

Bonjour à tous les milouziens,

J'ai un bouton placé sur la barre notification sur toutes les pages pour aller directement sur la chatbox.

En cliquant sur ce bouton, je souhaiterais atteindre directement la chatbox en bas de page d'accueil.

Avec ce code j'arrive tout en bas de la page d'accueil.

Code:

$(function(){$(function(){
    $('#fa_chat_button').attr('title','Cliquer pour rejoindre la Chatbox').click(function(){
    $(this).attr('href','/#bottom');
    });
    })});


Y-a-t-il une possibilité d'arriver directement avec juste le bas de la chtabox en bas de page, c'est à dire en se décalant un peu vers le haut pour ne pas avoir la partie basse de la barre d'accueil.



Merci pour votre aide.

Hello Serge,
ce script sert à mettre une infobulle sur une div nommée:

Code:

#fa_chat_button

Il faudrait le script qui place cette fameuse div Serge .

Bonsoir Philippe,

Désolé, il me semblait que c'était la seconde partie du script donné là haut qui au click envoyait vers la chatbox en bas de page.

Sinon, le script de la chatbox est celui-ci:

Code:

// original ici https://forum.forumactif.com/t391323-integrer-la-chatbox-a-la-toolbar
(function() {
    if (!window.FA) window.FA = {};
    if (FA.Chat) {
        if (window.console) console.warn('FA.Chat has already been initialized');
        return;
    }

    FA.Chat = {

        // chatbox settings
        config: {
            height: '0px',
            width: '0px',
            live_notif: true,
            sound_notif: {
                enabled: true,
                file: 'https://illiweb.com/fa/fdf/future.mp3'
            },
            notifRate: 10000
        },

        // language settings
        lang: {
            chatbox: 'Chatbox',
            new_msg: 'Un nouveau message a été posté sur la <a href="javascript:FA.Chat.toggle();">chatbox</a>.'
        },

        // technical data below
        node: {}, // node cache
        users: 0, // users in chat
        messages: 'initial', // total chat messages
        actif: false, // tells us if the chatbox is opened
        notifActif: false, // tells us if the notifications are active

        // initial setup of the chatbox
        init: function() {
            var right = document.getElementById('fa_right'),
                container = document.createElement('DIV'),
                button = document.createElement('A'),
                audio;

            button.id = 'fa_chat_button';
            button.innerHTML = FA.Chat.lang.chatbox + ' <span id="fa_chatters">(0)</span>';
           // button.onclick = FA.Chat.toggle;
            FA.Chat.node.button = button;

            container.id = 'fa_chat_container';
            container.innerHTML = '<iframe id="fa_chat" src="/chatbox/index.forum"></iframe>';
            
            container.style.visibility = 'hidden';

            if (right) {
                right.insertBefore(button, right.lastChild); // add the chat button to the right side of the toolbar
                document.body.appendChild(container);

                // create the notification audio element
                if (FA.Chat.config.sound_notif.enabled) {
                    audio = document.createElement('AUDIO');
                    audio.src = FA.Chat.config.sound_notif.file;
                    if (audio.canPlayType) {
                        FA.Chat.node.audio = audio;
                        document.body.appendChild(audio);
                    }
                }

                FA.Chat.node.container = document.getElementById('fa_chat_container');
                FA.Chat.node.chatters = document.getElementById('fa_chatters');
                FA.Chat.node.frame = document.getElementById('fa_chat');
                FA.Chat.node.frame.onload = FA.Chat.getFrame;
            }

            delete FA.Chat.init;
        },

        // get the frame window, document, and elements
        getFrame: function() {
            if (FA.Chat.poll) window.clearInterval(FA.Chat.poll);
            if (this.contentDocument || this.contentWindow) {
                FA.Chat.window = this.contentWindow;
                FA.Chat.document = this.contentDocument ? this.contentDocument : FA.Chat.window.document;

                FA.Chat.node.message = FA.Chat.document.getElementById('message');
                FA.Chat.node.members = FA.Chat.document.getElementById('chatbox_members');

                FA.Chat.poll = window.setInterval(FA.Chat.listen, 300); // listen for changes every 0.3 seconds
            }
        },

        // listen for changes in the chatbox
        listen: function() {
            var users = FA.Chat.node.members.getElementsByTagName('LI').length,
                messages = FA.Chat.window.chatbox.messages.length;

            // update user count
            if (users > FA.Chat.users || users < FA.Chat.users) {
                FA.Chat.users = users;
                FA.Chat.node.chatters.innerHTML = '(' + FA.Chat.users + ')';
            }

            // initial / active updates
            if ((FA.Chat.messages == 'initial' && messages) || FA.Chat.notifActif || FA.Chat.actif) FA.Chat.messages = messages;

            // notify new messages while connected and the chatbox is closed
            if (!FA.Chat.actif && !FA.Chat.notifActif && FA.Chat.window.chatbox.connected && (messages > FA.Chat.messages || messages < FA.Chat.messages)) {
                FA.Chat.messages = messages; // update message count
                FA.Chat.notifActif = true;

                if (FA.Chat.config.live_notif) FA.Chat.notify(FA.Chat.lang.new_msg); // show live notification
                if (FA.Chat.config.sound_notif.enabled && FA.Chat.node.audio) FA.Chat.node.audio.play(); // play sound notification

                // wait before notifying the user again
                window.setTimeout(function() {
                    FA.Chat.notifActif = false;
                }, FA.Chat.config.notifRate);
            }
        },

        // create a custom notification
        notify: function(msg) {

            var notif = document.createElement('DIV'),
                live = document.getElementById(Toolbar.LIVE_NOTIF);

            notif.className = 'fa_notification';
            notif.innerHTML = '<div class="content ellipsis">' + msg + '</div>';
            notif.style.display = 'none';

            $(notif).mouseover(function() {
                $(this).stop(true, true)
            });
            $(notif).mouseleave(function() {
                $(this).delay(5000).fadeOut()
            });

            live.insertBefore(notif, live.firstChild);
            $(notif.firstChild).dotdotdot();

            $(notif).fadeIn(100, function() {
                $(this).delay(10000).fadeOut()
            });
        },

        // toggle the display state of the chatbox
        toggle: function() {
            var container = FA.Chat.node.container.style;

            if (/hidden/i.test(container.visibility)) {
                FA.Chat.node.button.className = 'fa_chat_active';
                FA.Chat.actif = true;

                container.visibility = 'visible';
                container.bottom = '3px';

                // auto focus the message field
                window.setTimeout(function() {
                    FA.Chat.node.message.focus();
                }, 350); // some browsers ( firefox ) need a delay
            } else {
                FA.Chat.node.button.className = '';
                FA.Chat.actif = false;

                container.visibility = 'hidden';
                container.bottom = '-' + FA.Chat.config.height;
            }
        }

    };

    $(function() {
        // initialize the chat when the document is ready and the user is logged in
        if (_userdata.session_logged_in) $(FA.Chat.init);
    });
})();



//Aller en bas de page quand on clique sur le bouton + title
$(function(){$(function(){
    $('#fa_chat_button').attr('title','Cliquer pour rejoindre la Chatbox').click(function(){
    $(this).attr('href','/#bottom');
    });
    })});

//retirer les lignes de connexions et déconnexions chatbox ttes pages
$(window).load(function() {
 var chatbox_script = function() {
            $('#chatbox > p > .msg > span').filter('[style="color:green"],[style="color:red"]').closest('p').remove();
            var overrided = Chatbox.prototype.refresh;
            Chatbox.prototype.refresh = function(data) {
              if (data.messages && data.messages.length) {
                data.messages = $.grep(data.messages, function(v) {
                  return v.userId != -10 || $.inArray(v.msgColor, ["red", "green"]) == -1;
                });
              }
              overrided.call(this, data);
            };
          };
          var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function()
{this.appendChild(s.cloneNode(true))})}catch(a){}})
        });

//message à la connexion d'un membre à la chatbox
$(window).load(function() {
          var chatbox_script = function() {
            $('#chatbox_option_co').click(function(){
              $('#chatbox').addClass('recently-connected');
              setTimeout(function(){ $('#chatbox').removeClass('recently-connected') }, 60000)
            })
          };
          var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox/index.forum"],iframe[src^="/chatbox/index.forum"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
        });

Pour info, j'y ai retiré ce qui faisait afficher la chatbox pour éviter d'en avoir 2, car celle de FA me va bien ainsi , et en fait seul le bouton et la fonction sonore m'intéressent dans ce script.
C'est la 1iere page de mes JS si tu en as besoin.

Merci pour ton aide.

Hello Serge,
oki merci,
donc en faite le click sur le bouton figurant sur la toolbar mène en bas de page grâce
à l'appel de l'ancre :

Code:

#bottom

On va donc déposer notre propre ancre dans le template et lui attribuer une position absolute et un margin-top négatif:

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

Recherches cette ligne:

Code:

<!-- BEGIN switch_chatbox_activate -->

Juste avant , déposes ceci:

Code:


<a id="M14_CHATBOX_NAME"style="position: absolute;margin-top:-80px;"></a>


Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis

Ensuite, dans le script, modifies celui-ci:

Code:


//Aller en bas de page quand on clique sur le bouton + title
$(function(){$(function(){
    $('#fa_chat_button').attr('title','Cliquer pour rejoindre la Chatbox').click(function(){
    $(this).attr('href','/#bottom');
    });
    })});


Par:

Code:


$(function(){$(function(){
    $('#fa_chat_button').attr('title','Cliquer pour rejoindre la Chatbox').click(function(){
    $(this).attr('href','/#M14_CHATBOX_NAME');
    });
    })});


Tu devrais pouvoir arriver à tes fins en modifiant éventuellement la valeur négative du margin-top

Bonjour Philippe,

C'est parfait ainsi

Un grand merci à toi l'ami

Hello Serge,
de rien mon ami .

-Staff du Forum Milouze14- Hello  Sujet résolu et déplacé dans le forum adéquat. Pour toute information,merci de contacter un Membre du Staff