/    Sign up×
Community /Pin to ProfileBookmark

NS / Mozilla problem using named anchors in JS generated page

Hi there, I’m a newbie to this forum, and would be very glad of any help on this. I want to generate a popup window in JS that contains named anchors to facilitate navigation around the popup window document. Everything works fine in IE but neither NS nor Mozilla work correctly.

Here’s a code snippet to demonstrate the effect.
Save it as an html file on your local drive, then try it first in IE, then NS or Mosaic:

<html>
<head>
<script language=’javascript’ type=’text/javascript’>
function problem() {
var out = new Array();
var n = 0;
out[n++] = “<html><body>”
out[n++] = “<h1>Top</h1>”
out[n++] = “<p><a href=’#tp1′>Goto Bottom</a></p>”;
out[n++] = “<p>.</p>n<p>.</p>n”;
out[n++] = “<p><a name=’tp1′></a>Bottom</p>”;
out[n++] = “</body></html>”;
prob_hd = window.open(”,”,’width=260,height=150,scrollbars=1′);
prob_hd.document.write(out.join(“”));
prob_hd.document.close();
prob_hd.focus();
}
</script>
</head>
<body>
<p><a href=’javascript:void problem()’>Popup</a></p>
</body>
</html>

Results (all on Windows XP PC)

[B]IE 6.0[/B] ?
When the popup window opens, clicking on the hyperlink scrolls the popup window document to the desired position

[B]NS4.8[/B] 😮
When the popup window opens, clicking on the hyperlink causes the dirctory listing to be loaded into the popup window and scrolled to the bottom.

[B]NS7.1[/B] ?
When the popup window opens, clicking on the hyperlink causes the orginal parent document to be loaded into the popup, nesting the process each time the link is pressed.

[B]Mosaic 1.5[/B] 😡
As NS 7.1

Does anyone know of a way to get around this so that I can use named anchors (or an equivalent) to scroll around a document in all browsers? I don’t want to use a window.scroll() method as I don’t klnow what text size may be set and cannot guarantee that absolute positions will be correct – named anchors is by far the best way, but it only seems to work for IE unless I use static content in the popup.

Please help!

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisJan 06.2004 — Netscape does a funny thing when you open a window with no file specified and then use document.write() to create it. If you view source on your pop-up, you will see that they add
&lt;BASE HREF="..."&gt;
at the top of the page. I don't have any suggestions on how to work around this behaviour.
Copy linkTweet thisAlerts:
@classaxeauthorJan 07.2004 — Many thanks Gil,

That's very interesting - NS 7.1 doesn't appear to do this. When I changed the code and added a later <base href=''> this didn't help.

Your point did did give me ideas of where to look though and I found something interesting here (a way to go to a named anchor in JavaScript):

http://www.faqts.com/knowledge_base/view.phtml/aid/2220

When I modified the code as follows, at least now NS 4.8 behaves the same way as NS 7.1, although still neither work correctly:

Please note that in the links below, the forum software inserts a space between java and script - you need to remove that for the code to work.

<html>

<head>

<script language='javascript' type='text/javascript'>

function problem() {

var out = new Array();

var n = 0;

out[n++] = "<html><body>"

out[n++] = "<BASE HREF='javascript: 'alert()'>"

out[n++] = "<h1>Top</h1>"

out[n++] = "<p><a href='javascript: "

out[n++] = "location.hash = "tp1"; void 0'>Goto Bottom</a></p>";

out[n++] = "<p>.</p>n<p>.</p>n";

out[n++] = "<p><a name='tp1'></a>Bottom</p>";

out[n++] = "</body></html>";

prob_hd = window.open('','','width=260,height=150,scrollbars=1');

prob_hd.document.write(out.join(""));

prob_hd.document.close();

prob_hd.focus();

}

</script>

</head>

<body>

<p><a href='javascript:void problem()'>Popup</a></p>

</body>

</html>

HOWEVER - Good news, I think someone else (Martin Honnen) solved this:

http://www.faqts.com/knowledge_base/view.phtml/aid/13648/fid/189

I tried the code included in NS 4.8, NS 7.1, Mozilla 1.5 and IE6.0 - it worked every time.

Here's my original problem with the all purpose scrolly code, modified from that posted by Martin Honnen - and I'm gonna be using this EVERYWHERE from now on ?

<html>

<head>

<script language='javascript' type='text/javascript'>

function getAnchorPosition(anchorName) {

if (document.layers) {

var anchor = prob_hd.document.anchors[anchorName];

return { x: anchor.x, y: anchor.y };

}

if (document.getElementById) {

var anchor = prob_hd.document.anchors[anchorName];

var coords = {x: 0, y: 0 };

while (anchor) {

coords.x += anchor.offsetLeft;

coords.y += anchor.offsetTop;

anchor = anchor.offsetParent;

}

return coords;

}

}

function checkScrollNecessary(link) {

if (document.layers) {

var coords = getAnchorPosition(link.hash.substring(1));

prob_hd.scrollTo(coords.x,coords.y);

return false;

}

if (!document.all && document.getElementById) {

var coords = getAnchorPosition(link.hash.substring(1));

prob_hd.scrollTo(coords.x,coords.y);

return false;

}

return true;

}

function problem() {

var out = new Array();

var n = 0;

out[n++] = "<html><body>"

out[n++] = "<h1>Top</h1>"

out[n++] = "<p><a href='#tp1' onclick='return window.opener.checkScrollNecessary(this)'>Goto Bottom</a></p>";

out[n++] = "<p>.</p>n<p>.</p>n";

out[n++] = "<p><a name='tp1'></a>Bottom</p>";

out[n++] = "</body></html>";

prob_hd = window.open('','','width=260,height=150,scrollbars=1');

prob_hd.document.write(out.join(""));

prob_hd.document.close();

prob_hd.focus();

}

</script>

</head>

<body>

<p><a href='javascript:void problem()'>Popup</a></p>

</body>

</html>
Copy linkTweet thisAlerts:
@classaxeauthorJan 07.2004 — Final word on this (from me at least) - if you want to include a generic set of routines in your main code to handle links in several popup windows each with different handle names, here's a further refinement to allow this. I've also simplified the code a bit to remove duplication. Once again, you'll have to correct java script to javascript in the link shown in the code below - that's something the forum software does to keep us all safe ?

[B]<html>

<head>

<script language='javascript' type='text/javascript'>

function getAnchorPosition(window_hd,anchorName) {

if (document.layers) {

var anchor = eval(window_hd).document.anchors[anchorName];

return { x: anchor.x, y: anchor.y };

}

if (document.getElementById) {

var anchor = eval(window_hd).document.anchors[anchorName];

var coords = {x: 0, y: 0 };

while (anchor) {

coords.x += anchor.offsetLeft;

coords.y += anchor.offsetTop;

anchor = anchor.offsetParent;

}

return coords;

}

}



function checkScrollNecessary(window_hd,link) {

if (document.layers || (!document.all && document.getElementById)) {

var coords = getAnchorPosition(window_hd,link.hash.substring(1));

eval(window_hd).scrollTo(coords.x,coords.y);

return false;

}

return true;

}



function problem() {

var out = new Array();

var n = 0;

out[n++] = "<html><body>"

out[n++] = "<h1>Top</h1>"

out[n++] = "<p><a href='#tp1' onclick='return window.opener.checkScrollNecessary("prob_hd", this)'>Goto Bottom</a></p>";

out[n++] = "<p>.</p>n<p>.</p>n";

out[n++] = "<p><a name='tp1'></a>Bottom</p>";

out[n++] = "</body></html>";

prob_hd = window.open('','','width=260,height=150,scrollbars=1');

prob_hd.document.write(out.join(""));

prob_hd.document.close();

prob_hd.focus();

}



</script>

</head>

<body>

<p><a href='javascript:void problem()'>Popup</a></p>

</body>

</html>[/B]


Note that a string containing the name of the window that will be invoked at run time is also included - for each poup window, simply change that parameter to specify the correct window.
×

Success!

Help @classaxe spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...