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!

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! :lol:

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.

@elifflower -

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

$(window).load(function() {
    // ...
});

which works fine, but is akin to using:

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:

$(document).ready(function() {
    // ...
});

or, the preferred shorthand is to simply pass a function to jQuery, i.e.:

$(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 :slight_smile:

Honestly! How embarassing. I told you I was messy!

Thanks so much… I think my brain is a little fried :eye:

Looks like your problem is here:

<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:

[COLOR="Red"]$[/COLOR](window).load(function() {

See if that helps. :slight_smile:

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.