Panneaux coullisant qui ne fonctionne pas.

[TheOursBlanc]

J'ai voulu installer un panneaux coulissant mais le code n'a aucun effet pourquoi ?
Quel'qun pourrait m'expliquer s'il vous plait ?


Merci, d'avance.

[Roxy.]

Bonjour,

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

Cordialement.

[TheOursBlanc]

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

[Roxy.]

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.

[Lixyr]

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.

[TheOursBlanc]

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

[Lixyr]

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.

[TheOursBlanc]

D'accord.

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

S'il vous plait.

[TheOursBlanc]

Up!Merci

[Adam_sfp]

Bonjour

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

Cordialement.

[TheOursBlanc]

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

[Roxy.]

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.

[TheOursBlanc]

Cela ne fonctionne pas

[Adam_sfp]

Cela ne fonctionne pas

Bonjour

Qu'avez vous mis comme code et ou?

Cordialement.

[Lixyr]

Bonjour, Adam.

Personnellement j'ai fait comme ceci :

1er code javascript :

Spoiler:

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

deuxième code javascript :

Spoiler:

troisième code javascript :

Spoiler:

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/

[Adam_sfp]

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',

[TheOursBlanc]

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

[Lixyr]

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

[Adam_sfp]

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

[Lixyr]

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

[Adam_sfp]

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

[Lixyr]

J'ai retiré tous les script, exit la sélection du contenu code. Toujours rien.
Que veux-tu dire par "compiler" ?

[TheOursBlanc]

Je pense que il veux dire : regroupement de plusieurs productions en une seule dans un contexte

[Adam_sfp]

J'ai retiré tous les script, exit la sélection du contenu code. Toujours rien.
Que veux-tu dire par "compiler" ?

Bonjour
rassures moi tu a bien

Code:

{HOSTING_JS}

d'ajouté dans ton template?

On peut utiliser le closur compiler plus d'infos et liens ICI
De mon coté ton code fonctionne ICI

[Lixyr]

Dans overall_footer ? Non, je ne l'ai pas ! Même sur mon forum actuel, et pourtant je me rappelle avoir fait la mise à jour manuellement, comme devaient le faire tous ceux qui avaient leur template de modifié. Je l'avait fait, et je ne l'ai plus. Je ne me rappelle pas avoir touché à mon template, pourtant depuis. ^^"


Je ne retrouve pas le dit sujet de cette mise à jour, du coup je ne sais plus où va cette partie de code.
Mais c'est vrai, par contre, que je n'avais pas fait la mise à jour sur le forum de test. Cela dit, je pensais qu'en supprimant les templates modifiés une fois testé, ce code se mettrait à sa place tout seul.


*edit, je l'ai dans overall_header

[TheOursBlanc]

Up!

[TheOursBlanc]

Up!

[Adam_sfp]

Bonjour

@Lixyr Yrna alors la désolé mais je ne vois rien d'autres...

@xValy avez vous essayé les codes donnés par Lixyr Yrna ?

Dans la gestion des codes javascript collez ce code sur toutes les pages.
avec pour nom slide par exemple

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

ensuite refaites en un nouveau toujours sur toutes les pages avec comme nom slide 1 par exemple et collez ce code

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

Dans votre CSS

Code:

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

et pour finir en page d'accueil

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>

Cordialement.

[Lixyr]

Ah ça y est, ça marche, Adam ! \O/

Je ne sais pas pourquoi, mais tout est bon. (sur mon fofo test.)