Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Multiple Javascript Conflicts

  • 14-10-2010 12:05pm
    #1
    silurian1980
    Closed Accounts Posts: 47 ✭


    Hi there

    I'm a cut and paste javascript man, so please don't be too harsh. I'm not great at understanding how js code actually works.

    I have two scripts on one page.

    The first is for an image slider called loopedSlider:

    <script type="text/javascript" charset="utf-8">
    $(function(){
    $("#loopedslider").loopedSlider({
    slides: ".slides"
    });
    });
    </script>

    The second is for a lightbox for video called prettyPhoto:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>

    Both scripts are included at the bottom of the page before the </body> tag.

    The links in the head appear as follows:

    <!-- PrettyPhoto -->
    <script src="prettyPhoto/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="prettyPhoto/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <!-- End PrettyPhoto -->

    and

    <!-- Loopslider -->
    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/loopedslider.js"></script>
    <!-- End Loopslider -->

    However, the slider works fine but the lightbox for video does not. Both work fine separately.

    Any ideas? I hope I have provided enough info.

    Cheers


Comments

  • #2
    Evil Phil
    Registered Users, Registered Users 2 Posts: 7,468 ✭✭✭Evil Phil


    If your using firefox you should install firebug so you can debug the javascript. Also check the error console as this will tell you what errors are being thrown.


  • #3
    silurian1980
    Closed Accounts Posts: 47 ✭silurian1980


    Evil Phil wrote: »
    If your using firefox you should install firebug so you can debug the javascript. Also check the error console as this will tell you what errors are being thrown.

    Hi

    I tried the debugger on Safari and it identified the following:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    index.html:107Uncaught TypeError: Object #<an Object> has no method 'prettyPhoto'
    });
    </script>

    Any idea what this means?

    Sorry to be a pain!


  • #4
    JohnathanM
    Closed Accounts Posts: 410 ✭✭JohnathanM


    silurian1980 wrote: »
    Hi

    I tried the debugger on Safari and it identified the following:

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
    index.html:107Uncaught TypeError: Object #<an Object> has no method 'prettyPhoto'
    });
    </script>

    Any idea what this means?

    Sorry to be a pain!

    Haven't used Javascript selectors in ages but I saw this:

    a[rel^='prettyPhoto']

    You should have an object handy like:

    <a rel="prettyPhoto" src="that.jpg>THING!</a>

    Does that tie in with the HTML on your page?

    EDIT: Oops. Just noticed you said they worked fine separately. The problem is still that objects don't seem available to the script, so can't have the method applied to them. Changes the why, though.


  • #5
    silurian1980
    Closed Accounts Posts: 47 ✭silurian1980


    JohnathanM wrote: »
    Haven't used Javascript selectors in ages but I saw this:

    a[rel^='prettyPhoto']

    You should have an object handy like:

    <a rel="prettyPhoto" src="that.jpg>THING!</a>

    Does that tie in with the HTML on your page?

    EDIT: Oops. Just noticed you said they worked fine separately. The problem is still that objects don't seem available to the script, so can't have the method applied to them. Changes the why, though.

    Hi

    Thanks for your efforts! Yes they do work fine separately and the rel="prettyPhoto" tag is in there. Still stuck!

    :(


  • #6
    JohnathanM
    Closed Accounts Posts: 410 ✭✭JohnathanM


    silurian1980 wrote: »
    Hi

    Thanks for your efforts! Yes they do work fine separately and the rel="prettyPhoto" tag is in there. Still stuck!

    :(

    Hang on... are you including jQuery twice? I mean, are those two snippets exactly as from the one page? Before anything else, get rid of the second reference - that will cause trouble, and hopefully yours.


  • Advertisement
  • #7
    Overflow
    Registered Users, Registered Users 2 Posts: 1,266 ✭✭✭Overflow


    You only need one reference to the jquery javascript library, insert:

    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

    once in between the <head></head> tags before any other javascript.

    You should really read a basic tutorial on javascript and the jquery library since your using it. You will save yourself a lot of headaches and time in the future with a basic understanding of how it works:

    http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery


  • #8
    silurian1980
    Closed Accounts Posts: 47 ✭silurian1980


    Overflow wrote: »
    You only need one reference to the jquery javascript library, insert:

    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

    once in between the <head></head> tags before any other javascript.

    You should really read a basic tutorial on javascript and the jquery library since your using it. You will save yourself a lot of headaches and time in the future with a basic understanding of how it works:

    http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

    Hi

    Yep, that's worked now. The duplicate jquery reference seemed to be doing it.

    Thanks for the links on jquery basics, I'll deffo have a look at it and try to understand it.

    Thanks for your help!! :)


Advertisement