Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2019-02-27 22:51:06

skipper
Member
Registered: 2013-04-26
Posts: 121

Highlight Selected Menu Item while selected

Hi,

I had a custom php script for that working under CE4 and now thought, that this feature was implemented in the pangolin php plugins file as

current_page_menu_item

also see:

http://community.theturninggate.net/vie … hp?id=7246

So, for testing, I created a class in my custom css

.current_page_item {color: red}

with the php code enabled:

function scripts() {
echo <<<SCRIPT
    <script>
    $("ul.menu a[href='" + window.location.pathname + "']")
        .parentsUntil('.menu', 'li')
        .addClass("current_page_item")
        ;
    </script>
SCRIPT;
    return false;
} // END /**/


But it is not doing anything? Any help would be great!

Thanx

Offline

#2 2019-02-27 23:08:02

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Highlight Selected Menu Item while selected

can you post a link?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2019-02-27 23:26:55

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

http://testsite.petervogel.com/kontakt/

or did you mean a link to the phplugins file?

Offline

#4 2019-02-27 23:45:01

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Highlight Selected Menu Item while selected

the reason you're not seeing your color is because of css specificity. There's a rule that has a more specific selectors that's overriding your css:

nav.nav .menu-item, nav.nav .menu-item a, nav.nav .menu-item span {
    color: #505050;
}

so you can try writing something more specific
and it looks like the a element needs to be targeted.

If I took more time I could probably write a specific enough rule without using !important, but ....

anyway, try this in your css instead:

li.current_page_item a {
     color: #0049d6 !important
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#5 2019-02-28 00:04:37

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

Ok, thanx for the hint, I will try that out later, when I have time.

edit: Had to try it out now and it works! Great, thanks!


Doesn't seem to work for submenus though, I thought that the plugin code also was working on those.

Last edited by skipper (2019-02-28 00:09:59)

Offline

#6 2019-02-28 01:10:05

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Highlight Selected Menu Item while selected

No, but you could probably modify it to also affect the sub-menu class


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#7 2019-03-01 21:47:00

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

rod barbee wrote:

No, but you could probably modify it to also affect the sub-menu class

You could probably;-) I certainly am not able to do any of that stuff. I am happy, when I can change some formatting via css now.

So, if any person would be interested to implement that for sub menu....I would be mor than thankful!

Offline

#8 2019-03-01 23:54:00

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Highlight Selected Menu Item while selected

not tested (and it could possibly break things) but you can try adding this right after the first script.

<script>
    $("ul.sub-menu a[href='" + window.location.pathname + "']")
        .parentsUntil('.menu .sub-menu', 'li')
        .addClass("current_page_item")
        ;
    </script>


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#9 2019-03-02 00:44:43

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

rod barbee wrote:

not tested (and it could possibly break things) but you can try adding this right after the first script.

<script>
    $("ul.sub-menu a[href='" + window.location.pathname + "']")
        .parentsUntil('.menu .sub-menu', 'li')
        .addClass("current_page_item")
        ;
    </script>

I always keep a testing site, so it is ok, if things break;-)

I put the code in;

function scripts() {
echo <<<SCRIPT
    <script>
    $("ul.menu a[href='" + window.location.pathname + "']")
        .parentsUntil('.menu', 'li')
        .addClass("current_page_item")
        ;
    </script>
   
    <script>
    $("ul.sub-menu a[href='" + window.location.pathname + "']")
        .parentsUntil('.menu .sub-menu', 'li')
        .addClass("current_page_item")
        ;
    </script>
   
   
   
SCRIPT;
    return false;
} // END /**/


It doesn't seem to do the trick, but also doesn't break things.

Thanks for trying anyway!

Offline

#10 2019-03-02 00:48:13

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Highlight Selected Menu Item while selected

it might be that .parentsUntil section. I'm not sure yet exactly how that works
https://api.jquery.com/parentsUntil/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#11 2019-04-02 02:25:01

mad
Member
From: Arkansas
Registered: 2014-01-03
Posts: 154
Website

Re: Highlight Selected Menu Item while selected

I have the solution for this as follows for children as well additionally this simple example also has the added support of if you wanted to highlight the menus even for galleries.

    echo '
        <style type="text/css">
            .selected
            {
                background-color: red !important; 
                color: yellow !important;
            }
        </style>
       <script>
       $(function()
       {
            var pname = window.location.pathname;                        // Get the Pathname
            if (pname.indexOf("galleries/") == 1)                        // if Top-level Gallery
            {   
                var pname = pname.substr(10, 11);                        // Strip off the actual Page
            }    // Otherwise it is a normal Page (meaning non-gallery)
            // populate the menu and children
            $("ul.menu a[href=\'" + pname + "\']")
              .parentsUntil(".menu", "li")
              .addClass("selected").parents("li").children("a").addClass("selected");
         });       
        </script>
        ';

This is working on my website [fully tested] and it works with search results as well.  I put this in my scripts function plugin but you can use it the way you code it.

One more thing this piece of the code above depends on your system and how your galleries are setup.
            if (pname.indexOf("galleries/") == 1)                        // if Top-level Gallery
            {   
                var pname = pname.substr(10, 11);                        // Strip off the actual Page
            }    // Otherwise it is a normal Page (meaning non-gallery)

Last edited by mad (2019-04-02 02:32:08)

Offline

#12 2019-04-02 14:55:54

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

mad wrote:

This is working on my website [fully tested] and it works with search results as well.  I put this in my scripts function plugin but you can use it the way you code it.

Well, I don't code at all, I am happy if I get some css working;-)

Copying your exact function in my php-plugins created an error. So I added:

"function scripts() {"

//then your part

    echo '
        <style type="text/css">
            .selected
            {
                background-color: red !important; 
                color: yellow !important;
            }
        </style>
       <script>
       $(function()
       {
            var pname = window.location.pathname;                        // Get the Pathname
            if (pname.indexOf("galleries/") == 1)                        // if Top-level Gallery
            {   
                var pname = pname.substr(10, 11);                        // Strip off the actual Page
            }    // Otherwise it is a normal Page (meaning non-gallery)
            // populate the menu and children
            $("ul.menu a[href=\'" + pname + "\']")
              .parentsUntil(".menu", "li")
              .addClass("selected").parents("li").children("a").addClass("selected");
         });       
        </script>
        ';

and added a

"}"

Like this it works on the menus and children, if those pages are regular pages. In Galleries it doesn't work for children on my site. Also the background color is red, but the text color is not yellow.

Thanx for sharing this though!

I think that the menu select feature should be an integrated part of BL2.

Offline

#13 2019-04-02 20:18:01

mad
Member
From: Arkansas
Registered: 2014-01-03
Posts: 154
Website

Re: Highlight Selected Menu Item while selected

For the children on your site you need to change this section of the code to how your galleries and its children are set up.
This is particular to my system.  My children are exactly 10 chars plus the leading '/' which makes 11 chars to strip; so it looks like this /galleries/mychildno1 and after the strip it looks like this /mychildno1 if you have something like /galleries/catalogs/mychildno1/ then you need to strip from the back your slug length characters minus the last '/' in my case something like this var parname = pname.substr(-1,11)                   // instead of the strip of below  a negative number uses it as a character index from the end of the string remember 0 is the first character in this case the last '/'.

            if (pname.indexOf("galleries/") == 1)                        // if Top-level Gallery
            {   
                var pname = pname.substr(10, 11);                        // Strip off the actual Page 
            }    // Otherwise it is a normal Page (meaning non-gallery)

Offline

#14 2019-04-05 20:57:13

skipper
Member
Registered: 2013-04-26
Posts: 121

Re: Highlight Selected Menu Item while selected

Hi Mad,

thanks for the effort and explanation! I still don't quite get the code part for the children. All my galleries have names with different character lengths, so your method wouldn't work with it, would it?

Offline

Board footer

Powered by FluxBB