jQuery Horizontal Navigation Menu - Lavalamp 2 of 2

[wilfred05777]

nice tuts



[sulemanSGK]

hi james plz tell me how to change the bubble color thanks

[PrinceMokrc]

Thanks!! You really give a nice tutorial...

[manute32]

I need some help: when I add the actual links for the .html files, and I click a link from the navigation bar, the lava background doesn't stay on the current page (it jumps back to "Home" link).. Anyone know what I can do?

[DreamWeaverTutorial]

@manute32 hi, go to my website, look for the written tutorial of the same name, go to the bottom and you will see how to set the links the way you want. Check also the comments.

[smackdounnkol]

Hello it worked fine for me. but i have one problem. as long as the page is home page (index.html) it is highlighting that home link.. but if i click on the other link(say contact us), i am able go to contact page but it is not highlighting the link until i click the same link(Contact us) one more time.

[arcastrillo]

I added 6 buttons to mine and for some reason the 6th button doesn't line up w/ the others, it appears right below the home button. I went back and followed the tutorial on your site and it seems that I did everything correctly. Any clues as to what happened?

Other than that great tutorials. Keep them up.

[pcnagyi]

@arcastrillo just set the .lavaLamp { position: relative; height: 51px; margin:0 auto; width: 800px; padding:0; overflow: visible;

}

to higher px-s. I had the same problem, but it's working fine!

[annjonesfashions]

my bubble comes up on the rght side of my items in the navbar n keep moving to the right wen u move over a menu item help plzz

[bibonye76]

I have uploaded a video that may help....my channel is bibonye76

[bibonye76]

Hey! It was working until the javascript part ...I copied and pasted the lava-css-styles script and the links came in fine but once i copied and pasted the script hooks file into the html, the bubble rollover did not work.....aaargh! what did i do? I checked to see if the scripts were outside the site root....THEY were not, what is the issue? and I also browsed for each js file like u said.

[DreamWeaverTutorial]

@bibonye76 hi, please provide an online link to the page so that I can look at the problem

[DreamWeaverTutorial]

@bibonye76 hi, please provide an online link to the page so that I can look at the problem

[Graphics561]

Great tutorial. Are the source files available for download? Thanks.

[Graphics561]

Great tutorial. Are the source files available for download? Thanks.

[Exfridos]

Can I ask, how you knew the width in ".lavaLamp" should be 520px? - Is there a way, so when I change the menu-text, I would know the new width that aligns it to the center?

Thank you for a great tutorial! :)

[silaschakanyuka]

How do i link the JS files the hover is not working?? please help

[Wylde0328]

@DreamWeaverTutorial k thanks for all the help, i found that the three java script files were not linked up right, for some reason they said /path/to/ before the name of the java file...so thanks for everything =]

[Wylde0328]

@DreamWeaverTutorial it didnt work for me, i followed it step by step, the problem started when i noticed that the nav-top image didnt even show up, but i kept going and the bubble wont come up either...help me if you can

[DreamWeaverTutorial]

@Wylde0328 check in your CSS that the headerTop div looks like this: #headerTop make sure you have a hash at the front and a capital T

[Wylde0328]

@DreamWeaverTutorial that fixed the space at the top, thank you, but the bubble that hovers over the links wont show

[DreamWeaverTutorial]

@Wylde0328 that most likely indicates that your scripts are not attached correctly

[pcnagyi]

@Wylde0328 just link the javascripts again Shift+2 and than browse it!It will help You!

[warm122]

hi james,

I got a problem with the menu. I set the font color of the current item as black and the font color of the normal items as white. When someone hovers over another li item I want the font color of the current item go to white.

How can i do that?

[iostuber]

hi james

Nice tut!

but i can't find the article of the "current links"..

can u help me pls?

[DreamWeaverTutorial]

@iostuber link sent to your personal inbox - James

[MM5x2011]

I've done everything right and still can't get the bubble thing to follow the links when you move your mouse...I've tried to two times. 100% followed your tut and did everything right arghh

[DreamWeaverTutorial]

@MM5x2011 go to website, search for article tutorial of the same name. go to discussion at bottom of the page where I go into the procedure to accomplish 'current links'

[MM5x2011]

@DreamWeaverTutorial I looked into that bit. But that's not what i'm looking for. At the end of your comment you say "this will tell the jQuery script to leave the floating bubble on that link because it is the 'current' link'. "

That's not what I meant. I meant that the lavalamp isn't showing up at all. It stays the same way it was before you insert the scripts into the head tag.

[DreamWeaverTutorial]

@MM5x2011 then you haven't connected the javascript files correctly. I know that you say you did everything right but if no animation is occurring then it is because the javascript files are not attached.

[MM5x2011]

@DreamWeaverTutorial Well i guess that's the problem. But it is attached, I have went through it so many times now. Thanks anyway

[DreamWeaverTutorial]

@MM5x2011 send me link to the page on your website and ill take a look.

[MM5x2011]

@DreamWeaverTutorial It's not published. It's just a project that i'm doing. I'll zip the website's root folder, upload it to a file sharing site and you can just download it off there. Is that alright? Let me know and i'll PM you with the link.

[DreamWeaverTutorial]

@MM5x2011 yeah that'll work for me. - James

[PoisonPeters]

I just made this and now I'm wondering if I am at like "products" does the lavalamp blub then stay at that place by default?

[DreamWeaverTutorial]

@PoisonPeters go to my website. search for the article of the same name. go to the comments section to learn how to make the bubble hover over the current page it is on. - James

[dashby1969]

Great tutorial as always. Keep the coming.

Thanks

[Ndy12]

I have a question

when you click on a link, how do you make the hover box stay on the link clicked?

you used # links and i would like to know how it works when you enter the real links in

thanks

[DreamWeaverTutorial]

@Ndy12 go to my website, search for the article of the lavalamp menu. go to the comments section and you will see how to assign 'current' links

[Ndy12]

@DreamWeaverTutorial got it! thanks :)

[JamieH00]

Hey, I was just wandering (as the links don't work when using this javascript file) am I supposed to do something such as..location.href = 'pagename';.. inside the .click part of the function or use javascript to change the page with this?

[DreamWeaverTutorial]

@JamieH00 no its much easier. the links are in a list. give the relevant list item a class of current and the bubble will hover over the correct link.

[JamieH00]

Cheers but that works fine, but actually to change the page content when you click on the link I'm not sure at!

[JJDR04]

@DreamWeaverTutorial

Great Tutorial. Do you have a vertical menu version of this tutorial? Thanks!

[remcoweeber]

Nice tut. The lava lamp doesn't stay on the portfolio (or any other) button if I've put a link in the 'a href' to the portfolio.html. It just returns to the 'home' position. I can fix this with target a frame, but I rather not work with frames. Do you have an other solution for this. Thanks in advance for you reaction.

[Shion693]

Good work really!!!!

[rdurcal]

Thank u for your hard work...

[VeTutorials]

I have a question after I've copied the code it is slightly off centered and when I try to adjust it it goes into two rows

[rahj8786]

you did'nt explain well about the bubble! if it is an image or something.

[eltin182]

Hi!!! Pleasee, link off, i cant download =/ Reup it, pleaseee!!! your tutorial is PERFECT!!! Thanks!

[mirjde]

Hey buddy very nice tut james i have ever seen i have a little problem with it in the end where you make shadow & change text color i type

.lavalamp li a:hover  { color:fff; text-shadow:1 px 1 px 2 px #000; }

but it is not working Can you explain plz

[DreamWeaverTutorial]

@mirjde well i can see that where you have the color of white you have not put the # tag in front of it. try that and let me know - James

i.e. color:#FFF;

[mirjde]

@DreamWeaverTutorial It still not working  I'm typing now

.lavalamp li a:hover { color:#fff; text-shadow:1 px 1 px 2 px #000; }

am i writing it right or sm other problem

[sexxyspanish]

@mirjde No spaces between "1px" etc

[DreamWeaverTutorial]

@mirjde it looks like i left the # out of the tutorial as well! lol

[DreamWeaverTutorial]

@mirjde go to my website and check your code against the code example in the ARTICLE tutorial rather than the video. Ill send a link to your personal inbox. - James

[DSTOF30]

J query eh.... hmmm. I'm so raw. Cheers for the tutorial dude. It'll be watched again.

[tirathmistry]

Excellent No 1 video tutorials, you are awesome.10 million thumbs up... you make everything look easy. i love your all tutorials.Thanks so much for your kind effort for posting & sharing it. I learn so much!!!

Lots of detailed instructions,You are genus. Your tutorials are one of the best tutorials in youtube. I am glad that i am subscriber of your great channel

Keep educate us on youtube

God bless you :-)

[sacrome]

Nice tutorial!