JavaScript/JQuery function to change CSS based on page?

CMES-IT
CMES-IT used Ask the Experts™
on
Hi,

I have a vanilla HTML/CSS site using the basic JQuery library. One part of the page's design is a colored bar graphic, which I would like to change to a different color depending on the page the user is at. Here is the CSS for the colored graphic bar:

#colorBar { height: 17px; width: 509px; background: url(/graphics/colorBar-Home.jpg) top left repeat-x; }

When someone is on /index.html or /page.html, I would like to use colorBar-Home.jpg. However, if someone is on /folder1/somepage.html, I'd like to use colorBar-Folder1.jpg, and if someone is on /folder2/somepage.html, I'd like to use colorBar-Folder2.jpg, etc.

Yes, I could have a different .css file for each "folder" on the site, but I'd like to keep one .css file, and alter it programmatically using JQuery.

Can someone write me the JQuery code to do this? I'm assuming that we'll have to use JQuery to read the HTML Session variables, right?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David H.H.LeeDigital Marketing (Hospitality)

Commented:
Hi CMES-IT,
You can simply re-assign the css classname via jquery built-in function call "addClass()". If you trying to remove the css classname, that can be done via "removeClass()" event. The rest is depend how you control the CSS alteration using the mentioned.
eg:
$("#colorBar").removeClass("colorBarCode1");
$("#colorBar").addClass("colorBarCode2");

.colorBarCode1 { height: 17px; width: 509px; background: url(/graphics/colorBar-Home.jpg) top left repeat-x; }
.colorBarCode2 { height: 17px; width: 509px; background: url(/graphics/colorBar-Folder1.jpg) top left repeat-x; }

 

Author

Commented:
Hi,

Sorry if I didn't make myself clear. The part I am looking for help with is determining the current page. Here is the psuedocode for the part I don't know how to do in JQuery:


Switch strCurrentPageURL
   Case Contains "/folder1/"
      // do stuff
   Case Contains "/folder2/"
     // do stuff
   Case Default
     // do stuff
End Switch

Of, we could even do a big If-Else statement

If strCurrentPageURL Contains "/folder1/" Then
   // do stuff
Else If strCurrentPageURL Contains "/folder2/" Then
   // do stuff
Else
   // do stuff
End If

But I don't know how to get the current URL as a string via JQuery.
   
Commented:
I fixed it myself, and am requesting this question be closed.

Here is the code, in case anyone's watching:

var strURL = window.location.toString();

if (strURL.search(/\/folder1\//i) != -1) { $('img#colorBar').attr("src","/graphics/colorBar-folder1.jpg"); }
else if (strURL.search(/\/folder2\//i) != -1) { $('img#colorBar').attr("src","/graphics/colorBar-folder2.jpg"); }
//repeat else ifs as necessary to get all folder names

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial