Solved

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

Posted on 2010-09-03
8
604 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33598849
As I said?
0
 
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

730 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