Bonjour,

Pouvez-vous nous montrez le code du panneau coulissant et ou l'avez vous entrez ?

Cordialement.

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

    Texte

</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>\'); } );

Code:

Panneau d'administration  Modules  Gestion des codes javascripts

Code:

        jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><script type="text/javascript">
       
            Texte
       
        </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>\'); } );

Essayer donc avec ceci.
Je ne suis pas sur c'est juste une petite modification que j'ai ajouter.
A la fin de la première ligne j'ai ajouter :

Code:

<script type="text/javascript">

Vu que je n'ai pas vu ça dans votre code.

Cordialement.

Roxy, la balise que tu donnes ne sert à rien, parce que le code javascript est directement mis dans la gestion des codes javascripts, donc en page js.

Bref, Xvaly, les premiers codes du tuto ne marchent pas. Je ne sais pas pourquoi puisque j'ai vérifié, et n'ai pas vu de différence avec les codes introduisant la chatbox latérale.

Bref, mets ce code plutôt :

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

VOTRE TEXTE

</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/>
</td></tr></table>'); } );

Cordialement.

Cette fois si il et bien la mais il ne coulisse pas :/
(C'est possible de le mêtre à droite ?)

Il est à droite, non ?

<table style="position: fixed; bottom: 50px; right: 0px;background-color:

Il ne coulisse pas comme un accordéon, en effet. Il s'affiche juste. Je ne sais pas comment le faire coulisser ce n'est pas dans mes compétences malheureusement.

J'ai juste cherché le code qui s'affiche.

D'accord.

Quel'qun sait comment le faire coulisser comme un accordéon ?

S'il vous plait.

Up!Merci

Bonjour

J'utilise ce script qui est paramétrable ( vitesse , onglet à droite ,gauche,bas,haut...)

Cordialement.

D'accord mais je prend quel script ? ^^
Et je le installe ou ?

Bonjour,

Si je me trompe pas le premier sera a mettre dans une nouvelle page javascript, le deuxième dans la feuille de style css et le troisième dans un de vos templates ! =)

Cordialement.

Cela ne fonctionne pas

xValy a écrit:Cela ne fonctionne pas

Bonjour

Qu'avez vous mis comme code et ou?

Cordialement.

Bonjour, Adam.

Personnellement j'ai fait comme ceci :

1er code javascript :

Spoiler:

Code:

$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                    //class of the element that will become your tab
            pathToTabImage: 'http://img9.imageshack.us/img9/9352/chatboxbc.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                    //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: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

(j'ai tenté de modifier l'image)

deuxième code javascript :

Spoiler:

(pris à ce lien : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>)

troisième code javascript :

Spoiler:

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);

(pris à ce lien : <script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>)

chacun dans sa propre feuille javascript, mise sur toutes les pages.



Ensuite, dans mon css :

Code:

      .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: 1px solid #29216d;
      }     

et enfin, dans mon template overall_footer, avant la balise de fermeture </body> :

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>


et voilà ce que j'obtiens : http://dying-to-bleed.rpg-dynasty.com/

Bonjour Lixyr Yrna

Pour le deuxième script pas besoin de le mettre il est déjà insérer sur FA.
Après le reste à l'air bon
A part la taille de l'onglet dans le script qui doit être:
imageHeight: '63px',
imageWidth: '117px',

Bah j'ai fais comme en le dit sur le site.
Mais sa mais juste un message en bah quand j'ai fini :/

Et j'obtiens toujours ça : http://dying-to-bleed.rpg-dynasty.com/

Lixyr Yrna a écrit:Et j'obtiens toujours ça : http://dying-to-bleed.rpg-dynasty.com/

Etrange de mon coté en testant tes codes pas de soucis..
*J'ai mis la div en page d'accueil

Voilà ce que j'obtiens, quand je mets en page d'accueil : http://dying-to-bleed.rpg-dynasty.com/

eh ben
la je sèche un peu.. a tu d'autres scripts?
sinon en essayant de compiler le script avant de le mettre?