Mettre mon panneau coulissant à droite.

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

Résolu Mettre mon panneau coulissant à droite.

Message par Stanislava le Mar 13 Mar 2012 - 10:13

Bonjour tout le monde!

J'ai ajouté un panneau coulissant sur mon forum à l'aide de ce sujet (http://forum.forumactif.com/t314153-panneaux-coullisant-qui-ne-fonctionne-pas) mais je voudrais savoir comment le mettre à droite comme l'indique mon titre! J'ai essayé de changer plusieurs mais cela ne marchait pas >< Que dois-je changer dans mon js ou autre code?

Merci d'avance pour vos réponses! (:

Edit > Et aussi, je voudrais qu'il soit fixe! C'est-à-dire qu'il s'affiche toujours lorsqu'on descend.


Dernière édition par Stanislava le Mar 13 Mar 2012 - 11:55, édité 1 fois

Stanislava
Nouveau membre

Messages : 28
Inscrit(e) le : 09/03/2012

http://sweetsdreams.forumgratuit.org
Stanislava a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre mon panneau coulissant à droite.

Message par Final-Blonde le Mar 13 Mar 2012 - 10:29

Bonjour,

Peux tu fournir les codes HTML et CSS que tu as pour ce panneau ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre mon panneau coulissant à droite.

Message par Stanislava le Mar 13 Mar 2012 - 10:35

Bien sûr!

Le premier code Javascript:
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,
                        '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);

Le deuxième code Javascript:
Code:
$(function(){
                $('.slide-out-div').tabSlideOut({
                    tabHandle: '.handle',                    //class of the element that will become your tab
                    pathToTabImage: 'http://img15.hostingpics.net/pics/803858paresseux.png', //path to the image for the tab //Optionally can be set using css
                    imageHeight: '200px',                    //height of tab image          //Optionally can be set using css
                    imageWidth: '40px',                      //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: 'hover',                          //options: 'click' or 'hover', action to trigger animation
                    topPos: '200px',                          //position from the top/ use if tabLocation is left or right
                    rightPos: '20px',                          //position from left/ use if tabLocation is bottom or top
                    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
                });
       
            });

Le code css:
Code:
    .slide-out-div {
                  padding: 20px;
                  width: 250px;
  background-image: url("http://www.heberger-image.fr/data/images/97684_ta.jpeg");
  moz-border-radius: 16px 16px 16px 16px;
  border: 2px dashed #EA001B;
  border-radius: 20px 20px 20px 20px;
  text-shadow: 1px 1px 2px black;
              } 

Le code html sur la page d'acceuil:
Code:
  <div class="slide-out-div">
                    <a class="handle" href="http://link-for-non-js-users.html">Content</a>
                    <h3>Contact me</h3>
                    <p>Thanks for checking out my jQuery plugin, I hope you find this useful.
                    </p>
                    <p>This can be a form to submit feedback, or contact info</p>
                </div>

J'ai réussi à changer le js pour que le panneau glisse lorsque je passe le curseur sur l'image.

Merci de votre aide o/

Stanislava
Nouveau membre

Messages : 28
Inscrit(e) le : 09/03/2012

http://sweetsdreams.forumgratuit.org
Stanislava a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre mon panneau coulissant à droite.

Message par Final-Blonde le Mar 13 Mar 2012 - 11:34

Je ne suis pas très au fait en matière de JS, mais déjà dans le premier JS, Toutefois, essaie de modifier :
toutes les propriétés left en right,
celles right en left des deux JS.
Pour ce faire :
- Tout en ayant ton JS du forum dans un onglet (ou fenêtre), ici effectue une recherche (Ctrl+F) avec le mot left et corrige en right dans celui de ton forum.
- Lis bien le code, car plusieurs fois tu trouveras plus loin le right qu'il faudra aussi inverser avec left.
Je te laisse faire car c'est exactement ce que j'aurais fait si j'avais installé ce panneau sur mon forum. pirat

Dans le CSS je ne vois rien correspondant au positionnement, sauf que l'on ne met de guillemets autour du lien-image dans les parenthèsea en CSS, on ne met rien, juste les parenthèses.

Le HTML me parait correct.


Je reste à "l'écoute" pour savoir si ça a marché et le cas échéant, je verrai pour l'installer sur mon FT (qui en a déjà un en place).

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre mon panneau coulissant à droite.

Message par Stanislava le Mar 13 Mar 2012 - 11:49

Malheureusement, le panneau reste toujours à gauche >.<

EDIT > pardon, j'ai réussi xD Il fallait juste modifier deux left dans le premier et un autre dans le second javascript

Comme ceci:

Code:
        (function($){
            $.fn.tabSlideOut = function(callerSettings) {
                var settings = $.extend({
                    tabHandle: '.handle',
                    speed: 300,
                    action: 'click',
                    tabLocation: '[color=red]right[/color]',
                    topPos: '200px',
                    [color=red]right[/color]Pos: '20px',
                    fixedPosition: false,
                    positioning: 'absolute',
                    pathToTabImage: null,

Code:
tabLocation: '[color=red]right[/color]',                      //side of screen where tab lives, top, right, bottom, or left

J'ai changé ce qu'il fallait en rouge!

Stanislava
Nouveau membre

Messages : 28
Inscrit(e) le : 09/03/2012

http://sweetsdreams.forumgratuit.org
Stanislava a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre mon panneau coulissant à droite.

Message par Stanislava le Mar 13 Mar 2012 - 11:54

@Stanislava a écrit:Malheureusement, le panneau reste toujours à gauche >.<

EDIT > pardon, j'ai réussi xD Il fallait juste modifier deux left dans le premier et un autre dans le second javascript

Comme ceci:

Code:
        (function($){
            $.fn.tabSlideOut = function(callerSettings) {
                var settings = $.extend({
                    tabHandle: '.handle',
                    speed: 300,
                    action: 'click',
                    tabLocation: '[color=red]right[/color]',
                    topPos: '200px',
                    [color=red]right[/color]Pos: '20px',
                    fixedPosition: false,
                    positioning: 'absolute',
                    pathToTabImage: null,

Code:
tabLocation: '[color=red]right[/color]',                      //side of screen where tab lives, top, right, bottom, or left

J'ai changé ce qu'il fallait en rouge!

Merci pour le conseil, je n'y avais pas songé :3 Je mets le sujet en résolu!

Stanislava
Nouveau membre

Messages : 28
Inscrit(e) le : 09/03/2012

http://sweetsdreams.forumgratuit.org
Stanislava 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