linking to another page's anchor

Discussion in 'Javascript' started by jay K., Aug 10, 2011.

  1. jay K.

    jay K. Guest

    Hello

    I'd like to build a link to another page's anchor

    There is a really good example on this website:
    http://www.boalingua.ch/sprachaufen.../ace-navitas-manly/sprachschule-in-sydney.htm

    Please, click on the lime-green link right next to the piggybank image
    (in gray), roughly in the mid-right section of the page (Under
    'Sonderangebot')

    The click will take you to another page, width the anchor already
    highlighted (it should be '7 Australien' )

    If possible I'd like to use javascript or jquery, without modifying
    the url (only if possible)

    Thanks

    Regards,

    Jay K
     
    jay K., Aug 10, 2011
    #1
    1. Advertisements

  2. You just append a '#' character fragment identifier to the URL. But it
    seems that you want more.
    I did not study the code in detail, but it seems that server-side code
    is involved: the query part (after '?') of the URL is processed by the
    server and used to control what content gets sent to the browser. Doing
    such things server-side is generally more robust than doing them
    client-side.
    It's possible and fairly easy to do such things in client-side
    JavaScript, with the usual caveats. But the JavaScript code must be put
    on the _linked_ page.

    You can use the string document.location.href and pick up the part you
    want. For example, assume that you use a query part field with the name
    sonderangebot in the URL, as in your example, and the linked page has
    onclick handlers for elements, and you want to use the numeric value of
    sonderangebot to locate an element with an id consisting of
    "description_" and a number (as on the example page), then simulate
    trigger the click event for that element. This may sound confusing but
    it's fairly simple:

    <p id=description_123 onclick="this.style.color = 'red'">foo</p>
    <script>
    var url = document.location.href;
    var fragmentStart = url.indexOf('#')+1;
    var query = url.slice(url.indexOf('?')+1,
    fragmentStart < 0 ? url.length + 1 : fragmentStart - 1);
    var fields = query.split('&');
    var i;
    for(i = 0; i < fields.length; i++) {
    var part = fields.split('=');
    if(part[0] === 'sonderangebot') {
    var item = document.getElementById('description_' + part[1]);
    if(item) {
    item.click();
    }
    break;
    }
    }
    </script>

    When a page with such code is referred to with a URL ending with, say

    ?sonderangebote=123

    then you'll see the effect of the click event (which is trivial in this
    case; in a more realistic case, the event could add some content on the
    page or change style properties so that an invisible element becomes
    visible). Of course you don't need a click event - you could just call a
    function with the desired effect instead of item.click(). But this
    approach would be handy if the effect is something that could _also_ be
    activated by the user by clicking on something.
     
    Jukka K. Korpela, Aug 10, 2011
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.