jimmynotjim/scrollnav

Feature Request: Alternative header text via data attribute

Opened this issue · 7 comments

rhewitt22 commented

Hey, love the plugin!

Little feature request:

I have several headers that are long-winded. If the plugin provided an option to use a specified data attribute on the header element as an alternative to the text contained within the header element I would be a super happy camper.

For instance:

<h2 data-header="Shorter">A Kinda Long And Really Descriptive Header</h2>

Instantiate plugin:

$('.some-element').scrollNav({
    textAttribute: 'data-header'
});

The name of the option could admittedly use some work. headerText? headerAttribute?

hadronix commented

+1

jimmynotjim commented

I've run across this myself. I've been trying to hold back adding new options because it's honestly already option heavy, but this one seems worthy. Not sure when I'll have the time to try it myself, but if you want PRs are always welcome.

jimmynotjim commented

The more I think on this the more I'm starting to question if it's a good idea UX wise. If I click a link with the text "Dogs" and it leads to a section heading "All about the world of dogs and the owners that love them" is that jarring? There was no mention of owners, will the user be confused why it's different? What if it's something completely unrelated, but the developer or content owner set it as link bait to get the user to scroll the page? Is there an expectation that anyone setting a custom link text is doing their due diligence to ensure the end user won't be confused and therefore out of our hands? I'm going to think on this some more but I'm definitely open to a discussion.

jimmynotjim commented

I know this is really old, and everyone has probably lost interest, but I had an idea tonight as I was working on v3. What if instead of adding more conditions and complexity, we included an option to pass your own nav elem to scrollNav and then scrollNav's only roll was to manage the active states? This would allow for a static fallback in case the JS failed and for users to create a nav that suits them best. Any thoughts?

hadronix commented

i think that is a really great idea!

jimmynotjim commented

Awesome. I'm thinking this will be a minor release pushed out after v3 is published just to try and keep from holding that up. If anyone is interested in lending a hand I'd be more than happy to have it.

justlevine commented

In the interim, im doing this in v3 by using the following snippet:

renameNavTitle();

function renameNavTitle() {
	const navItems = document.querySelectorAll( '.scroll-nav li' );
	navItems.forEach( ( navItem ) => {
		const navSection = navItem.dataset.snSection;
		const navTitle = document.getElementById( navSection );
		const newTitle = navTitle.dataset.snNavTitle;

		if ( !! newTitle ) {
			navItem.children[ 0 ].innerHTML = newTitle;
		}
	} );
}

Then <h2 data-sn-nav-title="Section Title">This is my Section Title</h2> will be displayed in scrollnav as Section Title.

  • ❤️2