Announcement

Collapse
No announcement yet.

javascript conflicts in v14

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    javascript conflicts in v14

    I have a site that runs perfectly happily in v12 and which has my installation of Nivo Slider and Fancybox. The site was taken into v14 by the client and upgraded fine, the slider and fancybox worked in offline page preview but when uploaded to the server neither the slider nor fancybox would work. Firebug console showed
    TypeError: $(...).fancybox is not a function
    TypeError: $(...).nivoSlider is not a function
    After the usual tearing of hair and rending of gaments and a very nice but unhelpful chat with support the problem was solved using javascript no-conflict.

    This is how to do it:

    Things like fancybox and nivo slider have initiating code like this:
    Code:
    <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
    	//Default settings
    	    $.fn.nivoSlider.defaults = {
            effect: '<actinic:variable name="Transition" />',
            slices: <actinic:variable name="Slices" />,
            boxCols: <actinic:variable name="boxCols" />,
            boxRows: <actinic:variable name="boxRows" />,
            animSpeed: <actinic:variable name="animSpeed" />,
            pauseTime: <actinic:variable name="pauseTime" />,
            startSlide: <actinic:variable name="startSlide" />,
            directionNav: <actinic:variable name="directionNav" />,
            controlNav: <actinic:variable name="controlNav" />,
            controlNavThumbs: <actinic:variable name="controlNavThumbs" />,
            pauseOnHover: <actinic:variable name="pauseOnHover" />,
            manualAdvance: <actinic:variable name="manualAdvance" />,
            prevText: '<actinic:variable name="prevText" />',
            nextText: '<actinic:variable name="nextText" />',
            randomStart: <actinic:variable name="randomStart" />,
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){},
            lastSlide: function(){},
            afterLoad: function(){}
        };
    </script>
    Change it with the expression: "jQuery.noConflict();" like this: the 'j' replaces all the '$'.

    Code:
    <script type="text/javascript">
      var j = jQuery.noConflict();
        j(window).load(function() {
            j('#slider').nivoSlider();
        });
    	//Default settings
    	    j.fn.nivoSlider.defaults = {
            effect: '<actinic:variable name="Transition" />',
            slices: <actinic:variable name="Slices" />,
            boxCols: <actinic:variable name="boxCols" />,
            boxRows: <actinic:variable name="boxRows" />,
            animSpeed: <actinic:variable name="animSpeed" />,
            pauseTime: <actinic:variable name="pauseTime" />,
            startSlide: <actinic:variable name="startSlide" />,
            directionNav: <actinic:variable name="directionNav" />,
            controlNav: <actinic:variable name="controlNav" />,
            controlNavThumbs: <actinic:variable name="controlNavThumbs" />,
            pauseOnHover: <actinic:variable name="pauseOnHover" />,
            manualAdvance: <actinic:variable name="manualAdvance" />,
            prevText: '<actinic:variable name="prevText" />',
            nextText: '<actinic:variable name="nextText" />',
            randomStart: <actinic:variable name="randomStart" />,
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){},
            lastSlide: function(){},
            afterLoad: function(){}
        };
    </script>
    This is great as it makes everything work but what is going on in v14 to cause conflict with such everyday javascript scripts such as these?

    Thanks
    Last edited by graphicz; 11-Feb-2015, 03:59 PM. Reason: typos
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    V14 loads a SellerDeck supplied copy of jQuery early in the pages HTML. Perhaps you're loading it again.

    I'm using numerous jQuery based bits of code (including Fancybox and Nivo Slider) with no problems in V14. However I always test that jQuery is not running before I attempt to load my own copy.
    Norman - www.drillpine.biz
    Edinburgh, U K / Bitez, Turkey

    Comment

    Working...
    X