bo5ton — 2010-09-05T02:15:20-04:00 — #1
I followed a tutorial on a lava-lamp style navigation on tutsplus that you can find here:
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.
paul_wilkins — 2010-09-05T11:11:13-04:00 — #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.
That's appreciated. Thanks.[/ot]
bo5ton — 2010-09-05T10:12:57-04:00 — #3
Thanks for the help pmw!
Ok, so I took out the jQuery that was loading for captify(hope it's the right one?):
And put the two script sections for captify to the end of the body below the other scripts:
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.
paul_wilkins — 2010-09-05T10:00:48-04:00 — #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.
bo5ton — 2010-09-05T09:40:41-04:00 — #5
Oh! Sorry I should have included this. Anyway, here is the page with just the navigation slider on the top right...
And here is the sample of captify on it's own:
And here I try and follow the instructions to make some images in the content to have the captify affect:
paul_wilkins — 2010-09-05T05:20:16-04:00 — #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?
bo5ton — 2010-09-05T11:27:29-04:00 — #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.
bo5ton — 2010-09-05T11:56:18-04:00 — #8
You can see all the css implemented into the js here.