The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Link button should be matching the div's color

View previous topic View next topic Go down

Solved Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 2:21 pm

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome
Screenshot of problem : https://i58.servimg.com/u/f58/19/64/54/19/untitl18.png
Who the problem concerns : All members
Forum link : http://www.nfssecrets.tk/

Description of problem

How'd I go about making the button match the color of the bottom div, depending on which page one is currently at?
If you press "Home" button, you're brought to the forums, and that button should be the color of the div that's under that button (blue).

Hopefully you understand what I'm trying to say. If not, I'll try to explain better


Last edited by BloodDrunk on April 23rd 2017, 5:00 pm; edited 1 time in total
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by Walt on April 23rd 2017, 4:10 pm

Hello,

You should create a new javascript (on all the pages) containing :
Code:
$(function() {
    $('a.mainmenu[href="' + location.pathname + '"]').addClass('active');
});

And you will add in your CSS :
Code:
a.mainmenu.active {
    background-color: rgba(0,3,64,0.43);
}

avatar
Walt
Forumember

Male Posts : 58
Reputation : 11
Language : French, English

http://forum.forumactif.com

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 4:21 pm

Excellent! It works. Thank you, sir.
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by Walt on April 23rd 2017, 4:21 pm

We need to add an !important in the CSS, this way :

Code:
a.mainmenu.active {
    background-color: rgba(0,3,64,0.43) !important;
}

Edit : I guess we posted in the same time Smile Glad it works.
avatar
Walt
Forumember

Male Posts : 58
Reputation : 11
Language : French, English

http://forum.forumactif.com

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 4:23 pm

Yeah, I'm quick in editing messages. Haha
BTW, this doesn't work on "Profile" button. Here's the href of it: profile?mode=editprofile

And yeah, I tried it with the "!important" when I "noticed" (I'm blind) it ain't working.
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by Walt on April 23rd 2017, 4:30 pm

Replace the script with this one :

Nope, this one was a mistake Mr. Green just a moment...
avatar
Walt
Forumember

Male Posts : 58
Reputation : 11
Language : French, English

http://forum.forumactif.com

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 4:34 pm

Oh my, now it works for each link, but when "Portal" button is clicked, every card besides portal is blue! Haha

BTW, what are you doing in JS? I'd like to learn from the scripts. I know some JS, but not most of the commands (don't know really the JS syntax).

EDIT: Waiting Very Happy
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by Walt on April 23rd 2017, 4:41 pm

This one is the good one :

Code:
$(function() {
    $('a.mainmenu[href="' + location.pathname + '"]').addClass('active');
    if(location.pathname == "/privmsg" || location.pathname == "/profile") {
      $('a.mainmenu[href^="' + location.pathname + '"]').addClass('active');
    }
});

location.pathname returns the path name of the current URL. E.g. : if you are on this page : http://help.forumotion.com/memberlist
location.pathname will return /memberlist

So the script is doing the following : if there is a link in the navbar with an href attribute containing the same thing that our current URL path name, we add the class "active".

BUT. If you are on this page : http://help.forumotion.com/privmsg?folder=inbox the pathname will be /privmsg
If the script searches for a link in the navbar with the an href attribute containing /privmsg, it will fail because the link in the navbar leads to /privmsg?folder=inbox. Same thing with the profile link.

So we have to be more specific for these two hypothesis with the second part of the script, which tells your browser "if we are on these two pages, do that with this links in the nav bar".

Am I understandable ?
avatar
Walt
Forumember

Male Posts : 58
Reputation : 11
Language : French, English

http://forum.forumactif.com

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 4:52 pm

Yes you are! Thanks a bunch! Now I know how to manipulate the elements with jQuery on my own. I'll contact you for an queries, if I get stuck somewhere. Is that fine with you?
I understand how codes work (I can code in C++, so I have understanding), but I just don't know commands and syntax in JS.
+Rep
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by Walt on April 23rd 2017, 4:56 pm

I'm not very active on this support forum so you should open a thread when you have any question, you will get an answer more quickly than by contacting me. Smile

I'm glad to be understandable !
avatar
Walt
Forumember

Male Posts : 58
Reputation : 11
Language : French, English

http://forum.forumactif.com

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by BloodDrunk on April 23rd 2017, 5:00 pm

@Walt wrote:'m not very active on this support forum so you should open a thread when you have any question, you will get an answer more quickly than by contacting me. Smile

Meh..I guess that'll be the way then!
avatar
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Solved Re: Link button should be matching the div's color

Post by APE on April 23rd 2017, 6:41 pm

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



avatar
APE
Manager
Manager

Male Posts : 11038
Reputation : 1036
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


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