Shortcuts on a web page

rougetaureau

Hi.
I have to regularly create web pages with many galleries and I'd like to know if there is a way to create shortcuts that navigate through this page. A lateral bar would be great (like in so many blogs). I guess an horizontal bar at the top would be OK too.

denisegoldberg

You can create a navigation menu for your site. It can be a simple menu or it can use drop-down menu items.

See the help page at https://www.smugmughelp.com/en/articles/382-create-a-navigation-menu

rougetaureau

Yes I know but this is not the same. I am talking about navigating in a long page.

Jtring

Unfortunately not. I've tried.

There's no SmugMug tool to do so.

It would take JavaScript to create a jump to the next element of a given type (say, the next horizontal bar). SmugMug doesn't enable users to insert JavaScript.

In theory, you ought to be able to insert HTML blocks that define named positions on the page (e.g., bar1, bar2, bar3, ...) just above or below your horizontal bars and then use a navigation menu like Denise suggested with an entries that jump to those named places. I tried at one time to do something simpler: create a "Jump to End" button, sort of like SmugMug's "Back to Top" button. More specifically the approach would be to insert an HTML block with code something like <a name="bar2"></a> at each position you want to jump to, and then build a button or menu item that links to the address of that position, given by the full (absolute) URL of the page with #bar2 (or whatever) appended at the end. I don't think relative URLs work here.

Sadly, that mostly doesn't work, but it fails for an interesting reason. (I think the following is what's going on, but perhaps someone at SmugMug can confirm or deny.) To get the fast page response, even on relatively slow connections, it looks like SmugMug does not load a whole page when you open it. They just load part, and as you scroll down, they add more in the background. It's actually a very slick trick for providing a good user experience, but it has the side effect that you can't execute a jump on a given page to what's not already loaded. The jump just ends at wherever the current partial page load has ended. If your horizontal line jump destinations are closely enough spaced, you might be able get short-distance jumps to work ... but not the long ones.

Allen

I put the "jump to" nav on this page years ago. It allows you jump back and forth anywhere on the page.

https://mobirds.smugmug.com/Pages/Species-Alpha-Codes/n-X8kKX9

<div class="bird"><a name="pjump"></a>
       <div class="code">PAAN</div>&nbsp;&nbsp;
       <div class="birdName">Pacific Antwren</div>
</div>

Jtring

Nice example Allen, and one that led me to do a bit more testing. I observe that, in general, pages with big text blocks or HTML blocks full of text DO load all at once. The jump approach works, even for really big pages with lots of text. I successfully built some jumps on my big CSS listing page: https://jtringl.smugmug.com/Misc/Info/CSS. I also note you (Allen) used relative URLs in the jump links you put inside a custom-written HTML block. So that's the way to do it! Relative URLs don't work inside a SmugMug button or menu since SmugMug built those widgets to expect an absolute URL. (Later added note: on the CSS listing page, I've stuck to using a SmugMug menu and absolute URLs to list the jumps.)

I do stand by my earlier statement, though, that image-rich pages may not be loaded all at once, and the jumps can fail if the page is large enough. But if the original poster is dealing with a smaller or text-only page, it's clear one can insert HTML blocks with tags and some sort of jump code, either via a buttons, a menu, or custom code, and get jumps to those pre-specified positions. I'm not sure if that would meet the poster's desires, or whether the OP is interested in a solution that requires writing HTML, but that's what's do-able.

So thank you for posting the example to look at (mainly using web developer tools to inspect the underlying code). Having seen how you did it, and having seen it work on my own little test, I may create have created a collection of jump links for my much-too-big CSS page.

Allen

I use relative links on my whole site including all the menus. So /nickname or /smugmug both work and keep the original entering link.
Someday I might lose my Godaddy photosbyat name and be back to only "smugmug".