jQuery Forum

I have this little ditty that injects a jQuery version of your choice within a page and isolates it, giving control back to the original jquery. You could use it to wrap jQuery ui assuming you use some build scripts for your js files within the isolate() method maybe? http://github.com/quickredfox/jQuery-Quarantine. 

Hi.. I am facing a similar issue where I am using a jquery for images effects and another for autocomplete on the same page.. Now the issue is that if i put all the autocomplete scripts after image effects then autocomplete works fine else if i put image effects scripts after autocomplete, then image effects works fine..

Hey,

Can somebody explain and show me what's wrong, I'm still in the very beginning for learning jQuery.

The problem is that I have two script one slider and one gallery.

I've tried numerous things and got a little further but now I'm stuck.

It finally shows my gallery (yet not in the right place that is given by the div container) and that my slider doesn't work, whilst before my slider worked but I had no gallery at all.

this is the code and example of the my site I'm working on.
Like I said I'm a newbie just got CSS3 to know and beginning HTML5 and jQuery.

problem page is = www.beyondallmeadows.com/beyondallmeadows.com/Graphical.html

On the home page I got the cufon slider to work, and on an other site I made the gallery worked fine.

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   
           <meta name="description" content="Awesome Cufonized Fly Out Menu with jQuery and CSS3" />
   
           <meta name="keywords" content="cufon, jquery, css3, menu, navigation, slide out, fly out, hover"/>
   
            
          
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
             
            <script src="galleria/galleria-1.2.6.min.js"></script>
         
         
           <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
            <script>
           var jq171 = jQuery.noConflict();
           </script>
          
          
           <script src="jquery.easing.1.3.js" type="text/javascript"></script>
           <script>
           var jq13 = jQuery.noConflict();
           </script>
         
          
           <script type="text/javascript">
   
               $(document).ready(function(){
   
                   var $menu = $("#slidingMenu");
   
                  
   
                   /**
   
                   * the first item in the menu,
   
                   * which is selected by default
   
                   */
   
                   var $selected = $menu.find('li:first');
   
                  
   
                   /**
   
                   * this is the absolute element,
   
                   * that is going to move across the menu items
   
                   * it has the width of the selected item
   
                   * and the top is the distance from the item to the top
   
                   */
   
                   var $moving = $('<li />', {
   
                       'class' : 'move',
   
                       'top'   : $selected[0].offsetTop + '%',
   
                       'width' : $selected[0].offsetWidth + '%'
   
                       });
                  
   
                   /**
   
                   * append the absolute div to the menu;
   
                   * when we mouse out from the menu
   
                   * the absolute div moves to the top (like innitially);
   
                   * when hovering the items of the menu, we move it to its position
   
                   */
   
                   $menu.bind('mouseleave',function(){
   
                           moveTo($selected,400);
   
                         })
   
                        .append($moving)
   
                        .find('li')
   
                        .not('.move')
   
                        .bind('mouseenter',function(){
   
                           var $this = $(this);
   
                           var offsetLeft = $this.offset().left + $(window).width() - ($this.outerWidth() + 20);
   
                           //slide in the description
   
                           $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
   
                           //move the absolute div to this item
   
                           moveTo($this,400);
   
                         })
   
                         .bind('mouseleave',function(){
   
                           var $this = $(this);
   
                           var offsetLeft = $this.offset().left - 20;
   
                           //slide out the description
   
                           $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
   
                         });
   
                        
   
                   /**
   
                   * moves the absolute div,
   
                   * with a certain speed,
   
                   * to the position of $elem
   
                   */
   
                   function moveTo($elem,speed){
   
                       $moving.stop(true).animate({
   
                           top        : $elem[0].offsetTop + 'px',
   
                           width    : $elem[0].offsetWidth + 'px'
   
                       }, speed, 'easeOutExpo');
   
                   }
   
               });
   
          
   
   
           </script>