I'm having an issue maybe with the scope of how i'm trying to do this.

Either the slider will work. or the images will replace text. but not both.

I HAVE to have this "scrollbox.min.js" file linked in order for the slider to work. hence me using noConflict.

I want the below snippet to use the scrollbox.min.js file:

<script>
  jQuery().noConflict();
  jQuery(function($) {
        $(document).ready(function() {
          jQuery('#scrool').scrollbox({
            direction: 'h',
            switchItems: 3,
            distance: 540,
            autoPlay: false
          });
          jQuery('#scrool-backward').click(function() {
            jQuery('#scrool').trigger('backward');
          });
          jQuery('#scrool-forward').click(function() {
            jQuery('#scrool').trigger('forward');
          });
        })
      }
</script>

and I want the rest to use the site's jQuery.

Something I've noticed:

Depending on where I place the jQuery().noConflict(); it allows for different sections of code to execute. I need both to work though:

Please see below for the full part of the script:

<script src=".scrollbox.min.js"></script>
<script>
  jQuery().noConflict();
  jQuery(function($) {
    $(document).ready(function() {
      jQuery('#scrool').scrollbox({
        direction: 'h',
        switchItems: 3,
        distance: 540,
        autoPlay: false
      });
      jQuery('#scrool-backward').click(function() {
        jQuery('#scrool').trigger('backward');
      });
      jQuery('#scrool-forward').click(function() {
        jQuery('#scrool').trigger('forward');
      });
    });
  });

</script>

<script>
  jQuery(function($) {
    $(document).ready(function() {

      jQuery('.starIMGrating').each(function(i, obj) {

        var myString = jQuery(this).html()

        if (myString > "5") {
          var myString = "5"
        } else {}

        /* alert(myString); */
        myRegexp3 = /\d/;
        var match = myRegexp3.exec(myString);

        var myRegexp2 = /\d\.(\d)/;
        var matchstring = myString;
        var m;

        if (myString.indexOf(".") == -1) {
          var match2 = 0;
        } else if (myString.indexOf(".") == 1) {
          var m = myRegexp2.exec(matchstring)
          var match2 = m[1];
        }

        starIMG = "<img src='http://qwerty/" + match + "_" + match2 + "/5/rating.gif' alt='' style='width:70px !important;' />";

        /*alert(match2); */
        jQuery(this).html(starIMG);
        /* alert(starIMG); */
      });

    });
  });

</script>

I'm having an issue maybe with the scope of how i'm trying to do this.

Either the slider will work. or the images will replace text. but not both.

I HAVE to have this "scrollbox.min.js" file linked in order for the slider to work. hence me using noConflict.

I want the below snippet to use the scrollbox.min.js file:

<script>
  jQuery().noConflict();
  jQuery(function($) {
        $(document).ready(function() {
          jQuery('#scrool').scrollbox({
            direction: 'h',
            switchItems: 3,
            distance: 540,
            autoPlay: false
          });
          jQuery('#scrool-backward').click(function() {
            jQuery('#scrool').trigger('backward');
          });
          jQuery('#scrool-forward').click(function() {
            jQuery('#scrool').trigger('forward');
          });
        })
      }
</script>

and I want the rest to use the site's jQuery.

Something I've noticed:

Depending on where I place the jQuery().noConflict(); it allows for different sections of code to execute. I need both to work though:

Please see below for the full part of the script:

<script src="http://www.qwerty.com/assets/xjs/jquery.scrollbox.min.js"></script>
<script>
  jQuery().noConflict();
  jQuery(function($) {
    $(document).ready(function() {
      jQuery('#scrool').scrollbox({
        direction: 'h',
        switchItems: 3,
        distance: 540,
        autoPlay: false
      });
      jQuery('#scrool-backward').click(function() {
        jQuery('#scrool').trigger('backward');
      });
      jQuery('#scrool-forward').click(function() {
        jQuery('#scrool').trigger('forward');
      });
    });
  });

</script>

<script>
  jQuery(function($) {
    $(document).ready(function() {

      jQuery('.starIMGrating').each(function(i, obj) {

        var myString = jQuery(this).html()

        if (myString > "5") {
          var myString = "5"
        } else {}

        /* alert(myString); */
        myRegexp3 = /\d/;
        var match = myRegexp3.exec(myString);

        var myRegexp2 = /\d\.(\d)/;
        var matchstring = myString;
        var m;

        if (myString.indexOf(".") == -1) {
          var match2 = 0;
        } else if (myString.indexOf(".") == 1) {
          var m = myRegexp2.exec(matchstring)
          var match2 = m[1];
        }

        starIMG = "<img src='http://qwerty/" + match + "_" + match2 + "/5/rating.gif' alt='' style='width:70px !important;' />";

        /*alert(match2); */
        jQuery(this).html(starIMG);
        /* alert(starIMG); */
      });

    });
  });

</script>

• javascript
• jquery

• 1 Am not sure whether this helps but try this jQuery.noConflict(); or try aliasing your jquery object with noConflict and use new alias name wherever required as per your plugin dependencies. – kakurala Commented May 3, 2016 at 16:40
• I've been trying - but i can't seem to get it right.. – Mike Van Stan Commented May 3, 2016 at 17:18
• 1 Can you please create fiddle for it? – maulik sakhare Commented May 7, 2016 at 9:46

4 Answers 4

Calling jQuery().noConflict(); will throw an error:

Uncaught TypeError: jQuery(...).noConflict is not a function

Which, when not inside a try { ... } block, will cause the rest of that script not to execute at all.

noConflict is part of the main jQuery namespace object but not individual jQuery objects, so you should remove the parenthesis from jQuery():

jQuery.noConflict();

See this for more info: http://learn.jquery.com/using-jquery-core/dollar-object-vs-function/

As others have mentioned, you need to use jQuery.noConflict(), but whenever debugging something like this you want to minimize all of the moving parts. What I'm going to describe below is not likely causing any problems for you, but it highlights a very glaring misuse of jQuery and you should try and follow along. You have the following code:

jQuery(function ($) {
  $(document).ready(function(){
    ...
  });
});

This is equivalent to writing the following:

jQuery(document).ready(function ($) {
  $(document).ready(function(){
    ...
  });
});

Do you see the duplicity? Let me explain:

1. The following two lines are identical:

   $(function() { /* execute code */ });
   $(document).ready(function () { /* execute code */ });
   

   So when you put one of those inside the other like you've done, you are essentially saying "wait until the document is ready, and then wait until the document is ready again, and then execute code". This is redundant and unnecessary.

2. Whenever you use either of the above "document ready" statements, you can give jQuery a different name for use within the callback function. For example, we could rename jQuery to fOobar if we want:

   $(function(fOobar) {
       fOobar('#scroll').trigger('forward');
   });
   

3. The above technique is particularly useful when using noConflict(). Nobody likes typing jQuery because the $ dollar sign is so much easier. But noConflict() means you can't use the dollar sign. To fix this, we can rename jQuery back to dollar sign without affecting other code on the page:

   jQuery.noConflict();
   jQuery(function ($) {
     // you can safely use the dollar sign variable inside this function
     // instead of the cumbersome `jQuery` variable.
   });
   

4. Finally, every time you pass a selector to jQuery, it has to a lot of work to find that element in the page. In order to keep jQuery from getting too tired we can save (or cache) the work jQuery has done and reuse it. Here is what your code would look like if you cached the #scroll element:

   jQuery.noConflict();
   jQuery(function ($) {
     // get the #scroll element once and reuse it
     var $scroller = $('#scroll');
     $scroller.scrollbox({
       direction: 'h',
       switchItems: 3,
       distance: 540,
       autoPlay: false
     });
     $('#scrool-backward').click(function() {
       $scroller.trigger('backward');
     });
     $('#scrool-forward').click(function() {
       $scroller.trigger('forward');
     });
   });
   

See : jQuery.noConflict().

You will get that :

jQuery.noConflict();
(function($) {
  $(document).ready(function() {
    $('#scrool').scrollbox({
      direction: 'h',
      switchItems: 3,
      distance: 540,
      autoPlay: false
    });
    $('#scrool-backward').click(function() {
      $('#scrool').trigger('backward');
    });
    $('#scrool-forward').click(function() {
      $('#scrool').trigger('forward');
    });
  });
}(jQuery);

Here basically you are having two instances of jquery library (jquery library file is added twice in the page), so much easier solution would be to have only one instance of a jquery library, So if you could somehow able to add single instance then it will be quite easy for you, I am curious to know why this is not possible.

On the other hand, if you are not able to remove an extra instance of jQuery then you can do one thing, save latest jquery instance in page specific variable and then call no conflict. e.g.

var $$ = $;
jQuery.noConflict();
$$('#scroll').scrollbox({})

so you can use scrollbox with $$, i.e. $$('#scroll').scrollbox({}) and other things with single $