Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Yoshkill le Lun 26 Sep 2011 - 23:42

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.


Dernière édition par Yoshkill le Mar 27 Sep 2011 - 20:35, édité 2 fois
Yoshkill

Yoshkill
*****

Masculin
Messages : 629
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

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

Message par Yoshkill le Mar 27 Sep 2011 - 18:51

UP
Yoshkill

Yoshkill
*****

Masculin
Messages : 629
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

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

Message par Adam_sfp le Mar 27 Sep 2011 - 19:07

Bonjour

Et en mettant
Code:
 tabLocation: 'bottom',
dans le 1er script?

Cordialement.

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

Adam_sfp
Membre actif

Masculin
Messages : 4426
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

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

Message par Yoshkill le Mar 27 Sep 2011 - 19:26

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...
Yoshkill

Yoshkill
*****

Masculin
Messages : 629
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

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

Message par Adam_sfp le Mar 27 Sep 2011 - 19:50

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"
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4426
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

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

Message par Yoshkill le Mar 27 Sep 2011 - 20:04

Merci beaucoup, on dirait que ça fonctionne. Smile
Yoshkill

Yoshkill
*****

Masculin
Messages : 629
Inscrit(e) le : 13/05/2008

http://ssb4.com
Yoshkill a été remercié(e) par l'auteur de ce sujet.

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

Message par Adam_sfp le Mar 27 Sep 2011 - 20:12

thumright

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

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur Positionner une chatbox latérale à partir du bas de l'écran (javascript) Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Positionner une chatbox latérale à partir du bas de l'écran (javascript) 50378

A bientôt sur ForumActif Smile
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4426
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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