We Keep Coding

How do I bring underline in Navbar in accordance to the page visited?

I want navbar to underline the currently visited page just like in the below picture-

A way I find works for me is to just check the path current url of the page with location.pathname and compare it with whatever you want to name it, and then apply the appropriate class to it.
Here is some example code:
const pathMap = {
'/': document.getElementById('home_nav'),
'/about': document.getElementById('about_nav'),
'/contact': document.getElementById('contact_nav'),
'/projects': document.getElementById('projects_nav'),
};
const path = location.pathname;
if (pathMap[path]) {
pathMap[path].classList.add('active');
}
You have to add this code to wherever your navbar is located. Keep in mind there might be better ways to do this, but if you only run this code where your navbar exists then there should be no problem. Another draw back is that this way does not support nested paths, so lets say you are at /projects/cat-hotel then it won't work properly, of course you can do some RegEx to solve this but I am just showing you an example.

I have used these two solutions and they worked just fine for me.
https://css-tricks.com/forums/topic/how-to-keep-the-page-highlighted-on-the-nav-bar/
https://css-tricks.com/forums/topic/highlight-nav-links-when-scrolling-the-page/

Swap contents of a sidebar page with javascript

I've got a problem that I can't quite get my head around.
I've built 3 identical templates in my CMS except for the CSS that they call (it's not WordPress and has no access to the application layer). I have plugged in my navigation, sidebar and footer in the theme files (think of these as "pages" in a WordPress site rather than the PHP shortcodes one would normally use). My page content is then dynamically served.
My issue is that these templates are going to be used across a number of different websites. Thus the contents of the navigation, sidebar and footer all need to be able to change depending on which site they are in use on. The business requirements are that I have to have only one of each of these pages. I can't just make 20 copies of the theme if I were to have to do 20 websites.
My initial idea is to use something like this....
var url = window.location.href;
var site1 = url.indexOf('site1');
var site2 = url.indexOf('anothersite');
var site3 = url.indexOf('thefinalsite');
if (site1 >= 0) {
$('.sidebar_info').append('<li>Login</li><br/><li>Another Link</li>');
}
else if (site2 >= 0) {
$('.sidebar_info').append('<li>Not Login</li><br/><li>Link</li>');
}
else if (site3 >= 0) {
$('.sidebar_info').append('<li>Unique Link</li><br/><li>Some other Link</li>');
}
else {
$('.sidebar_info').append('<li>Nothing</li>');
}
While I'm pretty sure I could make this work it would be a headache if every time a site was commissioned to be built I have to go into 3 different pages and update the functions. Plus ideally down the line a less technical person would be able to spin one of these up themselves.
Any ideas on other ways I could accomplish this with JS or jQuery?
Much appreciated!

Random image only to be applied once

I want my website to show a random background image (which I've set up with javascript) but I don't want it to change again while the user is on the site. At the moment it changes every time you click a link, but I'd rather it only change when you hit the Home button.
I think this other question is similar, but as I haven't used php much before, I was wondering if there was a javascript alternative? (or just something silly i missing here?)
choose random value only once
Thanks

Javascript solution (fully client side):
Use sessionStorage
fileurls=["a.jpg","b,jpg"]// list of file URLS
function getFileURL(){
if(sessionStorage.fileurl)
return sessionStorage.fileurl;
}else{
sessionStorage.fileurl=fileurls[Math.floor(Math.rand()*fileurls.length)]
return sessionStorage.fileurl;
}
}
Now, just set the src of the image to whatever is set by the function:
document.body.style.background="url('"+getFileURL()+"')";
Basically, this puts a random file URL in browser storage for a session, and uses it whenever required.
PHP solution (fully server side):
$fileurls = array('a.jpg','b,jpg');
if(!isset($_SESSION['fileurl'])) {
$_SESSION['fileurl'] = $fileurls[rand(0, count($fileurls) - 1)];
}
And, wherever the <body> tag is, do this:
<body background="<?echo$_SESSION ['fileurl']; ?>">

You can use cookies or even window.localStorage to store informations in Javascript through navigation (and then use the same logic as in your link).

Use JavaScript to set an onClickListener for the Home button which will change the background when clicked.

Can I change the classname in a script when I change page

Hallo All,I have a problem. I have written a very extensive script to change my body-background from a page-specific background-image to an other background-image. For refrence:My 'mypage.html' has a default background of class='image1' defined in the default stylesheet.I have written a script to change this to class='image10' or class='image11', which are defined in the persistent stylesheet. (Believe me, this is the short version, but this part works... well, is going to. No questions here.)My 'otherpage.html' has a default background of class='image2' defined in the default stylesheet and I want to be able to change this as well to the same 'image10' and 'image11' from the persistent stylesheet.Both default backgrounds have multiple differently colored versions in alternate stylesheets... Change the stylesheet and class='image1' links to another version of the image.All this is directed by cookies that are page specific as well. This makes finding a solution quite important, because otherwise I would have to set cookies for every single page. Which I find unacceptable.My question is, do I have to copy/past the whole script to my 'otherpage.html' and change al the 'image1's to 'Image2's or is there a way to javascript something like:
if(HTML = 'otherpage.html') {
(".image1" = ".image2")
}
Excuse my very amateuristic script. I have looked all over, but I wouldn't even know how to search for this... Hope someone can help, otherwise copy/past it is ;)

You can use this little script here
var currentPage = window.location.pathname;
if (currentPage == "/somepage.html") {
// change the body class name
document.getElementsByTagName("body")[0].className = "image2";
}
You can use a switch statement if you have multiple pages to test.

You can control the styles(background and other styles) through the base class which you can set it to body tag of the document or any root container. On page load check the page name and set the class names accordingly.
if(page == "otherPage"){
document.body.className = "image2";
}
Now all the classes falling under image2 will be applied.

javascript drop-down menu: how to link to different sites?

I'm a college student trying to create a drop-down menu for my professor. Since I don't have any programming background, I found a program called "SoThink DHTML" that generated a code for me, but there are some errors within that I don't know how to fix.
The menu, overall, should have tabs to "Home," "Research" (3 subtabs: "Research Projects," "Systems and Approaches," and "Images and Movies"), "Publications, "Lab Members," "Links," and "Contact Us." The automatically generated code, however, doesn't provide links to some of these titles, and I was wondering how can I insert the links manually?
How can I insert the paths so that they do not refer to specific files, but are more flexible when I move the folder containing the website?
I hope that this makes some sense..
Thank you so much for your help in advance!!
stm_bm(["menu1c53",960,"","blank.gif",0,"","",1,0,250,0,1000,1,0,0,"","100%",0,0,1,2,"default","hand","",1,25],this);
stm_bp("p0",[0,4,0,0,0,0,0,15,100,"",-2,"",-2,50,0,0,"#999999","transparent","line1.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#E6EFF9",1,"#E6EFF9",1,"","line2.gif",1,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","bold 9pt Verdana","bold 9pt Verdana",0,0,"","line2.gif","","line2.gif",2,2,42],100,0);
stm_aix("p0i1","p0i0",[0,"Research","","",-1,-1,0,"","_self","","","","",0,0,0,"arrow1.gif","arrow2.gif",15,9],100,0);
stm_bp("p1",[1,4,0,-3,6,0,5,0,100,"progid:DXImageTransform.Microsoft.RandomDissolve(,enabled=0,Duration=0.30)",12,"",-2,80,0,0,"#999999","#beeb94","",3,0,0,"#CCCCCC","",-1,-1,0,"transparent","",3,"",-1,-1,0,"transparent","",3,"line3.gif",-1,-1,0,"transparent","line3.gif",3,"",-1,-1,0,"transparent","",3,"","","","",1,1,1,1,1,1,1,1]);
stm_ai("p1i0",[0,"Research Projects","","",-1,-1,0,"./Research_Projects.html","_self","","","","",5,1,0,"","",0,0,0,0,1,"#E6EFF9",1,"#edf9e1",0,"","",3,3,0,0,"#E6EFF9","#000000","#426b10","#426b10","7pt Verdana","7pt Verdana",0,0,"","","","",0,0,0],0,20);
stm_aix("p1i1","p1i0",[0,"Systems and Approaches","","",-1,-1,0,"./Systems_and_Approaches.html"],0,20);
stm_aix("p1i2","p1i0",[0,"Images and Movies","","",-1,-1,0,"./Images_and_Movies.html"],0,20);
stm_mc("p1",[7,"#1E1E1E",1,2,"",3]);
stm_ep();
stm_aix("p0i2","p0i0",[0,"Publications","","",-1,-1,0,"#"],100,0);
stm_aix("p0i3","p0i2",[0,"Lab Members"],100,0);
stm_aix("p0i4","p0i2",[0,"Links"],100,0);
stm_aix("p0i5","p0i2",[0,"Contact Us"],100,0);
stm_ep();
stm_em();

It looks like you are using relative urls, which find a file based on the current location. Therefore they mean different things when the file containing the urls is in different places.
../../public/img/logo.gif
absolute urls start from the root of the website, which means you can move the file containing them anywhere and it will still refer to the same location.
http://www.somedomain.com/en/public/img/logo.gif
more on the difference (warning, get technical).