Avatar of lulu50
lulu50
Flag for United States of America asked on

Activating Menu

Hi,

I have a menu, when the user click on the menu it should get a background color to #a51d43

this is what i have and it's not working

#nav ul li a {
 /* margin:10px; */
    color:#FFF;
 /* padding:4px;
    font-size:20px;
    text-decoration:none; */
    }

#nav ul li a:hover {
    border-bottom:3px #FFF solid;
 	background-color:#000000;
    }

#nav ul li .active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }



    <menu id="nav">
    <ul class="categories" style="font-size:12px;color:#ffffff;">
      <li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
      <li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
      <li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
    </ul>
    </menu>





$(document).ready(function () {
	$.ajaxSetup({ cache: false });
	
	var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

    // passes on every "a" tag 
    $("#nav ul li a").each(function() {
            // checks if its the same on the address bar
        if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) { 
            $(this).closest("li").addClass("active");
        }
		else if(url == "Index.cfm"){
			$(".Alert").closest("li").addClass("active");
		}
		else if(url == "AddRule.cfm"){
			$(".Alert").closest("li").addClass("active");
		}

		
    });

Open in new window

jQueryCSSJavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Alexandre Simões

Do you have javascript errors?

Because if the first regex execution doesn't find anything, getting the first item will throw an error.
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Check the dev tools to see if you have javascript errors.
lulu50

ASKER
no I am not getting any error
ASKER CERTIFIED SOLUTION
Alexandre Simões

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
lulu50

ASKER
Alexandre

yes, that is correct that I had the active CSS wrong

but when I submit the form to itself I lose my active style

so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
lulu50

ASKER
if the url is this -> AddRule.cfm -> it works fine

but

when I submit the page to itself

AddRule.cfm?id=51  -> now this does not work because it has id=51
Julian Hansen

Where is your code showing the submit?
lulu50

ASKER
oh it goes to SubmitRule.cfm for an insert than go back to the same page that's when I lose my menu.



<FORM id="UnitTestingFrm" NAME="UnitTestingFrm" METHOD="POST" ACTION="SubmitRule.cfm?id=<cfoutput>#PID#</cfoutput>">

   <button name="SubRule" id="SubRule" type="submit" style="border: 0; background: transparent;cursor:pointer;" >
    <img src="images/NextBtn.jpg" alt="Next" />
	</button>

</FORM>

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Alexandre Simões

Let me see if I get it right:

So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.

is that it?
lulu50

ASKER
If I click on the menu it will highlights but if I add (id=51) in the URL and click on enter
it will not highlights.

AddRule.cfm?id=51 -> it will not highlights
Alexandre Simões

Ok, so what you need should be something like:
        if (url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
            $(this).closest("li").addClass("active");
        } else if (window.location.href.indexOf("Index.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        } else if (window.location.href.indexOf("AddRule.cfm") > 0) {
            $(".Alert").closest("li").addClass("active");
        }

Open in new window

If it works it should still be optimized, but for the time being it's enough just to test.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
lulu50

ASKER
Alexandre   and  Julian  Thank you both for all your help

IT WORKS :-)  

THANK YOU THANK YOU AND ONE MORE THANK YOU

Thanks,
lulu
lulu50

ASKER
one more time THANK YOU LOL
Julian Hansen

You are most welcome.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.