CSS conficts (was: Javascript conflicts.)

HTML & CSS
1

Hey everyone. I’m quite new to this whole javascript thing so would really appreciate your help.

I followed a tutorial on a lava-lamp style navigation on tutsplus that you can find here:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/

I successfully have it working on my site, however, I’m now trying to get a jquery image plugin called Captify working on the site as well. However, when i follow the instructions from captify, it not only doesn’t work, but seems to break my lava-lamp style navigation.

Would there be conflicts? How do you avoid such conflicts? I’m starting to learn Javascript and this would be a huge help. Thanks.

bo5ton

2

You’ll find that if you disable #wrapper img from the stylesheet that the script will be behaving properly.

There are only a few style issues to resolve, for which I suggest that we get the CSS Forum in to end a hand.

I’ll move this thread over to the CSS Forum now, so that they can help you to resolve the CSS issues that exist between leafkit template, and the captions.

[ot]

That’s appreciated. Thanks.[/ot]

3

Thanks for the help pmw!
Ok, so I took out the jQuery that was loading for captify(hope it’s the right one?):

<script type="text/javascript" src="js/jquery.js"></script>

And put the two script sections for captify to the end of the body below the other scripts:

<script type="text/javascript" src="js/captify.tiny.js"></script>

<script type="text/javascript"> 
$(function(){
	$('img.captify').captify({
		opacity:0.75
	});
});
</script>

It definately changed something but I’m not sure what. Sorry for my incompetence! Thanks heaps for your help.

Btw, saw you’re in Christchurch. Hope you’re ok.

4

It looks like you have two different versions of jQuery loading.

What’s happening is that after you extend jQuery to add on the captify methods, a second version of jQuery is replacing the first.

Try this: remove the jQuery for captify, and move the two script sections for captify to the end of the body, below the other scripts that are there.

5

Oh! Sorry I should have included this. Anyway, here is the page with just the navigation slider on the top right…

http://leafkit.com/example/portfolio.html

And here is the sample of captify on it’s own:

http://leafkit.com/example/sample.html

And here I try and follow the instructions to make some images in the content to have the captify affect:

http://leafkit.com/example/both.html

This time around the navigation blob is fine, however the captify javascript doesn’t work correctly. I must be missing something and with my inexperience i can’t seem to see it.

Cheers.

6

What is it that’s breaking? Do you have a test page that we can look at so that we can advise you on it issues?

7

Hey thanks for that! I think i figured it out. Applied the float: left to the little images on the sides of the menus instead of the wrapper div, so it seems to have worked! Now I just need to style it a little more.

So it was the loading of the jquery twice that was the problem originally, and then there is obviously some conflicting css right? Just want to make sure i’ve learnt my lesson.

If anyone wants to take a look a little more to clean up my code if you think it’ll help feel free. Thanks.

8

It seems that there’s a heap of css code in the javascript, is this normal? It seems kind of limiting. Is javascript loaded last due to it being at the end of the html page? I can’t seem to force it to use my css instead of the css in the js file.

You can see all the css implemented into the js here.