Grow your CSS skills. Land your dream job.

Seem to have javascript conflict with Anything Slider

  • # January 15, 2013 at 5:14 pm

    Hi Everyone!
    Nice to finally join this community!
    Okay, so I’m trying to use the Anything Slider, which I’ve actually used before and had no problem.
    This time around, I need video functionality. So I’m using additional scripts. I’ve already got two other dynamic elements on the page requiring their own scripts. If I shuffle the order of the initialization scripts some things stop working, but the Anything Slider never works. I’ve even deleted all scripts and still it won’t work.

    My code:

    http://codepen.io/Laughhearty/pen/wgzqr

    the site:

    http://sandbox.intrepidrealist.com/lucidity-fest

    Thanks!

    # January 15, 2013 at 6:02 pm

    Hi

    I had a similar problem on a website I built using Anything Slider with a javascript dropdown menu which I resolved using jquery.noConflict. Try implementing the noConflict variable on one of the other scripts (i.e. not the Anything Slider one). You can set var = j as opposed to var = $j. It worked for me so maybe worth a try.

    # January 16, 2013 at 12:55 am

    Hi @Laughhearty!

    Hmmm, codepen doesn’t seem to want to run that code. Something about iframe security. So I moved your code over to [jsFiddle](http://jsfiddle.net/Mottie/KPFxd/) and did the following:

    1.Removed the `var $j = jQuery.noConflict()` because you’re already using jQuery for other plugins and there isn’t any conflict with other libraries.

    2.Removed `navigationFormatter: formatText` because `formatText` hasn’t been defined, so it was just causing an error.

    3.Changed `$j(‘#slider1′).anythingSlider` to `jQuery(‘#slider’).anythingSlider` because there isn’t a `1` in the ID.

    You could also combine all of the document ready functions into one as I did in this [updated jsFiddle](http://jsfiddle.net/Mottie/KPFxd/1/).

    Lastly, this script is missing (404 error): `css_browser_selector.js`

    # January 16, 2013 at 12:17 pm

    Thank you so much for the help!
    Mottie, I implemented your suggestions and it’s not working for me locally or remotely. And all the more aggravating, because I can see it working just fine in jsFiddle! Aarghhhhhh!!!

    What have I missed?

    # January 16, 2013 at 5:10 pm

    I’m not sure what the problem could be, did you open the javascript console (F12 in most browsers) and look to see if there were any script errors?

    # January 22, 2013 at 8:16 pm

    I clicked the console tab in firebug and got no errors. Is this what you’re talking about?

    # January 23, 2013 at 12:32 am

    Well, I guess I’d need to see the live site. I’m not that good at guessing ;)

    # January 23, 2013 at 6:36 pm

    Okay, got an answer over at Experts-Exchange from Kravamir (he’s a God!) Apparently, without a doctype in jsFiddle an error wasn’t showing up. I needed to add change this:

    buildComplete: function() {
    splash.find(‘li.slide-closed div’).css(‘display’, ‘none’);
    splash.find(‘li.slide-open div’).fadeIn();
    },

    to this:

    buildComplete: function() {
    var splash=jQuery(‘#splash’);
    splash.find(‘li.slide-closed div’).css(‘display’, ‘none’);
    splash.find(‘li.slide-open div’).fadeIn();
    },

    So I got it working, now I just need to make the images fade instead of slide. I’ve downloaded animate.css, but of course that’s not working for me either!

    # January 24, 2013 at 10:55 am

    Just set the [`mode` option](https://github.com/CSS-Tricks/AnythingSlider/wiki/Appearance-Options#wiki-mode) to `fade`.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".