Why prototype.js causing jquery slider to not working in ie 9 and ie8?

Question

In my product detail page i have integrated a slider for related products. It works well in all browser except ie 9 and ie 8, works in ie 10.

When i removed prototype.js from page.xml it works well in all browsers. Why this issue occuring any solution to this problem?

I am not getting any error in browser console.

The plugin i used is caroufredsel. In my related.phtml file used following code,

<script  src="<?php echo $this->getSkinUrl('js/jquery.carouFredSel-6.2.1.js');?>"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#block-related').carouFredSel({
    circular: false,
    infinite: false,
    auto    : false,
    prev    : {button: "#foo2_prev",key: "left"},
    next    : { button: "#foo2_next",key:"right"
        }
    });
});
</script>

Answer 1

Did you add noConflict right after the included jQuery library? (read more)

By adding

<script type="text/ajavscript">
jQuery.noConflict();
</script>

in your head after including the jQuery library you'll prevent jQuery from having conflicts with Prototype

Answer 2

Sander is correct about the jQuery.noConflict() call. However I recommend putting it as the very last line of your jquery.js file.

Beyond that if the slide you're using uses $('#id') style jQuery selectors you're going to need to refactor all that code and where a $ is used replace is with jQuery

like:

jQuery('#id').sliderDoSomething();