SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conflicting jQuery Scripts

    Hi there,

    I am desinging my online portfolio and am running a couple of different scripts including the Nivo Slider and pageSlider and also the slide toggle method for my navigation.

    My site: http://ellekorhaliller.co.uk/jQuery/index.html

    My Nivo Slider was working fine until I added the pageslider which seems to be conflicting with it's script as it just simply won't show.

    I read up about reasigning jQuery like this:
    var $j = jQuery;

    but as I'm new to javascript I'm not sure where to put this and if I put $j before every jQuery command or just my nivoSlider (the plug in that isn't working).

    Any help would be very gratefully recieved!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm no expert with jQuery either, but the main purpose of renaming jQuery is if you are using other libraries, but I don't think you are. The first thing I would do is remove this line in your header:

    <script src="http://www.ellekorhaliller.co.uk/jQuery/lib/jquery-1.3.2.min.js" type="text/javascript"></script>

    You have already called on the jquery library two lines up, so you don't need to call it again. I don't think that will fix it, but it's a good start.

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.

    You're right it didn't fix it but it's always good to clean up my code as I can be a little messy!

    Can anyone else help?

    Many thanks,
    Elle.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Looks like your problem is here:

    Code:
    <script type="text/javascript">
     
    (window).load(function() {
    	$('#slider').nivoSlider({
    		effect:'fade',
    		keyboardNav:true,
    		pauseOnHover:true,
    		animSpeed:800,
    		
    		});
    });
    </script>
    The first line should have a dollar sign at the start:

    Code:
    $(window).load(function() {
    See if that helps.

  5. #5
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Honestly! How embarassing. I told you I was messy!

    Thanks so much.. I think my brain is a little fried

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by elifflower View Post
    Honestly! How embarassing. I told you I was messy!

    Thanks so much.. I think my brain is a little fried
    You can't blame yourself for one little missing character amid all that code. It happens to us all daily. If your brain weren't a little bit fried, you couldn't claim to be a web developer!

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @elifflower -

    another tip that may help you: in your code, you are currently using:

    Code:
    $(window).load(function() {
        // ...
    });
    which works fine, but is akin to using:

    Code:
    window.onload = function() {
        // ...
    };
    while obviously this will work as expected, the function you pass is delayed until the page is completely loaded, including all images and other assets. In most cases, you can delay that function until the DOM is ready, which happens well before the window is loaded. The syntax for using the DOM-ready event is:

    Code:
    $(document).ready(function() {
        // ...
    });
    or, the preferred shorthand is to simply pass a function to jQuery, i.e.:

    Code:
    $(function() {
        // ...
    });
    all the samples in this comment will have roughly the same effect, but using the DOM-ready event to delay your code will almost always have better results, as the code will run as soon as the DOM is parsed and ready, but before the window is actually loaded. This can have an awesome impact on perceived page performance. Hope that helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •