PDA

View Full Version : Switch Content link colors



dmwhipp
06-23-2012, 04:15 PM
1) Script Title: Switch Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

3) Describe problem: I'm revisiting an old issue trying to see if it can be fixed. On this test page http://www.floridacompact.org/awardwinnerslinkcolors.html I was able to get the link colors to display in red, but I've had no luck getting the links to change color on hover. I've tested the instructions in the following threads:
http://www.dynamicdrive.com/forums/showthread.php?t=63456&highlight=switch+content+color
http://www.dynamicdrive.com/forums/showthread.php?t=61138&highlight=switch+content+hover

My goal: To have the page open with the link colors in red. When hovering over the links, the color changes to blue. When the links are collapsed they turn red again.

When I was finally able to get the hover to work using this thread - http://www.dynamicdrive.com/forums/showthread.php?t=63456&highlight=switch+content+hover - the page loaded with the links all in black.

Help with this would be greatly appreciated.
Deborah

When I have been able to get the hover to work, the page loads

jscheuer1
06-23-2012, 05:14 PM
Once you apply style color inline to an element as this script does, it becomes difficult to set its hover color. You can add:


.handcursor:hover {color: blue !important;}

or if this is the color you're going for:


.handcursor:hover {color: #6bd7d0 !important;}

to the stylesheet. It works in at least some browsers, perhaps all - well not IE 6 and less - no hover styles on elements other than anchor links in IE 6 and less.

Anyways, where you have:


trade.setColor('#8d0932', '#8d0932', '#6bd7d0', '#6bd7d0')

Unless you've modified the script, the highlighted values are ignored. The other two tell the triggers to be #8d0932 regardless of whether they're expanded or not. According to the docs, the first one is the expanded color, the second is the contracted color.

The style I'm telling you to add in the stylesheet is the hover color. It will be in force during a hover of a trigger regardless of the expanded or contracted state, and regardless of what colors you may choose (if you change the scripted ones mentioned above) for the expanded and contracted states.

Now you've said you want:


To have the page open with the link colors in red. When hovering over the links, the color changes to blue. When the links are collapsed they turn red again.

That doesn't mention what color you want when they are expanded and not hovered, might that be blue or #6bd7d0 as well?

If so, set this part like so:


trade.setColor('#6bd7d0', '#8d0932')

and for the added style in the stylesheet use:


.handcursor:hover {color: #6bd7d0 !important;}

If you want it some other way, please be more precise.

One thing you cannot have, unless we modify the script is a hover color that changes when expanded. And even with that, you cannot have a hover color for when it's contracted before opening that's different than the hover color when contracted after having been closed.

dmwhipp
07-08-2012, 10:53 PM
Thanks John - I updated the coding on the page, removed the ignored and it's working perfectly. You're always a huge help :)
Deborah