The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Navbar JavaScript Help

3 posters

Go down

Solved Navbar JavaScript Help

Post by MrEighty8 July 1st 2022, 8:44 pm

Technical Details


Forum version : #PunBB
Position : Administrator
Concerned browser(s) : Mozilla Firefox, Other
Who the problem concerns : All members
When the problem appeared : Last night
Forum link : https://pwpclan.forumotion.com

Description of problem

Hello, I am looking for some help with a JavaScript code. I added this JavaScript code to the website to add a CSS class called .active to my navigation menu. It worked as expected when you are on the "Forum" page but when I go to the "Home" page the JavaScript code adds the .active class to the entire nav bar. How can I modify this to prevent that from happening?

JavaScript Code:
Code:
$(function(){
    var current = location.pathname;
    $('#pun-navlinks li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.parent().addClass('active');
        }
    })

HOME PAGE VIEW (incorrect):
https://prnt.sc/tYVTFPM0MuJs

FORUM PAGE VIEW (correct):
https://prnt.sc/ha4m6sJdRlBQ

As you can see in the screenshots above when on the home page the script adds the active class to the entire navbar as opposed to just the "Home" button.

Appreciate any help I can get in advance!


Last edited by MrEighty8 on July 4th 2022, 10:42 am; edited 2 times in total
MrEighty8
MrEighty8
New Member

Posts : 16
Reputation : 4
Language : English

View user profile

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by كونان2000 July 2nd 2022, 2:04 am

hi @MrEighty8

CSS Code:
Code:
#pun-navlinks a.active {
    background: linear-gradient(0deg,#00cbf7,#0095c9);
}

JavaScript Code:

Try replacing the script you installed in the tutorial with this one :
Code:
$(function() {
    $('#pun-navlinks a[href="' + location.pathname + '"]').addClass('active');
    if (location.pathname == "/privmsg" || location.pathname == "/profile") {
        $('#pun-navlinks a[href^="' + location.pathname + '"]').addClass('active')
    }
});
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 59
Reputation : 38
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by MrEighty8 July 2nd 2022, 4:56 am

كونان2000 wrote:hi @MrEighty8

CSS Code:
Code:
#pun-navlinks a.active {
    background: linear-gradient(0deg,#00cbf7,#0095c9);
}

JavaScript Code:

Try replacing the script you installed in the tutorial with this one :
Code:
$(function() {
    $('#pun-navlinks a[href="' + location.pathname + '"]').addClass('active');
    if (location.pathname == "/privmsg" || location.pathname == "/profile") {
        $('#pun-navlinks a[href^="' + location.pathname + '"]').addClass('active')
    }
});

Hey, very much appreciate the reply but that script didn't seem to be the fix. Essentially I am trying to get a script that reads the current URL and if that current URL is true then it adds the active class to the navbar (so I can style it with CSS). Right now the script I have in place works totally fine until I navigate to the home page of the domain (www.pwpclan.forumotion.org), then all the links get added with the .active class. If you go to the website you can see exactly what I am referring to by clicking on any of the nav links vs the "Home" link.
MrEighty8
MrEighty8
New Member

Posts : 16
Reputation : 4
Language : English

View user profile

كونان2000 likes this post

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by كونان2000 July 2nd 2022, 6:00 am

Hey, is that what you mean mwii
The active button has a background
Navbar JavaScript Help  Frorum18

The background is only in the active button


كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 59
Reputation : 38
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by MrEighty8 July 2nd 2022, 7:37 pm

كونان2000 wrote:Hey, is that what you mean mwii
The active button has a background
Navbar JavaScript Help  Frorum18

The background is only in the active button



Yes sir. My previous code was working fine for all the pages except when you were on the home page and I wasn't sure why (still learning JavaScript).

Example of whats happening: (ignore the CSS styling being a mess)
EDIT: Navbar JavaScript Help  LTNnDhv
MrEighty8
MrEighty8
New Member

Posts : 16
Reputation : 4
Language : English

View user profile

كونان2000 likes this post

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by كونان2000 July 2nd 2022, 9:18 pm

hi @MrEighty8

Try entering the code into a template index_body
Code:
    <style>
  #pun-navlinks > ul > li:nth-child(2),
#pun-navlinks > ul > li:nth-child(3),
#pun-navlinks > ul > li:nth-child(4),
#pun-navlinks > ul > li:nth-child(5),
#pun-navlinks > ul > li:nth-child(6),
#pun-navlinks > ul > li:nth-child(7),
#pun-navlinks > ul > li:nth-child(8),
#pun-navlinks > ul > li:nth-child(9),
#pun-navlinks > ul > li:nth-child(10),
#pun-navlinks > ul > li:nth-child(11)
{
    background: #0000 !important;
}
    </style>

I tried it on my test forum
working fine
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 59
Reputation : 38
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

Ape, TonnyKamper and MrEighty8 like this post

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by MrEighty8 July 4th 2022, 10:41 am

كونان2000 wrote:hi @MrEighty8

I tried it on my test forum
working fine

For whatever reason I was unable to use your JavaScript code, however, thanks for the recommendation with CSS.

I ended up solving the issue by putting this code on my portal page.

Code:
<style>
#pun-navlinks > ul > li + li {
    background: #191919 !important;
}
#pun-navlinks >ul > li + li:hover {
    background:#515151 !important;
}
</style>

Thanks again for the help!
MrEighty8
MrEighty8
New Member

Posts : 16
Reputation : 4
Language : English

View user profile

كونان2000 likes this post

Back to top Go down

Solved Re: Navbar JavaScript Help

Post by skouliki July 4th 2022, 12:22 pm

thank you for posting the solution

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
skouliki
skouliki
Manager
Manager

Female Posts : 12589
Reputation : 1536
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

MrEighty8 and كونان2000 like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum