Introduce yourself here! In order to avoid spam, new users must first comment on the discussion in the 'Introductions' before they become 'full members'
Linking to a point of a long page
  • I have a problem again. I would like to create links pointing to a given place of an entry or static page. For example, look at this entry. Let’s suppose I would like to quote the italicized paragraph starting with “She looked at him”, e.g., in a Facebook conversation. Of course I can copy and paste the text, but a link would bring visitors to the blog, and would allow them to read the text before and after the quotation.
    But I don’t want to modify the source, adding a named anchor, just for the sake of a disposable link. And I would like it if users could create such links, too. Something like …x=entry:entry130802-034552&position=1234, and when the link is opened, the browser would jump to the given position. The easier part is how to handle this URL parameter; the harder question is how to generate it.
    Any idea?

  • Hi, this is done in plain HTML.
    You should use anchors.

    They are the part beyond the hash in the URL.
    For example you insert this code:

    <a id="mydialogue"></a>

    Then you use this url mypageurl.php?getparam=myentry&amp;comments=1#mydialogue.

    That's all :-)

  • Sorry, I was believing the part

    But I don’t want to modify the source, adding a named anchor, just for the sake of a disposable link. And I would like it if users could create such links, too.

    is easy to understand.

  • Sorry, I was believing the part

    But I don’t want to modify the source, adding a named anchor, just for the sake of a disposable link. And I would like it if users could create such links, too.

    is easy to understand.


    Sorry, I was thinking that I could help you quickly and when I read your post I missed this part.

    However you must use named anchors if you want to be accessible.
    Anchors are the only way to do achieve your aim in a cross browser, light and script-independent way.

    Otherwise you can use javascript and this isn't a Flatpress question.

    Javascript is needed in any case if you want to create a link to a certain element, or you should use other tricks that make the page heavy.

    I would advise you to check out (double) click events.
    You can get the target of the click(s), at least with the precision of the containing element.

    I would also recomend you not to use absolute pixel values because people have different settings on their devices.
  • he can also add id="some-autogenerated-id" to each <p> in his text. This might be achieved by using a modified wpautop() function. As for links, maybe some javascript trickery may come in handy.
  • id="some-autogenerated-id"… well, it’s not a bad idea, NoWhereMan, just it won’t let us to link into the middle of a long paragraph. I’m writing long paragraphs frequently…
    Now I’m thinking, following Piero’s hints, about a way to turn an #position parameter into a named anchor. So, there would be only one named anchor in the document, at the position called in the URL, but added automagically by Flatpress. Maybe the position wouldn’t be a number in this case, but a substring of the text.
  • Well, what I wanted won’t work, sorry for the alliteration. I thought about an URL like http://lattilad.org/f/?page=medvebocsok#Lindsay%20Lohan – let’s take it, cut the part after the # and add a named anchor at its first occurrence in the text. But PHP doesn’t receive this data (I read it here). Then I thought let’s do it in the form http://lattilad.org/f/?page=medvebocsok&jump=Lindsay%20Lohan – but in this case I’ll get the data and probably can add the anchor, but what will force the browser to jump to it?
  • I think you can implement this using JavaScript. Otherwise you might do something like http://lattilad.org/f/?page=medvebocsok&jump=Lindsay%20Lohan#goto and have PHP add the id="goto" somewhere in the text (wrapping the words in a <span id="goto"> </span> should work
  • I’m very weak in Javascript, so I don’t dare to experiment with it at the moment. As for the other version, yes, it may work this way, but building such a link is a lot of typing for the user…
  • Hi, the js-hash part is very easy.
    It's a recursive algorithm.

    function searchInChildren(index, el) {
    if($(el).children().length != 0) {
    return $(el).children().each(searchInChildren);
    } else if($(el).text().indexOf(location.hash.substr(1)) == -1) {
    // Text not found, return true to continue recursion
    return true;
    } else {
    off = $(el).offset();
    window.scrollTo(off.left, off.top);

    // You return false to stop the recursion
    return false;
    }
    }
    This is made using jQuery... You have to call when the document is ready, i.e.

    $(document).ready(function() {
    searchInChildren(0, $('.entry'));
    });

    You should improve it a bit, but the most is done.
  • Oh. This is very nice, Piero, thank you. I’m trying to understand it. It’s looking for something in the children of $('.entry'), what must be the text of the entry, I suppose. I don’t understand what’s happening with hash and recursion, but at the end, if the text is found, the window is scrolled to it. Right.
    Just I don’t see the part where or how does it receive the text to search for. What should I do to make it work?
  • Hi,

    .entry is a CSS selector for elements which has class entry.
    $(element-selector) is used to call jQuery.
    I used .entry (I think most of FP themes use it), however change it with the class of your theme.

    The algorithm is recursive because it calls itself for each element that has some children (elements).
    When there is no children this it searches in the text of the element.

    This is necessary to have the most accurate position, because the window is scrolled to the beginning of the element. So if it searched only in the entry "main" div, it would have scrolled the window to the beginning of the entry, which is not what you desire.

    $(el).text() returns the text content of an elemen and indexOf is like PHP strpos. -1 means that the string was not found.

    The hash content is provided by the location object:
    location.hash.substr(1)
    Substr is needed because '#' is the first character of this property.

    This is done in Javascript and using jQuery.
    I could have used DOM instead, but I didn't want to look for innerText compatibility.

    Warning: this is not accessible, as it uses javascript.
    You could use it without caring or, as I wrote before, using the only accessible way, that is anchors, and maybe, as NWM wrote, you could create them dynamically with PHP.

    I give you some advice: you can't use str_replace($string, '&lt;a id="jumper"&gt;' . $mystring . '&lt;/a&gt;', $text); (the forum software is escaping "less than" and "great than" symbols...) because mystring could be also in an element attribute, and this would break HTML.
    You should use preg_replace, instead, and a low priority (priority parameter of add_filter higher than BBCode one for sure).

    Another issue is special characters: you have to chose if you want to escape the string before searching it.

    Regards,
    Piero
  • Well, Piero… thank you for everything, but I’m afraid I’m to silly to understand it. I’ve got no idea how to use it. I believe I’m getting to lose all my programming abilities.
Start a New Discussion

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion