Panneaux coullisant qui ne fonctionne pas.

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

Résolu Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Mer 7 Sep 2011 - 23:55

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


Merci, d'avance.


Dernière édition par xValy le Mar 13 Sep 2011 - 11:52, édité 3 fois

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Roxy. le Jeu 8 Sep 2011 - 10:01

Bonjour,

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

Cordialement.

Roxy.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Jeu 8 Sep 2011 - 11:54

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

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Roxy. le Jeu 8 Sep 2011 - 12:28

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.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Jeu 8 Sep 2011 - 12:47

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Jeu 8 Sep 2011 - 17:10

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

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Jeu 8 Sep 2011 - 20:15

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Jeu 8 Sep 2011 - 22:16

D'accord.

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

S'il vous plait.

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Ven 9 Sep 2011 - 12:20

Up!Merci

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Ven 9 Sep 2011 - 14:14

Bonjour

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

Cordialement.

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Ven 9 Sep 2011 - 14:38

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

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Roxy. le Ven 9 Sep 2011 - 15:38

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.

Roxy.
# Tropactif #

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Ven 9 Sep 2011 - 15:57

Cela ne fonctionne pas Interrog

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Ven 9 Sep 2011 - 16:53

xValy a écrit:Cela ne fonctionne pas Interrog

Bonjour

Qu'avez vous mis comme code et ou?

Cordialement.

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Ven 9 Sep 2011 - 17:21

Bonjour, Adam.

Personnellement j'ai fait comme ceci :

Like a Star @ heaven 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)

Like a Star @ heaven 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>)


Like a Star @ heaven 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.



Like a Star @ heaven Ensuite, dans mon css :

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

Like a Star @ heaven 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/

Embarassed

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Ven 9 Sep 2011 - 18:43

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 Smile
A part la taille de l'onglet dans le script qui doit être:
imageHeight: '63px',
imageWidth: '117px',

alien


Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Ven 9 Sep 2011 - 19:58

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

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Ven 9 Sep 2011 - 20:00

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Ven 9 Sep 2011 - 20:22

Lixyr Yrna a écrit:Et j'obtiens toujours ça : http://dying-to-bleed.rpg-dynasty.com/
Shutt
Etrange de mon coté en testant tes codes pas de soucis..
*J'ai mis la div en page d'accueil



Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Ven 9 Sep 2011 - 20:46

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Ven 9 Sep 2011 - 20:59

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

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Ven 9 Sep 2011 - 21:08

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





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Ven 9 Sep 2011 - 22:55

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

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Sam 10 Sep 2011 - 8:42

Lixyr Yrna a écrit: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




Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Sam 10 Sep 2011 - 21:38

Dans overall_footer ? Non, je ne l'ai pas ! Shocked 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. Mince
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 study

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Lun 12 Sep 2011 - 11:38

Up!

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par TheOursBlanc le Mar 13 Sep 2011 - 7:51

Up!

TheOursBlanc
*****

Masculin
Messages : 801
Inscrit(e) le : 22/02/2011

http://astuceinternet.forumactif.fr
TheOursBlanc a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Adam_sfp le Mar 13 Sep 2011 - 8:38

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.

Adam_sfp
+ Hyperactif +

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

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneaux coullisant qui ne fonctionne pas.

Message par Lixyr le Mar 13 Sep 2011 - 10:00

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

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






Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr 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