Grow your CSS skills. Land your dream job.

Scripts Behaving Strangely – Total Mystery

  • # March 28, 2012 at 8:49 am

    Hey guys,

    I’ve got this really weird situation where my scripts aren’t behaving the way they should. I’ve got this slideshow that i need to work on a clients website, which i managed to get working fine on my local machine but when i upload it to there site it doesn’t work at properly.

    It’s a slideshow with two effects, the images pan around whilst the text next to it fades in and out. I’ve even uploaded to a different website to see if it works there and it does! http://www.madewithfabric.com/slideshow.html

    So i don’t understand when i upload it to this site, http://sno-limit.com/test/ – it chooses not to work properly?

    The text is just div’s sitting on top of each other and part of the script hides them and makes them fade into one another – so it’s kinda working as it’s hiding the rest of the div’s but their just not fading.

    For some reason when i remove this, jquery.easing.1.3.js script from the header the text works fine but then the pictures don’t animate.

    If anyone has got any suggestions or possible solutions then it would be greatly appreciated, as im totally stumped.

    Many Thanks,

    Cameron

    # March 28, 2012 at 9:06 am

    I think the problem is due to two copies of jQuery on the page:

    Line 25: loads jQuery 1.6.4
    Line 39: Loads jQuery 1.7.1

    What happens is that the first jQuery loads, then all scripts below it are extended from that version. When the second copy loads, it replaces the “$” with the second copy so when the document ready function is finally called, all it sees is the second copy. Then you get errors from all of the scripts loaded between the two copies reporting that the plugin doesn’t exist.

    Simple solution: Remove the second copy. I’m not too good with WordPress, so I’m not so sure how easy to find and remove it.

    More complicated solution (meaning you need two copies of jQuery, which shouldn’t really be necessary): Immediately after loading the first copy of jQuery, set it to no conflict mode, then for all scripts that run on that version of jQuery, use the variable set to the no conflict mode, as follows:







    # March 28, 2012 at 10:36 am

    @Mottie thanks for replying, i really appreciate your help. I’ve removed the second copy of jQuery so i’m just left with jQuery 1.7.1 but it does’t seem to change the situation.

    Could it be anything else?

    # March 28, 2012 at 6:14 pm

    Are you seeing any errors?

    # March 29, 2012 at 6:10 am

    @Mottie Yeah it’s turned up with two errors which are,

    Uncaught TypeError: Cannot call method ‘replace’ of undefined – which is just found on the test page.

    and

    Uncaught TypeError: Property ‘undefined’ of object #is not a function – this one is found in jQuery.easing.1.3.js and was repeated 4 times which makes sense because there’s 4 different slides i’m trying to animate. But what i don’t get is that it’s the same script that i’ve uploaded from my local copy and it’s also the same script that’s running on this example, http://madewithfabric.com/slideshow.html – which both are working perfectly with no errors. Could it be conflicting with a different script?

    # March 29, 2012 at 8:00 am

    Oh duh, you did have links, sorry.

    It looks like jQuery is being loaded on line 40, while a bunch of jQuery dependent scripts are being loaded before it “jquery tools”, “script.js”, “scrollTo”, “fancyCountdown”, “easing”, “timer” and “Nivo slider”. I’m actually surprised it’s working at all. Hmm, but of all of those scripts, I think “easing” is the only one that actually extends itself from jQuery.

    Anyway, move the script that loads jQuery to above line 22.

    # March 29, 2012 at 9:48 am

    @Mottie I’ve put the script above all the other jQuery dependant scripts and still no joy.

    Still coming up with errors,

    Uncaught TypeError: Property ‘undefined’ of object #is not a function

    jQuery.extend.swingjquery.easing.1.3.js:46
    f.fx.stepjquery.min.js:4
    hjquery.min.js:4
    f.fx.customjquery.min.js:4
    f.fx.showjquery.min.js:4
    gjquery.min.js:4
    f.extend.dequeuejquery.min.js:2
    f.fn.extend.queuejquery.min.js:2
    e.extend.eachjquery.min.js:2
    e.fn.e.eachjquery.min.js:2
    f.fn.extend.queuejquery.min.js:2
    f.fn.extend.animatejquery.min.js:4
    f.each.f.fn.(anonymous function)jquery.min.js:4
    (anonymous function)

    I’ve got no idea what this means, but it’s telling me it’s happening 3 times now? Any ideas?

    I’ve also re-jigged the code on the wordpress side things which i hoped might tidy it up a little bit but in doing so it’s left me with the standard page navigation at the top, (which i can’t get rid of without messing up the whole site) but seeing how this is just a test page i don’t mind it being like that.

    # March 29, 2012 at 10:07 am

    Just noticed as well that when i include this script jquery.easing.1.3.js which the slideshow depends on, it seems to causes more errors with my other scripts and causes them not to work, which is a total bummer.

    # March 29, 2012 at 10:18 am

    Hmm, there’s still a copy of jQuery at line 39. Try removing that as well.

    # March 29, 2012 at 1:12 pm

    @Mottie Thank you for your eagle eyes, that copy of jQuery has sneaked in there from the mailchimp widget that im using. I’ve deleted the script from the source directory, which seems to fix most of my problems but i can’t seem to remove that line of code that mailchimp places on my page, therefore the website is still looking for it which i think is causing the rest of my problems, that being some of my scripts are not responding. I’ll have to delve into the plugin source code in order to try and remove it. But at least i now know (i hope) what the problem is now.

    Just want to say thank you for all your help, i couldn’t have done it without you. I’ll hopefully be able to repay the favour one day!

    Thanks again,

    Cameron

    # March 29, 2012 at 6:12 pm

    It’s not a problem!… maybe the easiest solution would be to just move all of the extra scripts below that copy of jQuery and remove the first one.

    # March 30, 2012 at 5:15 am

    @Mottie Sorry to burden you again but I’ve just realised that this error i’ve been getting isn’t from the slideshow but from the share rail i have on the left hand side on some of the pages from the site,

    Uncaught TypeError: Cannot call method ‘replace’ of undefined

    is from this script,


    $(document).ready(function() {

    var msie6 = $.browser == 'msie' && $.browser.version < 7;

    if (!msie6) {
    var top = $('.share-bar').offset().top - parseFloat($('.share-bar').css('margin-top').replace(/auto/, 0));

    $(window).scroll(function() {

    var y = $(window).scrollTop();

    if (y >= top) {
    $('.share-bar').addClass('fixed');
    }else {
    $('.share-bar').removeClass('fixed');
    }

    });

    }

    });

    I’m not entirely sure what would be the best method to fix this, i was hoping you’d maybe have some insight that could help? I followed this tutorial from Remy Sharp at http://jqueryfordesigners.com/fixed-floating-elements/ – but me being a complete javascript novice i have no idea how to fix this without breaking the whole thing.

    I understand that you’ve helped me out a lot over the past week so i’ll totally understand if you want to pass this one up?

    Many Thanks,

    Cameron

    # March 30, 2012 at 8:16 am

    Try changing the line to this:

    var top = $('.share-bar').offset().top - parseFloat( ($('.share-bar').css('margin-top') || '').replace(/auto/, 0) );
    # March 30, 2012 at 1:37 pm

    Awesome! That worked a treat – thank you!

    What did you do differently, i see that the code has slightly changed but what is it you told it to do instead?

    # March 30, 2012 at 6:08 pm

    Basically the replace function causes an error when you pass it an undefined variable. All I did was give it an empty string instead of an undefined variable by essentially using an “or” operator:

    var top = (x || '').replace(/auto/,'');

    That can be read as define top as the following:

    * Start with x, if defined, otherwise (|| or) use an empty string (''). The x in the code above was $('.share-bar').css('margin-top'), which could return something like 5px or auto in the case of IE6.
    * Now take the value from above and replace the word “auto” with zero. If the value from the first line is undefined, the replace function would cause an error.
    * Give the result of the above two lines to top

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

You must be logged in to reply to this topic.

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