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

Cufon script and active state

Posted on 2011-03-23
6
1,204 Views
Last Modified: 2012-05-11
Hi There,
I am using a cufon script for my menu font as you can see here
http://lisablue.com.au/index.php?option=com_content&view=article&id=54&Itemid=58

You will notice the active color is gold in the top menu.

However if you then hover over it and move off it, it turns blue again?

How can I fix this please while still using my cufon script?

I just want it to stay its active color regardless of whether you hover over it or not?
0
Comment
Question by:Amanda Watson
  • 4
  • 2
6 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
ID: 35200119
It should work just fine if you stop defining your styling in Cufon-statements.

I did a quick and dirty test in which I created the required CSS-rules to set the 'active' color and hover/normal states. Then I changed your Cufon replace statements as per the attached code. Simply 'enable' hover on the menu-items and let Cufon figure out the colors, that's all there is to it :) Notice that I removed the Cufon.replace statement for the 'active' element and that I changes the first Cufon replacement by removing the 'color' attribute (which will allow Cufon to pick it up from your CSS) and setting hover to true (which will allow Cufon to pick up the correct color from CSS).
Cufon.replace('#mod-top a', { fontFamily: 'trajan', fontSize: '13px',
hover:true});
Cufon.replace('ul.menu', { color: '#0085b2', fontFamily: 'trajan', fontSize: '16px',
hover: {
        color: '#666666'
    }});
Cufon.replace('#topmodules', { color: '#0085b2', fontFamily: 'trajan', fontSize: '17px',
hover: {
        color: '#666666', fontSize: '17px'
    }});
Cufon.replace('h3', { color: '#0085b2', fontFamily: 'trajan', fontSize: '24px'});
Cufon.replace('h4', { color: '#0085b2', fontFamily: 'trajan', fontSize: '20px'});
Cufon.replace('h5', { color: '#0085b2', fontFamily: 'trajan', fontSize: '16px'});
Cufon.replace('#mod-top a:visited span', { color: '#0085b2', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('a.mainlevel_collections ', { color: '#0085b2', fontFamily: 'trajan', fontSize: '13px',
hover: {
        color: '#666666', fontSize: '13px'
    }});
Cufon.replace('#active_menu_collections ', { color: '#9E8E5A', fontFamily: 'trajan', fontSize: '13px'});
Cufon.replace('#sidecol #current a span, #topmodules #active_menu, ', { color: '#9E8E5A', fontFamily: 'trajan' , fontSize: '17px'});

Open in new window

0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35202317
Thank you so much, that has worked for me.

Are you able to see why its not working on this page for my sub menus?
http://lisablue.com.au/index.php?option=com_content&view=article&id=92&Itemid=211

You can see if you hit PUBLIC RELATIONS, the current works, however the rollover and the main color are back to front

It is supposed to work the same way it does on this page here
http://lisablue.com.au/index.php?option=com_content&view=article&id=53&Itemid=85

except its back to front?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35204481
got it!
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 11

Author Closing Comment

by:Amanda Watson
ID: 35204482
Thank you so much for you help
0
 
LVL 17

Expert Comment

by:mreuring
ID: 35205493
Seems we live in polar opposite time-zones :) Do I understand correctly that the follow-up issues were resolved satisfactory?
0
 
LVL 11

Author Comment

by:Amanda Watson
ID: 35210055
Yes I sorted it out thank you by following your examples.

Thanks again for your help
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

828 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