Highlight Top-Level Gallery

MoritzCH · 2017-06-13 19:56:40

Hi,

finally I found some time to improve my site a bit but I am struggeling with a "highlight" problem. I found some code provided by Ben and Rod to highlight the current menu item
by using PHPlugins and some CSS. What I would like to do is to highlight the top-level gallery in the same way.

Example: You click on "Europe" and the item is highlighted but if you click on an album (I guess the PHPlugin file is not involved here) the highlight disappears.
Any chance to get the same behaviour for an album?

My private homepage --> http://www.globetrotter.one/

Thank you in advance and enjoy this beautiful (at least here in Switzerland) summer day

Regards
Moritz

P.S.
As always: any tips / tricks / idea for improvement will be appreciated

MoritzCH · 2017-06-14 04:29:09

Tried my luck (without success) with the following approach (PHPlugins:

1.) Determine under which top-level gallery you are browsing using this:

$url99 = 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
$parts = explode('/', $url99);
$test = "/" . $parts[3] . "/";

so $test will give me something like "/galleries_europe/"

2.) Find the corresponding value in the primary-menu and highlight it

Tried this step by using the "window.location.pathname" but I failed ^^

Last edited by MoritzCH (2017-06-14 04:29:39)

Daniel Leu · 2017-06-14 05:11:38

Hallo Moritz,

With $test you already know the pathname. You can use this directly in your javascript code. Maybe something like this in your phplugins code:

echo "
<script>
	$(function() {
		$(\"ul.menu a[href='\" +". $test ."+ \"']\").addClass('selected').parents('li').children().addClass('selected');
	});
</script>
";

Please note that I did not verify this code and might have overlooked an escape or two....

Viel Spass!

Best

MoritzCH · 2017-06-14 13:12:30

Guten Morgen (and in English: Good morning )

your code was not working out of the box but I figured something out. It is working for me but I don't know if this the right way.
Maybe someone else could crosscheck it!

my PHPlugins.php

/* mark menu items as selected */
function ttg_scripts( $style, $path ) { ?>
<script>
	$(function() {
		/**/
		<?php
		$url99 = 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
		$parts = explode('/', $url99);
		$test = "/" . $parts[3] . "/";
		?>					   
		/**/
		$("ul.menu a[href='" + window.location.pathname + "']").addClass("selected").parents('li').children().addClass('selected');
		$("ul.menu a[href='" + <?php echo $test ?> + "']").addClass("selected").parents('li').children().addClass('selected');
	});
</script>
<?php } ?>

I did declare the variable $test outside the function so unless you use a global variable this couldn't work ^^

Danke dir für deinen Input // thank you for your help!

Daniel Leu · 2017-06-14 15:03:46

Happy that this works for you know. The code looks okay to me, although it could be tidied up a bit (one variable instead of three, or none at all, "http://" and SERVER_NAME are not really needed...).

Sidenote: I don't like to use the <?php .. ?> tags inside my functions. To me, the code becomes illegible. But that's me.... ;-) So I keep everything php and use the echo command to output html code. This might need some escape ('\') characters once in awhile, but I prefer it that way.

Cheers

MoritzCH · 2017-06-14 18:36:41

You're right, the code is really messy. Now it looks a bit better

/* highlight menu item */
function ttg_scripts( $style, $path ) {
$tempURL = explode('/', $_SERVER['REQUEST_URI']);
$tempURL = "/" . $tempURL[1] . "/";
echo "
<script>
	$(function() {
		$(\"ul.menu a[href='\" +". $tempURL ."+ \"']\").addClass('selected').parents('li').children().addClass('selected');
	});
</script>
";
} 
/* highlight menu item */

Thank you, owe you a beer (you can get it in Vegas in August if you like or I could fly to SFO ^^)

A sidenote for evey coding addicted user here:
There is a more robust way to get the URL using "parse_url" so the part between function and echo could look like this

// Get current URL
$url = $_SERVER['REQUEST_URI'];
// Extract the path from the URL
$path = parse_url($url, PHP_URL_PATH);
// Separate by forward slashes
$parts = explode('/', $path);
// The part you want is index 1 - the first is an empty string
$result = "/{$parts[1]}/";

I took the way with less coding lines

Last edited by MoritzCH (2017-06-14 20:35:48)

Daniel Leu · 2017-06-15 00:15:31

Looks much cleaner! :-)

Thanks for the beer offer. Maybe next time when I'm back in Switzerland?

MoritzCH · 2017-06-15 01:15:37

sounds good, just drop me a line

Community @ The Turning Gate

#1 2017-06-13 19:56:40

Highlight Top-Level Gallery

#2 2017-06-14 04:29:09

Re: Highlight Top-Level Gallery

#3 2017-06-14 05:11:38

Re: Highlight Top-Level Gallery

#4 2017-06-14 13:12:30

Re: Highlight Top-Level Gallery

#5 2017-06-14 15:03:46

Re: Highlight Top-Level Gallery

#6 2017-06-14 18:36:41

Re: Highlight Top-Level Gallery

#7 2017-06-15 00:15:31

Re: Highlight Top-Level Gallery

#8 2017-06-15 01:15:37

Re: Highlight Top-Level Gallery

Board footer