"skip to"-link | MODX Community Forums

161 Posts

Mazso Reply #1, 20 years, 1 month ago

For a website I need "skip-to"-links at the top of every page for screen readers.

The code in the looks like this:

<ul class="hide">
<li><a href="#start">skip to content</a></li>
<li><a href="#navi">skip to navigation</a></li>
</ul>

Simple enough. But as a newbie to MODx I was surprised that MODx is rendering the # as something like "link to home". So clicking this "skip"-links will always call the homepage.

Sure there is a simple trick to avoid this. But browsing the forums I couldn’t make out.

Many thanks for an answer.

Mazso

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 20 years, 1 month ago

That’s because every page is really "index.php?id=xx" where the xx is the document ID. So a # will indeed end up at the first page, since you’re basically linking to the default index.php.

I think you can use "a href="[~id~]#whatever" to get this to work. I’ve never tried it, so can’t make any guarantees.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,193 Posts

ScottyDelicious Reply #3, 20 years, 1 month ago

Quote from: sottwell at Sep 24, 2006, 04:57 AM

That’s because every page is really "index.php?id=xx" where the xx is the document ID. So a # will indeed end up at the first page, since you’re basically linking to the default index.php.

I think you can use "a href="[~id~]#whatever" to get this to work. I’ve never tried it, so can’t make any guarantees.

I have been trying to get this to work on my site in my ditto template, making the replix comment count a link to the comments on the article page.

<div class="dittoSummary">
	<div class="dittoHead">
    <h3><a href="[~[+id+]~]">[+title+]</a></h3>
    [color=limegreen]<div class="commentCount">[color=red]<a href="[~[+id+]~]#pageCommens">[/color][[Replix? &mode=`comments.count` &docid=`[+id+]`]] comments on this story.</a></div>[/color]
	</div>
   <div class="dittoContent">
		<p>[+summary+] [+link+]</p>
	</div>
   <div class="dittoAuthor"><p>by <strong>[+author+]</strong> on [+date+]</p></div>
</div>

right above the comments section, I have an anchor tag with an id of pageComments, but the link just navigates to the top of the page, same as simply using [~[+id+]~]. maybe this should be logged into feature requests.

-sD-

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages

4,213 Posts

doze Reply #4, 20 years, 1 month ago

@Scotty,
Did you notice that you have a typo in your Ditto template (#pageCommens)

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

161 Posts

Mazso Reply #5, 20 years, 1 month ago

I’ve tried the id-idea (thanks to sottwell and ScottyDelicious) - unfortunatly it seems not to work. As far as I understood MODx won’t interpret the id-tag when you are on the page with even this id you want to call. The id-tag just works on any other page. So you can use it to link from your homepage to your newest blog-entry by something like this:

<h2><a href="[~[+id+]~]">[*longtitle*]</a></2>

On the page with the single blog-entry id does absolutly nothing. sad

At least at my test-page.

Maybe the best idea would for skip links and so on would be a feature to turn of of MODx’s rendering instead of a new and special MODx-Solution? What do you think? Or is there such an feature already - a tag or something like this - I’ve overlooked?

Mazso

1,193 Posts

ScottyDelicious Reply #6, 20 years, 1 month ago

Quote from: doze at Sep 24, 2006, 08:53 AM

@Scotty,
Did you notice that you have a typo in your Ditto template (#pageCommens)

HA!
Doze... remind me to fire my editor and proofreading team LOL laugh

ok, the technique described above works.

<a href="[~[+id+]~]#anchorname">link to anchor</a>

thanks Doze. the "(x) comments on this story" link in my ditto call at http://www.scottydelicious.com works great now

later
-sD-

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages

7,075 Posts

davidm Reply #7, 20 years, 1 month ago

Hi Maszo,
it had already been covered there back in january :
http://modxcms.com/forums/index.php/topic,2455.0.html

and it works, I have several website running this

Quote from: Mazso at Sep 24, 2006, 09:02 AM

I’ve tried the id-idea (thanks to sottwell and ScottyDelicious) - unfortunatly it seems not to work.

Are you running Friendly URLs ?

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

161 Posts

Mazso Reply #8, 20 years, 1 month ago

Quote from: davidm at Sep 24, 2006, 09:38 AM

Hi Maszo,
it had already been covered there back in january :
http://modxcms.com/forums/index.php/topic,2455.0.html

and it works, I have several website running this

Quote from: Mazso at Sep 24, 2006, 09:02 AM
I’ve tried the id-idea (thanks to sottwell and ScottyDelicious) - unfortunatly it seems not to work.

Are you running Friendly URLs ?

Yeah! It work’s! Thank you, davidm. The trick is not to use

[~[+id+]~]

but

[~[*id*]~]

And yes, I’m running clean urls.

Nevertehless i will ask for a feature to turn of MODx-rendering on purpose. Sometimes the MODx is a little bit too eagerly wink

Mazso

1,193 Posts

ScottyDelicious Reply #9, 20 years, 1 month ago

I think I have a fix for you. this assumes you are using FURLs:

1. create a new snippet called pageAnchor (or whatever)
2. paste the following code into it:

###########################################
# pageAnchor snippet for MODx by scotty Delicious
###########################################

$thisID = $modx->getDocumentIdentifier('alias');
$thisAnchor = (isset($anchor)) ? $anchor : "anchor";
$thisLink = (isset($linkText)) ? $linkText : "Click Here";
return '<a href="[(site_url)]'.$thisID.'#'.$thisAnchor.'">'.$thisLink.'</a>';

3. where you want to put a link on your page with a #anchor, call the snippet like this:

[!pageAnchor? &anchor=`anchorname` & linkText=`text (or <img>tag) to display for link`!]

let me know if this works for you. it works on my site. I have both FURLs and FAPs enabled.

later

-sD-

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages

1,193 Posts

ScottyDelicious Reply #10, 20 years, 1 month ago

oops... it was solved while i was coding

oh well?

-sD-

Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
All of the above... in no specific order.

I send pointless little messages