JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

[kheino]

Bonsoir,

Up, merci.

[zz10]

Quel est la question ?

[kheino]

Bonjour zz10,

Tiens en effet, le premier message (voire plus) ne sont pas de retour...

La question était :
Dans le cadre de l'entraide, j'ai eu à faire à un forum qui refusait strictement un jQuery alors que sur le mien il fonctionnait parfaitement.
C'est comme s'il y avait conflit quelque part...
Donc en fait, ma question est dans le titre du sujet. (-:

Merci à toi de te pencher sur mon topic.

[zz10]

Re,

Alors pour éviter les conflits, il faut mettre ceci dès que vous avez du jquery :

Code:


jQuery.noConflict();
  jQuery(document).ready(function($) {
  // Ici tu mets le code jquery ;)
  });

[kheino]

Etant une parfaite bl..bon passons, etc-ce que c'est juste ainsi :

Code:

jQuery.noConflict();
  jQuery(document).ready(function($) {
  //  $(function(){
                $('.slide-out-div').tabSlideOut({
                    tabHandle: '.handle',                    //class of the element that will become your tab
                    tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
                    speed: 800,                              //speed of animation
                    action: 'click',                          //options: 'click' or 'hover', action to trigger animation
                    topPos: '415px',                          //position from the top/ use if tabLocation is left or right
                    leftPos: '0px',                          //position from left/ use if tabLocation is bottom or top
                    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
                });
       
            });
;)
  });

[zz10]

Non ce n'est pas bon

Code:

jQuery.noConflict();
jQuery(document).ready(function($) {
   $('.slide-out-div').tabSlideOut({
      tabHandle: '.handle',
      tabLocation: 'left',
      speed: 800,
      action: 'click',
      topPos: '415px',
      leftPos: '0px',
      fixedPosition: false
   });
});

[kheino]

Ben nope, là c'est chez moi que ça ne fonctionne plus, mais comme ce n'est que le deuxième script pour le tout, que faut-il faire de 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: '116px',                        //height of tab image
                        imageWidth: '33px',                          //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: 800,
                    action: 'click',
                    tabLocation: 'left',
                    topPos: '415px',
                    leftPos: '0px',
                    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);

Pardon, j'avais oublié la première page.

[zz10]

Essayez ceci :

Code:

jQuery.noConflict();
jQuery(document).ready(function($) {   
   $('.slide-out-div').tabSlideOut({
         tabHandle: '.handle', 
         pathToTabImage: 'images/contact_tab.gif',
         imageHeight: '116px',
         imageWidth: '33px'
   });     
   (function($){
      $.fn.tabSlideOut = function(callerSettings) {
         var settings = $.extend({
            tabHandle: '.handle',
            speed: 800,
            action: 'click',
            tabLocation: 'left',
            topPos: '415px',
            leftPos: '0px',
            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);
});

Si ça marche pas je deboguerai donc donnez moi le lien svp

[kheino]

Nope, ça ne fonctionne toujours pas et voici le forum :


En fait, comme je l'ai dit plus haut, pour moi il n'y avait pas de souci, peut-être que ça joue un rôle, ou alors ce bout de script devrait-il fonctionner par défaut ?

EDIT : Il va falloir que je m'absente une bonne partie de l'après-midi, donc je reprendrai le tout plus tard.
Encore merci à toi.

[zz10]

<Re,


Vous avez un code javascript :

Code:

$(document).ready(function(){$('#slidebottom button').click(function(){$(this).next().slideToggle()});$('#slidewidth button').click(function(){$(this).next().animate({width:'toggle'})});$('#slideleft button').click(function(){var $lefty=$(this).next();$lefty.animate({left:parseInt($lefty.css('left'),10)==0?-$lefty.outerWidth():0})});$('#slidemarginleft button').click(function(){var $marginLefty=$(this).next();$marginLefty.animate({marginLeft:parseInt($marginLefty.css('marginLeft'),10)==0?$marginLefty.outerWidth():0})});$('#slidewidthsome button').click(function(){var $some=$(this).next(),someWidth=$some.outerWidth(),parentWidth=$some.parent().width();$some.animate({width:someWidth===parentWidth?someWidth/2:parentWidth-(parseInt($some.css('paddingLeft'),10)+parseInt($some.css('paddingRight'),10))})})});

mettez aussi le noconflict :

Code:

jQuery.noConflict();
jQuery(document).ready(function($) {   
   $('#slidebottom button').click(function(){$(this).next().slideToggle()});$('#slidewidth button').click(function(){$(this).next().animate({width:'toggle'})});$('#slideleft button').click(function(){var $lefty=$(this).next();$lefty.animate({left:parseInt($lefty.css('left'),10)==0?-$lefty.outerWidth():0})});$('#slidemarginleft button').click(function(){var $marginLefty=$(this).next();$marginLefty.animate({marginLeft:parseInt($marginLefty.css('marginLeft'),10)==0?$marginLefty.outerWidth():0})});$('#slidewidthsome button').click(function(){var $some=$(this).next(),someWidth=$some.outerWidth(),parentWidth=$some.parent().width();$some.animate({width:someWidth===parentWidth?someWidth/2:parentWidth-(parseInt($some.css('paddingLeft'),10)+parseInt($some.css('paddingRight'),10))})})
});


[kheino]

Le petit panneau rouge est toujours ouvert, donc toujours pas bon.

[zz10]

2 problèmes :

1- dans ce code :

Code:

function montre(id){var d=document.getElementById(id);d.style.display='block'}function cache(){document.getElementById('smenu1').style.display='none';document.getElementById('smenu2').style.display='none';document.getElementById('smenu3').style.display='none';document.getElementById('smenu4').style.display='none';document.getElementById('smenu5').style.display='none';document.getElementById('smenu6').style.display='none'}jQuery.noConflict();jQuery(document).ready(function($){$('.slide-out-div').tabSlideOut({tabHandle:'.handle',tabLocation:'left',speed:800,action:'click',topPos:'415px',leftPos:'0px',fixedPosition:false})});

Il semblerait que

Code:

getElementById('smenu6')

n'existe pas...

2- Il y a du jquery dans le fichier js de FA et cela génère aussi une erreur... PAr contre pas possible d'y mettre le noconflit

[kheino]

Ok.
J'ai supprimé le menu en question, et pour le deuxième problème, il n'y a donc rien à faire...
En tous les cas merci beaucoup.

Voici le sujet et le forum de Ayael pour qui ça ne fonctionne pas, si tu pouvais voir chez elle, parce que pour moi ça fonctionnait sans le "noconflit" :
https://forum.forumactif.com/t317268-donner-un-effet-de-glissement#2766016


Quant à moi je mets le sujet en résolu.