How do I set the colors of the jquery animation ?

Posted on 2013-10-19
Medium Priority
Last Modified: 2013-10-21
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.
Question by:dzash2000
  • 4
  • 3
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39586031
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>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset=utf-8 />
  <div class="box red">stuff</div>

Open in new window

The size and colors are set by css

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.

Open in new window

This is a good basic example you can build on.

Author Comment

ID: 39586061
padas - thanks for the great detailed reply.  
This looks promising.  
Give me a little time to work with this.

Author Comment

ID: 39587660
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.

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 39587966
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


Author Comment

ID: 39588532
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.

LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39589108
Great, and it looks like the text color was set by the html code data-hovercolor

<li data-hovercolor="#ffcc33">

Open in new window

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

Open in new window


Author Comment

ID: 39589484
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.

Featured Post

The 14th Annual Expert Award Winners

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

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

624 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