CODEWITHSUNDEEP
jquerysitecore
crjunk
crjunk

Reputation: 969

Using jQuery With Sitecore

I'm trying to get a jQuery slide show working on a web control that I've created. I can get the slide show to work in IE 9 with compatibility mode turned on, but I can't get it to work properly in Chrome or Firefox.

I'm not very experienced with jQuery, so I may be missing something obvious. I'm not sure if using Sitecore as the CMS has something to do with my problem or not.

This is some example code that I found on the web and have been playing around with. Can anyone help?

Thanks! crjunk

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;


    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>')

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    (function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    })(jQuery);


    (function moveSlide() {
        $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) });
    })(jQuery);

});
</script>


<div id="slideshow">
 <div id="slideshowWindow">
    <div class="slide">
             <img src="../../images/slider_1.jpg" />
             <div class="slideText">
                 <h2 class="slideTitle">Slide 1</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
        </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_2.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 2</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_3.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 3</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
 </div><!--/slideshowWindow-->

Upvotes: 1

Views: 5652

Answers (4)

Sean Kearney
Sean Kearney

Reputation: 4008

Depending on the version of Sitecore you are using, there can be a

... conflict with Prototype.js that most of Page Editor, including designer and debugger uses. It can be simply worked around by overriding the $-function by calling "jQuery.noConflict()"

Once you get past this Sitecore nuance, the problem is your javascript/css code. Being you are admittedly not a jQuery guy I would look into leveraging a canned solution for a slideshow such as http://slidesjs.com

Upvotes: 2

Esben Hjelholt Pedersen
Esben Hjelholt Pedersen

Reputation: 61

You should note that the Page Editor (in preview mode) injects a script tag for "jQuery.noconfict.js" which end with: window.$sc = jQuery.noConflict();

This not very good since it overwrites the window.jQuery variable which everyone is using when they write jQuery('.myclass')

jQuery standard functionality still works fine. BUT... any modules and jQuery extensions NOT LOADED BEFORE THE INJECTION will not work since they are loaded by a jQuery instance which is no longer the one referenced by "window.jQuery".

"jQuery.noconfict.js" is injected right under the body tag. This means that in PREVIEW MODE all references to jQuery in script tags anywhere in body will use the Sitecore noconflict instance with no modules loaded instead of the one you think!

In short: don't use the jQuery variable and don't use $ ... make your own jQuery variable in your own namespace

Upvotes: 6

Mortaza Kamal Nourestani
Mortaza Kamal Nourestani

Reputation: 21

To make your life easier wrap your code in an anonymous function and pass the jQuery variable in. This is probably more obvious if you’re writing some code others will use like a jQuery plugin, but could help save you down the line.

Adding the anonymous function and passing the jQuery variable in will prevent problems later with the $ variable.

    <script type="text/javascript">

    (function ($) {
            $(document).ready(function () {
                // Do some awesome stuff...
            });
        })(jQuery);

    </script>

Upvotes: 1

Bryan
Bryan

Reputation: 8778

It's worth noting that the $ is not necessary at all to use jQuery, it's just a shortcut. If you replace all the $() instances with jQuery() it should work without conflict in Sitecore. It's just the $ that prototype uses which is conflicting. Also, Mark's comment about wrapping is also handy.

Upvotes: 1

Related Questions