Solved

Where to find a similar to Lava Lamp jQuery effect, but easier?

Posted on 2010-09-03
8
596 Views
Last Modified: 2012-06-21
Hello,
I'm looking for a jQuery effect similar to Lava Lamp (http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/) but easier - I don't need the side images used in the "lava lamp" effect

In the attached image I put an example: moving on the second menu element, the bottom arrow should "slide" (similar to lava lamp plugin) and place itself in the horizontal middle of the second item... the same happens when the mouse moves on the other menu items

Is there a similar plugin around? i'm sure that it is, but don't know where to find!
Thanks
example.jpg
0
Comment
Question by:ivanhalen
  • 4
  • 2
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33598168
What happens if you have a white image with the arrow in the middle?
0
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33598639
I modified the css
.lavaLampBottomStyle li.back {
    background: url("arrow.PNG") no-repeat bottom;
    width: 9px;
    height: 40px;
    z-index: 8;
    position: absolute;
}

All you have to do is replace the image with a red arrow icon of similar size and you can modify the css to change the look and feel.

I mean I don't know what side images you do not want to have... put seems a little variation will do what you want.

lampwitharrow.zip
0
 

Author Closing Comment

by:ivanhalen
ID: 33598823
It works VERY fine!!! No need to modify my orange arrow, still many thanks! :-)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33598849
As I said?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 22

Expert Comment

by:kadaba
ID: 33598935
As I said?
Well, I don't know if putting the image is what you recommended.

There was a method mentioned in the site, I put a back ground image for the div which is automatically generated by the plugin and altered the height to get the look.

ivan,
thanks for the points though. I hope it fit your need.

P.S: mplungjan, I do not mind splitting the points, cause according to me origin of an idea is always substantial than the execution of it :)

Points as you say.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33598986
it's ok :)
0
 

Author Comment

by:ivanhalen
ID: 33600719
mplungian, the white image with the arrow in the middle didn't work: it was the first thing I tried (a 100px image with the triangle in the middle), the triangle was offset

The key is the CSS edit provided by kadaba, that is something different mine and your solution

This:
background: url("arrow.PNG") no-repeat bottom;

Instead of this:
background: url("lava.gif") no-repeat right -30px;

Thanks still

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33602104
Great - glad it worked. Felt it was a bit silly trying to reinvent the wheel :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now