Solved

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

Posted on 2010-09-03
8
592 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

758 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

20 Experts available now in Live!

Get 1:1 Help Now