Positionner une chatbox latérale à partir du bas de l'écran (javascript)

[Yoshkill]

Bonjour,

Tout d'abord je voudrais remercier l'équipe de Forumactif et en particulier Narcismirk qui m'a beaucoup aidé à installer une chatbox déroulante sur mon forum.

Mais j'ai un petit soucis : il y a quelque-part dans mon script une variable "topPos" qui permet de positionner ma chatbox à partir du haut de l'écran. Je voudrais la mettre plutôt en bas, mais si je la met trop bas, elle sera à moitié masquée sur certains écrans et pas sur d'autres.

Donc je veux pouvoir la positionner à partir du bas de l'écran. Comment m'y prendre ?

Voici les javascripts que j'utilise :

Code:

$(function(){
                        $('.slide-out-div').tabSlideOut({
                            tabHandle: '.handle',                    //class of the element that will become your tab
                            pathToTabImage: 'http://www.hapshack.com/images/cbnewnew.png', //path to the image for the tab //Optionally can be set using css
                            imageHeight: '340px',                    //height of tab image          //Optionally can be set using css
                            imageWidth: '100px',                      //width of tab image            //Optionally can be set using css
                            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
                            speed: 300,                              //speed of animation
                            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
                            topPos: '300px',                          //position from the top/ use if tabLocation is left or right
                            fixedPosition: true                      //options: true makes it stick(fixed position) on scroll
                        });
             
                    });

Code:

/*
                    tabSlideOUt v1.3
               
                    By William Paoli: http://wpaoli.building58.com
             
                    To use you must have an image ready to go as your tab
                    Make sure to pass in at minimum the path to the image and its dimensions:
               
                    example:
               
                        $('.slide-out-div').tabSlideOut({
                                tabHandle: '.handle',                        //class of the element that will be your tab -doesnt have to be an anchor
                                pathToTabImage: 'images/contact_tab.gif',    //relative path to the image for the tab
                                imageHeight: '133px',                        //height of tab image
                                imageWidth: '44px',                          //width of tab image
                        });
             
                    or you can leave out these options
                    and set the image properties using css
               
                */
             
             
                (function($){
                    $.fn.tabSlideOut = function(callerSettings) {
                        var settings = $.extend({
                            tabHandle: '.handle',
                            speed: 300,
                            action: 'click',
                            tabLocation: 'left',
                            topPos: '300px',
                            fixedPosition: true,
                            positioning: 'absolute',
                            pathToTabImage: null,
                            imageHeight: null,
                            imageWidth: null,
                            onLoadSlideOut: false                 
                        }, callerSettings||{});
             
                        settings.tabHandle = $(settings.tabHandle);
                        var obj = this;
                        if (settings.fixedPosition === true) {
                            settings.positioning = 'fixed';
                        } else {
                            settings.positioning = 'absolute';
                        }
                   
                        //ie6 doesn't do well with the fixed option
                        if (document.all && !window.opera && !window.XMLHttpRequest) {
                            settings.positioning = 'absolute';
                        }
                   
             
                   
                        //set initial tabHandle css
                   
                        if (settings.pathToTabImage != null) {
                            settings.tabHandle.css({
                            'background' : 'url('+settings.pathToTabImage+') no-repeat',
                            'width' : settings.imageWidth,
                            'height': settings.imageHeight
                            });
                        }
                   
                        settings.tabHandle.css({
                            'display': 'block',
                            'textIndent' : '-99999px',
                            'outline' : 'none',
                            'position' : 'absolute'
                        });
                   
                        obj.css({
                            'line-height' : '1',
                            'position' : settings.positioning
                        });
             
                   
                        var properties = {
                                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                                };
             
                        //set calculated css
                        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
                            obj.css({'left' : settings.leftPos});
                            settings.tabHandle.css({'right' : 0});
                        }
                   
                        if(settings.tabLocation === 'top') {
                            obj.css({'top' : '-' + properties.containerHeight});
                            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
                        }
             
                        if(settings.tabLocation === 'bottom') {
                            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
                            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
                       
                        }
                   
                        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
                            obj.css({
                                'height' : properties.containerHeight,
                                'top' : settings.topPos
                            });
                       
                            settings.tabHandle.css({'top' : 0});
                        }
                   
                        if(settings.tabLocation === 'left') {
                            obj.css({ 'left': '-' + properties.containerWidth});
                            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
                        }
             
                        if(settings.tabLocation === 'right') {
                            obj.css({ 'right': '-' + properties.containerWidth});
                            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
                       
                            $('html').css('overflow-x', 'hidden');
                        }
             
                        //functions for animation events
                   
                        settings.tabHandle.click(function(event){
                            event.preventDefault();
                        });
                   
                        var slideIn = function() {
                       
                            if (settings.tabLocation === 'top') {
                                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'left') {
                                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'right') {
                                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'bottom') {
                                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
                            }
                       
                        };
                   
                        var slideOut = function() {
                       
                            if (settings.tabLocation == 'top') {
                                obj.animate({top:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'left') {
                                obj.animate({left:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'right') {
                                obj.animate({right:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'bottom') {
                                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
                            }
                        };
             
                        var clickScreenToClose = function() {
                            obj.click(function(event){
                                event.stopPropagation();
                            });
                       
                            $(document).click(function(){
                                slideIn();
                            });
                        };
                   
                        var clickAction = function(){
                            settings.tabHandle.click(function(event){
                                if (obj.hasClass('open')) {
                                    slideIn();
                                } else {
                                    slideOut();
                                }
                            });
                       
                            clickScreenToClose();
                        };
                   
                        var hoverAction = function(){
                            obj.hover(
                                function(){
                                    slideOut();
                                },
                           
                                function(){
                                    slideIn();
                                });
                           
                                settings.tabHandle.click(function(event){
                                    if (obj.hasClass('open')) {
                                        slideIn();
                                    }
                                });
                                clickScreenToClose();
                           
                        };
                   
                        var slideOutOnLoad = function(){
                            slideIn();
                            setTimeout(slideOut, 500);
                        };
                   
                        //choose which type of action to bind
                        if (settings.action === 'click') {
                            clickAction();
                        }
                   
                        if (settings.action === 'hover') {
                            hoverAction();
                        }
                   
                        if (settings.onLoadSlideOut) {
                            slideOutOnLoad();
                        };
                   
                    };
                })(jQuery);

Et voici ce que j'ai mis dans le template "Overhall_header" :

Code:

<!-- Slide chatbox -->
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<iframe src=http://ssbs.superforum.fr/chatbox/index.forum?page=front  width=700 height=400 frameborder=0 border=0 marginwidth=0 marginheight=0 scrolling=no></iframe>
</div>

Merci d'avance pour votre aide.

[Yoshkill]

UP

[Adam_sfp]

Bonjour

Et en mettant

Code:

 tabLocation: 'bottom',

dans le 1er script?

Cordialement.

*oups mal perçu votre question je pensai à l'ouverture du slide

[Yoshkill]

En effet je me suis p-ê mal exprimé.

En fait il me faudrait l'équivalent de topPos mais dans l'autre sens... une sorte de "bottomPos" (nom inventé), si vous voyez ce que je veux dire...

[Adam_sfp]

Bonsoir

Essayez en changeant le 2 ème script par celui ci

Code:

/*
                    tabSlideOUt v1.3
               
                    By William Paoli: http://wpaoli.building58.com
             
                    To use you must have an image ready to go as your tab
                    Make sure to pass in at minimum the path to the image and its dimensions:
               
                    example:
               
                        $('.slide-out-div').tabSlideOut({
                                tabHandle: '.handle',                        //class of the element that will be your tab -doesnt have to be an anchor
                                pathToTabImage: 'images/contact_tab.gif',    //relative path to the image for the tab
                                imageHeight: '133px',                        //height of tab image
                                imageWidth: '44px',                          //width of tab image
                        });
             
                    or you can leave out these options
                    and set the image properties using css
               
                */
             
             
                (function($){
                    $.fn.tabSlideOut = function(callerSettings) {
                        var settings = $.extend({
                            tabHandle: '.handle',
                            speed: 300,
                            action: 'click',
                            tabLocation: 'left',
                            topPos: '200px',
                            leftPos: '20px',
                            fixedPosition: false,
                            positioning: 'absolute',
                            pathToTabImage: null,
                            imageHeight: null,
                            imageWidth: null,
                            onLoadSlideOut: false                 
                        }, callerSettings||{});
             
                        settings.tabHandle = $(settings.tabHandle);
                        var obj = this;
                        if (settings.fixedPosition === true) {
                            settings.positioning = 'fixed';
                        } else {
                            settings.positioning = 'absolute';
                        }
                   
                        //ie6 doesn't do well with the fixed option
                        if (document.all && !window.opera && !window.XMLHttpRequest) {
                            settings.positioning = 'absolute';
                        }
                   
             
                   
                        //set initial tabHandle css
                   
                        if (settings.pathToTabImage != null) {
                            settings.tabHandle.css({
                            'background' : 'url('+settings.pathToTabImage+') no-repeat',
                            'width' : settings.imageWidth,
                            'height': settings.imageHeight
                            });
                        }
                   
                        settings.tabHandle.css({
                            'display': 'block',
                            'textIndent' : '-99999px',
                            'outline' : 'none',
                            'position' : 'absolute'
                        });
                   
                        obj.css({
                            'line-height' : '1',
                            'position' : settings.positioning
                        });
             
                   
                        var properties = {
                                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                                };
             
                        //set calculated css
                        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
                            obj.css({'left' : settings.leftPos});
                            settings.tabHandle.css({'right' : 0});
                        }
                   
                        if(settings.tabLocation === 'top') {
                            obj.css({'top' : '-' + properties.containerHeight});
                            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
                        }
             
                        if(settings.tabLocation === 'bottom') {
                            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
                            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
                       
                        }
                   
                        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
                            obj.css({
                                'height' : properties.containerHeight,
                                'bottom' : settings.topPos
                            });
                       
                            settings.tabHandle.css({'bottom' : 0});
                        }
                   
                        if(settings.tabLocation === 'left') {
                            obj.css({ 'left': '-' + properties.containerWidth});
                            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
                        }
             
                        if(settings.tabLocation === 'right') {
                            obj.css({ 'right': '-' + properties.containerWidth});
                            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
                       
                            $('html').css('overflow-x', 'hidden');
                        }
             
                        //functions for animation events
                   
                        settings.tabHandle.click(function(event){
                            event.preventDefault();
                        });
                   
                        var slideIn = function() {
                       
                            if (settings.tabLocation === 'top') {
                                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'left') {
                                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'right') {
                                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
                            } else if (settings.tabLocation === 'bottom') {
                                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
                            }
                       
                        };
                   
                        var slideOut = function() {
                       
                            if (settings.tabLocation == 'top') {
                                obj.animate({top:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'left') {
                                obj.animate({left:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'right') {
                                obj.animate({right:'-3px'},  settings.speed).addClass('open');
                            } else if (settings.tabLocation == 'bottom') {
                                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
                            }
                        };
             
                        var clickScreenToClose = function() {
                            obj.click(function(event){
                                event.stopPropagation();
                            });
                       
                            $(document).click(function(){
                                slideIn();
                            });
                        };
                   
                        var clickAction = function(){
                            settings.tabHandle.click(function(event){
                                if (obj.hasClass('open')) {
                                    slideIn();
                                } else {
                                    slideOut();
                                }
                            });
                       
                            clickScreenToClose();
                        };
                   
                        var hoverAction = function(){
                            obj.hover(
                                function(){
                                    slideOut();
                                },
                           
                                function(){
                                    slideIn();
                                });
                           
                                settings.tabHandle.click(function(event){
                                    if (obj.hasClass('open')) {
                                        slideIn();
                                    }
                                });
                                clickScreenToClose();
                           
                        };
                   
                        var slideOutOnLoad = function(){
                            slideIn();
                            setTimeout(slideOut, 500);
                        };
                   
                        //choose which type of action to bind
                        if (settings.action === 'click') {
                            clickAction();
                        }
                   
                        if (settings.action === 'hover') {
                            hoverAction();
                        }
                   
                        if (settings.onLoadSlideOut) {
                            slideOutOnLoad();
                        };
                   
                    };
                })(jQuery);

Cordialement.


*modifiez tjrs la valeur toppos qui normalement agit comme un "bottompos"

[Yoshkill]

Merci beaucoup, on dirait que ça fonctionne.

[Adam_sfp]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif