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
Solved

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

Posted on 2010-09-03
8
602 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

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…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
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…

856 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