Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

navigation mouseover remains active on pages

Posted on 2010-11-30
15
Medium Priority
?
321 Views
Last Modified: 2012-05-10
How do I modify page so the mouseover effect remains activated when visitor opens a web page?  I created a class but it didn't work right.  I put it on the Caregiving button on this page only.


http://www.embracecaremanagement.com/caregiving.html
http://www.embracecaremanagement.com/embrace.css

<li class="active"><a href="caremanagement.html">Care Management</a></li>
<ul id="nav"> 
   <li><a href="services.html">Services</a></li>
     <li class="active"><a href="caremanagement.html">Care Management</a></li>
     <li><a href="caregiving.html">Caregiving</a></li>
     <li><a href="team.html">Team Members</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="stories.html">Client Stories</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="video.html">Video</a></li>
    <li><a href="http://sheboyganseniorcare-helpishere.blogspot.com/" target="_blank">Blog</a></li>
    <li><a href="links.html">Links/Resources</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="index.html">Home</a></li>
    </ul>



.active {color: #3b2f18; 
background: #c7e7b7;/* light green mouseover color on button */
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}

Open in new window

0
Comment
Question by:nsitedesigns
[X]
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
  • 8
  • 3
  • 2
  • +2
15 Comments
 
LVL 59

Assisted Solution

by:HainKurt
HainKurt earned 200 total points
ID: 34242211
use

<li class="active">Care Management</li>

and modify active a bit to match to a tag...
0
 
LVL 1

Expert Comment

by:jebpotly
ID: 34242317
First issue is knowing which link should be activated. Since this is an html page and not some sort of scripting language page then you will have to use javascript. In your url for the link you can put the name of the link to highlight. Then when the page loads, have javascript set the current link to be active.

This site has a cool function for getting at url parameters: http://www.netlobo.com/url_query_string_javascript.html

Here is the resulting page which works for me:
<ul id="nav"> 
   <li id="services"><a href="services.html?page=services">Services</a></li>
     <li id="caremanagement"><a href="caremanagement.html?page=caremanagement">Care Management</a></li>
     <li id="caregiving" ><a href="caregiving.html?page=caregiving">Caregiving</a></li>
     <li id="team"><a href="team.html?page=team">Team Members</a></li>
    <li id="faq"><a href="faq.html?page=faq">FAQ</a></li>
    <li id="testimonials"><a href="testimonials.html?page=testimonials">Testimonials</a></li>
    <li id="stories"><a href="stories.html?page=stories">Client Stories</a></li>
    <li id="news"><a href="news.html?page=news">News</a></li>
    <li id="video"><a href="video.html?page=video">Video</a></li>
    <li><a href="http://sheboyganseniorcare-helpishere.blogspot.com/" target="_blank">Blog</a></li>
    <li id="links"><a href="links.html?page=links">Links/Resources</a></li>
    <li id="contact"><a href="contact.html?page=contact">Contact Us</a></li>
    <li id="index"><a href="index.html?page=index">Home</a></li>
    </ul>

<style type="text/css">

.active {color: #3b2f18; 
background: #c7e7b7;/* light green mouseover color on button */
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}
</style>
<script type="text/javascript">
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
function setActive(el_id) {
	var elem = document.getElementById(el_id);
	var is_active = (gup('page') == el_id);
	if (is_active) {
		elem.className  = 'active';
	} else {
		elem.className  = 'inactive';
	}
}
window.onload = function () {
	setActive('caremanagement');
	setActive('caregiving');
	setActive('team');
	setActive('faq');
	setActive('stories');
	setActive('testimonials');
	setActive('news');
	setActive('video');
	setActive('links');
	setActive('contact');
	setActive('index');
	setActive('services');
}
</script>

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 34242415
HainKurt,

How do I modify the css?  That is my question.

0
Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

 
LVL 17

Assisted Solution

by:GreatGerm
GreatGerm earned 600 total points
ID: 34242822
What's happening is that the style in .active are being overridden by the styles in ul#nav li a since it cascades down.  Either you can move the location of the declaration or you can use the !important rule for anything that you want to break the cascade.  You just place it in line with the style:

background: #c7e7b7 !important;
0
 

Author Comment

by:nsitedesigns
ID: 34242950
greatGerm,

I tried moving the css down the sheet and adding the important tag to the background and this is what happened.

http://screencast.com/t/VxLizwgrwUI
0
 

Author Comment

by:nsitedesigns
ID: 34242963
Oops - I see what I did to get the goofy results with the link above.  I fixed that.  But still not getting the results that I am hoping for.

Back to square one.
0
 
LVL 17

Expert Comment

by:GreatGerm
ID: 34243404
Not square one :)

Change .active to .active a
0
 

Author Comment

by:nsitedesigns
ID: 34243626
You are right, square two.  : )

adding "a" to active worked partially.  I had to add important! to all active declarations.  Is that ok to do?  I heard to use important! sparingly.

.active a {color: #3b2f18!important;
background: #c7e7b7 !important;/* light green mouseover color on button */
background-image:url(img/mouseover2.png)!important;
background-repeat:no-repeat!important;
background-position:left center!important;}
0
 
LVL 43

Accepted Solution

by:
David S. earned 1200 total points
ID: 34243657
If you used "ul#nav .active a" (which has a higher specificity) instead of ".active a", then you wouldn't need to add "!important".
0
 
LVL 17

Expert Comment

by:GreatGerm
ID: 34243680
Yes, you would need to add the !important rule to all declarations that are overridden down the cascade.

You are correct, you will want to use it sparingly since it does break out of the cascade, but this is the type of situation for which it was meant.  Like most things CSS you have other options such as changing the order of the declarations, putting the styles inline, using client-side scripting (i.e. javascript), etc.

How you do it is up to you.
0
 

Author Comment

by:nsitedesigns
ID: 34243706
Hey Kravimir!

I removed the important! from the declaration and changed it to "ul#nav .active a" but that only worked partially.  I see the green bar now but not the little ball to the left.  The link below is the only page that I have this applied to:  See what I mean...  What did I miss?

http://www.embracecaremanagement.com/caregiving.html

ul#nav .active a {color: #3b2f18; 
background: #c7e7b7;/
background-image:url(img/mouseover2.png);
background-repeat:no-repeat;
background-position:left center;}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 34243715
I moved the declaration lower on the css page too and it still doesn't seem to work...
0
 
LVL 43

Expert Comment

by:David S.
ID: 34243724
It's not working because of the stray slash at the end of this line:

background: #c7e7b7;/
0
 

Author Comment

by:nsitedesigns
ID: 34243849
Wahoo-dilly-do!

thanks.  Time for new glasses I guess.
0
 

Author Closing Comment

by:nsitedesigns
ID: 34243869
Thanks all!
0

Featured Post

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

722 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