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

2 participants

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

Résolu JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Ven 4 Nov 2011 - 18:14

Bonsoir,

Up, merci.


Dernière édition par Final-Blonde le Mar 8 Nov 2011 - 17:51, édité 1 fois
kheino

kheino
Membre habitué

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

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 10:59

Quel est la question ?
zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 11:20

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.
kheino

kheino
Membre habitué

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

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 11:22

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

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 11:31

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

kheino
Membre habitué

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

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

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 11:37

Non ce n'est pas bon Smile

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

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 11:52

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.
kheino

kheino
Membre habitué

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

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

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 11:55

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 Wink
zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 12:08

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.


Dernière édition par Final-Blonde le Mar 8 Nov 2011 - 17:52, édité 2 fois
kheino

kheino
Membre habitué

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

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 13:00

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


zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 16:47

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

kheino
Membre habitué

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

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par zz10 Mar 8 Nov 2011 - 17:14

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
zz10

zz10
Membre actif

Masculin
Messages : 2279
Inscrit(e) le : 04/07/2009

http://www.ice-epinal-forum.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: JS, jQuery, conflit entre plusieurs scripts, serait-ce possible

Message par kheino Mar 8 Nov 2011 - 17:46

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.
kheino

kheino
Membre habitué

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

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum