How do I set the colors of the jquery animation ?

Hi -
I have a "template" with some interesting animated elements on THIS PAGE that use a lot of javascript I can't get a handle on.

The effect is that the element appears with color combination 1, then when hovered it animated and changes to color combination 2, then on "roll-off" it shows up with a third color combination.

There are 6 javascript files with this thing but I think that the operative script is js/jquery.iconmenu.js  and the operative css is css/stimenu.css.  
But I honestly cannot figure out how to set what color combinations will occur when.

Can someone show me where the color combinations are coming from and how to set them the way I want them?

Thanks in advance.
Josh
dzash2000Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Since you have not received an answer, let me put this in a simple example you can build on.  The full example is  here http://jsbin.com/AdIBeBE/1/edit?html,css,js,output

Let's start with just a box created by a div that has a class "box" and "red".  "box" gives it shape, "red" gives it color.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <div class="box red">stuff</div>
</body>
</html>

Open in new window

The size and colors are set by css
.box{
      width:200px;
      height:200px;  
  
}
.red{
      background-color:red;  
  
}
.blue{
      background-color:blue;
}

Open in new window

Finally, we use jquery 1.x (has support for ie) and tell it to remove the red class when the mouse(pointer) is in the box and add the blue class which changes the background color.  When the mouse is out of the box, we remove the blue class and add back the red.
$('.box').mouseover(function(){
  $(this).removeClass('red');
   $(this).addClass('blue');
});
$('.box').mouseout(function(){
  $(this).removeClass('blue');
   $(this).addClass('red');
});

Open in new window


This is a good basic example you can build on.
0
dzash2000Author Commented:
padas - thanks for the great detailed reply.  
This looks promising.  
Give me a little time to work with this.
0
dzash2000Author Commented:
padas -
Your information shows how to change colors on hover but I was not able to find similar code in the js or css accompanying  the page I'm working on.

I was hoping to learn - where in the code for the example page - the colors are set for the off, hover and visited states.

Josh
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are many ways to achieve the same visual outcome.  I was trying to make an easy example.

The actual colors are set in the file http://newpixelcity.com/mainspring/js/jquery.iconmenu.js
Look for this snippet in the top portion of the code
// default text color (same defined in the css)
      defaultTextColor	: '#2fc29e',
// default bg color (same defined in the css)
      defaultBgColor		: '#00a4c2'

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dzash2000Author Commented:
padas - now I see what was driving me crazy.  If I match the colors in the snippet with the colors I set in the css - it will work as I want.

Thanks.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Great, and it looks like the text color was set by the html code data-hovercolor

html
<li data-hovercolor="#ffcc33">

Open in new window


js
// the color that the texts will have on hover
hovercolor	= $item.data('hovercolor');

Open in new window

0
dzash2000Author Commented:
yes - thanks.  
This little widget is very complicated for me.  I'm using a lot of time customizing it in the simplest ways.
But your help is valuable.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.