• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

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

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
ivanhalen
Asked:
ivanhalen
  • 4
  • 2
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
What happens if you have a white image with the arrow in the middle?
0
 
kadabaCommented:
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
 
ivanhalenAuthor Commented:
It works VERY fine!!! No need to modify my orange arrow, still many thanks! :-)
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
Michel PlungjanIT ExpertCommented:
As I said?
0
 
kadabaCommented:
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
 
Michel PlungjanIT ExpertCommented:
it's ok :)
0
 
ivanhalenAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
Great - glad it worked. Felt it was a bit silly trying to reinvent the wheel :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now