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 […]