Anchor ID containing multiple words

  • Resolved Guido

    (@guido07111975)


    8 years, 9 months ago

    Hi,

    Nice plugin!

    I had a problem with anchor IDs containing multiple words; the js scrolling didn’t work.

    When I inspected item in Firefox I noticed this:

    
Error: Syntax error, unrecognized expression: #another%20article

    When I removed the witespace between both words, it worked again.

    Are you able to fix this? So that whitespace is allowed or auto-changed into a hyphen for example?

    Guido

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Bego Mario Garde

    (@pixolin)

    8 years, 9 months ago

    Hey Guido,

    thank you for the feedback. I must admit, I never thought of anchors consisting of more than one expression or containing spaces, but it certainly would be an idea to sanitize the input and convert spaces e.g. into a hyphen. I certainly took that topic on my todo list.

    On the other hand, the Gutenberg project might be sort of a game changer here. If the new editor becomes part of core, plugins such as Scroll to Anchor likely will become obsolete, as Gutenberg doesn’t provide a formatting toolbar. Time will tell…

    Best regards,
    Bego

    Thread Starter Guido

    (@guido07111975)

    8 years, 9 months ago

    Gutenberg.. until now my only response is: yikes! 😉 But indeed, this will change a lot, regarding the current text editor.

    Meanwhile, you might consider to update your readme with this whitespace info to avoid new threads or (bad) reviews. And update stable tag, I hereby confirm it still works with WP 4.8.

    Guido

    Plugin Author Bego Mario Garde

    (@pixolin)

    8 years, 9 months ago

    Hey Guido,

    working off my to do list, I’m trying to find the best solution on this issue.

    My first thought was to sanitize the input in the TinyMCE modal, automatically replacing all spaces in anchor names with hyphens. I rejected that idea as the hyphens also would show, if you set Scroll to Anchor to display anchor names. That’s probably not the desired result.

    Instead I decided to replace the space in the anchor id when rendering the shortcode. This way

    modal TinyMCE

    will be inserted in the back end as

    [sta_anchor id="Summary Chapter Two"]

    and (depending on your settings) becomes rendered in the front end 

    <span id="summary-chapter-two" class="sta-anchor " aria-hidden="true">Anchor:
 Summary Chapter Two</span>

    The only catch I see here is, that if you add a link to the new anchor, you need to use lower space characters and replace spaces with hyphens, e.g.

    <a href="#summary-chapter-one">Summary Chapter One</a>.

    I’ve pushed a newer version to my Gihtub repository and you can download it here. I would love to get some feedback. What do you think?

    Thread Starter Guido

    (@guido07111975)

    8 years, 9 months ago

    Hi Bego,

    I have installed it and played around with it.. to be honest, the different use between the anchor itself and the link might be confusing for users. It should be documented in your readme for sure.

    It’s not possible to use a PHP whitespace instead of a hyphen? &nbsp;
    But then the link to the anchor must accept &nbsp; too, so you must change the escaping to make this work. Might be impossible because you’re hooking into the_content() am I right?

    By the way, with debug on this notice is displayed:
    Notice: Use of undefined constant id – assumed ‘id’ in … sta-shortcode.php on line 25

    I’ve solved it by changing id into ‘id’. Seems everything still works after this change.

    Guido

    Plugin Author Bego Mario Garde

    (@pixolin)

    8 years, 9 months ago

    Hey Guido,

    thank you for your fast reply.

    I’m afraid, adding non-breaking spaces (&nbsp;) will only confuse users even more. Instead I added another solution, which you now can download here.

    If you provide an anchor name containing spaces or capitals (e.g. “Summary Chapter Two”), the anchor name gets sanitized and you see a message with the altered anchor name:

    modal shows correct string

    The shortcode then e.g. looks like

    [sta_anchor id="summary-chapter-two" unsan="Summary Chapter Two"]

    providing the id summary-chapter-two as link target. The link would accordingly be <a href="#summary-chapter-two">Summary Chapter Two</a>.

    In case you set Scroll to Anchor to display anchors in the front end, the unsanitized name “Anchor: Summary Chapter Two” will be used (provided by the new shortcode attribute unsan), which seems to look nicer.

    Thank you for pointing out the Notice about an undefined constant, it’s fixed now.

    It would be lovely, if you could once more give me some feedback.

    Best regards, Bego

    Thread Starter Guido

    (@guido07111975)

    8 years, 9 months ago

    Hi Bego,

    I must say this does work and also looks fine.
    Only 1 minor thing, if a user changes the anchor afterwards from 1 into multiple words he/she will not be notified. So you could display another modal when anchor contains a single word and notify user not to change the same anchor afterwards into multiple words. Or add some info about this in your readme file.

    About the non-breaking spaces, I thought it might work if it’s somehow possible to add them to the link in frontend:

    
<a href="#summary&nbsp;chapter&nbsp;two">Summary Chapter Two</a>

    You’ve already succeeded in adding the non-breaking spaces to the id of the anchor:

    
<span id="summary&nbsp;chapter&nbsp;two" class="sta-anchor ">Anchor: Summary Chapter Two&nbsp;</span>

    User will not be confused because the non-breaking spaces are only visible in the sourcecode of the link and the sourcecode of the anchor. But the link does not look nice that way, I must say..

    But I prefer your solution!

    Guido

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Anchor ID containing multiple words’ is closed to new replies.