linking to another page's anchor

J

jay K.

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
 
J

Jukka K. Korpela

10.08.2011 21:17 said:
I'd like to build a link to another page's anchor

You just append a '#' character fragment identifier to the URL. But it
seems that you want more.
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' )

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.
If possible I'd like to use javascript or jquery, without modifying
the url (only if possible)

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.
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top