Originally Posted by JayP Hi John, I have a nav bar set up following the custom method. Currently it is formatted in CSS to be underlined and bold on hover. I want to add the "highlight current page" but the java script seemed to kill the slide show when I put it in. Is there a way to do it just with CSS? Thanks.

If the javascript kills the slideshow that's because there's an error in what you are inserting or you aren't inserting the right thing. I can help you identify the error, but you'd have to put it in your page and post a link so I can take a look at what isn't working and what needs to be changed.

Ok. Will do it tonight when home from work.

Originally Posted by jfriend If the javascript kills the slideshow that's because there's an error in what you are inserting or you aren't inserting the right thing. I can help you identify the error, but you'd have to put it in your page and post a link so I can take a look at what isn't working and what needs to be changed.

I re-entered it all - works now. Not sure what I missed but works great now. Thanks.

Hi,

I am not sure what I am doing wrong. I pasted and added the 3rd step and...just clooless! Please help.

www.christahunt.com

Originally Posted by clooless Hi, I am not sure what I am doing wrong. I pasted and added the 3rd step and...just clooless! Please help. www.christahunt.com

You have multiple copy/paste errors in your bottom javascript. Replace your entire bottom javascript with this fixed version and we can see if there are any more errors that need fixing:

//change gallery comments to guestbook comments

function ModifyText ()
{
  if (YD.hasClass(document.body, "gallery_1605513"))
  {
    var objElement = YD.get("comment")
    if (objElement != null)
    {
      var str = new String(objElement.innerHTML);
      str = str.replace(/\gallery/gi, 'Guestbook');
      objElement.innerHTML = str;
    }
  }
}

YE.onAvailable("comment", ModifyText);


//------------------------------------------------------------------------------------------
// Highlight the link in your navbar that matches the current page.
//
// Revision 1.1
// See http://www.dgrin.com/showthread.php?t=141678 for documentation.
//------------------------------------------------------------------------------------------
YE.onContentReady("customNavContainer", function ()
{
	function AddTrailingSlash(str)
	{
		if (str.search(/\/$/) == -1)
		{
			str = str + "/";
		}
		return(str);
	}
	
	function StripDomainAndHash(oldStr)
	{
		var str = oldStr.replace(/#.*$/, "");				// get rid of hash value
		str = AddTrailingSlash(str);							// make sure it always ends in a slash
		str = str.replace(/^https?:\/\/[^\/]*/, "");			// get rid of domain on the front
		return(str);
	}
	
	var links = this.getElementsByTagName("a");
	if (links && (links.length > 0))
	{
		var pageURL = StripDomainAndHash(window.location.href);
	
		var foundExactMatch = false;
		var partialIndex = -1;		// index of best partial match
		var partialLength = 0;		// length of the best partial match
		var galleriesIndex = -1;		// index of the /galleries link
		
		// check each link for an href match with our current page
		for (var i = 0; i < links.length; i++)
		{
			var testLink = StripDomainAndHash(links[i].href);			// relative link will be turned into absolute link here
			if (testLink == pageURL)
			{
				YD.addClass(links[i], "navCurrentPage navCurrentPageExact");
				YD.addClass(links[i].parentNode, "navCurrentPageParent navCurrentPageParentExact");
				foundExactMatch = true;
				break;
			}
			// if testLink is not the top level (don't want to do partial matches for top level)
			else if (testLink != "/")
			{
				// if the testLink is contained within the pageURL 
				// (e.g. the current page link is longer than the navbar link and starts with it),
				// remember it as a partial match
				if (pageURL.indexOf(testLink) == 0)
				{
					// save the longest partial match (assuming it to be the most specific)
					if (testLink.length > partialLength)
					{
						partialIndex = i;
						partialLength = testLink.length;
					}
				}
				else if (testLink == "/galleries/")
				{
					galleriesIndex = i;
				}
			}
		}
		if (!foundExactMatch)
		{
			// since we had no exact match, check for partial matches
			if (partialIndex != -1)
			{
				YD.addClass(links[partialIndex], "navCurrentPage navCurrentPagePartial");
				YD.addClass(links[partialIndex].parentNode, "navCurrentPageParent navCurrentPageParentPartial");
			}
			// if no exact match and no partial matches 
			// and we did have a galleries link 
			// and we're on a gallery page or a category or subcategory page
			// then, mark the galleries link
			else if ((galleriesIndex != -1) && (YD.hasClass(document.body, "galleryPage") || YD.hasClass(document.body, "category")))
			{
				YD.addClass(links[galleriesIndex], "navCurrentPage navCurrentPageGallery");
				YD.addClass(links[galleriesIndex].parentNode, "navCurrentPageParent navCurrentPageParentGallery");
			}
		}
	}
});



//--------------------------------------------------------------------------------------------------
// Install Email Contact Link (for pro accounts only)
// 
// Version 1.1
//--------------------------------------------------------------------------------------------------

YE.onDOMReady(InitMyContactButton);

function InitMyContactButton()
{
	InitMyContactButton.extraContactUsButtons = new Array;
	var contacts = Sizzle(".customContactButton");
	// look in Easy Customizer navbar too
	var navEntries = Sizzle("#customNav li a");
	for (var j = 0; j < navEntries.length; j++)
	{
		var str = navEntries[j].href;
		if (str.search(/\/customcontact/i) != -1)
		{
			navEntries[j].onclick = function () {return false;};
			contacts.push(navEntries[j]);
			break;
		}
	}
	var nick, o, matches;
	
	// see if the nickname is already defined in the page
	try {
		nick = NickName || SM.hostConfig.nickname ;	// get standard nickname
	} catch (e) {}
	
	// see if the nickname is in the URL
	if (!nick)
	{
		try {
			matches = window.location.host.match(/^(www.)?(.*)\.smugmug\.com$/i);
			nick = matches[2];
		} catch (e) {}
	}
	
	// see if we can get the nickname from one of the built-in contact links on the page
	if (!nick)
	{
		// hack - NickName doesn't exist on some pages so we try to pull it from the password prompt or the standard footer
		o = YD.get("contactUsButtonWrapper") || YD.get("contactUsButtonWrapperFooter");
		matches = o.onmouseover.toString().match(/ownerNickName:\s*'([^']+)'/)
		if (matches && matches.length > 1)
		{
			nick = matches[1];
		}
	}
	for (var i = 0; i < contacts.length; i++)
	{
		InitMyContactButton.extraContactUsButtons.push(new SM.buttons.contactUs
		(
			contacts[i].parentNode,
			contacts[i],
			{
				buttonText: 'Contact', 
				panelTitle: 'Contact the gallery owner', 
				currentPage: window.location.toString(), 
				currentPageOverride: '', 
				referringPage: '', 
				pro: '', 
				modal: 'true', 
				popupName: 'contactOwner', 
				uniqueID: 'myContactPanel' + InitMyContactButton.extraContactUsButtons.length, 
				ownerNickName: nick, 
				width: '755px', 
				albumID: '', 
				additionalParams: 'FooterContact'
			}
		));
	}
}

Hello John,
I have a question concerning the code you wrote and I put onto my site. It was working yesterday, but today I made a few changes to my site via easy customizer and now the "Yellow" highlight has stopped working. The other features of your script are working (highlight and italics), just the color stopped. I assume I did something in easy customizer that is overriding the script. I was in the navigation bar builder area and played around with the font color. I am thinking I did something to change a default, but not sure.

Any ideas?
Thanks,
Harold
photos.bhagavideo.com

Originally Posted by BhagaVideo Hello John, I have a question concerning the code you wrote and I put onto my site. It was working yesterday, but today I made a few changes to my site via easy customizer and now the "Yellow" highlight has stopped working. The other features of your script are working (highlight and italics), just the color stopped. I assume I did something in easy customizer that is overriding the script. I was in the navigation bar builder area and played around with the font color. I am thinking I did something to change a default, but not sure. Any ideas? Thanks, Harold photos.bhagavideo.com

The EZ Customizer color settings are trying to take over from anything else that you've specified (I despise how EZ Customizer works in this regard). Anyway, you can get your custom color back by changing the navbar highlight CSS to this:

/* highlight individual menu items when their page is current */
#customNav li a.navCurrentPage {
    font-style: italic !important; 
    font-weight: bold !important; 
    color: #FFFF00 !important;
}

[QUOTE=jfriend;1784067]The EZ Customizer color settings are trying to take over from anything else that you've specified (I despise how EZ Customizer works in this regard). Anyway, you can get your custom color back by changing the navbar highlight CSS to this:

Thanks John, works perfect. Thanks for the quick response as well. Very much appreciated.

Originally Posted by jfriend Here's a quick script that lets you identify which link in your navbar is the link of the current page. For example, when I'm on the portfolio page in my site, my navbar looks like this: When I'm on the homepage, it looks like this: Anytime the current page URL matches one of the URLs in your navbar, that link in the navbar will show differently. You control the look with your own CSS. This customization can be used with either a custom generated navbar or a navbar done in the Easy Customizer. If no link in the navbar matches the URL of the current page exactly, the code will also look for partial matches. So, if you have a link to http://username.smugmug.com/portfolio, then that link will also highlight anytime you are in a subcategory of that category or any gallery in that category so it would match http://username.smugmug.com/portfolio/landscapes. There is also special handling for http://username.smugmug.com/galleries. If no other link in the navbar matches the current page or a partial match and you have a link to your /galleries page in the navbar, then any gallery page will also cause the galleries page link to highlight. To make this customization work, you follow these steps: Step 1: Insert the code Copy this code to your bottom javascript: //------------------------------------------------------------------------------------------ // Highlight the link in your navbar that matches the current page. // // Revision 1.1 // See http://www.dgrin.com/showthread.php?t=141678 for documentation. //------------------------------------------------------------------------------------------ YE.onContentReady("customNavContainer", function () { function AddTrailingSlash(str) { if (str.search(/\/$/) == -1) { str = str + "/"; } return(str); } function StripDomainAndHash(oldStr) { var str = oldStr.replace(/#.*$/, ""); // get rid of hash value str = AddTrailingSlash(str); // make sure it always ends in a slash str = str.replace(/^https?:\/\/[^\/]*/, ""); // get rid of domain on the front return(str); } var links = this.getElementsByTagName("a"); if (links && (links.length > 0)) { var pageURL = StripDomainAndHash(window.location.href); var foundExactMatch = false; var partialIndex = -1; // index of best partial match var partialLength = 0; // length of the best partial match var galleriesIndex = -1; // index of the /galleries link // check each link for an href match with our current page for (var i = 0; i < links.length; i++) { var testLink = StripDomainAndHash(links[i].href); // relative link will be turned into absolute link here if (testLink == pageURL) { YD.addClass(links[i], "navCurrentPage navCurrentPageExact"); YD.addClass(links[i].parentNode, "navCurrentPageParent navCurrentPageParentExact"); foundExactMatch = true; break; } // if testLink is not the top level (don't want to do partial matches for top level) else if (testLink != "/") { // if the testLink is contained within the pageURL // (e.g. the current page link is longer than the navbar link and starts with it), // remember it as a partial match if (pageURL.indexOf(testLink) == 0) { // save the longest partial match (assuming it to be the most specific) if (testLink.length > partialLength) { partialIndex = i; partialLength = testLink.length; } } else if (testLink == "/galleries/") { galleriesIndex = i; } } } if (!foundExactMatch) { // since we had no exact match, check for partial matches if (partialIndex != -1) { YD.addClass(links[partialIndex], "navCurrentPage navCurrentPagePartial"); YD.addClass(links[partialIndex].parentNode, "navCurrentPageParent navCurrentPageParentPartial"); } // if no exact match and no partial matches // and we did have a galleries link // and we're on a gallery page or a category or subcategory page // then, mark the galleries link else if ((galleriesIndex != -1) && (YD.hasClass(document.body, "galleryPage") || YD.hasClass(document.body, "category"))) { YD.addClass(links[galleriesIndex], "navCurrentPage navCurrentPageGallery"); YD.addClass(links[galleriesIndex].parentNode, "navCurrentPageParent navCurrentPageParentGallery"); } } } }); Step 2: Identify your navbar If you used the Easy Customizer to create your navbar, then you can skip this step as the code is already set up for you. If you made your own navbar in your custom header, then you need to tell the code what the CSS ID is of your navbar. In the first line of the code is this line: YE.onContentReady("customNavContainer", function () You need to change the part in red to be the ID of your own navbar. If you followed the standard navbar tutorial, then change that value to navcontainer like this: YE.onContentReady("navcontainer", function () If you used any other CSS id, then put it in instead. If you are using a drop-down menu that only has a class="menu" on either the <div> tag or the <ul> tag, then add an id to that same tag. If it was: <ul class="menu"> change it to: <ul class="menu" id="navcontainer"> And, then change that first line of the code to specify navcontainer instead of customNavContainer. Step 3: Format the Current Link Now, you need to add CSS to decide how you want the navbar item that represents the current page to look. Here it totally depends upon what you've done already for your formatting and how you want the current page link to look. In the images above, I decided to turn off the background and put a highlighted box around it. The code adds a class name "currentPage" to the link that matches the current page. And, it adds a class name "currentPageParent" to the parent object of the current link. The current link will be the <a> tag. The parent of the current link will usually be an <li> tag in a standard navbar. To change the look of the current link, you use CSS that triggers off one of these two class names, depending upon how you want the CSS to work. I used this CSS in my site-wide-customization (CSS box) to accomplish that: /* highlight individual menu items when their page is current */ #navcontainer .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;} This says that: My navbar is #navcontainer I'm triggering the CSS rule off .navCurrnetPageParent (the <li> tag in my navbar) I'm going to turn off the background and add a solid yellow border. Remember, if you are using a navbar from EZ customizer, then you have to use that ID instead of navcontainer like this: /* highlight individual menu items when their page is current */ #customNav .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;} Here are some other styles I could have done: #navcontainer .navCurrentPage {color: #CCCC00 !important;} /* change current link text to yellow color */ #navcontainer .navCurrentPage {text-decoration: underline !important;} /* show the current link as underlined */ #navcontainer .navCurrentPage {font-weight: bold !important;} /* show the current link as bold */ #navcontainer .navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;} /* show the current link as bold, italic and yellow */ Remember, you use .navCurrentPage as the CSS classname if you want to change the <a> tag that contains the link text. You use .navCurrentPageParent if you want to change a CSS property on the parent tag which is usually the <li> tag. Normally, the .navCurrentPage is sufficient, but there are some types of formatting where you may want to operate on the <li> tag instead. What you do here is totally up to you. If you have questions about your specific navbar or don't know how to express in CSS what you want to accomplish, then install the code (steps 1 and 2) and just post a reply to this thread describing what you are trying to accomplish and including a link to your site. P.S. For those who know CSS really well, it is possible to show the current link entirely with CSS. I wrote this script because this script works with an Easy Customizer Navbar (something you don't have enough control over to use CSS only) and because it's easier for a non-expert to install than the CSS only way. P.P.S. The classes .navCurrentPage and .navCurrentPageParent are added to the current navbar link that matches any of the three ways that they can match (via exact URL match, via partial URL match or because you have a /galleries link and you're in a category, sub-category or gallery page). If, for any reason, you wanted to not show partial matches or /galleries matches or wanted to show them differently, there are also other classes added that you can trigger off instead. Here's what gets added for each type of match: All matches: .navCurrentPage and .navCurrentPageParent Exact Match only: .navCurrentPageExact and .navCurrentPageParentExact Partial Match only: .navCurrentPagePartial and .navCurrentPageParentPartial /galleries Match only: .navCurrentPageGallery and .navCurrentPageParentGallery If you wanted to show these different kinds of matches differently, you could set your CSS rules by these classes instead of .navCurrentPage and .navCurrentPageParent. This is entirely optional. Setting your CSS rules to use .navCurrentPage or .navCurrentPageParent will show all three kinds of matches. Triggering CSS rules off any of these other classes will show matches only in these other circumstances. Remember that a partial match is only reported when an exact match did not exist. And, a /galleries match is only reported when neither of the other two already existed. If multiple partial matches exist, then it will pick the one with the longer URL.

I inserted the code in step 1, skipped step 2 because I used Easy Customizer to set up my navbar, and then got completely lost at step 3. I want my nav words to change color (to the rollover color set in EZ...not sure how to know what color that is) when I'm on that current page.

Here is an example of what I want to happen (different color)
http://www.rachelkabukala.com/index2.php#/home/

Here is a page in my site:
http://tnye.smugmug.com/Portfolio/fl...922791&k=H8CET

Thanks!

I am trying to do the bold, italic, and yellow but it isn't working. Can you help me. www.jeremycrawfordphotography.smugmug.com

Originally Posted by JCphotography I am trying to do the bold, italic, and yellow but it isn't working. Can you help me. www.jeremycrawfordphotography.smugmug.com

Your CSS is incorrect:

Change this:

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;}

to this:

/* highlight individual menu items when their page is current */
#customNav .navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;}

I am having some issues with the highlighting of the current page. Seems to work just fine for "Home" and "Family" but not for the others... Any help would be greatly appreciated:

http://www.scottramsdenphotography.com

Originally Posted by jfriend Your CSS is incorrect: Change this: /* highlight individual menu items when their page is current */ #navcontainer .navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;} to this: /* highlight individual menu items when their page is current */ #customNav .navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;}

It is coming up brownish, is there anyway I can get it a green color?

Originally Posted by JCphotography It is coming up brownish, is there anyway I can get it a green color?

The color isn't getting applied because it's getting overridden by other CSS rules. I don't think you really want it to be the yellow you have specified, but you can make your CSS color active by adding more specificity to your CSS like this:

/* highlight individual menu items when their page is current */
#customNav li a.navCurrentPage {font-style: italic !important; font-weight: bold !important; color: #FFFF00 !important;}

Looks like the one labeled "My Reef" on mine still isn't working properly. If I go into one of the galleries inside "My Reef" it then gets highlighted... Hmmm

Originally Posted by Scottington Looks like the one labeled "My Reef" on mine still isn't working properly. If I go into one of the galleries inside "My Reef" it then gets highlighted... Hmmm

Seems to be working here now - perhaps you fixed it. Usually what you observed is when the URL in the HTML isn't exactly what is displayed when you go there. Those two have to match.

Hi JFriend or anyone Else who maybe able to help,

I'm using Allens dropdown thread and so changed the line <div class="menu" id="navcontainer"> for the code to find the link and pasted the correct info but, nothing comes up, any ideas?

Originally Posted by GrahamGarner Hi JFriend or anyone Else who maybe able to help, I'm using Allens dropdown thread and so changed the line <div class="menu" id="navcontainer"> for the code to find the link and pasted the correct info but, nothing comes up, any ideas?

This is case sensitive so case must match. You have:

id="navcontainer"

and

YE.onContentReady("NavContainer", function ()

You must use the same caps for navcontainer in both places.

Originally Posted by jfriend This is case sensitive so case must match. You have: id="navcontainer" and YE.onContentReady("NavContainer", function () You must use the same caps for navcontainer in both places.

Hi JFriend

Thank you yet again for getting back to me. I've add the details in the above quote to no avail.
Any ideas will be gratefully received.

Many thanks

Originally Posted by GrahamGarner Hi JFriend Thank you yet again for getting back to me. I've add the details in the above quote to no avail. Any ideas will be gratefully received. Many thanks

The code is working now, but your CSS to format it is not. Your CSS has to use the same NavContainer identifier too. All three have to match.