LavaLamp for jQuery lovers! August 23rd, 2007
Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.
Just so you know, it weighs just 700 bytes(minified)!
Often I have noticed, that the credits are usually granted towards the end. Just for a change, i am going to give my credits at the beginning. This effect was originally written by Guillermo Rauch for the mootools javascript library. All I did was to port it for the benefit of jQuery lovers. Thanks Guillermo for inspiring the javascript world with such a nice effect. A special thanks to Stephan Beal who named it “LavaLamp”, and to Glen Lipka for generously helping with the image sprites. Many fellow jQuery lovers also helped shape this plugin with valuable feedback in the mailing list. Thanks a ton, all you guys.
As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.
I hope you agree that a typical HTML widget consists of 3 distinct components.
- A semantically correct HTML markup
- A CSS to skin the markup
- An unobstrusive javascript that gives it a purpose
Now lets follow the above steps and implement the LavaLamp menu for your site. Remember, In the process of porting from mootools to jQuery, i have simplified both the javascript and CSS for your convenience. So, be informed that you will need to follow the instructions on this page to get the jQuery version running. Follow the instructions on Guillermo Rauch’s page for the mootools version.
Step 1: The HTML
Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that.
<ul class="lavaLamp">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
In the markup above, “ul” represents the menu, and each “li” represents a menu-item. At this point it is crucial to understand that we will be adding another artificial “li” to represent the background of the currently highlighted menu-item. Since the background itself is cosmetic and doesn’t represent a menu-item, we will be adding it from javascript. Just to make sure we are in sync, “you need not add this li”, the LavaLamp plugin will take care of it. Once added, the “li” representing the background will look like this.
<li class="back"><div class="left"></div></li>
Step 2: The CSS
You can skin this markup in many different ways to achieve your own personalized menu. The following style sheet is just one possibility. A few more possibilities are demonstrated in the “Bonus” section towards the end of this blog entry.
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
Trust me, this is a simple style sheet. Follow along to understand what is done in each of its sections.
First, we style the “ul” with the bright orange background image and some basic properties like height, width, padding, margin etc. We use relative positioning because, that way we can absolutely position the background “li” relative to the “ul”. This helps by enabling us to move this background “li” freely within the context of the parent “ul”.
Next, we make the “li”s flow horizontally instead of vertically. By default, it flows vertically. There are a couple of techniques to do this. In this case, we are using the “float:left” to achieve this effect.
Next, we style the artifical “li” that represents the background of the currently highlighted menu-item. This uses the sliding doors technique. Also, notice the absolute positioning used as mentioned above.
Finally, we style the anchor that represents the actual clickable portion of each menu-item. These styles are mostly cosmetic and self-explanatory.
Some of the above rules may not be obvious if you are not very confident in how “positioning” works in CSS. For those, i highly encourage you to quickly read this article on CSS positioning. It is short, sweet and very informative.
Step 3: The Javascript
This is the easy part. Most of the javascript work is taken care by the Lava Lamp plugin itself. As a developer, you just have to include the mandatory and/or optional javascript files and fire a call to initialize the menu.
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
Include a reference to the jQuery library and the LavaLamp plugin. Optionally, include the easing plugin as well. It has many cool effects, that are not contained in the core. For instance, the “backout” effect used in this demo is part of the easing plugin. You can download jQuery here, Easing plugin here, and the LavaLamp plugin here.
Next, in the document.ready event, fire a call to initialize the menu. You have the option to supply an easing “fx” , the “speed” with which the animation happens and a callback to be executed when a menu-item is clicked. They are optional, the default “fx” being “linear” and the default “speed” being “500″ ms.
That’s it. At this point you should have a working version of LavaLamp menu for your site.
Bonus
Just with some minor changes in the style sheet, you can get a totally different look n feel for the menu. And yes, the HTML markup and the Javascript remain the same.
Here is one more variation, again with just some minor changes to the style sheet. I know, they don’t look pretty, but all i am saying is that you are limited only by your imagination.
Finally, for your convenience, i have zipped up all the necessary files into a cohesive package. Download it, and open the demo.html to see all the 3 variations in one page.
Feel free to leave a comment with your feedback, suggestions, requests etc.
Update
Based on popular request, LavaLamp Menu has been updated to support jquery 1.2.x versions. Download the zip file for version 0.2.0 of LavaLamp and open the demo.html to check it out for yourself. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.
[...] is a great effect for a menu, with lots of easy customization. It’s called LavaLamp. (jQuery [...]
Very cool. But I think there is a missing closing } in the startup code. I get a JS error on that line.
[...] LavaLamp jQuery plugin provides a really nice effect for menus…and another reason for me to go get and play with [...]
This is really impressive, bravo!
@Hector – Thanks, It should be fixed now.
That is pretty darn neat.
[...] August 24th, 2007 — richmarr I was shown this excellent JQuery menu effect today, which reminded me what a mind-numbingly great Javascript library it really is. In case you [...]
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery plugin menu javascript effect sliding doors) [...]
How do you set the initial ’selected’ menu?
@Jackson Tomlinson – You can give a class attribute of “current” to any “li” that you want initially selected.
<li class=”current”><a href=”#”>Ride an elephant</a></li>
[...] LavaLamp for jQuery lovers! A plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight. (tags: animation javascript jquery webdesign css) [...]
[...] Lava Lamp Menu Hover Effect For jQuery (tags: Menus jQuery MooTools) [...]
very nice.
hey I was wondering if jQuery works with a linux server? mootools does not and i was wondering if there was any luck with this one working as intended? and if yes, then how?
I don’t see any connection between jQuery (or mootools or any other javascript library) and any server for that matter. These code get executed on the client side – on the computer in which the browser is running. So, as long as you have a browser that supports javascript, these libraries should work. I may be approaching your question completely wrong. So, clarify with more detail, if my answer didn’t make any sense.
Lol…Did you heard about FancyMenu?? Google it:P
)
@Bdesign – Yes, LavaLamp is a port of FancyMenu(written in mootools) to jQuery. I have mentioned it in the credits section of this blog entry.
Sorry for kinda being vague – what i meant was that when testing my website offline (using mootools library) this menu showed up perfectly fine. However, as soon as i uploaded it to my server (running Linux if that means anything to why this isnt working) it just showed my links on the left and does not seem to execute the java whatsoever
I wouldn’t think it is the Linux Server, because, my website is hosted on a linux server and as you can see it works just fine.
Only thing, i am able to think of is, there could be some problem with the paths and the difference between paths in the local machine and the remote server.
thx a lot
I use GoDaddy Hosting (the Deluxe plan, which includes Java support and abilties) and i called them and they said my bar isnt working apparently because they dont support the “module” i’m using. Is this correct? I am using mootools and they said that jQuery should probably work over that. I just want to make sure jQuery wil work so that im not wasting another couple hours perfecting the image files and changing the colors and fonts and labels in photoshop.
[...] know how to write it yourself find out at the author’s page or download the package above which includes several working [...]
[...] JQuery ile yap?lm?? flash benzeri ho? bir menü örne?i. Link [...]
@Tyler – I don’t think it has anything to do with the hosting account. If mootools works for you, then jQuery must and will. But, now that you have mentioned about mootools, i can see the problem. Both mootools and jQuery are javascript libraries and they both (like other javascript libraries) use the $ symbol for shortcutting function calls. So, typically when you use these libraries together they will clash with each other. The good news is that jQuery has a solution for this. You will have to goto jQuery site, or even google “jQuery noConflict” and follow the links. I am unable to give you the exact link, coz, right now i am sending you this comment from the singapore airport and the internet enabled machines is not allowing me to open more than one browser window. Once, i reach home, i will send you the exact link that might help you.
This is great!
Thank you!
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery javascript menu css animation) [...]
Ah no sorry, I wasn’t trying to use them together. As you know there are two versions of this menu bar: the mootools one and the jQuery one (your port). I used java and mootools ONLY for the menu bar for my website, uploaded it to the server and the java would not run whatsoever. Then, I removed everything related to the menu bar and mootools from my site, included your jQuery port, uploaded it and I still get nothing. I called GoDaddy and they said that they don’t “support it.” Now i find this hard to believe as it’s simply another linux server and i have enabled server side javascript. It works when i test it in my own browser offline, but as soon as i upload it – it doesn’t work online. Do you know why this is?
@Tyler – Do u really mean that u are using java for the serverside. If yes, then most hosting services out there don’t support java. Most of the hosting providers out there provide support for PHP, Ruby on Rails etc, but java providers are limited to a few. Examples of a few who support java are dailyrazor.com and supplehost.com. Hope that answers your question.
Manipage
but index.html doesnt opening why?
@mehmet – before i answer that… why do u need that? u can always use gmarwaha.com/blog.
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! (tags: jquery javascript menu css animation effect plugin development design web fancy) [...]
[...] JQuery ile yap?lm?? flash benzeri ho? bir menü örne?i. Link [...]
What i want is for that bar to be displayed in my website. However, for this to happen dont i have to add all that html in my index.html page, the css in my style.css (instead of a separate stylesheet), and the .js files on my server? I mean, i test my site locally on my mac before i upload via FTP to my server and if it works on my mac shouldnt it therefore work on the server when i upload it? I’m assuming for the example bar i see above that you are using server side java or is it client side? (im new to programming and writing real code). thanks!
Perfect.. thank you so much
Lavalamp baby
hi
hmm i got it working but it’s a beggar to style. Trying to get it to center but it doesn’t want to play ball. Align left it’s ok but when you try getting it to center it won’t work..
Any ideas? pointers?
Thanks
There is a syntax error in the file jquery-1.1.3.1.min.js which prevents the links from actually working when you click them (even in the demos above). I’m not sure how this was missed but it appears to be some kind of quote/escape character error in this line:
if(a&&!a.nodeType)a=null;a=a||document;if(!t.indexOf(“//”))
The problem is the character sequence “//” which, if you look at it in an editor that supports syntax highlighting (like Dreamweaver), you’ll see that it’s treating this as a comment. I tried all sorts of things, like replacing // with / and various quote/escape character combos but I can’t get it to work right. Either the effect is lost or the links don’t work, I can’t manage to get both. I’ll keep trying & if I can figure it out before someone else, I’ll post it here. Thanks.
Okay, I have confirmed that it’s definitely a missing double quote character. What I did was search the file (Ctrl+F) for the double quote character and Dreamweaver counted 815. Since these appear in pairs, we’re missing one (should be 816). Now to find which one is missing!
Okay, so I was able to find the missing double quote character. If you replace this line:
new RegExp(“^([:.#]*)
with this line:
new RegExp(“^([:.#]*”)
it effectively uncomments the code that follows and causes the links to work. However, it also causes the effect (in my case the bottom border) to disappear! I counted the single quotes the same way and found 55 in the document. I was able to find the “extra” quote but this time I think it may be there on purpose, unlike the last one (RegExp takes a string argument, which should have been quoted using double quotes). Here’s the line that’s giving me trouble:
parse:[/^\[ *(@)([\w-]+) *([!*$^~=]*) *(‘?”?)(.*?)\4 *\]/,/^(\[)\s*(.*?(\[.*?\])?[^[]*?)\s*\]/,/^(:)([\w-]+)\(“?’?(.*?(\(.*?\))?[^(]*?)”?’?\)/
See it? First, the sequence (‘?”?) then the sequence (“?’? then again at the end the sequence (“?’?
Unfortunately, I’m not strong enough in regular expressions to tell if this is supposed to be this way or not and what if anything can be done to get the effect working along with the link.
Thanks.
Okay, sorry for posting a series of comments about this but I realized that I was wrong about the quotes. The line new RegExp(”^([:.#]*) is part of a long series of concatenated strings, so it’s correct, there’s nothing wrong with it.
However, the effect and the link still won’t work together at the same time (try clicking the menu items above, they should take you to this page, http://gmarwaha.com/blog/?=7# but they don’t).
This is an awesome menu but it would be so much better if it functioned as a menu!
Please help, all out of ideas. Thanks.
@Andy – Are u trying to get the entire menu to the center of the page? If that is the case, you can try the famous margin: 0 auto; technique for the ul of the menu. Or, you can give some margin left so that the menu appears towards the right(this is how i have brought it to the right in my case). Hope that helps.
@Carlo DiCelico – I have intentionally made the menu in the demo not to take to “#” anchor when clicked because then, if you are in the bottom of the page, you will be taken to the top unnecessarily while viewing the demo. Notice the “return false” in the callback function. This is what is preventing the menu from taking u anywhere. However, this is not part of the plugin itself, rather this is part of my code that gets executed when the menu is clicked. Hope that helped.
I couldn’t understand some parts of this article o.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
I would really apreciate a vertical oriented version.
Could it be possible?… or at least some tips to get it.
Tx.
Oh, okay…so I can just change the return false to return true? also, what part of the code is responsible for keeping the menu item clicked underlined when the mouse moves away?
Thanks a lot!
Could you please explain the setup of the gif image for the “with image” menu. I see you have bg.gif and lava.gif and that the lava.gif is actually to images saved as one gif (one above the other). If I want to use different colors what is the correct way to create the lava.gif image?
@Daniel – Most of the work is done using CSS. So, a good CSS resource would be the best point to start. As far as the javascript part is concerned, it should be very straight-forward. No more than the explanation in this article should be required. But for more information about jQuery, visit jquery.com.
@Julio – It is not currently possible in this version, but i am working on that and will be releasing the next version pretty soon. Keep yourself updated by subscribing to this rss feed.
Hi, I am trying your great menu out, and I changed the return from false to true in order for the links to work, but now the marker for the active link goes back every time to “home”, and I don’t want this to happen.
Can you please tell me how to preserve the original behaviour?
Thank you very much!
OK I think I know why this is happening…my links cause the page to generate all over again, so the startup function (“$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700}) });”) gets executed every time the page reloads…can this cause the back li to get to home every time?
How can I avoid this from happening?
Thanks!
Yes, how do you get it to highlight a particular menu item as being the page the user is currently looking at?
@Andres – That is correct. When you remove the “return false”, you are allowing the link to do what it is supposed to do – take u to a different page. Since a new page is being shown, the lava lamp comes back to the first menu item (which is the default). The easiest solution to this is that, you will have to set the “li” that represents the current menu item in the HTML markup for that page itself. This can be done by adding a class called “current” to the “li” that you want to represent the page. For example, in your home page you might leave the defaults as such. In the next page, your lavalamp menu will have the class attribute for the “li” representing that page to “current”. This will make your new “li” as default. Hope that helps.
@Rob – You just set the class attribute of the “li” that represents your current page to “current”. This will make that particular “li” as the default selected menu item.
But that requires that I make a different header for each page…I guess that could work but is not acceptable for me…isn’t there a better way to solve this?
Thanks
Perfect! Thanks – this works very, very well
@Andres – I just used some PHP. I already had a variable which altered the page title – I just checked against that. You could use Javascript to check the current page’s filename, but it’s not as good as doing it serverside, I think.
Yes I took care of it also, with Javascript. Thanks to both of you.
Regards.
I have an onClick=”" on a box elsewhere on the page and I would like it to be able to trigger the lavaLamp menu to move the image to a specific menu item as if it had been actually clicked. I can’t figure out how to do this or if it’s even possible.
Has anyone figured these links out yet, I changed the false to true and it still doesn’t work. If anyone has this working…can you you post it somewhere please. Thanks
@Steven – I don’t think it is possible with the present code. But i guess, it should not be a difficult task to achieve. Just take a look at the code. If you are not able to fix it yourself, lemme know, we can work on it.
Is there a way to orient the menu vertically? If so, could you post the code? Thanks very much!
Hi, i updated to jquery 1.2 and noticed that lavalamp no longer works, and i believe it’s because the dequeue method is now gone. any idea what the alternative or fix for this is? thanks!
matt
update: i switched the dequeue function call to:
jQuery(this).dequeue(this, “fx”); }
and it seems to work.
Figured it out. Created a function that accepts an element ID and generates a click event for that element.
function clickIt(elementId) {
var clickevent=document.createEvent(“MouseEvents”);
clickevent.initEvent(“click”, true, true);
document.getElementById(elementId).dispatchEvent(clickevent); /* ff only*/
}
Of course, this requires each LI have an ID param, but that’s okay by me.
Is there any way to orient the menu vertically?
[...] LavaLamp is a latest release jQuery Javascript menu based on the original design of fancy menu by Guillermo Rauch. It is a Web 2.0 style smooth sliding nifty effect menu with light weight code and extra two more interface styles. You can free download the full source code file here. Besides last month we had a popular roundup of CSS based navigation menu, check it out for further reference. [...]
@tom – I am sorry, but at present this plugin doesn’t have vertical orientation. The next version might have it, but i can’t tell exactly when it will be out.
@matt – Glad you got it to work. I will use your fix when i update the plugin to support jquery 1.2
@steven – glad you got it to work.
[...] original fancy menú con efecto “sliding” hecho bajo mootools por Guillermo Rauch y que ganesh adapta para jQuery. El resultado es bueno y lo mejor de todo su peso, 700bytes, compatible con IE6/7, Firefox y [...]
[...] LavaLamp [...]
Awesome! I gave up on using fancymenu on a site one time because of how mootools conflicts with prototype, I’ll have to check this out and see if it would be compatible now.
It’s cool,But so slow.The inner block is slack whill disp
I like your website alot…its lots of fun… you have to help me out with mine… notem6715
Cool
Hi Ganeshji,
Thanks a lot for your job
I followed Matt’s suggestion and I change this in jquery.lavalamp.min.js:
{$back.each(function(){$.dequeue(this,”fx”)})
to
{$back.each(function(){jQuery(this).dequeue(this,”fx”);})
and now the menu works with JQuery 1.2.1
But as you can see on this testing site:
http://luxpopuli.fr/cfdt/
the pink square doesn’t follow the mouse sursor. I mean: if you go to RESEAU CFDT ISALPIN from QUI SOMMES-NOUS? then the square will stop first to CONTACTS, after to NOUS REJOINDRE and then to RESEAU CFDT ISALPIN.
In fact, the square stop onto each item the mouse cursor fly over.
I would like to make a suggestion:
would-it be possible to add an option making it possible to have a sub-menu ?
I added a su-menu, but the behavior of the square is then realy strange.
Regards
Very nice this blog =)
Wow
I downloaded the Demo files, changed one link from # to http://www.google.com and the link doesn’t work. Why is that?
great plugin. Yeah I spent some time wondering why it wasn’t working to find out I had to downgrade to 1.1.3.
I tried doing matts workarounds but not sure where those should be put but I think the id divs are right…
Anyway thanks. Looking forward to 1.2.1 compatibility!
Very nice this blog =)
Thanks pal, we just made it run, also with php for the current class selection
Hey, this is awesome! But does it work with the latest jQuery: 1.2? It would be so wonderful if it did, I do believe 1.2 is a major improvement on the toolkit. If somehow you get this please up date the plugin if necessary. Thanks a bunch!
Hello
Very much for a long time searched for article on this theme.Thanks.
by
neat! thanks for your effort!
very nice script !
I nevertheless experienced a problem in Firefox and Safari that I have not been able to fix despite all the tentatives I did.
Here is the problem : the lavalamp “effect” always shows in front of the links preventing those to be clicked. Said in a different way, the z-index of the tag is higher than the z-index of the tag no matter what you do in CSS.
It does work in IE 7 though.
Any idea.
well,
i was tryn’ to get it work with JQ-1.2.1 without good results. Both of “tips” that was published above make lavalamp work with 1.2.1 but with speed of C64
the reason is becouse of new format of dequeue (1.2), and (maybe) animate also.
so, here is working path – change function setCurr(each) to:
function setCurr(a){ $back.css({“left”:a.offsetLeft+”px”,”width”:a.offsetWidth+”px”});curr=a};
function move(a){
$back.each(
function(){
$(this).dequeue()
} ).animate({width:a.offsetWidth,left:a.offsetLeft},{duration:o.speed, easing:o.fx})
}
have a nice day!
of course, i’ve made a mistake. when i wrote “change function setCurr(each)” i mean “change function setCurr(a)”
sorry
Very cool script! Thanks a lot
For people looking for a vertical one, it’s very easy to adapt: http://krijnhoetmer.nl/stuff/javascript/bounce-menu/
Great job. When you look at the code, you realize how great a base jQuery is for plugins. When you examine the (less than) 30 lines of code to pull it off, you (and Guillermo Rauch) realize how elegant a programmer you are. Bravo.
Hey there, great menu! I love it! Only one major thing though, its not compatible with the latest release of jQuery.
Any chance of an update? or any pointers on how to make it compatible?
I have downloaded this, its very cool, but I can not get it to work at all. The effect works great but when you try to click on a link it will not go to the page. I used the demo provided and just swapped out links and it is not going to the link, the right click and then open in new tab works fine so the links are correct and there but the normal way will not work. I am using jquery-1.1.3.1.min.js if that is some problem. Thanks for any help.
This plugin is currently incompatible with jQuery 1.2.x. To make it compatible, replace
.each(function() { $.dequeue(this, "fx"); })with.stop() around line 84-85.Cool menu…..Just replace true instead of false in the following function… Links to other page will works….
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
I had no problem making this code play nice with jQuerynoconflict and all appears to be fine except that when I test in Safari 2.0.4 it takes forever to load and the effects don’t react properly to mouse movement. Safari just chokes on it. I can’t find any Javascript errors etc., so I’m wondering if anyone else is having this problem. I’m using it on a wordpress 2.3 build.
[...] Lavalamp for jQuery lovers – Hover menu built with A semantically correct HTML markup, A CSS to skin the markup and unobstrusive javascript [...]
[...] Lavalamp for jQuery lovers – Hover menu built with A semantically correct HTML markup, A CSS to skin the markup and unobstrusive javascript [...]
Impressive to say the least. I’ve been looking for something this slick for a while. Definitely rivals flash – but all the benefits of SEO. Kudos kudos!
[...] LavaLamp for jQuery lovers [...]
Hello,
I try to use the lavalamp menu and i try to change the initial selected menu with a css class current. Could you show me an example of that because i have a problem to do that
Thanks for your response
Well, Nice Menu Pretty Handy work.
[...] LavaLamp jQuery ???? ? ?? jQuery [...]
Cool JQ plug-in. Nice work on the demo too! I’ve been trying to get your plug in to work on JQ 1.2.1 (latest version) and have had no luck. It does work with your working version 1.1.3.1. Just so you know.
Hi,
Did someone managed to adapt the menu to easing 1.2 ?
If yes, could you post the part of code we have to modify (if it is not too much long) ?
Thanks per advance
Pascal
I have to say, that I could not agree with you in 100% regarding o.us poetry, but it’s just my opinion, which could be wrong
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Hi,
I’m trying to understand the reasoning for the image on http://www.gmarwaha.com/jquery/lavalamp/image/lava.gif and how it interacts with your actual menu. Is there something I’m overseeing? Is it really required?
[...] ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
in my Firefox (2.0.0.11), the animation stalls if the mouse if off the container while it is in motion but the highlight bar snaps back to it’s current active position on mouseOut in IE (7.0.5730.11), and IE is snappier animation for me, too. Having FF behave like that is not advantageous.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Great plugin, love the effect. I took all of the suggestions on getting this to work with jQuery 1.2.x and integrated them into the code for this plugin, in addition, I changed the plugin code to keep it from conflicting with other libraries. Let me know if you want a copy of the updates. Now I just need to figure out how to get it to display submenus……………..
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
nice plugin really but I’ve been trying to get your plug in to work on JQ 1.2.1 and have had no luck.
I’ve been trying to get your plug in to work on JQ 1.2.1 (latest version) and have had no luck.
Nice work!
But…
On Internet Explorer 6.0 “Ride an elephant” menu entry appear splited on two lines like this:
Ride an
elephant
Because of this your menu demo look is broken (for example the blue line from Bonus demo overwrite the “elephant” word, the highlight box does not expand as Ride an elephant do and so on…)
You may want to fix this.
thanks it s great script for me, i will use it
[...] http://www.gmarwaha.com/blog/?p=7 [...]
thnkx
Will use it on my site for sure.
I have just gotten into the whole new world of jQuery and the great things it can do… I was wondering if anyone got this to actually work with submenus as if not – i think i may have to get my fingers wet.
[...] for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS Dock Menu.jQuery Pop-up [...]
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
[...] Lava Lamp for Jquery Lovers [...]
Just a small thing – I seem to notice that the original mootools animation is slightly but noticeably smoother (Firefox 2 on Linux). Is this something that can be improved in the plugin, or is this due to a difference in how JQuery implements easing animations and effects? I suspect it is the latter since I’ve noticed this in a couple of other similar plugins. In any case, thank you very much, this plugin is just what I’m looking for!
y swapped on the:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return menuItem;
}
});
});
the line: return false;
by: return menuItem;
works.
sorry the bad english ;P
I like this! Good job! Thank you
Hi,
I like your lavalamp effect very much. GOod job!
I am trying to get the menu to work using the latest JQuery version (1.2.3) but your menu only seems to want to work with the 1.1.3.1 version. Any ideas how to get it to work with a later version?
Many thanks.
On closer reading the comments I found the answer that Shadowhand (comment 91) made fixed the issue.
Many thanks Ganesh and Shadowhand!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
What a great script, works a treat too! Keep up the great work
Hello all – I have posted an update to this awesome plugin that works expressly with jQuery 1.2.x and adds two new features:
You can now move the LavaLamp highlight vertically as well as horizontally (even diagonally!)
You can specify the default list item to highlight upon page load.
Demo and download here: http://nixboxdesigns.com/lavalamp.php
Thanks Guillermo and Ganesh!
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
good work!
Thank you Jolyon Terwilliger !
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] http://www.gmarwaha.com/blog/?p=7 – LavaLamp [...]
[...] LavaLamp jQuery ???? ? ?? jQuery ????? ???LavaLamp jQuery ???? ??? Mootools Fancy [...]
[...] LavaLamp [...]
How can you change the starting menu item that the shadow is behind? When I click on a menuitem, i want it to reload the page and stay on that menu item to indicate which page is loaded.
[...] LavaLamp Jquery / BrowserShots / Phatfusion Image Menu / Webber Dock Menu / Accordion / Css Menu ShowCase [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] http://gmarwaha.com/blog/?p=7 [...]
It’s really very nice menu , but can it work with submenu ? i would like to use it but i need to display submenu
Thanks
Thaks works great, easy to customize cheers!!
Well done, mate! Good work! Thanks for sharing!
[...] Link [...]
thank you
[...] Another demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu [...]
[...] LavaLamp jQuery Sliding Menu Es una Slide basado en jQuery con un codigo de muy poco peso [...]
[...] LavaLamp for jQuery lovers! [...]
exelente muchas gracias !!
like Ed said…
How can you change the starting menu item that the shadow is behind?
When I click on a menu item, i want it to reload the page and stay on that menu item to indicate which page is loaded.
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
This is truly an amazing script….. i absolutely love it…… thanks a lot dude. i will surely use it for my web designing needs.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Awesome, I just implemented on my site, thank you.
To Shane and Ed, I had the same issue, I’m using WordPress and to get the highlight at the right spot I used conditional statements like this:
“>Home
>Category
>Page
ops, the code didn’t come out properly, anyway, look at wordpress.org for conditional statement
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
This such a cool and well written piece of code… i am pretty soon going to put this on website….thanks a lot
Nice work!
It has only a problem. I won’t works with newer versions of jQuery, and i cannot use it because i need newer versions of jQuery for my other components in the site.
If you could change-it so it could be used with jQuery 1.2 i will be veeeerrrryryyyyy happy!
This project seems to be continued here:
http://plugins.jquery.com/project/lavalamp2
Hi Ganeshji,
Thanks a lot for your job, am designing a new menu but am having problems when i make a drop drop menu.
Thing is that when i hover on my second menu border-bottom:2px solid #ff0000; return the width of the drop down menu which is 185px;
Where can i send you a copy of my work??….or any print screen.
Regards
[...] behind it, I’m not that clever! It is powered by jQuery and most importantly the fantastic lavalamp plugin. In these examples I have kept everything as close as possible to the original to make it easy to [...]
[...] Lava Lamp jQuery Menu [...]
Hi fellows, Hi Ganesh,
I’ve had hard times with the lava lamp.
For your information, it does not work with all versions of jQuery; not with jquery-1.2.3.min.js at least.
My two cents.
Oooops !! Should have read the comments, especially dave’s (164) before posting, or working on it.
Thanks dave !
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
ops, the code didn’t come out properly, anyway, look at wordpress.org for conditional statement. ???
t’s really very nice menu , but can it work with submenu ? i would like to use it but i need to display submenu ?????
Hey, ive been testing this awsome script, but i cant get the “CURRENT” class to function!?
is there some css code for it, because I have the ()
in the code please help me!
[...] I programmed the entire site. For the menu, I utilized a Javascript code called Lavalamp. [...]
moderate comments page
[...] the most popular JavaScript frameworks on the planet, gets a lot of cool scripts developed for it. LavaLamp is one of those jQuery-dependent scripts that’s useful, and really cool at the same [...]
[...] focus on based on it’s position on the screen. labelOver Overlay labels over an input field. LavaLamp Navigation menu with a ‘lava’ effect. Lazy Load Only load images that are in the [...]
[...] focus on based on it’s position on the screen. labelOver Overlay labels over an input field. LavaLamp Navigation menu with a ‘lava’ effect. Lazy Load Only load images that are in the [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Men. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Men. jQuery [...]
Hello Taylor, I am using mootols and also Jquery in a single page, mootools for the banner and Jquery for the right menu, but the problem is that if use both of them then i get an error with the mootols and ey mootools stop working , and if i comment any one of them then the other works veryfine, Do you this there is a clash between moootols and Jquery? ? ?
PLease suggest as it is urgent.
THanks in advacen
kranthi Reddy
Hello Ganeshji, thanks for your nice work, i adapted your code to work with Joomla, i can send it to you, so you can upload it too if you want. Just email me.
Thanks one more time =)
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
nice work. i adapted it , many thanks
This menu doesn’t works with lightbox at the same time.
Can this work if the navigation text is part of the image, and not coded?
ops, the code didn’t come out properly, anyway, look at wordpress.org for conditional statement
[...] ?lavalamp.js ??????????????????????????????????????????FLASH????????????????????????????? [...]
[...] LavaLamp [...]
IF YOU ARE TRYING TO GET VERSION 1.2.x. TO WORK DO THE FOLLOWING:
In the jquery.lavalamp.js file, replce this:
.each(function() { $.dequeue(this, “fx”); })
with
.stop()
around line 84-85.
To handle back/Forward buttons n url changes i’ve done the following (Based on steven idea)
(function() {
var previousURL = window.location.href;
setInterval(function() {
if (window.location.href != previousURL) {
var evt = document.createEvent(“MouseEvents”);
evt.initMouseEvent(“click”, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
switch(window.location.href){
case “http://bla/dfsgsdfgs” :
document.getElementById(“l1″).dispatchEvent(evt);
break;
case “http://sdlfks/Dsfsdfsf” :
document.getElementById(“l2″).dispatchEvent(evt);
break;
}
}
previousURL = window.location.href;
}, 500);
})();
Hope this help someone
[...] lavalamp : kayma efekti veren bir eklenti [...]
nice work on the menu. very cool and lightweight code.
it’s posible to change the menu orientation?
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
i have one question …. about this menu since i have some pages like :
home.hml, aboutme.htm, contact.html and so on, but i have one prob. for ex if i am on home page and click CONTACT PAGE its all ok Contact page is loaded but menu now showin (hover if i may call it that way) is on home page menu .. not on contact how can i fix this??? anyboy know?
I know this may seem like a very sad thing to comment on but i do have a question. because the id=”" tag is using a number it wont validate. is there a way to change this to a letter or would it just be to much trouble to worry about one error.
[...] lavalamp : kayma efekti veren bir eklenti [...]
Hi Ganeshji –
I have everything working perfectly – except – the right side of the active ’s background. The background just cuts off as opposed to rounding off as it should. I suspect something is funky with the “.back” class in the styles but that’s just a guess. I would be more than happy to make a donation if you can help me. Thank-You!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] Lava Lamp jQuery Menu. [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
thanks for this script, i take this menu for my website, http://www.scale-style.be.
Hi,
We have a problem trying to get the lavalamp navigation working along side jquery zoom ( type magic zoom). We’ve already tried out everything in our power (including var j = jQuery.noConflict(); $j(function() { $j(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })}); ) but with no sucess.
Any solutions?
[...] Lava Lamp Menu This menu showcases a very unique lava lamp effect on hover. [...]
hello, I would like to put this into a menu of my blog, but I am a novice, if you send me a concrete explanation of how to do it.
Since already thank you very much!
taquito
thanks you..
Is tutorialvid.com using the lava menu. Looks awesome.
At last, I’ve found a site that shows me how to do this!!! Thanks bigtime!
Im impressed! I love jQuery and all of this tips based on it!
thx !
thank you wery much
I don’t know if people have already figured a way to do this, but i have this beautiful script working with submenus. These submenu’s dont have their own lavalamp though.
Just one small code change is required in the lavalamp.js file.
When the script initialises the lavalamp-ness, it collects all li’s. All you need to do is declare that you want direct li descendants of the ul (instead of all li’s). Do this simply with ‘$(“> li”, this)’ in the lavalamp.js file
So it should now read:
$li = $(“> li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
Hello, this effects it’s very nice, and i wont to use it for my new website.
When I done all as in the tutorial, my links doesnt wont to work and I dont know how to solve this, problem. Help me please!
Bye
Hello! I’m using this beautiful menu for my website, however I seem to have a problem. The menu shows up fine but it only displays 3 items from the list, when it should display all the 5 items…Please help me! You might look at my page source to see if I did anything wrong.
Nevermind! I found a solution to the problem. The lava lamp menu only displayed 3 pages instead of the 5 pages I wanted, and I found that the problem was in the style.css file. My #nav-left tag had a width of 440 px which didn’t give room for all the pages to appear. I just changed it to 700px and it displays just fine
Hope this helpe others solve this problem. (Note: I use Premiun News Theme on Wordpress. If you use another theme or you’re not a Wordpress user, the menu might be located on another place rather than nav-left!)
I am kind of beginning here … I tried to put an actual file path in the “Plant a tree” – as”Plant a tree“, but it won’t go to that file, and it still works as if a #. do i need to add something like
return window.location.href for the function click: function()?
could anyone show me where to modify to make this href link work?
thanks!
kz
Hi:
i got it to change the micro func in the test file to:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
// return false;
return menuItem;
}
});
});
I hate to admit but i have to: this fancy menu is excellent, so are the tutorial, downloads, references, and the comments. Fantastic.
it’s really very nice menu
Don’t know if anyone else has found a work-around for making the links function, but this works:
$(function() {
$(“#ll_cont”).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
//alert($(this).attr(“id”));
}
});
//THIS IS THE ADDED CODE
$(“.ll > li:has(a)”).click(function(){
document.location.href = $(this).children(“a”).attr(“href”);
});
//END CODE
});
Err…Sorry, forgot to mention that ‘.ll’ is the class I shortened ‘.LavaLamp’ to, so basically this will select all li’s inside your lavalamp list which have an ‘a’ child, and navigate to that a’s href attribute on click.
Hello,
Thanks for this menu and forum;
I have this message after install the script:
Fatal error: Smarty error: [in header.tpl line 65]: syntax error: unrecognized tag: location.href = ‘?e=’+e; (Smarty_Compiler.class.php, line 436)
Can you help me?
thanks
This lamp give weird loading.. effect on mouseover in IE6
Hi
I’ve increased the background image (bg.gif to a width of 900px). My text as before (the list items) is appearing from the left (left-aligned)… how do i center the list items so they appear in the middle of my larger image?
Thanks
Hi,
I am very new in web programming as well as in JS. The menu is really a good menu. I want to use it. But the problem is it is conflicting with the versions of jquery in IE. I am using other version jquery-1.2.3.pack. for lavalamp it is jquery-1.1.3.1min.js. i want to use only one jquery. can anyone tel me how can i do that without any error in ie.
other browsers are ok. i also tried jquery full version it woudnt work.. plz help me
Error: $.dequeue is not a function
Source File: http://localhost/rosevalley/system/application/views/js/jquery.lavalamp.js
Line: 32
its showing this error also
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Could someone please tell me how to integrate this script into Joomla? Thank you.
Same problem.
I m trying to use this script with the menus of Joomla.
Thanks nice menu
Nice menus.
gj dude
Ok, got this to partially work with joomla, but when I click the links they don’t do anything.
Got it working with Joomla! Contact me via my website if you would like more information.
Thanks for all
For all those that require the right page to be selected and the class=”current” is not working you need to edit the JS file first.
Find this line .addClass(“current”) and remove the text to look like this .addClass(“”) now add your class li class=”current” on your page to whichever nav you want to be selected. thats it. Any problems, I can always help out, contact me through my website http://www.coolcreation.co.uk
thanks
Ganeshji, did you get the code from “Roman C Coedo”? I would love to have it for my site.
Roman, can you mail it to me via Emerging Energies (dot) com?
Thanks!
Lavalamp Bottom Style(jquery-1.1.3.1.min.js) and lightbox(prototype.js) don’t work together at the same time.
Could anyone tell me how to solve it?
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
Hello! I’m using this beautiful menu in website. I am very new in web programming as well as in html and css. It is very helpfull me. thnks all
Hello! I’m using this beautiful menu in website. I am very new in web programming as well as in html and css. It is very helpfull me. thnks all
[...] Rick asks; I can tell from your posts that you are familiar with jquery. What would you charge to make this work with my oscommerce store: http://gmarwaha.com/blog/?p=7 [...]
hello . I am new to programming … in my web site I am using lightbox effect and lavalamp . when you use both lightbox effect is not working .
showing some error
???????????????????????????????
anyone tell me how to solve it?
Is tutorialvid.com using the lava menu. Looks awesome.
Anyone with issues using lavalamp with things like lightboxs and prototype.js library, this is due to a conflict between the prototype library and Jquery library. If you Google you should be able to find the answer. If not I will write something up over the weekend on how to solve the issue.
Anyone with issues using lavalamp with things like lightboxs and prototype.js library, this is due to a conflict between the prototype library and Jquery library. You need to resolve this conflict using something like this http://docs.jquery.com/Using_jQuery_with_Other_Libraries
[...] ??????? ?? PLAIN TEXT [...]
Thanks Mark! That’s exactly what I’ve been looking for. The menu works beautifully on my homepage, but then when I go to my gallery page, which uses a lightbox plugin to load the pictures, the menu just looses it’s beauty. I will read through that and try to solve this problem.
Thanks a lot!
Does not work with new jQuery versions. Tried jquery-1.2.3.min.js and jquery-1.2.6.min.js on my servers but only your jquery-1.1.3.1.min.js did work. What a waste of two hours of my life
(((
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi there! I wanted to ask is there nay possibility to force this menu to bi linked?? I can insert a href function, but there’s no way to link work!!! Any suggestion??? Please!
Hi, my menu is working fine, but when i refresh the page in safari the hover moves. It looks like it is moving to the bottom left of the ul tag, once i hover over a button it goes back to normal, it just doesn’t look too good when it does this.
Ok. Thanks Mark.
How do you set mouse over effect? I have a problem on this.
Thanks again for your commnents and this article.
Ok. Thanks Mark.
How do you set mouse over effect? I have a problem on this.
Thanks again for your commnents and this article.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi Tam, not sure what trouble you are having exactly, can you explain in more detail? is it not working at all? or you can not change the selected class?
Anyone with issues using lavalamp with things like lightboxs and prototype.js library, this is due to a conflict between the prototype library and Jquery library. If you Google you should be able to find the answer. If not I will write something up over the weekend on how to solve the issue.
Hi, this menu looks awesome.
I was using only one function to generate the menu, so it was kinda hard for me to figure it out how to set the current page.
I create a separate javascript file which uses YUI’s API:
YAHOO.util.Event.addListener(window, “load”, findPage);
function findPage()
{
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf(‘/’) + 1);
var current_element=document.getElementById(sPage);
YAHOO.util.Dom.addClass(current_element, “current”);
makeMenu();
}
function makeMenu()
{
$(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 });
}
[...] ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
thanks.
The menu works fine, but the links don’t work!! Everytime I manage to get the links to work by updating the code, then the moving background disappears!
What am I doing wrong? And what to I need to do to make the links work but keep the moving background?
Thanks!!
Thank you so much.
Thanks, nice.
Thank you
what to I need to do to make the links work but keep the moving background?
Thanks!!
@craig – Well if you don’t wanna have to deal with another code that is like this one (http://nixboxdesigns.com/lavalamp.php) then I found a very simple alternative to that. Simply add a javascript function to redirect the users where is says add in:
This will redirect the user and if the user right clicks to open the link in a new tab it will work as it should. There were a few other ways ppl found to do it just look up at the posts.
lol sry didnt realize it worked with html like that lol
edit this
a href=”#”
add in javascript to make it look like this
a href=”yourpage.php” onclick=”document.location.href=’youpage.php’”
Good Luck ^_^
Hi Tam, not sure what trouble you are having exactly, can you explain in more detail? is it not working at all? or you can not change the selected class?
[...] LavaLamp for jQuery lovers! [...]
I am using LavaLamp with AjaxContent Plug-In http://www.andreacfm.com/index.cfm/jquery-plug-ins/ajax-content; is it the combination of the 2 why the menu doesn’t stay on the current click link with the menu when using an Ajax method? It keeps reverting back to the previous link which is the default.
Anyone else using the 2 in combination with a work around?
[...] ein sehr hübsches Script im Web 2.0 Stil ist das LavaLamp Script. Hier wird der User nicht durch eine Bewegung im Menü geführt, sondern dadurch dass die [...]
I have tried this menu with several methods of jQuery ajax calls to load content into a element; not one works where the link clicked remains in current state, always resets to last clicked or default current state.
As anyone have a solution to use this menu while loading content into an element via ajax?
If I block out move(curr), it works, except the hover state doesn’t work. Is there away to do a callback to set the current state?
$(this).hover(noop, function() {
//move(curr);
});
[...] [...]
I think this is a fantastic menu. One of the best I’ve ever found. However I need to use it on a site that is using jquery-1.2.3 which is required for a side menu.
I’ve been trying to get this to work with it with no success. Does anyone know a way to do it or have an updated version that will work with jquery-1.2.3 or 6.
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
Hello. I have set up the lavalamp menu at the top of my page. It will be present on every page. How do i make the clicked menu item stay highlighted on the next page. EG on the home page, the lava defaults to sit under the home link which is the first link. If i click on the contacts link, the 5th link say, how do i make it so that the lava then naturally sits under the contacts link on that page? Currently it just defaults to sit uner the home link. Thanks.
J
Ahh found the answer in post 244. Thanks Mark.
thanks for the menu.
[...] LavaLamp jQuery Sliding Menu I – Demo and Tutorial [...]
thank you veryg good article and idea
imagine if that’s water baloon..wow good..thanks
Hello,
Great menu; i was thinking to create (from scratch) a similar menu on flash and javascript. But this is great, it saved me a lot of time and now i will be more open in the use of javascript and all his potential.
Thanks
P.S. is there any recommended book?
Pepe
@fantoi- You’re right! it’s useless…I read and tried all the comments but still cannot get the links to function! some suggestions in the comments worked in making the links work but they disabled the sliding-hover effect!
BTW: in my case it’s the menu #3….Anyone got this menu actually working?
Hello, help me please, how to use this plugin in joomla?
Great thing Ganesh.Thanks for sharing this excellent lava lamp.
it can’t click in ie7
[...] lavalamp menu, and various jQuery [...]
so good?I like it??
The Potala, Jorkhang Temple,Sera Monastery…are all the wonders ,not only of Lhasa, but the whole Tibet!Tibetan tour guides take you These trekking, bicycling and moto tours will for sure make it unforgettable in your whole life!
very good. thanks
Can this blog comments get any longer.
Cool! I like jquery, and I like this menu…
Link doesn’t work. How to make so that it work? Sorry for my bad english
Just now I noticed in Javascript that I mention above
$(function() {
$(”#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true; // changed to true
}
});
});
It’s working wonderfully but if needed help, I will come in touch.
Once again thank you for your work.
Sheru
thx,i like it
Ok. Thanks Mark.
[...] public links >> jquery Ganesh » Blog Archive » LavaLamp for jQuery lovers! First saved by montemps | 2 days ago novell-bugzilla.user.js updates First saved by oscar509 | [...]
oh thank you mark.
Very nice, thank you Mark.
Hey Guys
I was wondering if someone can supply me with a link to a working version with submenus?
Cheers Rachel
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hello people,
earlier the click was not working,so i used the code given above by Nandha(Nandha on October 24th, 2007 at 9:17 am )
$(function() {
$(”#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
but now that hover effect is not working,
can anybody tell where am i wrong
Hello people,
earlier the click was not working,so i used the code given above by Nandha(Nandha on October 24th, 2007 at 9:17 am )
$(function() {
$(”#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
but now that hover effect is not working,
can anybody tell where am i wrong
Has anyone ever tried to incorporate this into a 2 tier menu?
I will be trying to mash this, and jquery suckerfish (first 2 tiers horizontal, third vertical.
really keen to see if it can be done without too much css….
This lavalamp needs an update!! NOT compatible with the latest jquery!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
I have a question, I’m very new to this jquery.
I’m using this lavalamp menu system, but when i click on a menu item, I need it to obviously go to another page. On that new page, I need that lavalamp also visible but with the 2nd menu item highlighted with the lavalamp.
Makes sense? How do I make this happen?
Thank you
@noam: Assign a URL to the menu-item anchors to get the links working.
If you are using the code in demo download, then remove the click event associated with the initialization of LavaLamp. This click event is there in the first place to prevent the links from taking the user to a different page, just for demo purposes.
Finally, to have the clicked menu-item to be selected as part of the next page, supply a class called “current” to the <li> that represents the current page. This should be taken care by your server side logic. If you don’t supply a class to any <li>, then the first <li> will be considered by default.
Ganesh Ji , great code man , I’m loving it. Just one thing , How can I make the current page my readers are looking at be the current I searched the entire posts and did not find an answer. Is there a php code I could use?
[...] LavaLamp jQuery Sliding Menu It is a jQuery sliding effect menu with light weight code and extra two more interface styles. This effect was originally written by Guillermo Rauch using mootools javascript library. [...]
Great work!Awesome!!!
regards from China.
ok I hope you can help me figure this one out. I am trying to get my links to work and they dont, I used and then replaced the below:
Home
Plant a tree
Travel
Ride an elephant
I typed in and put it my links and replaced the “#” i.e :
Home
Plant a tree
Travel
Ride an elephant
but when I cliked on the buttons they dont go anywhere. Could you please tell me what am I doing wrong ? I will really appreciate it, txs.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] ?????????diary-cute??theme?lightbox-2??????????????diary-cute???lavalamp???????slideshow???????jQuery??lightbox-2?????Prototype???????$()???????????? [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
This plugin is very impressive! I dont have to use Flash to get the same simple effect! Thanks!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] the JQuery port of the fancy menu effect read this post or this post at meta20.net (aka Smooth Menu for [...]
“I am using LavaLamp with AjaxContent Plug-In http://www.andreacfm.com/index.cfm/jquery-plug-ins/ajax-content; is it the combination of the 2 why the menu doesn’t stay on the current click link with the menu when using an Ajax method? It keeps reverting back to the previous link which is the default.”
Look for the line: var $li = $(‘li’, this);
Changed it to: var $li = $(‘li a’, this);
It works for me.
I am having trouble setting the current state in .net (C#). I am using this menu as a control within my master page. The links can either be normal anchor tags or asp hyperlinks. Anyone know how I can get this to work?
[...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]
[...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]
I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.
This plugin is very impressive! I dont have to use Flash to get the same simple effect! Thanks!
http://www.intronhk.com/memory.html
[...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Does anybody have a blinking of cursor in IE6 ? How can I fix it?
[...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
[...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
[...] LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Ganesh
Nice work.
I am trying to use you lava lamp menu.
I wanted to ask you once I click one particular menu item and it navigates to another page how is it possible to highlight the menu item that was clicked. Now what it does it whenever i click any menu item and it navigates to another page the highlight moves to the leftmost menu item.
Any suggestions
I figured out how to make css submenus for this plugin. Change .hover to .mouse over in the $li.not(“.back”) block of code.
before: $li.not(“.back”).hover(function() {
move(this);
}, noop);
after: $li.not(“.back”).mouseover(function() {
move(this);
}, noop);
The .hover only works for its specific tag, .mouseover also includes the child elements.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Wow!
I love that this has real-world physics in the movement. Thanks a great loads to all involved, I am sure I will use this jQ add-on.
[...] Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu [...]
[...] Fastfind Menu Apple Dock Image Menu amongst others – as seen on Microsoft Tree menu Context Menu LavaLamp for jQuery Slashdot menu Mootools Menu copy Css Dock Menu Nice Horizontal menu Accessible Expanding Menu [...]
SOLUTION for the “non working links”:
Comment or removed from on jquery.lavalamp.js:
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. demo:LavaLamp 1.3 jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS [...]
[...] Lava Lamp jQuery Menu [...]
Anyone figure out how to get rid of the blinking cursor in IE6? Only seems to be a problem when using lavaLampWithImage. Thanks!
Hello there… can anyone help me with editing this menu… i couldnt figure out how to edit the first link on left side. When i change the home with something else… the flowing onhover image is getting out of the orange backround line… so my link too… how can i edit the positions of the links “home” “plant a tree” etc. how can i take them to the middle? or a side right
very nice script! love it! one question. I`m using the first example with images. But instead of a background image I only use the sliding lava image. the background is white and the lava image dark grey. the links are in a dark grey too. the current menu item is white so You can read it on the dark grey background. how can I change the script that the active item turns into grey again, when hovering another menu item, cause it`s invisible on the white background when the lava images slides to the hovered item?
regards chris
is there a way to get this to stay highlighted on the last item you rolled over? In other words, the background doesn’t slide back to the class=”current” item?
- C
Here is the solution to get it to work with jquery-1.2.6.min.js
open this file jquery.lavalamp.min.js
find the following line
{$back.each(function(){$.dequeue(this,”fx”)}).animate
changed to this:
{$back.stop().animate
[...] one uses Lavalamp a jquery menu plug in with smooth [...]
Hi, Just letting you know that i made a free css template with te with lavalamp menu. the template is inspired by itunes and i think lavalamp looks perfect in it. thank you so much for making this. You can download it from my website.
I understand the method of declaring an to show the currently selected menu link. Is there a method to do this dynamically though? Can you declare the currently selected menu item via a javascript function on each page? Any help is appreciated! Thanks!
i can’t get the highlight to “stick” after a link is selected. it keeps wanted to slide back to the extreme left. any solutions??
I included this cool lavaLamp menu as horizontal navigation on a website. But now all the other unsorted lists () have an empty list point () at the end. I thinks this is from from the back ().
Does anyone know how can I avoid this from the others menus to be shown?
Anyone know how to make it highlight the page you’re on instead of jumping back every time? Thanks in advance!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
I have included this in my osDate site I am working on. The only problem is that it just blanks the whole page… no code, nothing. This is in ie and Firefox! Demo page works fine on its own.
The weird thing is I’ve got it down to one line of code…
$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700 })});
If I comment out this line of code, it STILL won’t work. I have to either delete the line completely, or remove all code in the comment up to fx:
Can anyone please explain what on earth is going on?
Hi guys,
I found out what was going on… It was a path issue to the javascript easily solved! The path was relative to the top level of the site and not where the page template was stored. I also had to substitute the curly brackets in the javascript with versions defined in the PHP as {ldelim} and {rdelim}. That did the trick!
Dan Wrote
I don’t know if people have already figured a way to do this, but i have this beautiful script working with submenus. These submenu’s dont have their own lavalamp though.
Just one small code change is required in the lavalamp.js file.
When the script initialises the lavalamp-ness, it collects all li’s. All you need to do is declare that you want direct li descendants of the ul (instead of all li’s). Do this simply with ‘$(”> li”, this)’ in the lavalamp.js file
So it should now read:
$li = $(”> li”, this), curr = $(”li.current”, this)[0] || $($li[0]).addClass(”current”)[0];
I did what he wrote and it works with one small glitch. As long as you move your mouse onto a submenu item before the animation finishes it’s fine. If you leave your mouse on the top-level menu item until the animation is done (actually just until the bottom item moves all the way in) and then go to the sub menu the sub menu closes and the first item gets selected.
Here’s a link: http://www.fware.net/lavalamp/final_drop_withlavalamp.html
Any ideas/suggestions would be greatly appreciated!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi man! Great menu! how can i put it in vertical??
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi great Menu, one problem though,my links don’t work when I’m using it,which is obviously an issue,if it’s a menu. I know a solution for this was posted earlier, but I’m not sure what they meant. I could use some clarification or any alternative answers, if your up for helping.Keep up the good work.
[...] ???????????????????????????????????????????????? jQuery ??????????? 700 ?????????????? Blog ?????? Tag(s): jQuery, UE, Wordpress Shawn Published@5:42 / 2008-11-27 / Trackback / Skip No Comment ’til now Leave Comments Here… [...]
[...] do it in jQuery; just have a look at something like the SerialSlide posted about and something like Ganesh ? Blog Archive ? LavaLamp for jQuery lovers! on how to capture the mouse position to trigger movement and well, dig [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] Lava Lamp jQuery Menu. [...]
[...] Lava Lamp jQuery Menu. [...]
Thanks for this jquery plugin.
@fusify: thanks to you, now it works with jquery 1.2.6
hi,
thanks for this lovely plugin, its very very nice.
I have a question, when I click a menu item, back div/image goes there, but I dont wanna to stay there when I clicked. How can I cancel this?
thanks again
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
As for compatibility with easing 1.2. I managed to get the menu working with easing.1.2 while using compatibility js offered on esing plugin website http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js
I am trying to implement this piece of code and am running into an issue with the sliding image lining up with the left had side of the browser. This only occurs in IE. An example is located at the following:
http://www.primestudiosllc.com/index.html
Jquery 1.2.6 normal ain’t working, and 1.3.1 Min is working whats wrong?
Firstly thank you very much. I am using the noimage version and my links are not clickable the link is there but can only be opened by right clicking and opening in a new tab.
What do you suppose is wrong ?
Sorry … I have resolved the issue by changing the value in the html to true like this
……………………………………
click: function(event, menuItem) {
return true;
thanks again
Can you tell me if there is any issue using your LavaLamp plugin with your jCarouselLite, please?
I try to do it, almost everything works fine…
My only problem is that the cursor doesn’t stay on the current element in my LavaLamp menu (always going back to my first element).
Thx for your work and in advance for your help.
P.S: u can find here an example of what I said
Can you tell me if there is any issue using your LavaLamp plugin with your jCarouselLite, please?
I try to do it, almost everything works fine…
My only problem is that the cursor doesn’t stay on the current element in my LavaLamp menu (always going back to my first element).
Thx for your work and in advance for your help.
P.S: u can find here an example of what I said http://scorpinou.free.fr/maquette/
Hi, thanks for this awsome JQuery addon. Im having a problem with it on a test site im using it on though. For some reason on my test site the links dont seem to be clickable. Any ideas? Have I missed something or done some thing wrong?
http://bliss.softwaresystemseurope.com/
Ah its ok, ive read above someone with the same problem and applied the fix.
Thanks again for this great addon.
Re,
LavaLamp is working when I delete the “class” attribute on the tag of the . But, of course, jcarouselLite is not working anymore…
Help pls
P.S: u can find here an example of what I said http://scorpinou.free.fr/maquette/
Absouletelly Nice Script.
Some Question what for the jquery.easing.min.js for?
Hello!
Inspired by this example i am trying to achieve something similar while learning to use jquery and javascript in general.
I cant somehow put the movable li under other li’s. Like you did, i assigned higher z-index to li’s that are the menu itself and lower z-index to the moving li. For some reason the li is always above other elements though and other scripts that depend on that will not work…
Thanks.
incredible easing.js Nice
Ganesh in disney Style Hmm ??
@Steven
I had the same problem that Steven had. I needed to control the menu via javascript, specifically to select one item using some function.
Here is how I solved that:
function move_to_menu_item(id){
fireEvent(id, ‘mouseover’);
fireEvent(id, ‘click’)
}
function fireEvent(elementId, event){
element = document.getElementById(elementId);
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent(‘on’+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent(“HTMLEvents”);
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
The credits for the fireEvent function goes to http://jehiah.cz/archive/firing-javascript-events-properly
Hope it helps!
Best regards,
André Ferrizzi
in the above example i want to place the cursor in travel onload not home. how do i achieve this. Please reply
Thank you for all that you have done for this excellent application.
I like very much the writings and pictures and explanations in your adress so I look forward to see your next writings. I congratulate you.
THANKS, VERY GOOGD…
THANKS, VERY GOOGD…
Thanks Gmarwaha! Super menu, very good.
[...] 1. LavaLapm meny för jQuery [...]
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Hi, I discovered a SEVERE BUG in Firefox 3, and it surprises me that no one has encountered it yet. However, IF you have trouble with FF3, read this:
Distinctions: The lavalamp background (the “lava” itself) is broken upon page load. However, if you move the mouse over a list item, it slides back to normal.
Tech stuff: The bug causes the div.back to display very strangly. For me, that div was 1207px wide upon the page was fully loaded. The reason is that in Firefox 3, they have changed the way javascript event DOMContentLoaded is interpretered, which differs from FF2. This means that it will no longer wait for external stylesheets that are imported AFTER the script that calls DOMContentLoaded (like jQuery does). I think this causes the lavalamp function to measure the length of the list items wrong because there is no stylesheet at that time.
Solution: In your main HTML-file – import your stylesheets before you run/import your scripts. It should fix the problem. Example:
[...]
$(document).ready(function(){
// stuff
});
[...]
Hope it helps!
Woops. The example didn’t work out quite well, cause the comment parser did not convert my tags properly. Here is it again, but you must replace [ and ] with diamond brackets.
[...]
[link rel="stylesheet" href="style.css" /]
[script type="text/javascript" src="jquery.js"][/script]
[script type="text/javascript"]
$(document).ready(function(){
// stuff
});
[/script]
[...]
[...] LavaLamp-Plugin Tutorial zur Erstellung des Lavalamp-Plugins [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hey guys I’m a little new to this whole thing i got the links working by removing the return false in the function that lies on the webpage but now i have noticed that when you proceed to a page, say from you index page to your blog, and then press the back button (so your back at your index page) the menu item or orange boxy thing stays on whatever link you have used to proceed to the next page (the blog). Any help with this would be greatly appreciated and a little clearer description if needed.
Best Regards Cerebral
[...] LavaLamp for jQuery lovers! – gmarwaha.com [...]
hi
don’t know if u noticed a little bug on internet explorer 6, the margin between the li elements are doubled, on the css it says 10px but on ie6 it shows like 20px i think… so it causes the menu to stretch and it doesnt fit…
nice plugin
Hi there.
Why do the links not work on the menu when you integrate.
What am i missing?
Pretty Awesome. Although it took me to figure out that your example CSS in this blog post uses “.back” and “.left” where I guess the version of lavaLamp that I got needs those to be “.backLava” and “.leftLava” … hope this helps others :}
[...] je n’y suis pas arriv? avec uniquement des CSS mais par contre avec Jquery j’ai trouv? mon bonheur http://gmarwaha.com/blog/?p=7 (rubrique Bonus) "Pascal" <pmailnospam> a ?crit dans le message de news: [...]
Had trouble with using Lightbox due to the different libraries. Solved by using a jQuery lightbox clone: http://www.no-margin-for-errors.com/projects/prettyPhoto/ This is a great effect, thank you!
[...] Lava Lamp Menú. Plugin jquery para el menú. [...]
hello when i use lavalamp with an other jquery plugin i have a problem. the menu doesn’t work and the orther plugin doesn’t work.
for exemple i use lavalamp and slideshows (http://www.frontpageslideshow.net/demos/wordpress/)
i have javascript error
$(“#3″).lavaLamp({
is not a function.
please what i have to do resolve this probleme.
help me.
sorry i don’t speak english well.
[...] LavaLamp?jQuery(Javascript)??????????????????????????????????????????? ??????????(??)????????? [...]
hello,
change :click: function(event, menuItem) {
return false;
by
click: function(event, menuItem) {
return true;
it will work
hello,
it’s a great plugin. Thank you.
I’m using the no-image version and my problem is the marker goes back every time to the “current” page, and I want it to stay in the clicked link.
I removed the id=”current” from my page, but it doesn’t work it’s still goes back to the first menu.
Can you please tell me how to do it?
Sorry if someone solved it before but there is too much to read.
Thanks in advance!
[...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers!. [...]
Hi I was trying to use the Lava menu for my blogger website. Do you think it is not compatible with the website working on BLOGGER platform? And do I need to upload the js somewhere online to be used or they are already uploaded somewhere?
Great code, works wonderfully. For those of you that want to set an initial condition for the lavalamp based on the hash of the page, try this (This will only work if each [li] has its own ID, which corresponds with the hash code, ie: [li id="blog"] would correspond with index.html#blog):
$(document).ready(function(){
var page = location.hash;
$(page).addClass(“current”);
)};
Make sure you put this ABOVE the lavalamp.js script. Thanks for a wonderful script.
@askpan – you should be able to use this script for pretty much anything you want. For the scripts, you should probably upload them to your own server. You can find them here:
You can download jQuery: http://code.jquery.com/jquery-latest.pack.js
Easing plugin: http://gsgd.co.uk/js/jquery.easing.1.1.js
and the LavaLamp plugin: http://www.gmarwaha.com/jquery/lavalamp/js/jquery.lavalamp.js
Great plugin. How could you make it work with wordpress current_page_item and current_page_ancestor.
If i change this
$li = $(“> li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
to
$li = $(“> li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current”)[0];
it works but how to get it to change to current_page_ancestor if you are on a subpage?
@Patrik
Set up your [li] element so the class looks like: [li class="current page_item"] for current_page_item, and [li class="current page_ancestor"] for the current_page_ancestor. Keep the code how it is, and it should solve your problem.
Thanks Wex
I didn’t really understand exactly what you meant but this made it work
$li = $(“>li”, this), curr = $(“>li.current_page_item”, this)[0] || $(“>li.current_page_ancestor”, this)[0] || $($li[0]).addClass(“current”)[0];
Your example at the top f this page does not work at all in Safari/Mac.
The stripped examples near the bottom work, not the top. Might want to correct that since it is the main example and featured at the top.
cool stuff !
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
anyone know how i can extend the width of bg.gif?
Amazing menu and perfect use of ajax used in the right place. Has made a simple boring navigation entertaining.
Nice Tutorial to follow. You’re a credit to the industry.
Jamie
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
i integrated the menu in my joomla 1.5 template and the Lavalamp works fine & looks great, but the links of the navigation dont work.
I hear about the problem with the conflicts of mootools and jQuery so i change $(function() in jQuery(function($).
jQuery(function($) {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
But it still dont work. Can anybody please help me?
Please I need help.My only problem is that the cursor doesn’t stay on the current item in my lavalamp menu and it always going back to my first element.
thanks for help.
[...] LavaLamp for jQuery lovers! [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] LavaLamp for jQuery lovers! [...]
Joomla generate the current menu as id=”current” not as class=”current”.
Now is my problem that the menu allways jumps to the Home menu.
Is there a solution for that problem for example that the “current” work with the class=”active”
“Please I need help.My only problem is that the cursor doesn’t stay on the current item in my lavalamp menu and it always going back to my first element.
thanks for help.”
Now that is an awesome effect – thankyou!
Spotted this on Ramblingsoul’s css templates site.
Whoopwhoop!
Perfect code.
excellent basically.
BUt the onlye problem i’m having is that after setting it up (its running perfectly fine) when i link up the link in the href section it isn’t working.
Can anyone guide me here?
yes, I got the same problem, the links not working, can somebody help???????Thank you.
level 433, I had found out how to make it work
change :click: function(event, menuItem) {
return false;
by
click: function(event, menuItem) {
return true;
it will work
[...] uses no special feature of Photoshop yet looks good. Also, I had long been waiting to add the Lavalamp sliding navigation that I picked up from here. I plan to use as much of the jQuery javascript [...]
very nice Blog
Please I need help.My only problem is that the cursor doesn’t stay on the current item in my lavalamp menu and it always going back to my first element.
thanks for help…
Hello, I´m kinda noob in this, I´ve been trying to use this lavalamp menu with ajax, like this:
Inicio
…it doesn´t work until I remove the tag (and the menu doesn´t work without tag)…
If someone would like help me…
the ajax js code is:
var loadedobjects=”"
var rootdomain=”http://”+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject(“Msxml2.XMLHTTP”)
}
catch (e){
try{
page_request = new ActiveXObject(“Microsoft.XMLHTTP”)
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open(‘GET’, url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i
thanks
Boss…i want to keep that 1st orange colour menu for my site after customizing…how to do it????
hey…how to make it work when used in the site?
how to add 4 more contents in the menu boss?
very thanks
I came across a bug of sorts. If you use lavalamp and the prototype library on the same page, something causes the over state image to not show up. I’m using lavalamp 0.2.0 with jquery 1.2.3.
prototype version 1.5.1.1
thanks a lot!
I developed a site using prototype/scriptaculous. Now I switched to jQuery but I still have the example prototype/scriptaculous lavalamp menu if anybody needs it …
Thanks, thgr! Big help!
For all of you, who experience the blinking cursor on IE6, include this javascript somewhere on you site:
var IE6 = (window.VBArray && document.implementation);
if (IE6) try { document.execCommand(‘BackgroundImageCache’, false, true); } catch(e) {}
Hope that helped
I don’t get it work with the IE 6
My image which should be behind the navigation disappears in IE 6.
And I can’t find the problem:-/
Maybe you could take a short look? (it’s only a temporary testside, so don’t worry about the content;-) )…
http://schwimmkurs-rummelsberg.de/gorgonsola/Projekte/Test/
Your example at the top f this page does not work at all in Safari/Mac.
The stripped examples near the bottom work, not the top. Might want to correct that since it is the main example and featured at the top.
cool stuff !
[...] Lava Lamp jQuery Menu [...]
[...] Lava Lamp jQuery Menu [...]
[...] Lava Lamp jQuery Menu [...]
For some reason mine won’t link to other pages. Please take a look, the home in the navigation should link to google, but it doesn’t. http://www.gedesignz.com/test_sites/attitudes
Hello!
I read here that lot of people was trying to implement this cool jquery in there joomla pages. So I’m in the same situation I would like to get know about the way how should I do to work on my joomla page.
thanks
In response to my post above, I figured it out. I began skimming the posts again and found one that I had overlooked stating about the “return false” got rid of that and it worked. great plugin
I really like it, simple to use and style. well done
For those of you friends who are not able to keep the current state in the new page that you are downloading from the server…
You just have to set the class for the “li” of the respective menu item to “current” in your server side code (eg: php, ruby, java etc). This way lavalamp will know which menu item to highlight on page load. If you don’t specify “class=current” for any of the “li”, then lavalamp will assume that the current page is the home page and will highlight the first menu item.
Hope that helps.
For those of you friends who are not able to get the link assigned to the menu item to work…
The example code binds a click event to the menu-item and returns false. This is done for demo purposes alone. You can either remove the click handler entirely, or you can return true to make your links work.
// Wrong
click: function(event, menuItem) {
return false;
}
// Right
click: function(event, menuItem) {
return true;
}
This is great! Thanks! And that Tyler person up there is clearly an idiot.
My lavalamp is working but the “current’ selection after loading will not appear selected. Once I hover over the links, then the lavalamp appears.
Any ideas on how to correct?
I am having a problem in a site I am creating which is going to be for my school.
http://jagaparajuli.com.np/Friday/
The Slider is not showing up in the current place. Please Reply Soon!
Hi.. I am having a strange problem. I have this on two different sites, both built on Wordpress. One it works great.. the other it only works on the home page of the blog but none of the articles. For example the lava highlights blog and on the home index.php page I click on a read more link and the full article appears but the highlight on blog disappears. Anyone else encountered this? I searched through these comments and found something about conditional statements but I did not understand. I am using the current class on the blog link so that is not it. The header being generated for all the pages is the same and when inspecting the HTML the code being generated is identical for both pages. What could be causing this?
[...] Lava Lamp jQuery Menu. [...]
[...] Lava Lamp jQuery Menu. [...]
Hi
I was wondering woul dit be possible to display a horizontal, inline drop down set of links when you hover over each link?
Thanks
????????????? ?????????? ????. ?????, ?? ??????? ?? ??? ???????? ????????? ?? ???? – 7812????. ??????.
OK I got it working by using this:
$(“.lavaLamp”).lavaLamp({ linum: 2 });
The lavalamp “effect” always shows in front of the links preventing those to be clicked.
i.e. the z-index of the tag is higher than the z-index of the image
How can I fix this.
And in IE the javascript effect starts ok but then it freezes.
@David: Ofcourse it is possible, but there is no provision to do such thing within the plugin right now. But, it is pretty easy to attach a hover event to the li’s and display your submenus.
@zac: Glad you got it working
@Kshitij Parajuli: I don’t see lavalamp menu in the site you have given. Have you removed it for testing purposes or something of that sort.
@Erik: I guess, you are facing this problem with Firefox 3.x. If yes, try initializing lavalamp using $(window).load() instead of $(document).ready() event.
It’s a shame this doesn’t work with 1.2.6
Looks beautiful though!
Is there a way to set it up so that the background is white, text is dark, and when the lavalamp bubble slides into the next mouseover item, the link text changes color *WITH* the movement of the lavalamp instead of *all at once* a la CSS a:hover?
This would probably have to be implemented in the JS file right? I’d really appreciate your thoughts on this.
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
Hi.
I have two menus lavaLamp on the same page. Both are same configuration:
$(‘#m1, #m2′).lavaLamp({
fx: ‘easeOutExpo’,
speed: 300,
click: function() {return true;},
setOnClick: true
});
Now I want to put different startItem to #m1 and #m2. How can I do this without repeating function?
$(‘#m1′).lavaLamp({
startItem:1,
fx: ‘easeOutExpo’,
speed: 300,
click: function() {return true;},
setOnClick: true
});
$(‘#m2′).lavaLamp({
startItem:3,
fx: ‘easeOutExpo’,
speed: 300,
click: function() {return true;},
setOnClick: true
});
Thank you very much and sorry for my bad english language
@Ganeshji Marwaha
Its there, but its not working correctly. If you leave your mouse, you can see the blue underline near search bar. Move thru the navigation to view the blue underline moving. The underline is some distance to the RIGHT from the navigation at the top.
Here is the link again. http://jagaparajuli.com.np/Friday/
I’m experiencing the same issue as Simon, where I can’t get the hyperlinks to actually navigate. The effect works great, and the status bar tells me where it WANTS to go. But upon clicking, I might as well have hit a javascript:void(0). I’ve messed extensively with the z-index in the css, to no avail. Any recommendations?
When I am applying jCarouselLite to multiple div’s on the same page then clicking on the next button of one div showing the scroll on all the independent div’s. Can’t we have more than one jCarouselLite div’s on the same page
Hi,
Just a word to thank you a lot for sharing your precious job. I’m a true “javascript dumb” but I used this menu on a project… And with a bit of work on the CSS file, I’m finally happy with the result (you can see it here http://www.sarlespanneauxsolaires.fr/).
Big Thanks.
Hi,
Just a word to thank you a lot for sharing your precious job. I’m a true “javascript dumb” but I used this menu on a project… And with a bit of work on the CSS file, I’m finally happy with the result (you can see it here http://www.sarllespanneauxsolaires.fr/).
Big Thanks.
(Sorry the URL was wrong)
Looks beautiful though!!
thanks for the menu
Thanks a lot! Everything works fine!
For all Joomla lovers, here’s a fix:
Open jquery.lavalamp.js or jquery.lavalamp.min.js, depending on which one you’re using and perform the next search-replace:
replace ‘current’ with ‘active’ and hit Ctrl+S (Save).
That’s it.
Explanation:
Joomla adds ‘active’ class to the active menu item, opposite to ‘current’ class given by this lovely script.
Cheers!!!
))
@Hamming: You will have to initialize lavaLamp 2 times separately only as of now. If the plugin supported partial setup, you could have set lavalamp up with the common parameters and then initialized the 2 lavalamps separately, but unfortunately the script doesn’t support it now
@justin and @Simon: Point me to a test page where I can see the issue in action. That might help me help u resolve the issue.
@shankar dutt mishra: You can have multiple jCarouselLites in the same page. But I guess, you are using the same classes for the buttons and the images within the carousel etc and supplying the same classes to the script as parameter as well. This way, the script will be selecting all the matching elements and scroll it. If you want multiple carousels within the same page, use different classes for the carousel, images and the buttons. That should solve your problem
@Kshitij Parajuli: The CSS specificity for your li.back is not enough. So the position: absolute is getting overridden to position:relative specified for the li.
Try “#navigation” in front of “.lavaLampBottomStyle li.back” css selector. That should solve your problem
@julien: Good you got it working and your implementation of the menu looks nice.
jQuery????????…
?????????????????, ?????????mootools???.
???????????????jQuery?????,????.????jQ? =,,=
????Lavalamp, ???JS?????…..
jQuery????????…
?????????????????, ?????????mootools???.
???????????????jQuery?????,????.????jQ? =,,=
????Lavalamp, ???JS?????…..
Really cool tool for menus. Thanks for the share link. Cheers.
thanks a lot
Hello,
Thanks for the great plugin. It works so well.
Question: If I’m navigating content on the same page (i.e., the content is sliding and the URLs are not actually changing), can I still use the “current” class? In this version the code is adding the class, but the class remains on the original “li,” because I’m not actually changing pages.
Sorry if there’s a simple solution that I’m not seeing!
Thanks!
nice text. thanks for all
Great tool thx from de
Hi,
First of all this is the best and easiest implementation of lavalamp.
I am having a small issue. My links don’t work. It was working before I implemented lava lamp but some reason now I can’t get my links to be clickable. When you mouse over it shows the correct link on the bottom bar on firefox but when I click it my page doesn’t change.
Have you any idea? Here is my code:
$(function() {
$(“#1″).lavaLamp({
fx: “backout”,
speed: 600,
click: function(event, menuItem) {
return false;
}
});
});
<a href=”">Home
<a href=”" title=”RSS”>RSS
<a href=”mailto:”>Contact
I haven’t changed the javascript or the css files.
Sorry the above was supposed to show my list but I guess it this comment script doesn’t allow html markup. But justs imagine the above with correct ul li list markup and also with close link tags after the link name.
I like very much this menu…… just one question….. How do I put my initial button wherever I want? (I mean when the page load for the first time)….. Thank you guys.
Hello guys,
I really love this menu and i customized it.
There is just one problem:
i want for the hover only different text color.
When klik a button the background should go to the button i kliked with the smooth lava effect.
I hope you can help me out.
Greats,
Dave
@timsamoff – I am unable to understand your problem. can you please explain detail and/or show me a test page where I can take a look at your issue
@Dale Larsen – Just change return false to return true in your click event handler. That should solve your issue.
@Dave – You will have to mess with the lavalamp source code to achieve that effect. At present the lavalamp uses hover for menu navigation. Try changing it to click, but I am sure you will have to address a couple of more lines in the code to get your effect.
useful article, thank you for sharing
I am having the same problem with Ed in post #401, where the margin between menu items appear to be much wider in IE6 only. I am using the bottom style version. Just wondering is there a workaround for this? Thanks.
Find Duplicate Files Free – Fast Duplicate File Finder
Fast Duplicate File Finder will help you find fast all duplicate files in a folder and its sub folders.
The applications will compare the content of your files so it will find duplicates even if they are using different file names.
It uses fast binary comparison algorithm and has internal preview supporting a lot of image, video, music and text file formats.
[...] Hi, ein Link zu deiner Seite w?re hier ganz hilfreich. Ansonsten vermisse ich gem?? der Gebrauchsanweisung zumindest diese Script-Zeile in deinen [...]
thanks you..
Thank you, it works well for me… now… about a cascading version… (-: G/D/R
Hi Ganesh!
please tell me if there are any conflicts on my page… i cannot get the scripts to run on my wordpress… CSS seems to be picked up. Please advise..
http://www.orangewebdesign.ca/wordpress/
Tesekkurler haci ne oldugunu anlamadim ama
ehehe neyse yine de thanks 
code:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
must be:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
onOpen:function(e,i){window.location=e}
}
});
});
yea..this awesome:)
http://anggaran-budget-manipulation.blogspot.com
http://e-serba-serbi.blogspot.com/
Hello,
This is fantastic, thank you for publishing it.
Would it be easy to modify it so that if no LI is set as current, that is should not display the background at all?
It currently defaults to the first LI, which I would like to stop.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi, I really appreciate this menu and its flexibility I am a fan of Jquery and hopefully write my plugin too. I use the menu on my homepage, kindly check it http://ronaldnunez.com
Thanks for sharing!
Hi Ganesh!
How do you set the selected menu for a static website .
I am not using any server side scripts . I want to set active page
please help ;;;;
on Joe, just add a class=”current” on the selected menu and then works fine
@Ronald I tried that but it is not working
Home
profile
Placements
Ronald I tried that but it is not working.
can you help me
make it like this HomeProfile
that should select home then to active the links set return to true.
$(function() {
$(“#animatemenu”).lavaLamp(
{
fx: “backout”,
speed: 700,
click: function(event, menuItem)
{
return true;
}
});
});
Hi,
thx 4 your great work with the lavalamp menu! I’ve it done after some hours =), but one thing (which is the case also in your demo) I would like to know: Is it possible to stop the “higlight”-thing at the left & right end of the div before it leaves the div for a split second?
thx for your time =)!
xod
Thank you for sharing mark. thanks
Hi,
very useful info mark. regards
The menu more in a simple recipe are there
Great plugin, works well…. but
if I click on the li, without clicking on the link it contains, then that li will get the class current, without having clicked the link, which is slightly strange behaviour!!
James
[...] & Demo: LavaLamp. Description: As User Interface developers, we know that one of the first widgets our visitors use [...]
Hi Ganesh,You have done a good job.In this menu when the page is loading i dont want to default selected link initially.How to do this?
Thanks in advance
to remove the initial selected link i set “current” class for first element(dummy).its working perfectly in firefox but gives js error in ie even i set display as inline.how to solve this?
this doesn’t work for wordpress if there are other plugins activated which use jquery – any workaround that ??
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
Can i use this script in my own bussines web site ?
is under GNU licence as jQuery lib ?
http://mbox.tuxfamily.org/slider/ without any librairie =>less than 3ko ^^
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
Yes …
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] If you wanna English tutorial, please visit LavaLamp for jQuery Lovers. [...]
Nice work Ganesh. Just plugged it into one of my sites. Was easy to implement and easy to change. Elegant coding my man.
I am having some problem with the actual links… with my implementation, when you rollover it displays the correct link, but when you click it, nothing happens. The example is here
http://worcesterscene.com/001_test.php
and for “SceneAdvantage Coupons”
thoughts?
Hey, trying to use the LavaLamp on my website but I am having problems. Without having id=”3″ in my html list the images wont display, but with having this, the links to the other pages on my website doesnt work, can anybody help me with this??
Thanks Adam
thanks a lot… I try to adopt my app:)
Thanks, my question was resolved.
@filip #504: Your webpage is down i guess. I am unable to take a look at it.
@tristan #508: In the plugin code, I am defaulting the first “li” as the current, when no current is specified. So, if you could modify
curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
with the following line
curr = $(“li.current”, this)[0];
I guess, that should do the trick. I haven’t tested it, but i guess you get the point.
@Ronald #510: Cool looking menu you have implemented. Thanks for sharing. Thanks a ton for helping people around with their issues as well. I am grateful for your effort.
@Joe #511: I am sure, there is a separate html page corresponding to the menu item clicked. In the page corresponding to the menu-item set the corresponding menu-item’s class to “current”. For eg. Set the home “li” class to current in home.html, Set the about “li” class to current in about.html and so on.
@James #520: Are you sure? Coz, the anchor tag is set to block, which means the issue you are saying should not come up. I am sure the link is getting clicked. You are probably thinking that way because of the return false; statement in your anchor’s click event handler. This stops the browser from taking the user to the new page that anchor points to. It is there for demo purposes only.
@kesavan #523: In the plugin code, I am defaulting the first “li” as the current, when no current is specified. So, if you could modify
curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
with the following line
curr = $(“li.current”, this)[0];
I guess, that should do the trick. I haven’t tested it, but i guess you get the point.
@Michelle #526: Yes, it is licensed the same way as jquery. So, you are free to use.
@elsplatto #532: Thanks. Glad you got it working easily.
@luke #533: Remove the return false; from the click event handler. It should start working then
Where do you remove the return false from? Ive tried everything and still cant seem to get it to work :S
I’m having incompatibility issues with Thickbox and Lavalamp on the same site.
I’m using the following js file in the listed order:
jquery-1.1.3.1.pack.js
thickbox-compressed.js
global.js
jquery.easing.min.js
jquery.lavalamp.min.js
If I erase the first three, the lavalamp works. If I erase the last two, the thickbox works. Therefore, I realize there is incompatibility between the js files. Can anyone help me out, or point me in the right direction of where to look?
Thanks,
Kaela
It does not work in IE8
thanks for publishing this. it’s been very informative for me. so i have this navigation menu saved as a server side include and included it in my html. however, how can i set the class=”current” so that the correct page stays selected on the correct page? thank you.
Hi Ganeshji,
lavaLamp doesnt work with easing 1.3
Just so you know
Thanks for the plugin
Mark
Hello
i have downloaded the zip file for version 0.2.0 of LavaLamp and has opened the demo.html to check it out for myself.very nice but i have notice a problem that encountered when placing a url in the anchor tag.
It does not open any url i have .
For example
i have place ” in my href “http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers”
<!–
Home
Plant a tree
Travel
Ride an elephant
–>
Can anyone explain to me why is not opening
Thank you!
@ vinneet
you must return true
So.. am I the only one the links don’t work for?
I ran an exact copy of it from the demo and the links don’t work.
nevermind.
No, I have it as return false and it still won’t work.
I mean true
Oh, I’m so sorry. I have it fixed now. I shouldn’t have spoken so soon.
I use this on all my sites, but am having a problem.
I have a header.php file, with the small script in, and the list, and that’s then on all my pages, which call it.
How do I get the bar to stay under just the page I’m on?
I couldn’t see from the sliding door example..
I’m quite a beginner so no jargon please
You can view a tutorial on how to incorporate this into drupal 6.x by going to http://www.rawdesigners.com I’ve had trouble using the most recent version of lavaLamp and Easing.
see i loaded the lava lamp but there is a problem i cannot understand , there must be a css conflict of something else, because it is showing the menu bar but not the effects
thanks
anyone ever use this and in IE the effect goes backwards? For example, you run over the first link and the background color goes away from your mouse instead of to it?
Thank you!
oh – my website is http://student-promotions.co.uk
thanks…..
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
Great menu! JQuery is incredibly powerful. I was amazed when I saw a sample of the tools slide on Apple’s web site made with JQuery and it was so simple! I can not believe it.
Thank you for sharing the code…I love the style.
kamal says bismila walhamdolilah this is great work man
Can anybody find quicker than I can why it’s not working on my blog?
http://ocmexfood.blogspot.com/
I’m pretty sure I have all the elements in correctly.
Thanks you. byee
Hello,
How can I change text color when the “lava.gif” is under text? I have dark background and white buttons. I want white links for all menu itmems, without active button (the link must be then black).
Regards.
Hi, for hose repetitive questions asking how to activate menu link please take time to read previous replies you find a lot of answers just take time to read. More power to Lavalamp and Ganesh such brilliant thanks for sharing! I have problem how to activate the menu too, just so I read the prevoius replies and i got he idea i hope you understand my point. Right Ganesh?:)
[...] Ganesh » Blog Archive » LavaLamp for jQuery lovers! [...]
yeah it is good
Hi Ganesh, Is there a solution to this menu so that it works in Opera as well? (opera 7)
Love this plug-in, stunning!
Here is a quick heads up for all those wanting to use the version for jQuery 1.2.x with an AJAX application, in order for it to tick on the selected link you need to open up the lavalamp.js file, and change this
$li = $(“li”, this),
to this
$li = $(“li a”, this),
This may mess uo your styling a little, so just make sure you have added your padding to the a element, and not the li element
This should now stick on click for an ajax app
hope this helps
[...] 11. LavaLamp menu effect [...]
Hey, I came across your blog in search for a lava lamp menu. I downloaded the demo.zip and since it worked out of the box, I tried to implement it in at my blog(developmental theme – http://judepereira.com/blog/?wptheme=cleanskies). I have all the files but the effect just does not seem to work. Any probable errors that I may be creating?
Does anyone now to change the font color with the rollover has landed on the anchor. I cant use CSS cause it changes too quickly.
hi everybody, hi ganesh,
i’m trying to build a wordpress theme that includes the lavalamp navigation. if i’ll be able (hopfully with your help) to modify lavalamp menu to make it work in wordpress, i’m going to post a tutorial about how i did it, so others can reproduce this with more ease.
this is what i’m trying to get accomplished
- a lavalamp navigation where the first list item is not current on default (the trick mentioned by ganesh #537 where you advice tristan #508 doesn’t work [at least not for me]) i would like to see this work because i have other pages like sitemap or terms & conditions. so having my first list item turned on would be confusing and improper.
- my wordpress navigation is split in two parts. one for all the parent items (in my header) and the other for all the children (sub menu, sidebar). i would like to see lavalamp to be able to keep the parents current when on i’m on child pages. Wordpress assigns the following list item classes automatically to current list item in the navigation.
current_page_item (the current page)
current_page_parent or current_page_ancestor (the parent or ancestor of the current_page_item)
here is where i’m at:
i don’t know how to write javascript or jquery and i just started working with it. i have changed the following code in the jquery.lavalamp.js from this
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
to this
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
because wordpress assigns current_page_item automatically to the current li. i also DELETED the return flase; function from the following, in order to make the links (href’s) work.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 600,
click: function(event, menuItem) {
return flase;
}
});
});
now here is the problem that i’m experiencing
as i mentioned befor, i have split my navigation in two parts. if i now click on a child item (submenu item), the current parent item turns back to default (first list item).
what i need help with
- i need the current_page_parent or current_page_ancestor to remain current when on child pages.
- and i need the default list item to be turned off when i’m on pages that are not within the parent or child navigation.
it’s probably (at least i hope so) just a few more lines of jquery awesomeness that is missing here. thanks for all your efforts since at least 2007 when you posted the lavalamp navigation and of course for your time reading my terribly long explanation. oh, by the way i’m using jquery library version 1.3.2. i have tried it with the library that you provided with the zip file but it doesn’t seam to make any difference.
many thanks
marc
Thanks. Thats amazing. Only 700 Bytes.
Finally I got it working. But there’s still a problem: the border does not allow the menu clickable. Please visit http://judepereira.com/blog/?wptheme=cleanskies
Wow thanks, I was just looking for that effect for jquery
perfect menu thanx
take a look at: http://judepereira.com/blog/archives/194 . it’s been modified to run on Wordpress themes…
Thanks for the menu… My idea came from here!!!
Hi there, I’m no coding wiz so I would like to know if there is a step by step tutorial to make this plugin work in a wordpress theme. I lavalamp-0.2.0 folder but do exactly don’t know what to do with it. I have made the all fixes thanks to hekimian-williams.com, but I just don’t know where to place codes and don’t know how to make theme communicate with on another. Like I said I have no coding experience so forgive my knowledge base.
Woow good menu thanks..
Hello,
I am using this on my website. I am having a problem when I go to my blog, instead of switching the current to BLOG the slider stays at home. My blog is on wordpress in a separate directory than my index and other main pages. Thanks for any help you can give.
nevermind. found it. ty
I love it, thanks. I’m haveing one issue though. It seems that I can’t click the links in IE7. The problem is obvious, the “.lavaLamp li.back” image is on top it will not obey the z-index in the css. That or the “.lavaLamp li a” is not on top for the same reason. It works great for me in the demo but not on my page. Do you know of anyway to force it to work anyway? I used noConflict() but no help. Thanks in advance for any help.
Thank you very much.I am using this on my work.
[...] LavaLamp effect is an excellent technique to turn the navigation to a flash like animation, it was originally written by Guillermo Rauch for Mootools and somebody had written a nifty LavaLamp menu for jQuery. [...]
Hello,
I am trying to add this to my wordpress theme (http://justinledelson.com/portfolio/sandbox/wp/). If you look, there are a few bugs, first the lava blocks out the text. I want it to just change the bg color and the link color. Second, If you click on a link, the lava will go over it fine but if you hover over a second link then move your mouse off, the lava will stay where you moved your mouse off and not return to the current page.
[...] LavaLamp for jQuery Lovers WP Trick JavaScript, jQuery, Tutorial, WordPress ??: ???? [...]
[...] ???? [...]
[...] Validation Masked Input Modals & Overlays Boxy Thickbox Colorbox Nyromodal BlockUI Navigation Lavalamp jScrollPane Ui Tabs Tags: boxy, cycle, grid, growl, scrollable, table drag and drop, tooltip, [...]
Hi, i’ve try to put some real link in demo page downloaded from this page, but links don’t work with any browser, anybody know why?
can someone help me with a small tweak that i havent been able to figure out?
how do i make this so it uses 2 lines? i have too many menu items and they dont all fit on one line
thanks…and yea this is really cool
@jusin you can make static pages using wordpress and also separate the blog/post on your website you can check my site co i think that is what you are looking for.
[...] have another great looking blog theme, designed by Rambling Soul. The original template had a cool LavaLamp effect on the menu, which was then in turn included in the WordPress theme version. You can check [...]
@ronald – I need help with making it so the lava dose not block out my text.
@MiD-AwE #584 : All seems to be fine in IE 7. I am able to click the link. Can you show me a demo page where i can check your problem out.
@Jusin : I guess you are trying to use lavalamp on wordpress. Since, i personally dont use it on wordpress, i am not sure abt ur problem. But friends out here have found solutions for the same. Hope their solution helps. Just look in the comments.
For all those who want this working on wordpress blog @Jude Pereira has come up with the solution. Thanks a ton @Jude Pereira. Look in comment #576 and #579. http://judepereira.com/blog/2009/05/04/pp-lava-lamp-nav-for-your-wp-blog/
@patrick #573 : This has nothing to do with lavalamp. You can use jquery normally to change font color on hover slowly using jquery’s hover function.
@Krishan Rodrigo #569 : As far as i know it works in Opera. I have verified only in 9.x though.
[...] 8. LavaLamp [...]
I too had the same problem (Link not working)
But it was solved by call a function loadEasing(e) onclick
and pass the link into that function as argument. Simple
eg:-
function loadEasing(e) {
location.href = ‘pagename.php?var=’+e;
}
[...] 11. LavaLamp menu effect [...]
[...] ????: LavaLamp for jQuery Lovers [...]
WOW !!!!!
i looked a lot for this menu ~~~~!!
i really loved the short explenation !!
keep up the great work!
Hi there! This is a nice effect and plugin, but with one problem.
It doesn’t work with jquery-1.3.2.min. Is there a fix for this? I wanted to use with jQuery UI and I can’t get it working. Please get back to me if there is a fix. Thanks.
Hi Ganesh.
Ok, probably a really stupid question but here goes. I am using your awesome script and the way that I have my new website set up is using the pagescroll technique. I am not very good with javascript as of yet although I seem to have gotten everything with your script set up ok. I used the “current” value to place the “box” over the cooresponding link based upon what “page” we are at (I have several navigation menus within the site). But because all of the “pages” are actually just anchors, when I go to my profile “page”, the box is over the correct link but when I go from that page back to the home “page”, the box there is still over the profile link. And at that point, if I were to go back to the profile “page” then the box is now positioned over the home link. So basically what I am trying to accomplish, is after one clicks on the “page” they want to go to, the box always goes back to the link with the “current” class applied. Does that make sense? lol.
Here’s a link so you can see what I mean:
http://www.ideologydesign.com/new/
Thanks bro!
Hello, i´ve used the lava lamp without an image and in firefox works excellent. But in IE6 it doesn´t works at all, however in your website works well with IE browser. What did you do to make it work?
Thanks!
Thank You..
wow thanks
this menu system design is really awesome
I’m gonna go try it out for some of my client projects.
a little code snippet i created to make the links work – with framesets, even … it also takes care of people clicking beside the text
if (e.target != “[object HTMLLIElement]“)
{
top.frames[3].location = e.target;
}
Hi, awesome menu, I have used it on many of my sites. However, no doubt this question has come up before.
Is there a way to get this menu to work vertically?
How to make it work in that damn IE6?
I see the menu up here in this website is working. How does it?
Thank you very much.I am using this on my work
[...] that uses no special feature of Photoshop yet looks good. Also, I had long been waiting to add the Lavalamp sliding navigation. I plan to use as much of the jQuery javascript library as possible in my future [...]
[...] Lavalamp | Demo [...]
Great plugin! I added a small tweak for those who have a second level to their navigation (sub nav or just multilevel). Adds vertical movement to the hover.
function setCurr(el) {
$back.css({ “left”: el.offsetLeft+”px”, “width”: el.offsetWidth+”px”, “top”: el.offsetTop+”px” });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft,
top: el.offsetTop
}, o.speed, o.fx);
};
Hi Genesh, thank you for the great script!
I was wondering if there was a solution for this previous post that was made a while ago, cause I’m having the same problem.
Thank you
“I have everything working perfectly – except – the right side of the active ’s background. The background just cuts off as opposed to rounding off as it should. I suspect something is funky with the “.back” class in the styles but that’s just a guess.”
overflow: visible;
… fixes the problem with the cut off.
Thanks Martin for the help, I’ll try what you suggested.
i looked a lot for this menu ~~~~!!
i really loved the short explenation !!
keep up the great work!
Concerning IE6, here’s the problem and the fix:
The problem is with the Easing library and the “fx: backout / 700″ part of the code. Remove both and your menu will work roughly (no fancy springing background).
In the source code of this page, you can see that Ganesh doesn’t use the Easing library he points to, instead he uses http://www.gmarwaha.com/js/lib/lib.min.js !
Copy the second part of this file:
//// JQUERY PLUGIN – EASING
jQuery.easing blah blah blah
in a new JS file on your server, load it instead of the easing.min.js one, flush your cache and IE6/7 will be pimped again!
Notes:
- I tried the 3 versions 1.1, 1.2 and 1.3 of easing.js with no success before that.
- I use the version 0.2.0 of the plugin with jQuery 1.2.6, because my CMS named SPIP 2.0 won’t work with jQuery 1.3.x (for now).
@valerio and @joaquin: thanks for pointing out that the plugin works with IE6 on this page!
@Ganesh, many thanks for this port of the lavalamp menu (and the 0.2.0 version, even if I didn’t spotted it immediately
)! Could you please update this page with a working solution for IE6/7? (IE NetRenderer snapshot seems OK for IE8 too, though I haven’t installed this browser locally yet)
I was able to get LavaLamp to work with easing 1.3 simply by changing the fx name to the equivalent 1.3 easing name. “backout” becomes “easeOutBack”.
$(“#header ul”).lavaLamp({ fx: “easeOutBack”, speed: 800 });
And you of course want to make sure you are using easing 1.3 and not the include easing 1.1 which is available here: http://gsgd.co.uk/sandbox/jquery/easing/
I have tested it in FF3 and Safari and it works fine. I don’t see any reason why it wouldn’t work in other browsers.
Hope that helps.
Hey guys,
For some reason when I plug links into the list, nothing happens when I click on them.
Anyone have any ideas as to how to fix this?
The site can be found at http://www.dougbox.com/shop.
The code looks like this:
| home |
| products |
| about us |
| the dougbox |
| contact us |
Thanks for any help y’all can provide! This is really frustrating.
is it possible to implement tab navigation and dropdown ? it will be the ultimate css menu!
[...] 8. LavaLamp [...]
For Michael Haws:
try to delete this string: ” return true; ” from your code below.
I did something like this and now it works.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Also if you need then to get the right menu selected add this to the :
For Michael Haws:
try to delete this string: ” return true; ” from your code below.
I did something like this and now it works.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Also if you need then to get the right menu selected add this to the :
@Michael Haws
Obviously, you did not read the tutorial
. On the inline javascript(demo zip), there are extra lines there, remove it. That should fix your problem:
click: function(event, menuItem) {
return false;
}
regards
hey,
website not online yet. Lavalamp menu in place and operating correctly, but clicking the menu items does not jump to the next page. Any help?
On the page I gave – click the first menu item “Home”. you can see the URL in the browser’s status bar at the bottom, but the click action is not firing.
thanks,
@ John (myself LOL)
D’oh! my bad – just read Renn’s response below. working now
[...] 11. LavaLamp menu effect [...]
[...] 11. LavaLamp menu effect [...]
@michele #627: Yes it is possible to implement. It will take some effort though. I will probably giving it a try in my next web project. When I succeed, I will try and wrap it in a plugin and host it here.
@Renn: Thanks for helping out fellow jquery lovers here
@Felipe #619: Thanks @Sheldon #620. That is correct. Just replacing the name of the easing should do the trick
@N #615: Did what @Martin suggest work. I guess that should be the solution. Thanks @Martin.
@Chris #614: Nice work
@Valerio #610, @Joaquin #604: Does the demo download work in IE6. What problem are you facing.
@Gergely Marton #602: I haven’t tried LavaLamp with jquery 1.3.x yet. I will try it and get back to you in these comments.
I know this is the most common problem, and I’ve looked through pervious posts and none of it is helping me.
I have a header.php file which has the script and the links in it, I then include that file in each of my actual pages.
how do I get the box to stay on the CURRENT page?
I know it’s something to do with <li class=”current”…
but can somebody help a bit more, like say EXACTLY where to put it..?
my site is http://student-promotions.co.uk
@Alex Coady #632: Yes Alex! It is the most commonly perceived problem. The issue is that this is not a problem and cannot be fixed within the plugin. The solution lies in your server-side programming language. Regardless of what language you use, the final output you get is HTML. Make sure that the correct “li” gets the “current” class for your menu-item to be highlighted on page reload. For example, If the user has clicked on “Home” link, when the new page is loaded, make sure that the “li” corresponding to “Home” has the “current” class set. The same applies for all other pages as well.
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
[...] jQuery SuckerFish Style . jQuery Plugin Treeview . treeView Basic . FastFind Menu . Sliding Menu . Lava Lamp jQuery Menu . jQuery iconDock . jVariations Control Panel . ContextMenu plugin . clickMenu . CSS Dock Menu . [...]
[...] ) LavaLamp jQuery Sliding Menu ????jquery???????????????????????Guillermo [...]
Hi Ganesh,
I am delighted to see the lavalamp plugin you have created.
However, I am having problems integrating it with my webpage which I am creating to learn Jquery.
The problem is coming because lavalamp is created using jquery easing plugin v1.1 and I’m using jquery easing plugin v1.3.
I’ll be grateful if you can modify the lavalamp to make it work with easing plugin v1.3.
Thanks
@Akash #637: LavaLamp will work well with both easing 1.1 and easing 1.3. You just have to change the easing’s name to reflect the 1.3 version. Another fellow jCarouselLite lover @Sheldon Finlay #620 has achieved it. Refer to Comment #620 for Sheldon’s solution.
[...] 11. LavaLamp menu effect [...]
I’m using lavalamp on my portfolio site but for some reason when I upload it to the server it doesn’t work although it works offline, any ideas on what I’m doing wrong?
Thanks for the deadly code!
@Barry #640: With the given information, I have no clue as to what could be the problem. Why dont you post your link here. I will take a look. For starters which version of jquery are you using locally and which version are you using in the server.
Hi Ganeshji. Sorry the link is http://student.dcu.ie/~walshba3/test/ I’ve only got it working on IE but no luck with FF. Thanks for the help!
I’m using Jquery-1.1.3.1.min
Hii
How can i add new menu items in the menu.
when i am adding in the menu the items goes in the next line and the menu gets scattered
Ganeshji: I love the plugin but it expands almost double the size in IE6. It works great in Firefox 3.
If you look at the Demo, ‘Ride and Elephant’ gets wrapped to 2 lines in IE6.
Workaround for me: Just widen the DIV wrapper to work well (with increased spacing) for IE6 users.
How to add sudmenu
made some tweaks and finally ….got a wonderful result in my site telecomtalk.info thanks Ganesh
[...] ????? [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
@Barry #642: I am unable to figure what is going wrong from your website. kindly try to make what you are trying as small in scope as possible. That will tell you what you are doing wrong. I wish i could help
@Michael #644: Yes you are right. That is called the “double margin” problem in IE6. Kindly google it out. A hack in ur css will fix that problem. I am planning to do that myself sometime next week. Thanks for pointing it out
@fay #645: No, as of now Lava Lamp itself doesnt have submenu support.
@tarun #646: Cool, I took a look at ur website. Nice implementation of lavalamp. Makes me proud. BTW, one suggestion. Why dont u try “overflow:hidden”. The menu seems to go out of page when it reaches either corner. “overflow:hidden” will avoid that problem.
great tut’s,thank’s ganesh iwould like to work on it yaar ………..thanks………
Hi can anybody help me, im trying to set the selected tab when i go to a new page within my site but cant figure out how to do it. Im new to jquery so im finding it quite confusing.
links in element not works
and yes i have my file in the same directory, but don’t works… why?????
links in element \Test\ not works
and yes i have my file in the same directory, but don’t works… why?????
[...] Lava Lam jQuery Menu [...]
@naitmeir #654: If you browse through this comments section you will get an answer for it pretty easily. Anyways, the link doesn’t work because in the test, I have hooked into the click event for lavalamp and returned false. So, when initializing the plugin, please “return true” when you pass in the function for the browsers default behaviour to work
@Kmac #652: As far as the selected tab is concerned, it has nothing to do with jquery itself. Your server-side language is the key here. From you server-side when you spit our HTML to the client side, check for which page you are going to spit out and depending on that, set the “current” class for the appropriate “li” in lavalamp. Hope that helps. Browse through the comments section. You may find helpful replies for your server-side language
[...] la démo du menu ou le télécharger gratuitement du code source, c’est ici. 0 [...]
[...] la démo du menu et le téléchargement gratuit du code source c’est ici. 0 [...]
700 bytes !!!. That is amazing. Congratulation.
so smoooth! so hot! so lava!!!!
[...] effect when you hover the menu. Ported from Mootools to Jquery. Get it here. Read also idTabsprettyPhoto Post To:Digg Facebook Yahoo! Buzz Email PREVIOUSidTabs [...]
Hello,
Great menu, have it up and running np. One quick question, is it possible to change the behavior of the menu? Instead of the background box sliding to the menu item on mouse over I just want the box to “warp” from it’s current position to the new menu item. Also instead of having it just disappear from the previous menu item have it’s color change to a “transition” color like grey or something.
Thank you!
@Nnyan #661: Pretty much possible. Of course it is not possible in the present version of the plugin. If you try and succeed kindly do let me know.
[...] Lavalamp | Demo [...]
Hi guys!
First of all congratulations on this great Menu!!
After playin’ araound with it, i had the idea to combine the Lavalamp manu with the Superfish menu and i think it is goin’ okay (work still in progress…).
The only problem is though (and that’s why I am posting this here) ist that when you hover over a menu point with the superfish menu it does collapse, but when you go with the cursor over the now superfish navigation – the Lavalamp bar above just floats back left.
Here’s an example: http://www.corporatelook.de/superlavafish/demo.html
Is there any way to stop the lavalampbar from moving, when you move your cursor over the superfish navigation??
Thnx in advance!
Greetz,
Tkay
@Tkay #664: Nice attempt. Hmmm, regarding your question, you might have to hack into the code a little bit. It might not be as straight-forward as it may look. I am using the jquery hover() event to determine the lava movement. Now, in the process of integrating these 2 plugins, you might have to see if you can change this part of the code to be triggered not on mouseleave event, instead on some trigger that comes back from superfish saying that the mouse has left superfish submenu. Hope that helps
[...] for more details check this link: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ Comments [0]Digg [...]
[...] 8. LavaLamp [...]
Thank you for information
[URL="http://www.darsane.com"]darsane[/URL]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu clickMenu CSS Dock Menu jQuery Pop-up Menu Tutorial Sliding [...]
Probably not the best place to post this problem, but maybe someone has encountered this.
I implemented the Bottom Style menu on a Joomla 1.5 site which uses the mod_mainmenu module. Anyways, the first time you visit my site or if you hit the “reload” button on your browser, the underline appears across pretty much all the menu items. The Lavalamp menu works if you mouse over an item but only the first time you visit the site or reload it, does this happen.
Any ideas? It’s probably related to Joomla’s caching system which I have turned off, but maybe someone else has encountered this.
The only mods I have made to the core files is changing the .current to .active in jquery.lavalamp.min.js and I call Lavalamp like the following:
jQuery.noConflict();
jQuery(function() {
jQuery(“#primary-nav”).lavaLamp({
fx: “backout”,
speed:800,
click: function(event, menuItem) {
}
});
});
Thanks for any help I get.
[...] In: JQuery plugins 20 Jun 2009 Go to Source [...]
700 bytes !!!. That is amazing. Congratulation.
jQuery.noConflict();
jQuery(function() {
jQuery(”#primary-nav”).lavaLamp({
fx: “backout”,
speed:800,
click: function(event, menuItem) {
}
});
});
? dont no soryy
Hello, first of all thanks for this great plugin, i discovered it from the 50 greatest jquery plugins chart on some other site and it really is
I have a question to ask. I dont have an index page link on my menu. So when the user is on the index page i want the sliding bar to hide when the cursor leaves lavalamp area. How can i achieve that? I tried creating a with its width set to 0, but when i do that, the plugin starts behaving strangely and that just doesnt look pretty.
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
nice Script – but the Links do not work!
Fantastic thank you. Find the files you are looking for at megaupload-download.com the most comprehensive source for free-to-try files downloads on the Web
Hi ganesh
lavalamp is very good effect, i am stuck at the point of hyper linking the “plant a tree” to HTML page. I am new to jquery. in the
Home
plant a tree
in this way it’s not working.
Ganesh please help me as soon as possible.
Thank you very much in advance
Hi ganesh
lavalamp is very good effect, i am stuck at the point of hyper linking the “plant a tree” to HTML page. I am new to jquery. in the
Home
(li)(a href=”plant a tree.html”) plant a tree(/a)(li)
in this way it’s not working.
Ganesh please help me as soon as possible.
Thank you very much in advance
Hi
I am trying to hyper link the one of the lavalamp menu buttons to another page. I used “(” instead of “<" because when i post the submit the comment it's taking them as HTML tags. Please help me.
(ul class="lavaLamp")
(li)(a href="#")Home(/a)(/li)
(li)(a href="Plant a tree.html")Plant a tree(/a)(/li) — this is not working please guide me in this regard.—–
(li)(a href="#")Travel(/a)(/li)
(li)(a href="#")Ride an elephant(/a)(/li)
(/ul)
Thank you very much in advance.
I used this on a website for one of the stores I work for. http://www.harvesttheboutique.com I’ve received tons of compliments. Thanks, Ganeshji, for the great blog. I look forward to seeing more stuff from you.
@Vibze #674: Sorry, at present the plugin assumes that if no “li” is marked as current, then the first “li” is automatically marked as current. You will have to modify that part of the plugin code to achieve what you want.
@Ravi #678: You will be using “return false;” in the bound “click” event. Instead return true. The links will start working.
@Joel Abeyta #681: I am very happy both you and your customers liked the plugin. Thanks for using LavaLamp.
Hi Ganeshji Marwaha,
Great work. Implemented lavalamp for one of our client http://www.risingindia.com/
thanks.
@Arulmurugan #683: Nice work. Makes me feel proud to have developed it. Thanks for using LavaLamp.
I used this menu and it’s really amazing but i have alittle problem that it doesn’t work with firefox so please can anybody help me???
will be using “return false;” in the bound “click” event. Instead return true. The links
Hi I have a little problem.
How I can set the starting point of the sliding “window”?
Great script! i have just one minor problem: using the lavaLampNoImage version, when i follow one of the LavaLamp link, the new page loads and the menu go back to the default menu (first one on the left). Where is my mistake?
Forget about my dumb question
i found the (li class=”current”)
I could really do with knowing how to do this as I have a second level of navigation (footer links).
[...] it was not in this menu but i had another top menu named as lavalamp i downloaded it from here lavalamp it is conflicting with the left category menu is ther any option i can fix it regards, Omer [...]
@Ashley #690:
Change this part of the code
curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];to
curr = $("li.current", this)[0];That should do the trick…
Hi I have a little problem.
How I can set the starting point ?? help..
Hello, this is a very nice tutorial. Is there a multi-level option version of the lavalamp menu? Thanks.
hi
great plugin – thank you very much!
but i have a little problem:
http://4thcube.de/stuff/x/previewlava/
if i click on a menu item, the slider always moves back to the first link in the row when i move the cursor away….
in you demos it works – but i’ve no idea why it doenst work in my files, i didnt change anything afaik
help please =)
@rwc #695: You are trying to write functionality for the click as
$('div.tabs ul.tabNavigation a').click(function () { tabContainers.hide().filter(this.hash).slideDown(350); $('div.tabs ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }Instead, you should write this in the click event that has been provided to you by LavaLamp.
$(".lavaLampWithImage").lavaLamp({ fx: "backin", speed: 190, click: function(event, menuItem) { // WRITE YOUR CODE HERE return false; } });@Dönertas #693: You can set the starting point by specifying class=”current” for the “li” that you want to start with.
@Hanz #694: Thanks for trying out LavaLamp. Sorry, but there is no multi-level version of the same available.
@Ganeshji Marwaha #692:
I tried that with no luck. Is there anything else I can try?
Ash
It looks like I’m getting an li.back in front of the first actual li link.
And also even if I just hover over the link it’s setting the current state on that li.
Thank you, it works well for me… now… about a cascading version…
Thank you, it works well for me…
Everything is fine, just I can’t make the links work.
Do I miss something? They don’t work even if I just download your zipped file and add links instead of #.
Please advice.
I just found the solution in post No. 41.
The keyword is to replace the return false to true.
Thank you, Ganeshji!
Thanks for a post.
it was exactly what I need really.
Hi!
can I use and modify this code on a site that I get money from him?
Thanks
@Leandro #705: Sure, but you should leave the credits section intact even in the modified code. That way you can legally modify this code and use it on a website that you develop for a paying client.
@Stefan #702, #703: Glad, you got it working and thanks for trying LavaLamp.
Hi!
can I use and modify this code on a site that I get money from him?
Thanks
@Bertan ucar # 712: Yes. As long as you preserve the credits section and the license agreement.
[...] menu is done using the jQuery Lavalamp Plugin. The jQuery javascript library is fantastic and is used on all of my sites, in one way or [...]
does it work with jquery 1.3.2 or not? thank you
I am trying to use this on a new site of mine but am running into a small issue:
How can I get the text color to be different on whatever li item the lavalmp is currently hovering over? I know a:hover is normally how we could do it, but with the lavalamp hovering on “home” I’d like to have that a diff. color as well (and change when I am no longer hovering over it.
Any solution for this?
@Mike Smith #712
Not sure exactly if this is what you want but I’m doing:
.lavaLamp li a:hover, .lavaLamp li:hover, .lavaLamp li a.active
{
color:#f00;
}
And set the active class on the anchor:
Templates
This will change the colour of the nav text on hover and when it is active (current).
Damn it actually posted the link.
It should be:
(li class=”current”)(a href=”/templates/” class=”active”)Templates(/a)(/li)
Obviously ( and ) should be
Sorry yet again, it just won’t let you post html without it actually rendering.
You should see what I mean by using ( and ) though!
[...] Tutorial [...]
@Ashley (713-715). Thanks for posting. I tried and had it, but when the hover goes off the “current” li, the color stills stays white, while it should be switching to black (any hover’d item is white text with a blue image bg, while the other items are black text on a light bg).
[...] Tutorial [...]
@MikeSmith #712: You can try the CSS based solution as Ashley suggested or you can use jQuery solution itself.
$("li a").hover(function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); });Then you can style “hover” class with whatever color you want. This should solve your problem.
@Ashley: Thanks for helping fellow jCarouselLite lovers by sharing your knowledge.
@eddie #711: LavaLamp works perfectly well will jquery 1.3.2. Just download the given zip file and replace the version that it includes with the version 1.3.2 of jquery and check it out for yourself.
Dear Sir,
First of all, sorry for my english and thank you for your work. lavaLamp is realy great !
Is it possible to change the « selected item » with an « onclick » event (attached to a simple HREF tag in the page) ?
For you information, i’am a junior in jQuery
Best regards,
Serge
@Serge #721: I understand your requirement. But sorry serge, it is not possible with the current lavalamp plugin. This requires change to the plugin code itself.
[...] for jQuery.jQuery SuckerFish Style.jQuery Plugin Treeview.treeView Basic.FastFind Menu.Sliding Menu.Lava Lamp jQuery Menu.jQuery iconDock.jVariations Control Panel.ContextMenu plugin.clickMenu.CSS Dock Menu.jQuery Pop-up [...]
[...] lava lamp jquery menu. [...]
[...] 8. LavaLamp [...]
Nice work! I’ll have to do a cross post on this one
This is a wonderful script. Really well done!
I’m hoping a CSS genius can help me a bit. I’ve put together a test menu at . I basically CSS’d the menu to have the active indicator part of a long bar and then moved certain menu items under the bar by assigning a special class.
Two things I can’t figure out:
(1) Is it possible to float right the set of menu items under the menu while keeping left justified the set of menu items above? I originally did this by creating a left and right set of divs, but could only make it work by having two instances of the menu (one left, one right). I want only one menu that goes all the way across, but to just right justify the bottom set.
(2)I can’t figure out how to contain the orange bar within the gray nav div. It’s absolute positioned so that I can force it down to the right height to coincide with the status indicator. But that makes the 100% width tag force the bar to be window-width, rather than div width.
Any help appreciated!
Oops — the commenting system removed the URL I posted. My test demo is at www dot morebutter dot net slash lavalamp
Nice work! I’ll have to do a cross post on this one
Hi – it’s strange but the menu-hyperlinks don’t work – like on post 702 – they are not been executed when I click on them – only right-click open in new tab is working.
When I comment out jquery.lavalamp.min.js – the linkage is working again! But than the lamp-menu-effect does disappear! Please help. I’m working on a MAC G4, Tiger – it happens on Safari and Firefox
hey guys im trying to set it up so that on click, it will stay in that location in current state. how can i do this? i am doing a one page site where it scrolls down therefore there are no outgoing links to another page so adding class=”current” will not work.
Hey there, have you heard of CODA SLIDER?? Is it possible to combine the Lava Lamp menu WITH the Sliding function of Coda Slider?
Or if you can’t specifically use Coda Slider is there a way to, “easily without jQuery knowledge”, make the Lava Lamp menu control the content in a slider style??
Coda Slider is here:
[ http://www.ndoherty.com/demos/coda-slider/1.1.1/#1 ]
** Also, I have substituted the Orange image and “lava.gif” with my own images. I have everything lined up and working properly EXCEPT for getting the “Lava.gif” to line up perfectly and evenly on each link… as In when the image slides under a new link the motion is fine, but when the image settles the edges are not symmetrical to the text…one side might go beyond the text farther than the other side…. Is this controlled somewhere in the CSS ?? or is it in the JS???
THANKS!!
@Jens #730: Remove the “return false; ” statement that assign to the click handler and everything should start working as you would expect.
@John W #732: I am sure that can be achieved. In your source, you are using the panels (panel 1, panel 2 tabs) as anchors. Instead if you design them as lavalamp expects (as ul and li), then there is no reason why they should not work. But, if you want the lavalamp to slider when you click the next and prev for coda slider, i doubt it can done without seriously modifying lavalamp code.
Ganeshji – THANKS! First off, The code rocks!! Thanks!! Didn’t really give you credit in the last post!
I am REALLY new to JS so i might be able to get it to work… I just am not sure with JS what “stuff” might be in the JS that would conflict with another JS function. I get lost knowing when the JS “names” something on its’ own, and what’s ‘generated’ using the CSS….
Thanks for the advice!! I will let you know if I am successful!!
Keep the Great Codes Coming! You Rock!
Ganeshji – Do you know how to get the Lava Blob to line up evenly behind each link? Since I changed out the images there was some spacing issues which I mostly fixed… Here is the Demo I have so far… The Lava Blob functions perfectly but won’t “Stop” behind each link Symmetrically….
http://www.jfivedesigns.com/LVpp/LavaLampMenu/demo.html
Thanks again!
[...] LavaLamp : an outstanding use of jQuery to make an interactive menu . [...]
[...] old version already as the latest version is version 1.3.2. My version is still the one written by Ganeshji Marwaha, the 1.3.2 version is simply a version that has been adapted to jQuery 1.3. When I set up lavalamp [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi,
Love this plugin! Trying to customize it in CSS with my own images
to fit my website.
(1)
In HTML markup the target src is “#” for a link. Will it work with masterpages in .NET ASP?
(2)
Going crazy with the css to actually get my lava-image to fit perfectly under the links. I’ve seen that your lava-image in the demo is quite strange, does the lava-image has to be in some format to work with the css?
Perhaps stupid questions but been tweaking for 2 hrs now and still not perfected.
My bg.png image is 450×40px
My lava.png image is 200×20
It has the same appearance as the demo.
Thanks!
Hi again!
Now i have it working except for one thing!
My lava-image is not showing the rounded rigth-side, it’s flat vertically. The left side is ok.
Is my image to large or small ?
Thanks!
[...] Lava Lamp jQuery Menu. [...]
[...] http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ Categories: General Tags: Entradas más comentadasBuscadores de canciones segun la letraAjedrez con Stop MotionJaponecita Y Su Lenguita Comentarios (0) Referencias (0) Dejar un comentario Referencia [...]
[...] blog personal donde colocare todo lo que encuentre en la net, proyectos y más. Todo esto gracias a Lavalamp menú y iNove. Categories: Noticias Tags: casi termino Entradas más comentadasBuscadores de [...]
How would I go about modifying this to transition on mouse-click instead of as I move the mouse around?
What I’d like to be able to do is have the background stay stationary on the currently selected tab, then when I click another tab have the background transition over to it in the same fashion as it does now when I move the mouse back and forth.
Can this be done?
[...] LavaLamp for jQuery lovers! | Ganesh (tags: jquery menu javascript navigation lavalamp webdesign plugin djgonzo) [...]
[...] inove ????? lavalamp [...]
[...] navigation element for a streamline browsing experience. The main navigation menu features a nice lavalamp effect. Other interesting aspects of the theme can be seen for example on the automatic generation [...]
Hello,
I really like this lavalamp nav. Thanks. There is one problem I cant seem to resolve. I am using this lavalamp for a navigation however when I click from page to page. The current link always goes back to First item in nav. I want it to stay on the link of that page. Hope this makes sense.
Thanks for any help.
[...] LavaLamp for jQuery lovers! [...]
Im using your version of the easing and lavalamp script with 1.3.2 version of jquery. I follow your example fully and even with you files for some reason I cannot get the picture to show in IE/FF.
In the mean while I am using your files and the no-image underline lavalamp with the 1.3.2 and I cannot get the lava to stay on a link that I click. click: function(event, menuItem) { return true;} ive tried w/ true and false and it still doesnt work. any help would be appreciated
Sorry i forgot to mention that my page does not reload, its all in tabbed content.
Incase anybody is having problems figuring out how to get the links to work, here’s the fix… On the header where you reference the javascript you have a little line that says this…
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
Change it to the following(simply replace the “return false” with “return true”.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
This is all in the html page you are embedding the nav bar in.
@Ganeshji #692
This did not work, I’m still trying to sort this. Do you have any other ideas? I’ve tried everything I can think of.
Thanks
Ashley
Hey guys,
Have you ever had an Internet Explorer 6 issue with the Menu. If I try this same page on my browser the Menu get’s cut completely and doesn’t work.
In firefox it works wonderfully and in newer versions of Internet Explorer as well… Any thoughts?
By the way, this menu rules!
[...] Read full 0 Comments [...]
I´m using the Lavalamp sliding menu on the same page as a jCarousel but it dont work together. When I´m not loading the “jquery.easing.min.js” the Carousel works but not the animation in the menu. Why is there a conflict? And what can I do to solve the problem?
You can view the page here, http://www.yatzy.se/om
its all in tabbed content.
Hi, I cannot believe I never saw this earlier – Ganesh this is without doubt the best jQuery menu script I have come across – looks awesome & works well in all browsers too! Compliments go out to you!!
thanks for post
thanks a lot
I have a problem. I wanted to fix hyperlinks, i changed “return false” to “return true”, but link works only once, I mean i click the link, new window opens and then when i want to click another link it is not work
yahooooo it works! i’ve just update version lavalamp_0.1.0.zip to lavalamp-0.2.0.zip !!) sorry for my english)
435. Roy. Thank you, links now working… phewwwwwwwwww
[...] LavaLamp for JQuery Lovers es un código de JavaScript implementando la librería JQuery con la cual podemos hacer un menú al estilo de Flash. [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
nice post…thanks
beautiful, nice inspiration, keep up the good work!
I like lavalamp effect very much and ? used my project. You see: http://www.yomvakum.com, thank you so much.
thanks
[...] Demo Visit [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
@John W #734, #735: Thanks!
@Daniel #740: I Guess too large
@Dink #744: You can do it by changing the plugin source. I am sure it is pretty straightforward. Look for hover events, and instead change them to clicks. You don’t have a way to change the event from outside the plugin
@Rohan #748: You have to use your server side code to decide which page you are currently in and set the class=”current” in the “li” of that particular element before the page is rendered to the browser. Take a look at Thinkrite Website for inspiration
@Umirza #750, #751: Can you host a test page somewhere and direct me towards it?
@Tyler #752: Thanks Tyler for helping out the community. I think i have answered the question like a 100 times.
@Brandon #754: I have noticed the problem in IE6 too, just am too lazy to fix it… It is just a matter of minor hacks to the CSS for IE6 to make it work in IE6. In fact Thinkrite website functions perfectly alright in IE6. So, the plugin itself is right, it is just a matter of some CSS tweaking make the menu look alright in IE6. Have fun.
@Marcus #756: I believe it is working now. What was the problem?
@Gav #758: Thanks!
@divone #760, #761: Glad you got it working…
@OgrenmeNesneleri #768: Great job. Nice implementation. Usages like these are my inspiration to develop more… Have fun!
Hello
How can we implement these functionalty in asp.net menu control
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
[...] 11. LavaLamp menu effect [...]
[...] LavaLamp for jQuery lovers! | Ganesh http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers – view page – cached This is Ganeshji Marwaha's personal web site. My personal projects, technical articles and blogs will be showcased here. — From the page [...]
[...] Lava Lamp. Para un menú con un efecto muy dinámico de fondo. [...]
If anybody else is trying to get this to work in Wordpress and having problems keeping the current page active, rather than defaulting to the first menu item..
Cory’s Place blog has a great tutorial on what you need to change in the lavalamp javascript so that it works with Wordpress’ wp_list_pages() or wp_list_categories() in your nav bar
http://hekimian-williams.com/?p=146
@John W #734, #735: Thanks!
@Daniel #740: I Guess too large
[...] 2. Lavalamp Navigation Plugin [...]
Thank you, you answered the question I have been searching for which was whether or not to place keywords when blog commenting.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi there! Really f**n’ nice plugin. I use it in http://spoonk.eu.
I’ve got only one question:
How to make my links to be bookable and to use history buttons on browsers? I try with return true; but it only shows the link hash (#about-us or #web-design) and if I try to type it on address bar points to default (selected) link?
How can I hash all links and use it to share them upon messengers, affiliates, etc?
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
Rabimba, Thank you!!!!
click: function(event, menuItem) { return false;
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] LavaLamp for jQuery lovers! [...]
How do I setting the current menu?
[...] ???????????????? [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Great script, I’ve added the .current class to my li, but what do I need to add to the CSS?
Thanks
[...] Lava Lamp jQuery Menu. [...]
props ganesh! i really am liking the way you developed this code. really fits my logic. the tweak i am having a challenege implementing is having a state where there is NO “current” . in my case, this is my main nav BUT my default page that loads with the lava lamp menu will not be referenced in the lave lamp menu.
i tried an additional class (noShowLava) that i attached to an empty . the only css in this class was display:none, also played with visibility. i was getting choppy lava images on the mouseOut when “current” was still set to the empty .
it feels like this should not be a complicated effort to implement, but i’m amateur at best when it comes to web dev. hoping that there is someone out there who finds this tweak a good challenge and is willing to find a solution.
many thnx to all u kick ass developers
peace and love,
jc
“… that i attached to an empty li class=”current noShowLava”.
Hi!
How i can add a dropdown menu when the mouse is over?
Thanks!
Great script, thanks.
nice plug-in but i have a problem here. im trying to implement this in my master pages but i cant seem to get it to work. got any ideas? just in case, please email me back for the specifics
thanks again ganesh
Yes, how do you get it to highlight a particular menu item as being the page the user is currently looking at?
Hi can anybody help me, im trying to set the selected tab when i go to a new page within my site but cant figure out how to do it. Im new to jquery so im finding it quite confusing.
[...] Lava Lam jQuery Menu [...]
links in element \Test\ not works and yes i have my file in the same directory, but don’t works… why?????
Hi can anybody help me, im trying to set the selected tab when i go to a new page within my site but cant figure out how to do it. Im new to jquery so im finding it quite confusing.
[...] la démo du menu ou le télécharger gratuitement du code source, c’est ici. 0 [...]
Hi I have a little problem.
How I can set the starting point ?? help..
Hello, this is a very nice tutorial. Is there a multi-level option version of the lavalamp menu? Thanks.
That’s easy, if you need to set the menu to a specified tab once the page is loaded, simply put class=”current” on the li tag…
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] LavaLamp for jQuery lovers! [...]
[...] jQuery Lavalamp for jQuery lovers(and everybody else) [...]
[...] 5, Lavalamp, for sexy hovers. http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] LavaLamp Navigation menu with a 'lava' effect. [...]
everything works fine … except my links don’t work. Why don’t they work when I click them on the page?
good job
thanks for codes
thanks for tutorial
Thanks, helpful source.
One of the best tutorials ever. Thanks.
Cool article, great script THANKS.
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
Hello, this is a very nice tutorial.
[...] gmarwaha.com [...]
Hi! Nice tutorial. But in Firefox (last version) I can’t open the links. I’m just clicking them but nothing happen. Please HELP!
I dont know why it didn’t work for me. I’ve downloaded the zip and opened the html file but it’s only displaying as text and nothing is working. Could you please help me? I’d like to make a jCaroullite as well but it is also not working.
Thanks-
Myrla
Hey! We’re asking someting here. If you dont know the bug just say I dont know how can I fix this. You just write the post and shut your mouth. Please give me a answer.
it’s very cool,
but with a rolling menu ?
what do you thing we could have?
[...] LavaLamp [...]
Hi;
If you want the script to go to a link when you click one item,
change this line
$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});
with :
$li.click(function(e){setCurr(this);/*return o.click.apply(this,[e,this])*/});
OR if you dont wanna comment anymore and wont require:
$li.click(function(e){setCurr(this);});
Im using Minifies version.
Other version’s line number to be commented is 75th…
Good plugin by the way.
Thanks
Hi;
If you want to set an item as selected when you go a new page, you can set that item’s class as “current” and then initialize the lavalamp function.
You must do it before function is initialized. Function sets the first item as selected if neither was set as current class. If any item is set as “current” class, then first item with “current” class current becomes selected…
If you want an item to go to a link when you click, the post above works but disables callback function. If you want a clean solution, initialize function without sending a callback function like:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700
});
});
Thank you edit css menü
http://bloggeriz.blogspot.com/2009/09/lavalamp-css-menu-black.html
Lavalamp black Css menu
Thanks for your gr8 plugin.
How to use with submenus?
[...] Kaynak [...]
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] 11. LavaLamp menu effect [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Web Site Demo Download AKPC_IDS += "503,";Popularity: unranked [?] Share and [...]
[...] Lava Lamp jQuery Menu. [...]
Thanks . Works great.
btw what are the other effects besides ‘backout’??
what other values can fx have??
thanks for this. going to use it on one of our new sites.
thanks!
Warwick
http://www.ireckon.com
Guys. if you want to implement this excellent navigation in Wordpress, FIRST OR ALL check that you really included all the javascript tags in the header.php file. I mean, “jquery-(version_number).js” should be there. “jquery.easing.min.js” should be there and “jquery.lavalamp.js” should be there… I know, there’s one more .js in the zip, but you may ignore this one.
Now, these are the changes you should make:
In the jquery.lavalamp.js file: just replace this…
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
with this…
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
THAT’S IT!!
Hi,
Does anyone know how come, when the plugin loads, the back li is 100% page width and left = auto ?
gr, Mike
Hi. I have to thank you such an article.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi,
There are still issues with the code listed here running under IE6 – in that some of the items wrap and make the whole effect look rubbish.
Do you have a fix for this?
I found these links;
http://www.webdesignerforum.co.uk/topic/26778-internet-explorer-strikes-again/
(this didn’t work for me)
and
http://www.mail-archive.com/jquery-en@googlegroups.com/msg16227.html
Was this ever fixed?????
Any help appreciated!
Thanks,
ben
Hey thanks for the awesome info!
I’ve managed to get all the effects working but the links don’t work, in the demo up top and in the setup I’ve done, using Safari 4. Has anyone else had this problem? Any solutions?
Thanks!
Tom
Hey thanks for the awesome info!
I’ve managed to get all the effects working but the links don’t work, in the demo up top and in the setup I’ve done, using Safari 4. Has anyone else had this problem? Any solutions?
Thanks!
Tom
I’m having the same problem… Is there a fix for this?
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
This is great! I will think of employing this in my website!
I used the bottom style. So i have got the lavalamp working in firefox, opera and safari. But for some reason when i open it up in Internet Explorer, the size of the navbar shrinks and the bottom line moves off to the left out of the navbar. Anyone know something I can do besides troubleshooting?
[...] officiel: LavaLamp Tweetez-le !Partagez-le sur FacebookPartagez-le sur FriendFeedS'abonner aux commentaires de cet [...]
Would it be possible to add a nested list to it?
I see by default the first menu item is selected is there a way to override this right now my solution is to create a li with a class of “blank” which no text and have that selected but it’s sort of a messy solution.
Brooke
[...] LavaLamp jQuery ???? ? ?? jQuery ????? ???LavaLamp jQuery ???? ??? Mootools Fancy [...]
Does anybody know how to fix the bug in ie6 ? It’s not working so bad on ie6, that’s surprising but maybe could be better..?
[...] 6. LavaLamp for jQuery lovers! [...]
Hey, i’m implamenting this on Blogger. It works fine but it doesn’t set the current list item correctly.
http://www.Left4DeadSafeRoom.com
Any solutions?
I thought the lavalamp.js did that for you?
so do i just need to write some javascript to check the url and set the current list item based on that?
[...] Read the original here: LavaLamp for jQuery lovers! | Ganesh [...]
[...] Lavalamp menu Muito bacana esse menu: você passa o mouse sobre o itens e uma animação é exibida para destacar o item que o mouse está por cima. Possui diversos exemplos. Tutorial & Demo [...]
What if I want one of the other links to start as the first page selected?
For example I want “plant a tree” to be highlighted w/o the user actually having to click on it first.
Any help would be greatly appreciated!
I’ve got the dame problem with the lins that are not working… What’s the solution for this?
Thanks for any help.
Is there a conflict with this lavalamp and the prettybox lightbox?
[...] Flash like menu rollover using jQuery [...]
I have implemented a this on my site and works great but the li images don’t render in any version of IE. I thought I might have done a typo, but couldn’t find any. Anyone els have this problem?
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. [...]
[...] 5.- LavaLamp [...]
NFL jerseys
ugg boots
your good comment
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
Do you realize that the links are not working? you actually can not follow the links with this… i thought i was doing something wrong, but if you click even in this site on one link it doesnt follow… i should get the # on nav bar.. not getting it.. not working
OMG i feel so stupid right now!! i didn’t notice de callback returning false , THANKS FOR THIS AWESOME MENU!!!
Is there a way that I can have it hover over the current page I am on? Example: I am on the about page, I would like the “lava” to hover over the about page link.
Any suggestions?
Other than that I love it.
Thanks!
thank for share tips. myblog is chiangMai guide and tour
links don’t work
[...] Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] 27. LavaLamp Menu [...]
Thanks, got this working nicely. But how can I increase the gap between the words but keep it so the image still only highlights the word. I have tried adding padding but the image then highlights the gap aswell
Please help!
It does not work with the newest easing 1.3, only with 1.1
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] 8 ) LavaLamp jQuery ???? [...]
In response to 902, I believe http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js fixes the issue with easing 1.3.
Dear friends, your menu is great but the links does not work… thanks
At Anthony 906: that library doesn’t solve the problem with the version 1.3 :\
For me it doesn’t work
that library doesn’t solve the problem with the version
SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu.
[...] Demo Visit [...]
[...] [...]
[...] download i dokumentacja [...]
[...] 2. Lava Lamp Menu Library: jQuery Source: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] 2. Lava Lamp Menu Library: jQuery Source: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] so Wordpress was used in this instance in its most simplistic and original approach.We used jQuery LavaLamp script for the navigation animation. It was very easy to implement and has a nice small footprint. [...]
It seems no work in IE7.
IE6, IE8, FF are all okay.
nifty effects – really nice!
I really like this. However, I’d like to modify it so that the menu box defaulted to a position over the page that the user is currently on. I’m thinking of using a php variable to set the value of the li element to “selected” (or something like that), but I’m curious if you’ve addressed this issue already. Does the select box always have default to the far left?
Thanks for your post…
I tried another version of lavalamp. but it’s make a conflict with my another jquery plugin..
But…I tried your script for fixing my bug…And..It’s Fixed…
Thank U very much…
I hope you could accept my request.Because I am a jquery lovers ,too .After I have found out about horizontal lavalamp .I don ‘t know how to make a vertical lavalamp.I was wondering if you could continue making vertical lavalamp for everybody who is just beginners as me ?
I hope you could give me an opportunity to see your ability on the gmarwaha website. please.
I’m french, so i don’t speak english very well and i’m a jquery lover
but i like this plugins, thank !!
http://filmrehber.com
thanks
[quote]Step 3: The Javascript
This is the easy part. [/quote]
Fuck you!
good thanks my site http://www.merkezcity.com
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface [...]
Thanks ! but… it’s doesn’t work with prototype’s library !!???
i tried using this it was really simple but the links dont seems to work..however openning a window by right clicking and opening in new window works…is this the problem with this plugin
Yes, the links just don’t work when clicked… is it a bug? How to fix it?
Anyway, I like the way it work though…
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
I have incorporated the lava lamp i downloaded from here into my site in dreamweaver. I set the links and everything, but when i test it in a browser and click on one of the buttons, it doesn’t go to the page i pointed it to. Help?
Thank you very much, my job was very useful
Hi guys,
First of all, great tutorial! I learned allot from it and ended up with a great plug-in for my sites.
Then for all of you having problems with the links not working and after clicking letting the effect stay on the one you just clicked on:
@ Linking
If you use the code directly from the download you end up with the following call function in your HTML:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
If you remove the the following part, linking should work again:
click: function(event, menuItem) {
return false;
}
@ Current one
Just include class=”current” on the li you are currently on, like this:
Plant a tree
Well, I hope it helped, good luck all!
-Mark
How do you set a css properties for ‘current’?
I want to change the font color as well for the preselected link.
Tried adding this -> .current {color: #555555}
but does not work. Any ideas?
Hi Seu,
Do you mean you want to change the color on hover or when clicked on, being the current link? Because from what I see, the current class is created on instant from the Lavalamp jQuery script, so that way you can’t use it in CSS if I’m correct.
-Mark
Yes, I notice that the .current class is not in css file but contained within the .js file. I wonder if its possible to insert an inline styling there then?
[...] 27. LavaLamp Menu [...]
[...] demo was suggested by one of our commentators Daniel Niquet: Another Context Menu 8 ) LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles. [...]
Navigation dosent work. can i find fully fucktionall package?
or how to fix it?
@ Sue: I don’t really know how it should work, but I know a Dutch site that also uses this technique. And whilst you hover over the other buttons, the current one gets underlined. I did not yet figure out how they do it, but I will let it know if I understand it!
@ Tim: Read the comment above to make your navigation work!
-Mark
[...] demo visit [...]
Hey Ganeshji,
Great work & also technical support
I checked all the answers and couldn’t find the solution for this:
How can I display the CURRENT selection only when my mouse is ON the menu? In other words, I need to be able to hide the selected item by default, and show the menu non-selected.
Thanks.
Cy
Yes! I found what I wanted, that option is enabled in a newer version I haven’t seen before.
Here’s the feature I needed, in case anyone else was looking for the same > http://nixboxdesigns.com/demos/jquery-lavalamp-demos.html
Have a nice day
Hey
my links dosent work.. and i cant find solution for it.
Can somebody but working demo code or even better download package some place!
Is there a way to evenly space out the navigation links? Does jQuery have an easy way to do this?
Hi i was using lavalamp and it was working fine….but when i started using overlay form the firebug started to give an error “.lavalamp is not a function” .The code which i used is given below :
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$(“a[rel]“).overlay({
expose: ‘darkred’,
effect: ‘apple’,
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getContent().find(“.contentWrap”);
// load the page specified in the trigger
wrap.load(this.getTrigger().attr(“href”));
}
});
$(“#1″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Please help me out anyone
[...] LavaLamp [...]
http://lacan.com/wordpress/?p=18&cpage=1#comment-16611
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] 6. LavaLamp for jQuery lovers! [...]
There is a bug When using jquery 1.3.2 AND the returnDelay method..
You will get an JS error, after the timeout.
U can fix this with the code below:
Replace
function move(el) {
if (!el) el = ce;
WITH
function move(el) {
if (!el || !isNaN(el)) el = ce;
Hi does anyone know if you can modify this code so an image icon will hover/slide above the menu as an indicator? I have some javascript in a hidden sub menu already – not sure if this is why I’m having trouble. Any help would be very much appreciated.
Hey, i’m implamenting this on Blogger. It works fine but it doesn’t set the current list item correctly.
NFL jerseys
Hi- I’m trying to have the current page highlighted using PHP. I’m pretty clueless when it comes to SSI- I know enough to use header.php and footer.php.
My lavalamp menu is in the header.php file:
How/Where/What do I need to be able to have the current page selected in the menu when I am using php?
Here’s the site:
http://www.prodentite.com
Thanks!
Hi- I’m trying to have the current page highlighted using PHP. I’m pretty clueless when it comes to SSI- I know enough to use header.php and footer.php.
My lavalamp menu is in the header.php file:
How/Where/What do I need to be able to have the current page selected in the menu when I am using php?
Here’s the site:
http://www.prodentite.com
Thanks!
Thank you for this nice menu. This will make our work easier.
Wow, this is very “flash like” but totally simple for those familiar with Jquery. Great for learning web designer such as myself. Thank you and your inspiration.
[...] ???? LavaLamp for jQuery ???????????????LavaLamp for jQuery??????????????????????????????????????????????????? [...]
Thanks . Works great.
Hi and thanks for this great work.
I start work with it and found one problem whith google chrome.
It’s not a error or program mistake.
In case you load new page Chrome load the page, and update it only partial. Means only parts that have changed. It don’t see the change with li class=”current”.
So I reload the page, but the wrong menu is selected.
Has someone any experience with?
With actual Safary, IE 7-8, Firefox 3.5, Opera 10.10 it work fine.
Only Google Chrome make this mistake.
Oh it was my mistake. I have forgot to clean the cache.
But still one Idea: what happen if I want to show the menu but none have to be active/current cause I am not on one of these pages?
Good tutorial. However, the regular left-button click does not bring up the url under the button, you have to right-click on the button and choose open the url or open it on a new page or new tab. Is it normal by design or my browser has problem? I have tried Firefox and Internet Explorer. Help please!
Thanks!
– Kang
I love the plug-in, thanks!
However, how do I make it so that when a user clicks one of the highlighted links it actually reloads in the current browser window with a new .html page? I do this…
——
click: function(event, menuItem) {
if(menuItem.id == “resume”)
{
alert(“resume”);
}
————————–
get the alert box (for testing purposes), but I want a different .html file to load in the current browser window? I’m new to Javascript and this is quite annoying! Any help would be awesome!
good work buddy., really appreciate ur work !! and thanks .. continue this …
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi,
First great article, really helped me out a lot. I have one question though: I am currently using the “underline” variation and would very much like for the blue bar to be exactly as wide as the text (not as the li-item). But obviously the space between the menu items should remain.
I cannot seem to get my CSS fixed the right way in order to achieve this. Could anyone help me out here?
Thanks in advance!
Thanks for the great plugin!
I’m having some problems with the css however – I wan’t to add extra space between the li elements and also some more padding, but when I do the ‘lava’ ends up slightly to the right and/or below the element (I’m using the lavalamp without images). Anyone who’s worked this out?
[...] Lava Lamp jQuery Menu. [...]
Looks nice, but the code isn’t efficient at all.
[...] Lavalamp (Demo – Descarga) 2. MenuMatic (Demo – Descarga) 3. Slick Animated Menu (Demo – [...]
thanks
[...] [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] LavaLamp for jQuery LoversA “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
[...] The Lava Lamp Effect [...]
This is really cool. I am just having one problem. When a page loads, initially the current menu item only shows half of the background of the current li. Once I hover over the current li it stretches out to normal (or the way it should be). I’ve only added the menu to one page as I am in the middle of constructing the site but you can see what I have done here. http://www.samclaytondigital.com/about.htm Any help would be appreciated.
BTW – I read through just about every comment and unless I missed it, I couldn’t find a solution.
Thanks again.
Just a couple of more notes about the problem….
1.)When I preview the page locally it appears fine. It’s only when the page has been uploaded to the remote server that the issue appears.
2.)Once you browser has cached the page. When you return to it later, the current li background appears correctly. If you clear your cache and then load the page again, the issue is back.
3.)The problem persists in IE and FF3.*
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
RE: Comments 1107, 1008, 1009
The problem seems to occur when I replace the anchor text for the links with transparent .png’s. When I use text links the lava lamp menu works great.
Any idea how to use transparent .png’s for the anchors for the links and still have this work? I would like to use a non standard font with a drop shadow and I need to use transparent .png’s to do so.
Thanks again!
Brilliant, I love it, thanks very much for sharing.
Thanks Oldu Sayende siteme beklerim
[...] LavaLamp for jQuery Lovers A “Lava Lamp” hover animation effect on a list-based navigation bar, written for jQuery. [...]
I’m having a problem.
So I moved things around a bit (Like, font color and font size), but now the links dont want to work. I noticed that in the sample you prove in this website, the links ALSO dont work. The links ALSO dont work on the Demos? The mouse changes to click a link, but when I click is like if I had never clicked it.
Please reply to me at my provided E-mail. Please use following subject title: “LavaLamp Site”
thanks sooo much in advice. Your gonna get good reviews if i get my help
the clicks doesn’t work!!! the menu have something wrong whit the code, please someone review it and post the solution, anyway the menu its great but it’s a shame that isn’t useful
[...] ???? ???? VN:F [1.7.8_1020]please wait…Rating: 0.0/5 (0 votes cast)AKPC_IDS += "358,";Popularity: unranked [?] [...]
For everybody: I have been trying to fix the problem of the links (because doesn’t work) but i can’t find the problem in the code…
But the good news is tha i found another version that it works
Look here: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery
I tried that and it works!!!
[...] LavaLamp is a latest release jQuery Javascript menu based on the original design of fancy menu by Guillermo Rauch. It is a Web 2.0 style smooth sliding nifty effect menu with light weight code and extra two more interface styles. You can free download the full source code file here. Besides last month we had a popular roundup of CSS based navigation menu, check it out for further reference. [...]
[...] you wanna English tutorial, please visit LavaLamp for jQuery Lovers. ??: WordPress ??: jQuery, LavaLamp, mg12 ??WordPress [...]
its nice. jquery is very power full
cool script! thanks a lot!
Its so so cooooooooooooooooooooooooooooooooooooool
Dude, AWESOME! thanks for this
-Question tho with the links tho. When you click on the link the link should stay highlighted with the rollover image. Im working on ASP page that calls from a default template page with dynamic links. How do I make the rollover stay and not go back to the home page(default.aspx) each time?
Thanks Administrators
thanks
thanks..
[...] Lava Lamp jQuery Menu. [...]
[...] Lava Lamp jQuery Menu. [...]
Very nice, very simple. Thanks mate!
[...] Lava Lamp jQuery Menu. [...]
[...] LavaLamp for jQuery Lovers [...]
thanx 4 ur kindness. But links are not working…………..
When i click on the hyper link its not working how to solve that problem?
[...] Lavalamp for jQuery Lovers | ?? [...]
[...] Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
You’re awesome, that’s all I can say
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
[...] LavaLamp for JQuery Lovers es un código de JavaScript implementando la librería JQuery con la cual podemos hacer un menú al estilo de Flash. [...]
Hello,
I love the simplicity of this plugin but am having trouble incorporating it into my tabbed menu. I have it loading & expanding ot size but it will not move. Please feel free to contact me for any info! Any help is great.
Thanks very much!
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] ??? Context Menu Functionality ???Another Context Menu 8 ) LavaLamp jQuery ???? [...]
i love your tutorial…but i wonder why your demo worked at ie and firefox. but when i integrated at my site, it looks horrible in internet explorer 8… any advice? or am i just plain stup?
Links are not working, what about it?
thanks!!
as Suleyman Vardar said, links work with this:
—-
Hi;
If you want the script to go to a link when you click one item,
change this line
$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});
with :
$li.click(function(e){setCurr(this);/*return o.click.apply(this,[e,this])*/});
OR if you dont wanna comment anymore and wont require:
$li.click(function(e){setCurr(this);});
Im using Minifies version.
Other version’s line number to be commented is 75th…
Good plugin by the way.
Thanks
—-
for the current page link, just add this class to the
great!
[...] Lava Lamp – Lava Lamp by ganesh is yet anather jquery menu, with cool sliding effect in the background, [...]
How can I make a dropdown feature for this amazing menu? Is it possible???
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Please in future tutorials make sure that it’s possible to get them working by cutting and pasting the content into an empty page. I’ve spent 2 hours trying to get this working and it clearly doesn’t.
It works perfectly.
you must copy all files to root directory
(http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp-0.2.0.zip),
and modify jquery.lavalamp.min.js with the next sentence:
Locate this:
$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});
Replace with:
$li.click(function(e){setCurr(this);});
Works OK!! in page empty and page with a lot of table and td’s
Hi,
I love this script, but i keep having one problem with it.
In IE6 and IE7 the background starts on the left of the monitor screen instead of left of the , probably has to do with the positioning (absolute anyone?). Is there a workaround?
Cheers
I seem to have a minor, inconsistent problem with the lavalamp. Occasionally when I refresh the page or first go to the site, the lavalamp is shifted and covers almost the entire selection area, slightly offset (http://www.creativefrequencies.com/temp/Picture%202.png).
When I move my mouse over the selection area, the lavalamp “wakes up” and starts behaving like it ought to (http://www.creativefrequencies.com/temp/Picture%201.png)
Sorry for the rough graphic trims – hope you get the idea.
Any suggestions as to which code I should be looking at? I’ve been poking around CSS for quite some time now, but can’t seem to figure out what it’s making it do this – especially since it’s inconsistent.
Thanks for any help!
[...] Lava Lamp jQuery Menu [...]
[...] Lava Lamp jQuery Menu [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Really cool. Having problems on clicking the link. Doesn’t do anything if I update the list href. When I hover over, it shows the correct link. Ideas?
Hey
How to make “current” menu with your plugin when you use wordpress?
I tried few things, but no luck.
Thanks!
beautiful
Hi Ganeshji,
Just wondering if you have worked or are working on a solution to keep the image state active when on a different page. We of course do not want to put the current class on all different pages.
If someone can provide a php script for me to make this work it would be greatly appreciated…i’ve gone through all the comments and noticed a few people got it working on the server side.
Thanks for the amazing plugin!
for who want to initialize the menu with specified position (for example, the highlighted menu item is the second item instead of the first one) .. do the following:
1. extend the function paramters and add itemNumber, make the default item is 0 (first menu item)
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
2. modify the function after that to make use of itemNumber
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[o.itemNumber]).addClass(“current”)[0];
and now call the lavaLamp like:
.lavaLamp({ fx: “backout”, speed: 700, itemNumber: 1});
this will make the second li item is highlited
SOLUTION TO DYNAMIC CURRENT PAGE LINK
Hi Peeps I don’t know if this solution has been posted already but I have found a solution to the most common question here regarding the current link. The problem is by adding a ‘current’ class to the you lose the ability to have the navigation links as an include.
Heres the solution:
Right at the top of eache of your php pages add this bit of code:
‘Home’ will be reference to the homepage therefore replace ‘Home’ with the name of the otherpages respectively.
With this technique you can still have all the navigation in one include.
You put each in a chunk of code which tells the browser if we are on ‘home’ then use . Look at the example below.
<?php
if ($thisPage=='home')
{echo 'Home‘;}
else
{echo ‘Home‘;}?>
if ($thisPage==’about’)
{echo ‘About‘;}
else
{echo ‘About‘;}?>
Big hand to the developer! If if this is unclear I don’t mind going through it step by step as I know how frustrating it can be – http://www.blueprintdesigners.co.uk
Thanks for the reply MAMO!
For Wordpress users you can find multiple solutions to highlighting the correct page here — http://codex.wordpress.org/Dynamic_Menu_Highlighting
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
LINKS DON’T WORK
everything looks great apart from the fact that the pages don’t change.
I have tried MAMO’s idea but this has failed.
Any ideas??
In the demo you will find return:false in the jquery function. Remove this for the links to work.
Any plans to update this to work properly with jQuery 1.4? I tried it quickly and the hover effects stopped working. I just got things running, so haven’t had a chance to run through it yet.
[...] Lavalamp for jQuery Lovers | ?? [...]
thansk for you admin
I have the same problems of ats and Daniel (messages 1013 and 1023 respectively).
The links worked only in IE8.
for who want to initialize the menu with specified position (for example, the highlighted menu item is the second item instead of the first one) .. do the following:
http://sanalhayat.org/
1. extend the function paramters and add itemNumber, make the default item is 0 (first menu item)
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
2. modify the function after that to make use of itemNumber
$li = $(”li”, this), curr = $(”li.current”, this)[0] || $($li[o.itemNumber]).addClass(”current”)[0];
and now call the lavaLamp like:
.lavaLamp({ fx: “backout”, speed: 700, itemNumber: 1});
this will make the second li item is highlited
http://sanalhayat.org/
Any thought on how to use multiple images? I’d like to have the same effect you use on this site, the centered image. But also an image on either sides of the centered one. In other words, I’d like the menu to look like a square block with a pointer at the bottom center of that square. Any ideas?
Everything works except when i navigate my mouse to a submenu item, the lavalamp background image flies right back to the “home” position and is much wider than it should be. How can I get the hover image to stay on the menu item while I’m hovering over the submenu items?
Thank you!!
Hi Ganesh,
This is really nice one… how can i implement this query ? am using asp.net… if possible anybody tell me plz
thanks by,
Vishnukumar SR
[...] jQuery Lavalamp for jQuery lovers(and everybody else): Otro efecto para los menús de una web con estilo. [...]
Hola (hi):
i need then menu change to down not to left or right pleas
sorry for my english!!
thanks!!
Awesome. Just what I was looking for.
first of all the script it’s very nice. i have a problem, it enters in conflict with another script in java also – lightbox – and it cancels it(lightbox) in totaly. is there a way that i can make them work at the same time?
AJAX support
I figured out how to get it working with Ajax requests…
make the changes to the lavalamp javascript file:
o = $.extend({ fx: “linear”, speed: 500, itemNumber: 0, click: function(){} }, o || {});
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[o.itemNumber]).addClass(“current”)[0];
Then load the lavalamp in Javascript:
$(function() { $(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700, itemNumber: 0 })});
This sets the default itemNumber to 0
But here’s the problem… When you want to call an other lavalamp with a new itemNumber it leaves traces of the previous call behind to fix this is easy, assume that you have already determined which itemNumber should be, make a function that you call after linking like…
function lavalamp_move(newItem) {
$(‘.back’).remove();
$(“.lavaLamp”).lavaLamp({ fx: “backout”, speed: 700, itemNumber: newItem });
}
The switch and case (or array) statements for determining the itemNumber based on the page are up to you. I don’t currently have it working on the site that I’m linked in this post but it will be soon, so check back. You would just call it from your link handler with lavalamp_move(3);
Replacing 3 with the proper number
[...] 11. Lava Lamp [...]
Hi folks,
this lavalamp plugin is really great, but I`ve got a problem which makes me crazy.
You can see my test page under http://www.kuskus.de/lavalamp
It all seems fine, but the links don`t function and as a non-programmer I bet that I made an essential fault, which I am not able to see.
It would be so kind, if s.o. could get me a hint.
THX alot in andvance
Duffy from Germany
aha, all tutorials concerning the lavalamp seem to be made for coders and not only poor webdesigners. So if you poor webdesigners got the same problem, change in the code below “return false” to “return true”. thats it.
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
now the plugin starts to make me realy happy
Duffydodo
[...] usare il Lavalamp in uno dei nostri progetti, ma esistono due versioni una per il jQuery e una per le MooTools, peccato che io usi prototype (testato con Prototype JavaScript framework, [...]
Thank you for the wonderful plugin!
Also thank you Duffydodo. I spent ages looking through the Javascript code; didn’t think about even looking at the block of Javascript in my main page haha.
[...] Este es uno de los mejorsitos, crea un efecto “slide” muy lindo. Lavamp [...]
Hi, tried to get this to work a while back. The effect worked great on a single page, but when I clicked from one page (say index.html with a menu item: HOME) to another page (say about.html with a menu item: ABOUT), bubble would show behind the HOME menu item on page load and not behind the ABOUT one.
Am I missing something here?
I’d like to get the bubble to show on page load behind ABOUT when I’m on about.html, HOME when on index.html etc.
Hi, I tried to get this to work a while back. The effect worked great on a single page, but when I clicked from one page (say index.html with a menu item: HOME) to another page (say about.html with a menu item: ABOUT), bubble would show behind the HOME menu item on page load and not behind the ABOUT one.
Am I missing something here?
I’d like to get the bubble to show on page load behind ABOUT when I’m on about.html, HOME when on index.html etc.
ade, what your trying to do is waht I wanted and I have it working, but it still adds the “.current” class to the first link. What you can do is code “.active” into the of the ACTIVE page so it becomes and then change “$li=$(“li”,this),curr=$(“li.current”,this)” in the minified JS file to “$li=$(“li”,this),curr=$(“li.active”,this)”
the only problem is, is the .current still gets added to the home link.. and i dont know how to remove it yet.. does any1 know how to get this working the correct way? or how to remove the current link from the first li?
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
Hi Jay,
I’m glad you understood what I was on about. That sounds like a way of doing it, but I’m sure there must be something simpler that we’re probably both missing.
Surly this plugin must be meant to do what we’re wanting it too already, I think everyone using it would want it to behave like this.
Can anyone out there help?
)
The the easiest way to determine the quality of the custom thesis writing services was to order some the hottest mini dissertation about this good post from the dissertations writing services.
ac?gölden yay?n yapan ve ?u anda tüm dünyay? kasip kavuran bir radyo ac?göl fm herkes davetlimdir.
acigol fm acigolfm acigol fm acigolfm acigol fm acigolfm acigol fm acigolfm
Hi,
Possibly stupid question, but -
will jCarousel Lite work in wordpress selfhosted?
Thanks
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] using jQuery Very fancy style of menu design using jQuery. Gives your menu a feel like it's a Lava Lamp. Very well explained and easy to integrate [...]
thanks admin
this is very good. thanks
[...] [...]
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
hi friend,
i am using lavalamp menu in my project, i am giving links to menus but when i am go to “about us” page from “home” page the menu selection box is appearing on “home” link, plz gaid me how can i appear that on “about us” menu in “about us” page.
thanks in advance
plz reply…..
Regards,
Kamlesh Wagh
Nashik, Maharashtra
India
If you are using Lavalamp menu in WordPress and you want to highligth the current page item, you just have to repalce all ocurrencies for “current” in jquery.lavalamp.js to “current_page_item”.
May i know how to put a dropdown submenu in my main menu that will ease when i hover it.Please help. thanks…
[...] 8. LavaLamp [...]
Hey Ganesh
Big thanks for this Plugin – Lavalamp looks awesome!
I put it on my website http://www.redkoaladesign.pl
[...] Demo | Tutorial [...]
Maybe a stupid question ? would this work on a vertical menu ?
Thank you for sharing !
Hey,
I am wondering the same thing that others on this page have asked about keeping the current page highlighted when you click the link. If anyone has a solution I would really appreciate it. Thanks
P.S You need a better spam filter!
hey thank you for this javascript it help me to release my new website
you are so great here i have used it http://www.khoatu.de/
[...] the Mootools library. And later a jQuery version of this menu called lavalamp was made popular by Ganesh. This time I will show you how to achieve the same effect using the CSS3 new [...]
Hi…
I’m using ur scripts as a normal scripts (not for wp or joomla).
Now the problem is how to fix the .current issue ?
Everytime i click the links, the position is back to the first li.
Too many comments already and make me dizzy to find the solution.
Thanks,
Raff
[...] 11.) Build a LavaLamp Menu [...]
[...] LavaLampI did a thing just like this on CSS-Tricks, this is the original [...]
is there a way to enable/disable menu sub-items in this control?
Love the plugin!!! Thanks!!!!
Is there a way to set the default menu item?
For example the selection stays put on Home. If I’m on the About us page, I’d like it to stay/start from the about us link.
Is there a setting which will achieve this?
Thanks!
Hey,
Can you please explain your reply to comment #732.
I am a newbie to all this jQuery and lavalamp. What I want is what John wants. I want lavalamp menu to be able to control tabs (be it coda slider or anything else).
Please help me on how to do it.
Also,
I noticed that in your example if I increase number of characters in a menu item say “Riding an Elephant11111111111″ then after a fixed number of characters the lava.gif image that hovers BREAKS
I want something like this http://sinanyasar.com/blog/?p=80
But just that I don’t understand the language this blog is written in and Google Translate isn’t giving any meaningful results
i want change default blue line from “home” to “Ride an elephant”.
what i do??????
therefore, i will changed this menu work from left to right state, because “Home” in my language is at right side and “Ride an elephant” is at Left side.
please help me…
wow, I tested it, and it work this is the first time to use a jquery menu
thanks
I’ve used it, its really good but i can’t use it with CSS Dock Menu Jquery together in the same website. i don’t know why but I’ve really tried it, does any one know how to fix it? let me know please. danial_comp@yahoo.com
Your script is great and I love it, but I’m having trouble when I am using a custom font for the menu (@font-face). It works swimmingly in IE and Firefox on a Mac, but in Firefox 3.5 on a PC, the “current” hover state displays incorrectly until the menu is rolled over. I believe it is loading the default font first, placing the hover in the space where it thinks it belongs, then the TTF font finally loads and shifts the menu, so now the hover is in the wrong spot. I’ve tried putting in FOUT scripts, but they have the same result (even though a FOUT script will hide the default font from the browser until the custom font is loaded, the loading order problem is still the same). Is there anyway to delay the loading of the “li.back” class until after the custom font has loaded, or a way to redraw the page so that it knows that the text has changed? I’m tearing my hair out trying to make this work with the custom font before I give up and go back to a web font. Thank you for any help you can provide me!
thanx friends this is so amazing for my site
Thanks Again lot………
This will help me lot
If I try a link like this is in the menu:
a href=#something
it does not work if I’m using this plugin.
Any workaround will be appreciated.
On second thoughts, none of the links work.
I thought may be I had changed something. So I downloaded the plugin again and just added a link in your menu and it is not working.
Nothing happens when I click on the menu link.
Hi, very nice plugin
I want to set the current object by clicking on another link in the page than the lavalamp link himself. How can I do that ?
(i’m french, so sorry for my bad english xD)
Thank’s you
My links doesn’t works in your lavalamp menu. I inserted at but also not working. Is there another way?
As per previous comments – It looks great but does not seem to hyperlink to other pages ?. I have tried it in 4 different browsers. Am i doing something wrong ?
My links doesn’t works in your laval
[...] Lava Lamp Menu Attached Files [...]
Same problem as many others – everything works fine except the actual hyperlinks do not work when clicked. however, right clicking and selecting ‘open in new tab’ etc, they do work. Any suggestions?
@John
If you remove
“,
click: function(event, menuItem) {
return false;
}
”
From the javascript the links will work, note to remove the comma after the speed value as well.
@Leo
Thank you so much, works perfectly now!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] 11.) Build a LavaLamp Menu [...]
Nice tips for HTML and Java!thanks dude…from read other’s problems, I got my answer!Thanks for this information.
Is it possible to control Lavalamp with a second menu, too?
I’ve got a Lavalamp menu on top of the website and a second menu in a sidebar, which conains the same entries. I want to update the curr variable with the value of the item I clicked in the side menu, but I don’t know how to do it.
Thanks!
… meanwhile I found it out myself
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Is there any way to change the colours similar to MagicLine’s CSS trick, which unfortunately, doesn’t work with Internet Explorer.
http://css-tricks.com/examples/MagicLine/
hi,
How do you modify this to handle down down sub menu off the list tag?
Yes, this is what I’d like to know as well. At http://apycom.com/menus/1-white-smoke.html, they have multilevel menus, but AFAICS, the lavalamp effect (if present) spans the topmost level only.
Hi, awesome file! Only thing is that is that when you rollover a different link, the link or the color itself kinda disappears when you’re viewing it in internet explorer. I’ve tried to browse through some of your comments but I wasn’t quite successful.
Any help would be greatly appreciated!
http://www.virtualtouchmedia.com/v2, is the location of what I’m working on.
hi,
How would you create a sub menu or sub lists under any of the main lists in the nav?
Thanks a lot for the wonderful information
[...] LavaLamp [...]
This guy has some interesting suggestions as well:
VEGA YAZILIM, RECEP YILDIZ, WEB TASARIM, e-ticaret,web design,SEO Arama Motoru Optimizasyonu
Sleeping once in awhile is a good idea. ;D
Awesome… This is what I was looking… Here ends my search…
Thanks a lot for the wonderful information
I am using lavalamp in a schoolproject atm. But when i click on a menu-item, the page doesn’t load. So the lavalamp effect works, but the actual linking to pages doesn’t work. How can i fix this?
Hey Lowie, I have the same problem.
Hey Jos,
i just found what the problem was.
$(function() {
$(“#menu”).lavaLamp({
fx: “backout”,
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
I included this in my html. But the return false is causing the problem. So if you return a true in stead of a false it will work
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hello,
I got trouble with implementation of this script i’m wondering maybe someone could help.
So on my website i have using Jquery 1.4.1 and JGrowl plugin for notifications.
When i include jquery.lavalamp.min.js and jquery.easing.min.js JGrowl popup stop working.
I fond that Jgrowl stop after including this file jquery.easing.min.js
I have no idea why… maybe someone could help ?
Here You can download jgrowl
http://plugins.jquery.com/node/11908
Regards
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hiya, i’am trying to get this working with a custom font, the underline bar is too big until i hover over an item then it is the correct size any ideas how to fix this?
Cheers Jack
Any way by which you can control the position of the active item on page load… will be specifically useful in menu systems which have a current_item sort of a class attached to the active item.
[...] LavaLamp for jQuery lovers! [...]
[...] 11.) Build a LavaLamp Menu [...]
[...] il est facilement configurable grâce à la feuille de styles qui est fournie dans le package. Catégorie: Plugins JQuery | Pas de [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Same problem as Jack Watling :
I use a custom font in css using @font-face but it seems that the initial lavalamp bar width is set ‘before’ the font-face is applied, resulting in the bar being to wide until I hover another item.
Any idea how to fix this ?
Thanks
[...] ???????demo???????????????????? [...]
Hi I really like this menu, thanx a lot, but have a big problem, I have now used 2 days to try to figure out.
I have it installed on a blogspot site. It work well if the script are alone on the site , but if I have it together with a mootools script both of them will not work at the same time. The script I place last work well.
I am not a script expert. Hope somebody can help me!
Ok, bug with custom font was fixed using $(window).load( function() { … } instead of $(function() { … }
As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess LavaLamp is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating LavaLamp into your jQuery powered site.
Thank you..
[...] [...]
Hi,
can this script is use with table structure. means can I use tr td instead of ul li.
Thanks.
[...] [...]
Hi I hope it is ok I ask again..I have cind of got a hang ut that I really want the lavalamp installed. As asked 2 days ago. I have trouble with jQuery and Mootools conflict. I can not get them work together.
Anyone, any solution? I am not an script expert. Again thanks for the super cool script
The best tutorial.
I know its post long time ago but really helps.
Thanks again!
[...] 11.) Build a LavaLamp Menu [...]
Thanks for the great effect with lavalamp. Unfortunately in IE8 it is not working. Did you experience problem in IE8?
This is too cute and cool. Shakedown 1979, cool kids never had the time.
[...] The jQuery LavaLamp navigation plugin is essentially a port from a Mootools which can be found at http://devthought.com/cssjavascript-true-power-fancy-menu/, however the jQuery version is available at http://gmarwaha.com/blog/?p=7 [...]
I can’t seem to get my links to work in any browsers. It’s almost 4am, need sleep I am sure this is an easy one. If I remove off one of the links then it works. So from this
Services
to this
Services
It’s still within the ul but not sure what it’s conflicting with, any help would be great.
Crap, didn’t realise that would happen
If I remove the li tags then the link works.
[...] Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
Hi,
can this script is use with table structure. means can I use tr td instead of ul li.
Thanks.
[...] LavaLamp for jQuery lovers [...]
[...] LavaLamp for jQuery lovers [...]
[...] Lavalamp for jQuery Lovers | ?? [...]
Thank You so much for the real LAVA…
It’s Looking Fantastic..
links for 2010-03-18…
Common Queries Tree (tags: development webdev database mysql list tips queries) LavaLamp for jQuery lovers! | Ganesh (tags: webdev javascript j…
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
[...] Demo Visit [...]
I have a problem with the JQuery Lavalamp menu, so when i add another li for the list of menu, it not work, it work only with 4 li, what i want to say that only the first 4 li which appear in the menu, the fifth will not appear… It will be so nice if any one can help me, Excuse me for my bad english, i have a problem with the english language too, but i’m a lovers for jquery lavalamp menu
$(function() {
$(“#menu”).lavaLamp({
fx: “backout”,
speed: 800,
click: function(event, menuItem) {
return true;
}
});
});
This seems works but the current visited is not focused, its focused only first menu.. pls give me the solution
[...] ???? «???? ?????» ?? jQuery | ???? ?????? [...]
here is the css:
.lavaLampNoImage
{
position: relative;
height: 29px;
width: 820px;
background-color: gold;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampNoImage li
{
float: left;
list-style: none;
}
.lavaLampNoImage li.back
{
border: 1px solid #000;
background-color: red;/*#e6e8ea;*/
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a
{
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
/*text-transform: uppercase;*/
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited
{
border: none;
}
Hi… When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the solution..
Please give me the solution..
Thankss
Hi..the script is super….. but When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the directions….
thank you,i like it!
I will try this out.Looks cool.
Hi,
Can’t get the hyperlinks to work without taking out the attribute, can you help?
Cheers,
Jake
Hi,
Can’t get the hyperlinks to work without taking out the link attribute, can you help?
Cheers,
Jake
I will try this out.Looks cool.
[...] LavaLamp for jQuery lovers! [...]
For the people who would like to use this example, do not forget to delete callback function, otherwise hyperlinks won’t work.
Really wonderful information. Keep more posting..
Please let me no how to make horizontal menu like this.
Please sent me Example Link.
Please
Regards
SUSHIL KUMAR
Delhi India
Hello, i have used this script into my website the effect works but links won’t working. You know what i mean when i click on a particular link eg:about it’s not showing the about page instead of that it sticks in the same old page. Am i doing something wrong!
Hey, there is a problem whit JS on Opera 10.51 (Windows). Try http://www.meethod.pl/provitao
Can you point me where the callback function is. I face the same issue with the hyperlinks.
Found it, got it to work.
Where can I find the callback function??
[...] LavaLamp for jQuery lovers! [...]
Why can’t anyone help me
(
I just don’t know where I have to delete the callback function so links will work!!!
Please help me!!!!
for everyone who does not work:
in the file .html, at the baginning of the script:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
you must replace “returne false” with “return true”
enjoy
ps. I think the admin should write this rules directly to Article
by
Gianlu
I’m new to jquery but I really love this script, could someone who has it working please send me the script files, css and any other files that it needs to work? It would really help! Thanx
Email: blakefinley94@gmail.com
I have resolved the problem relative to the Highlighting of the “button” in a current page.
you must change the htm page in php page and in the ul list you must add this code:
<li class="”> Home
<li class="”>Pics
<li class="”>events
<li class="”>contacs
enjoy
sorry…
I re-write the code:
ul class=”lavaLampWithImage” id=”1″>
li class=”"> a href=”index.php?pagina=home”> Home
li class=”"> a href=”index.php?pagina=tabelle”>Pics
li class=”"> a href=”index.php?pagina=tabelle”>events
li class=”"> a href=”index.php?pagina=contac”>Pics
I have omit some caracter “<"
ul class=”lavaLampWithImage” id=”1″>
<li class="”> a href=”index.php?pagina=home”> Home
<li class="”> a href=”index.php?pagina=tabelle”>Pics</li
argh!!!
this blog hidden the ph p code!!
<li class="”>Pics</li
sorry for the spam , I ask the admin to fix the post
thanks
[...] http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
ok i solved it in another simple way,
just add class=”current” to the li of the current page
ie.
you are in home >>
li class=”current”> a href=”home.html”> Home
li> a href=”page1.html”>page1
li> a href=”page2.html”>page2
Great script, thanks!
@Maha Qd no need to change the code manually for the current page highlight to work, you can do that with a bit of jQuery
var theUrl = window.location.href;
$('a[href="'+ theUrl +'"]').parents('li').addClass('current');
@Ganeshji Thank you for sharing this great script.
I’ve been scanning through your site. You have some nice posts on here, especially this one – I really liked it…nice post. Consider yourself bookmarked
You realize that this is not compliant with IE 7 and IE 8. It’s broken
very nice menu
Great script. Just one question though. Is there a way to change the color of the .current item back to the normal up state when hovering over another li?
For example my lava.gif is green. The .current color is white, the ul background is white and the li’s are gray. When I hover over li’s the lava.gif moves away from the .current li so I’m left with white on white.
Any ideas for a solution would be most gracious!
TThank you for the great script
Hi..the script is superb and i like….. but When i click the each menu the visited menu should be focused, im using LavaLamp plugin..Please give me the directions…
send it to my email: ylax26@gmail.com
Thank you for a really great script.
I have been able to ensure the current page stays highlighted by using
Home
I have to list the menu items on every page for this to work, whereas prior to using this script my menu was inserted on every page using
If I make changes to the menu, I have to change every page, whereas before I only had to change masthead.html.
Is there a way to include the menu from masthead.html, but have the current page highlighted on the menu?
Andy said “no need to change the code manually for the current page highlight to work, you can do that with a bit of jQuery”
var theUrl = window.location.href;
$(‘a[href="'+ theUrl +'"]‘).parents(‘li’).addClass(‘current’);
But where should this jQuery script be added?
Thanks for any help.
[...] Lava Lamp jQuery Menu. [...]
Hello,
Its very nice scripts btw but quite seems old.
Now I have jquery easing 2 scripts to load, and its make your scripts conflict. Can you help on this ?
Thanks
Raff
ME parece muy bueno este menú lo voy a comenzar a usar en los nuevos sitios que haga.
Muchas gracias!!
Will it work for Asp.net, I have tried effect is coming correctly but on click I am not redirecting to any page.
Please help.
Tenks admin you power blog cammozaik.org
Thank you for the information your provide.
Hi, I really like this script! I changed the CSS to match my site and it looks and works great!
(http://www.trapscreato.com/test/lavalamp)
There was one problem I’m experiencing… I looked through your code and couldn’t seem to find anywhere that you can specify which tag you can start on. Suggestions? Thanks in advance!
Seth
Oh boy, do I feel dumb… Sorry, I didn’t see the other 1000 comments! I’ll just be quiet now…
[...] LavaLamp [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
This seems works but the current visited is not focused, its focused only first menu.. pls give me the solution
I have a question. When i link my work, they do not work!!!??
WHY!!!!???
Hello
I’m integreated the application into my website. Everything is working fine, even when I click on the links, they change the color, but clicking on them has no function. The links doesn’t work. Can somebody help me out, what I’m doing wrong? What is missing.
I would like to use it, but how?
Thanks in advance
A…
I found it – “tue” instead of “false”
Shouldn’t this stand above? I guess many people don’t know that.
It’s not so clear..
Thx Sören, I’ve been looking for this hint, too. Thanks a lot!!!
very good
Finally Figured it all out! Thanks for sharing
http://www.andresfgarcia.com/que/
Sören where is this true instead of false???
I found it!! To everyone who is having link problems..soloution…. on your main page where your code is, you will see this line: $(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
change the word false to true!
It works….
Simple as that
very good
super thanks
very good thank you
when i click on any menu item and then when i come back to the same page by hitting back button, the square frame or the selection box is at the menu item which was clicked last. can we get it its original position?
Its really luky to find this blog,i fell so great!
Jordans i love it,i support you always!
the style always fashional!
passenger by sunglasses 2010
nice navigation plugin! ?
Anybody knows how to extend the bar width to auto? I changed the overflow property to auto but it did not work well.
got it from murugesan’s comment! Thank you murugesan!
Cartier replica
chopard replica
[url=http://www.patekphilippewatches.us/]watches[/url]
[url=http://www.patekphilippewatches.us/A.Lange-&-Sohne/]A.Lange & Sohne watches[/url]
[url=http://www.patekphilippewatches.us/Alain-Silberstein/]Alain Silberstein watches[/url]
Anybody knows how to extend the bar width to auto? I changed the overflow property to auto but it did not work well.
Thanks for sharing this important stuff
[...] jQuery ? LavaLamp????? ????????????????????????????????CSS?????????LavaLamp for jQuery lovers ?????????????CSS?????ZIP?????????????? [...]
I am trying to implement your menu in WordPress. So far so good, but what I am missing is a function to set the active option. As long as the page doesn’t refresh the solution given works fine, but the moment that PHP refreshes, it loses the option. I know the index, but I miss a function in your nice program like SetActiveOption what you can call with the index number. The menu is very nice. If you give me a hint on where to look, than I will tell afterwards how I used it in Wordpress (PHP not Ajax).
For those who couldn’t run this script on Joomla, here’s how I did it:
I changed from “current” to “active” in the file jquery.lavalamp.js
In the template I inserted this:
jQuery.noConflict();
(function($) {
$(function() {
$(“#lavaLamp”).lavaLamp({ fx: “backout”, speed: 500 })
});
})(jQuery);
That’s it.
Hi my question
If i have more pages( Home, portfolio, contact, order, etc) how can i set the current ex if i’m on contact page the current must be the contact.
Thanks!
Hi to all !
I have installed the lavalamp menu with CSS and it’s wroking fine with Firefox and Chrome.
But with IE, i cas see the menu but the adnimation (underline) stays on the left of the screen. How could I solve this please ?
Thanks for your help !
Crap, didn’t realise that would happen
If I remove the li tags then the link works.
Thank you very much. i gonna try it on my site
regards
awesome stuff
thanks for the great info
Good post. Thank you for this.
[...] Demo | View Source Code [...]
i like your script this srcipt is so cool
thanks for it
i like your script this srcipt is so cool
thanks for it
@ Cherryl “Everything works except when i navigate my mouse to a submenu item, the lavalamp background image flies right back to the “home” position and is much wider than it should be.”
Change menu.js in
[code]
$li = $(">li", this), curr = $("li.current", this)[0] || $("li.current last", this)[0] || $($li[0]).addClass("current")[0];
// met >li ervoor gezorgd dat alleen parent li het doet
$li.not(".back").hover(function() {
$('#navtop ul li.back').fadeTo('slow',1,function() {
// Animation complete.
});
move(this);
}, noop);
$(this).hover(noop, function() {
//move(curr);
$('#navtop ul li.back').fadeOut('slow', function() {
// Animation complete.
});
});
[/code]
Is there any way to modify this for a vertical menu?
Hi Ganeshji, Lavalamp is great! Thank you!
I’ve got one doubt and it’s the same that “#574 Marc” ask in this post. But I couldn’t find an answer.
And the blog http://judepereira.com doesn’t explain this case. And “Google” cannot offer a better place.
Can you help me?
Thanks.
I’ve implemented this technique on one of my sites and it works great. I’d like to convert it to a vertical nav menu for another site I’m working on. Can this be converted to a vertical layout? How could I modify this to accomplish this?
Thank you.
[...] creating the icon I refer you Ganesh article where you can learn LavaLamp effect with a step-by-step guide and also can download the [...]
Thx for sharing this
Great plugin……….
Please. How can I implement sub menu items. It seems obvious but I can’t.
[...] Demo | Tutorial [...]
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. [...]
hi!, how can I do to set the initial item selected? for example if I go to plant a tree page, then in the menu I want that the default item selected will be “plant a tree” instead of home..
thanks!
sir i am a begineer freelancer…using ur zip file i am getting this problem that i can not redirect to any page from the home page through the link. no doubt i hav given the correct href=”blahblah.html”…..
still cant link…..pls help
m same lokanath again …is there anyone to help out me pls
Hello there!
function on demo.html is:
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
for working links just replace function like this:
[ on end code at "return" replace fasle in TRUE ]
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
[...] LavaLamp for jQuery lovers! [...]
[...] LavaLamp for jQuery lovers! [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Hi guys,
Has anyone been able to implement this with working links that also hold the place of the current nav item?
cheers
hello.. I am new in website designing. On the way to unearth the lovely world of web, I got you.. and loved your work. I am working on a website. I added your LavaLamp menu design. And I added a jquery content slider…. but unfortunately Lavalamp menu is not woking because of this file below..
please help me what to do and the solution…
Waiting for your reply…
plz reply on email address.
Thanks
Hello,
Great article . Works perfectly. But i have one issue..
When working with link like following code
$(function() {
$(“#1, #2, #3?).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
The clicked menu is not seleted.Is there any way to select the current clicked menu.
Thank you
hridaya
@Kathryn (and many others),
The only way I could get it to work was with a switch case statement.
$(function() {
var tText = “Website Title – “;
switch (document.title) {
case tText + “My Page”: $(‘li’).removeClass(“current”);
$(‘li:eq(1)’).addClass(“current”);
break;
case tText + “Another Page”:
$(‘li’).removeClass(“current”);
$(‘li:eq(2)’).addClass(“current”);
break;
}
});
//Then you switch the value for return to ‘true’.
$(function() {$(“#2″).lavaLamp({fx: “backout”,speed: 700,click: function(event, menuItem) {return true; } }); });
//The list is like this
My Page
Another Page
Prost
Hello,
First of all,I apologize for my bad english.I’m trying to figure out how can I change the font color of the button when I make hover and when the button It’s active.
.lavaLampWithImage li a {
font: bold 14px Georgia;
text-decoration: none;
color: #fff; <—
If I try to change here it changes for every button.I want to have a color for the button that is pressed / hover / active and another color for the rest of the buttons.
thank you
[...] Lavalamp is a simple, ready to use JQuery plugin which allow you to create a stunning effect over your horizontal navigation bars. Nice to see, easy to implement. Source [...]
[...] ????http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
[...] Endnu en klassiker, LavaLamp menuen. Jeg har dog aldrig forstået [...]
Great plugin!
For anybody who is using this with WordPress: You can easily get the menu to highlight the current page by adding a line of jQuery before the lavaLamp() call.
jQuery(“.current_page_item”).addClass(“current”);
I thought this was going to take a lot longer to implement. Hope this saves someone some time.
T.
[...] navigation, j’ai utilisé Lavalamp Menu, un très bon plugin de messieurs Guillermo Rauch et Ganesh Marwaha qui permet de façon simple et avec énormément d’options disponibles de créer de biens [...]
thank you…
k?zl?k bozma
Is there a way to do a javascript call to move the highlighter from an event on another object?
For example, say you have a map and the menu just lists locations on the map and if you mouseover the location I’d like the highlight to move to the corresponding menu item. I was easily able to do the reverse and have the menu item to also highlight on my map but not the other way around.
For this example I’ve tried using
$(‘.current’).removeClass(‘current’);
$(‘#menu-north’).addClass(‘current’);
without any luck. The class does change but it doesn’t move the highlighted menu item.
Nice looking tool however clicking the links in the menu does nothing. Not much purpose for this eh!
At the top change “return false;” to “return true;” in order to get your buttons to link to your other pages!!!!!!!!!!! it works!
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
In order for it to hold the current place you will have to modify the the class and add current.
So for home:
Home
Other Link
And for other link:
Home
Other Link
This can be achieved multiple ways. You could use a small chunk of code that gets the page title and uses that to display the current page. You could use a series of server side codes such as PHP, but that might be a bit of a hassle. If you have the menu pasted on each page you can simply edit the page. Wordpress has functions that will tell you the name of the page, so you can use that.
[li class="current"] Home [/li]
[li] Some Link [/li]
[li]Home[/li]
[li class="current"] Some Link [/li]
lavalamp widget on every coolest blog?
Hello!
First of: Great use of jquery and lovely tutorial!
I was wondering whether or not there are any terms of use? I’m building a site for public use and would like to use this navigation, anything i should be aware of?
thanks for subject
thanks a lot
Thanks For Information. LavaLamp is Good i need more Jscript
hey the url is not working…even if i place any url it does not go to
another page…check it
yes the url not working did anyone fixed it, i want plzzzzzzzzzzzzzzzz
mmmm the url dont work, somebody has the solution ?
To activate the url links, open your html with menu code and change:
click: function(event, menuItem) {
return false;
TO
click: function(event, menuItem) {
return true;
and it will work!
Hi?Thank You For Your LavaLamp?
I find if I want the menu up or down moving?not right or left?
Then How can I change?
“SOLUTION TO DYNAMIC CURRENT PAGE LINK
Hi Peeps I don’t know if this solution has been posted already but I have found a solution to the most common question here regarding the current link. The problem is by adding a ‘current’ class to the you lose the ability to have the navigation links as an include.
Heres the solution:
Right at the top of eache of your php pages add this bit of code:
‘Home’ will be reference to the homepage therefore replace ‘Home’ with the name of the otherpages respectively.
With this technique you can still have all the navigation in one include.
You put each in a chunk of code which tells the browser if we are on ‘home’ then use . Look at the example below.
if ($thisPage==’about’)
{echo ‘About‘;}
else
{echo ‘About‘;}?>
Big hand to the developer! If if this is unclear I don’t mind going through it step by step as I know how frustrating it can be – http://www.sprike.co.uk”
RE: That’s is a great solution and has helped me get out of my misery
Nice one, thanks for this.
To show the effect only by hover:
return this.each(function() {
var me = jQuery(this), noop = function(){},
$back = jQuery(), /* change this … initialize */
$li = jQuery(“li”, this), curr = jQuery(“li.current”, this)[0] || jQuery($li[0]).addClass(“current”)[0];
* … to this */
me.hover(function(){$back = jQuery(”).appendTo(me).css(‘opacity’,'0.6′)},function(){$back.remove()}); /* css optional */
…
Many greetings
Matu
[...] LavaLamp for jQuery lovers! [...]
For those of you using Wordpress and trying to get this to work with the “current” page item, open the jquery.lavalamp.js file and replace this line:
$li = $(“li”, this), curr = $(“li.current”, this)[0] || $($li[0]).addClass(“current”)[0];
With this line:
$li = $(“li”, this), curr = $(“li.current_page_item”, this)[0] || $($li[0]).addClass(“current_page_item”)[0];
[...] This tutorial will help you create an absolutely beautiful navigation menu, that slides the background image to the hovered navigation item. Amazing, and powered by jQuery. Read on Ganeshji Marwaha's blog » [...]
[...] a massive thank you to the team over at gmarwaha who developed the lavalamp menu, its [...]
Very nice plug in. Had a little bit to work to apply for my vertical menu which I enjoyed. But I’ve two sets of menu in a page. It is working with only one of them. Anyone has any idea that how can we use this multiple times in a page. Any suggestion is appreciated.
ta
[...] 5: Lava lamp liquid menu Menus look great with some movement. This adds a very fluid transition effect between menu items. View Demo [...]
thanks for sharing. good informations. good luck. best regards
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
hi this is good plugin but i ahd a problem with firefox when i click back button of browser easing effect not working but class current is working
[...] LavaLamp Navigation menu with a ‘lava’ effect. [...]
thanksss
the links don’t work
Hi,
I am trying this great script together with the dynamic drive accordion menu. Which uses jquery 1.3.2, as soon as I upload that Jquery the LavaLamp looses its smooth movement, any solution to that behavior?
[...] ?????? LavaLamp ?? DEMO?http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ [...]
good job…
looking for code with dropdown menu don’t find any links ,examples..
any ideas, links?
thanks
I am trying this Lavalamp jscript.But not work button link.how to create a button link.
If your links don’t work, please goto html page, find script below and change “return false” to “return true”
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
“SOLUTION TO DYNAMIC CURRENT PAGE LINK
Hi Peeps I don’t know if this solution has been posted already but I have found a solution to the most common question here regarding the current link. The problem is by adding a ‘current’ class to the you lose the ability to have the navigation links as an include.
Heres the solution:
Right at the top of eache of your php pages add this bit of code:
‘Home’ will be reference to the homepage therefore replace ‘Home’ with the name of the otherpages respectively.
With this technique you can still have all the navigation in one include.
You put each in a chunk of code which tells the browser if we are on ‘home’ then use . Look at the example below.
if ($thisPage==’about’)
{echo ‘About‘;}
else
{echo ‘About‘;}?>
Big hand to the developer! If if this is unclear I don’t mind going through it step by step as I know how frustrating it can be – http://www.sprike.co.uk”
RE: That’s is a great solution and has helped me get out of my misery
Hi,
I have small problem.
When I click on menu item and reload the page, so menu is “reseted”. (active item is selected first menu item, but I need to have selected actuall item)
How can I set it right?
Thx
[...] LavaLamp for jQuery lovers! | Ganesh [...]
Just wanted to drop a note for anyone looking for Superfish integration. I was puzzling over it for a while the other day, and if I remember correctly, it only took a very small change in the code.
On line 63 (non-minified), try changing $li = $(“li”, this) to $li = $(“>li”, this)
I tried a lot of things, so there may have been something else I did as well, but I believe that this was the solution to lavalamp + superfish.
[...] LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library [...]
Plz help me ,i use jquery lavalamp for site ,very good ,but , if my rerdiect link page on site , bg on page dose not active
plz
Hi, i really like the effect and i’ve got it to work for my site but when i click the nav links they don’t work. It’s as though the ‘a’ tag has been disabled.
Thanks again for tutorial, any feedback would be really appreciated.
I forgot to mention, when i disable javascript it the links work again. My digging through the code can’t find the ‘a’ disable code though.
I used lavalamp , but when I try to use a link instead of “#” in anchors, it does not work,
I have to right click on the text and choose “open link” to open it
[...] http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers [...]
[...] vb.net | No Comments » Hi Iam very begginer I want to use the script named lavaLamp from here http://www.gmarwaha.com/blog/2007/08…lovers/?cp=all ) but I donn’t know how I can use it I try to change the <li [...]
HOW TO MAKE VERTICAL (BODGED!)
very new to jquery, dont understand how the code works yet, but had a little trouble trying to get this nav working verticaly. the other tutorials out their dont have the same effect as this one thus i tried to modify the code from this tut as it was closest effect to what i wanted.
until someone posts a clean solution to setup verticaly here are some very trial and error modifcations you can do with lavalamp.js
$(this).hover(noop,function(){move(curr)});
delete this line to stop the lamp returning to its current location
return o.click.apply(this,[e,this])
delete this to let links work
reduce width of .lavaLampWithImage and the LI’s will fall below one another. add a background colour (to see) and increase height.
this is not clean, i dont know how to code jscript, so backup before try, worked for me. ive just noticed that theirs a non-crunched (non-min) version of the code *DOH!*, wish i had seen that earlier. note that a straight up search for the above code might not work due to spacing but its in their.
reduce width of .lavaLampWithImage and the LI’s will fall below one another. add a background colour and increase height.
Hey if you are atill confused about the tag being disabled, there is a solution:-
click: function(event, menuItem) {
return false;
}
change false to true and then it should work.
I used lavalamp , but when I try to use a link instead of thanks admin
[...] LavaLamp [...]
I tried a lot of things, so there may have been something else I did as well, but I believe that this was the solution to lavalamp + superfish.
I love this menu. I’m using it in my site and it looks great but I cannot get it to link to my other pages once the button’s are clicked. Could some one please help me with this?
I used lavalamp , but when I try to use a link instead of thanks
[...] conocimos una versión utilizando jQuery, llamado lavalamp, el cual tambien se hizo popular por Ganesh . Esta vez, veremos cómo obtener el mismo efecto utilizando las nuevas características de CSS3. [...]
thank’s
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Thanks a lot!
all working well!
Hey…..nice post!!
Awesome, No more words to explain
just….cool blog.
I would like to say “wow” what a inspiring post. This is really great. Keep doing what you’re doing!!
Slick plugin, thanks! Definitely like riding elephants.
Another solution to setting class=current for the right li when not using AJAX:
$(document).ready( function(){
$(‘.lavalamp [href='+window.location.pathname+']‘).parent().addClass(“current”);
$(function() { $(‘#nav’).lavaLamp({ fx: ‘backout’, speed: 700 })});
});
Slick plugin, thanks! Definitely like riding elephants.
Another solution to setting class=current for the right li when not using AJAX:
$(document).ready( function(){
$(‘.lavalamp [href='+window.location.pathname+']‘).parent().addClass(“current”);
$(function() { $(‘.lavalamp’).lavaLamp({ fx: ‘backout’, speed: 700 })});
});
The correct solution is:
$(function() {
var direc = location.href;
var bus;
$(“.lavalamp li a”).each(function(i) {
bus = this.href;
if(bus == direc) {
$(“.lavalamp li:eq(“+i+”)”).addClass(“current”);
}
})
});
that is before tha call to initialize the menu
Thanks You Man !
[...] Lava Lamp jQuery Menu. [...]
[...] Read this tutorial >> [...]
cool…! effect. its awesome..
thank’s
great..
Hey thanks for the amazing plugin Ganeshji! I’m having a small problem though, that perhaps you or someone else would be gracious enough to help me with.
The background image on my menu is being cut off on the edges as it reshapes to the current link area. Is there any way to turn this off? I would like the image to bleed outside of each link area. You can see what I mean here: http://www.omni-flux.com/projects/valleytradesinc/Slider/slider.html
Any help would be greatly appreciated. Thanks in advance!
thank you bro
Thanks.
[...] Web Site Download Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] Lava Lamp jQuery Menu. [...]
[...] Tutorial [...]
Hi,Thanks for leading me to your Blog from a comment left on my Blog, some great stuff here, will bookmark it, Thanks again!
[...] 2. jQuery ???? LavaLamp (????) [...]
Links in menu not working. Even the demo(both versions) downloaded not working.
Sorry about this. Links are working now the demo was returning false for click. remove the return false now working.
Thanks.
Works cool!
In html you must edit javascript code for active links.
Simply:
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
Owesome menus!
) Thanks for this tut. Keep up the good work!
In a case of “why on earth would you want to do that”: if you ever want to set the current after the initialization of the lamp you can add a little bind to the code:
$(this).bind(“move”, function(e, el) {
setCurr(el);
});
you can move by calling with $(“.lavaLamp”).trigger(“move”, v); with .lavaLamp being whatever element your lamp is and v the jqeury li object you wish to set the cursor to.
wow nice post and nice article.so beautiful..
i do not like the dots in the ul, li structure.
This plug in does not work for blogger? I have tried everything I know of and cant get it to work. errors every time. can I not embed Java strait into blogger?
[...] Nav Effect. This little bugger gave me trouble for some time! I originally found this jQuery LavaLamp effect for top navigation and thought it was pretty sweet. But, of course—I needed it styled for my [...]
[...] Menu « Lavalamp » design : http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ – Gestionnaire d’onglets : http://stilbuero.de/jquery/tabs_3/ – Menu accordéon simple : [...]
[...] 7. LavaLamp jQuery [...]
hello pls.have done a grt work…also i need the coding for…tats the lavalamp should hide… only on when mouse on menu the lava lamp should come..until then it should get highlighted
[...] 22-LavaLamp for jQuery lovers! [...]
Hey that’s a nice effect you got there. I am still getting my head around jquery, and been doing some research.
Keep up the good work.
CHEERS
Initially, it worked. It was just change “false” to “true” and everything worked. Thanks.
Very Nice work!!
Only problem is when return is set to true the Lavalamp works but the links in the nav dont, when return is set to false the links work but Lavalamp always hoovers over ‘Home’ nav link.
I am probably missing something obvious but all the different solutions i have found still delivery one the above problems..
Initially, it worked. It was just change “false” to “true” and everything worked.
nice work.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Bitlis Haber Bitlis Haber 13 Bitlis Haberleri
hi! i’m using you plug in but what i want is to use that menu in a section. When you press a link it shows an image.
How can i do it??
I totally love this article. I think you could write some other things to make your blog more complete wansantg3lj.
I found that changing “false” to “true” solved the problem of not being able to click the links, as for it hovering back over the Home link, set your class to and that fixed it for me. Hope this helps!
Hello
I wish to know how I can adjust the width of the bottom border in lavalampBottomStyle?
I want the width to be the same as the menutext.. so no extra on each side of the navbar words.
Thanks
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
Lava lamp is not working with the jCarousel on same page. If I take out the jquery.easing.min.js JCarousel works fine but but of course lava lamp won’t work without this script file
escri2, thank you very much.
I was with problems with my li, and you fix it ywith your comment:)
I works just fine
This is great and would look nice for my next project. Thank you for this!
Thank you for this useful information.
The library deal with difficult
The difficulty lies in knowing how to use this library to get out of fantasy impacts
Keep more posting..
Regards
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] Lava Lamp jQuery Menu. [...]
Hi, great article. I was wondering if there is a way for the current page to be highlighted rather than always going back to the home page.
Anyone?
Thanks for the nice simple tutorial.
can I get this menu vertically
I am trying to set up the jquery menu with lavaLamp on my test site. It is a ning site. I can’t get the lavaLamp to show no matter what I do. Have you heard of Ning sites having issues before(since ning uses a predefined nav bar called #xg_navation)
Please let me know
The lavalamp effect works fine.
But i have still one problem.
When clicking on another page the line stays under home, and not on the current page…
Can somebody help me??
These are great thanks for sharing.
can I get this menu vertically….
[...] [...]
Nice plugin!
So if anyone still wondering how to make the nav hover over the current page and not going back to home, consider my solution.
The easiest way is indeed to add the current class to the li. But some of you use one header.php so that won’t work.
My solution is just add a variable to your links.
and then add
<li
for li element.
Nice plugin!
So if anyone still wondering how to make the nav hover over the current page and not going back to home, consider my solution.
The easiest way is indeed to add the current class to the li. But some of you use one header.php so that won’t work.
My solution is just add a a href=”url?page=1 variable to your links.
and then add
li <? if ($_GET['page']==1) {echo " class='current'";}
for li element.
[...] 8. ????? ????? ?? ???? ????? ????? jQuery [...]
Love how you can make variations with simple changes to the stylesheet.
how do I make a parent page static on the menu bar(un-clickable)?
Thanks!
[...] conocimos una versión utilizando jQuery, llamado lavalamp, el cual tambien se hizo popular por Ganesh . Esta vez, veremos cómo obtener el mismo efecto utilizando las nuevas características de CSS3. [...]
[...] LavaLamp jQuery Sliding Menu Demo: Mootools Fancy [...]
possibility of sharing and social solidarity at a level just fine
[...] [...]
nice tutorial….very impresive
Thanks for the good stuff. These are really helpful for us…
good work thanks
This is what I need. Thank you for sharing this information.
[...] I’m getting better at it. I had my first proper foray into jQuery with this site, I utilised LavaLamp pretty much out of the box for the top menu. For the class switcher (colour changer) I used jQuery [...]
??????
Hey you have a great website and I will most certainly be coming back again. It is always great to read what you have to say. Thank you Sometimes though I have to go against what you are saying. Anyway I wish you the best with your site!
Para solucionar problema con jgrowl utiliza la versión de compatibilidad de jquery.easing
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js
good work,nice job!
Thank you Admin My Name Seslialmanya From Turkey Thanks
Its great resource. i was finding that type inf and now i get it.thanks for this…
Thenk you very much very nice
This is another excellent and useful addition from google. Thank you for your explaination about page ranking.
web design a site that has done a good share.thanks
[...] Menu Plugin Ch? v?i 20 dòng l?nh, ??n gi?n và ti?n d?ng – ?ó là anh này. LavaLamp jQuery mernu plugin Hi?u ?ng tr??t c?c k? ??p. jGlideMenu L?i 1 menu ??n gi?n v?i cú [...]
I wish you continued success sharing.thanks
@Thomas the best way to solution that problem is adding this code at the end of your jquery.lavalamp.js script
$(function() {
var direc = location.href;
var bus;
var yata = false;
$(“#list-menu li a”).each(function(i) {
bus = this.href;
if(direc == bus) {
$(“#list-menu li:eq(“+i+”)”).addClass(“current”);
yata = true;
}
})
if(!yata) {
$(“#list-menu li a”).each(function(i) {
bus = this.href;
var a = false;
if(direc.indexOf(bus) != -1) {
a = i;
}
if(a) {
$(“#list-menu li:eq(“+a+”)”).addClass(“current”);
}
})
}
});
you can see in action in http://www.cefim-uni.com/
[...] for jQuery jQuery SuckerFish Style jQuery Plugin Treeview treeView Basic FastFind Menu Sliding Menu Lava Lamp jQuery Menu jQuery iconDock jVariations Control Panel ContextMenu plugin clickMenu CSS Dock Menu jQuery Pop-up [...]
Thank u for the nice work
I want to disable the hover effect after clicking a menu item, then make a ajax call and re-enable the hover effect inside the ajax return handler.
thank you very much for the this quality work.
i will try that what you say in here to my works like http://www.herkesebendencay.com
Hurble burble.
Your site has very nice, thank you for sharing.
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
mirc
web tasar?m
webmaster
sohbet
mirc yukle
spor
dursun ali
[...] LavaLamp for jQuery lovers! | Ganesh [...]
I really like your post you done a great jobs . Thanks for sharing valuable information.
I want to disable the hover effect after clicking a menu item, then make a ajax call and re-enable the hover effect inside the ajax return handler.
Cookie theme wedding favour isprom dresses the second option available for a cheap prom dressesbridal couple to look for their guests.wedding invites Most couples want something that representsjunior bridesmaid dresses their wedding day and at the same,wedding hairstyles used as a nice token of their appreciation for the love and support of their wedding guests.celebrity lace front wigs Opting custom wedding cookie favors is a good choice for the wedding couple.wedding invitations The cookies can add nice décor to the wedding reception and the delicious treat well be appreciated by the wedding guests
http://www.hotelakbulut.com
Yes ,it’s good,But the link can’t be Clicked……
I want to use it,But who can tell me how to modify it……
Great post thanks
Hi,
Having problems with getting my href menu links to work – nothing is happening when clicking. I´ve downloaded the updated Zip file and made some adjustments to it. It seems to work in IE but not Safari and Firefox.
I really love this menu and want it to work! But I can´t seem to find the $(document).ready() function, to replace it with $(window).load()…. If that´s the problem…
Anyone!?
/N00B
[...] jQuery SuckerFish Style. jQuery Plugin Treeview. treeView Basic. FastFind Menu. Sliding Menu. Lava Lamp jQuery Menu. jQuery iconDock. jVariations Control Panel. ContextMenu plugin. clickMenu. CSS Dock Menu. jQuery [...]
[...] LavaLamp for jQuery lovers! [...]
Hi..
Thank you because sharing a good information.Hopefully u will contribute more articles in future.cheap the eagles tickets
Thank you for awesome stuff!
This is a well written piece. Its written in simple words yet it explores very complex concepts of life.