Solved

Returning to the same page location when clicking a JavaScript link

Posted on 2001-07-21
12
289 Views
Last Modified: 2008-03-06
My question pertains to the file below when one returns to the original page/file after clicking on the link.

First, copy and paste the code into a file and open the wordDoc.html file in a browser.

Next, click the link, and then return to the wordDoc.html page.  You'll notice that the location is now at the top of the page instead of the location where the link was clicked.

Ideally what I would like is the page to remain where one clicked the link rather than refreshing to the top of the page.  Is there an easy way to do this without adding <a href="#word"> and <a name="word"> code to the HTML/JavaScript functions?

The purpose of the existing JavaScript functions in the first place is so that individuals can right-click to save the Word document or to click the link to open a new window and keep the original page in the same location.

For larger websites, a user might want to return to the same section of an article, for example, that they had been reading without losing their place when the page is refreshed.

If any of this is confusing, please contact me through Experts-Exchange.com

Thanks,

Paul

---------------------------

wordDoc.html

<html>
<head>
<script language="JavaScript">
function openWindow(URL) {
 var availWidth = screen.availWidth + 1;
 var availHeight = screen.availHeight;
 var x = 0, y = 0;
 if (document.all) {
  x = window.screenTop;
  y = window.screenLeft;
 }
 else if (document.layers) {
  x = window.screenX;
  y = window.screenY;
  availWidth = availWidth - 11;
  availHeight = availHeight - 155;
 }
 var arguments = 'resizable=yes,toolbar=yes,location=yes,directories=yes,addressbar=yes,scrollbars=yes,status=yes,menubar=yes,top=0,left=0,screenX='+x+',screenY='+y+',width='+availWidth+',height='+availHeight;
 var newWindow = window.open(URL,'_blank',arguments);
}

function clickHref(aObj) {
 if (aObj.tagName == "A") {
  var strURL = window.location;
  strURL = aObj.href;
  aObj.href = window.location;
  openWindow(strURL);
 }
}
</script>
<style type="text/css">
a:link, a:visited, a:active { text-decoration: underline; color: blue; }
a:hover { text-decoration: underline; color: red; }
</style>
</head>
<body>
<center>  
<hr size=1 noshade color=black width=654>
</center>
<table width=654 border=0 cellpadding=0 cellspacing=0>
<tr><td height=750>This space is here to add vertical scrollbars to test the JavaScript code when returning to this page.</td></tr>
<tr><td>
<script language="JavaScript">
var msg='disclosure_form.doc';
var nomsg='';
if (document.all) {
 document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target <u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='http://www.setco.org/download/disclosure_form.doc' onmouseover='window.status=msg; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
else if (document.layers) {
 document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link As...'&gt;<br>provides access to save/download the file as a <a href='http://www.setco.org/download/disclosure_form.doc' onmouseover='window.status=msg; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
</script>
</td></tr>
</table>
</body>
</html>

---------------------------
0
Comment
Question by:madforplaid
  • 8
  • 4
12 Comments
 

Expert Comment

by:rongreen
ID: 6305519
HTTP is a stateless environment so there will be no knowledge of the cursor position once you leave one document to go to another. I suppose you could store the xy location of the cursor in a cookie but you would be relying on the good offices of the viewer 1)  to have a cookie enabled browser 2) to have cookies enabled 3)  to accept your cookie.
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6305562
Ron,

Good thought on the X, Y location!

How about determining the X, Y position of where the link was clicked or the cursor itself and then returning it that way via JavaScript?

Thanks,

Paul
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6305794
0
 

Expert Comment

by:rongreen
ID: 6306152
Again these scripts apply to the current document. Unless I am reading your requirements wrong, you wish to leave the current document at some scroll position and return to that position after goint to some other document. Even if the other document is your own, in your own domain, memory of the cursor location will be lost upon return. Except for the unreliable cookie solution you could acheive what you want through co-operative CGI --  the operative word being "co-operative":   save the co-ordinates in a hidden form field, pass it through CGI, then pass it back.  
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6307516
Ron,

How about using some variation of this version of the function?

-----------------

function clickHref(aObj) {
     if (aObj.tagName == "A") {
          var strURL = window.location;
          //self.scrollTo(540, 540); //
          alert ("strURL = " + strURL); //
          //window.scrollTo(140, 140); //
          //window.moveTo(440, 440); //
          strURL = aObj.href;
          alert ("strURL2 = " + strURL); //
          //self.scrollTo(540, 540); //
          aObj.href = window.location;
          alert('this 1?');
          window.scrollBy(0,330); //
          alert('there');//
          //self.scrollBy(0,330); //
          //self.scrollTo(540, 540); //
          openWindow(strURL);
     }
}

Thanks,

Paul
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6320341
rongreen,

On the contrary to what you wrote above, "HTTP is a stateless environment so there will be no knowledge of the cursor position once you leave one document to go to another", I have the solution now:

----------------------

<html>
<head>
<script language="JavaScript">
function openWindow(URL) {
      var availWidth = screen.availWidth + 1;
      var availHeight = screen.availHeight + 1;
      var x = 0, y = 0;
      if (document.all) {
            x = window.screenTop;
            y = window.screenLeft;
      }
      else if (document.layers) {
            x = window.screenX;
            y = window.screenY;
            availWidth = availWidth - 11;
            availHeight = availHeight - 156;
      }
      var arguments = 'resizable=yes,toolbar=yes,location=yes,directories=yes,addressbar=yes,scrollbars=yes,status=yes,menubar=yes,top=0,left=0,screenX='+x+',screenY='+y+',width='+availWidth+',height='+availHeight;
      var newWindow = window.open(URL,'_blank',arguments);
}

function clickHref(aObj) {
      if (aObj.tagName == "A") {
            strURL = aObj.href;
            openWindow(strURL);
            event.returnValue = false;
      }
}

/*function clickHref(aObj) {
      if (aObj.tagName == "A") {
            var strURL = window.location;
            strURL = aObj.href;
            aObj.href = window.location;
            openWindow(strURL);
      }
}*/

</script>
<style type="text/css">
a:link, a:visited, a:active { text-decoration: underline; color: blue; }
a:hover { text-decoration: underline; color: red; }
</style>
</head>
<body>
<center>  
<hr size=1 noshade color=black width=954>
</center>
<table width=954 border=0 cellpadding=0 cellspacing=0>
<tr><td height=350 width=800><spacer type=block></td></tr>
<tr><td>
<script language="JavaScript">
var msg1='Internet - disclosure_form.doc';
var nomsg='';
if (document.all) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target <u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='http://www.setco.org/download/disclosure_form.doc' onmouseover='window.status=msg1; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
else if (document.layers) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link As...'&gt;<br>provides access to save/download the file as a <a href='http://www.setco.org/download/disclosure_form.doc' onmouseover='window.status=msg1; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
</script>
</td></tr>
</table>
<table width=954 border=0 cellpadding=0 cellspacing=0>
<tr><td height=450 width=850><spacer type=block></td></tr>
<tr><td>
<script language="JavaScript">
var msg2='Local - disclosure_form.doc';
var nomsg='';
if (document.all) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target <u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='disclosure_form.doc' onmouseover='window.status=msg2; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
else if (document.layers) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link As...'&gt;<br>provides access to save/download the file as a <a href='disclosure_form.doc' onmouseover='window.status=msg2; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>Word document</font></a>.</font>");
}
</script>
</td></tr>
</table>
<table width=954 border=0 cellpadding=0 cellspacing=0>
<tr><td height=350 width=800><spacer type=block></td></tr>
<tr><td>
<script language="JavaScript">
var msg3='Internet - Microsoft.com';
var nomsg='';
if (document.all) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target <u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='http://www.microsoft.com/' onmouseover='window.status=msg3; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>HTML document</font></a>.</font>");
}
else if (document.layers) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link As...'&gt;<br>provides access to save/download the file as a <a href='http://www.microsoft.com/' onmouseover='window.status=msg3; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>HTML document</font></a>.</font>");
}
</script>
</td></tr>
</table>
<table width=954 border=0 cellpadding=0 cellspacing=0>
<tr><td height=350 width=800><spacer type=block></td></tr>
<tr><td>
<script language="JavaScript">
var msg4='Local - microsoft.html';
var nomsg='';
if (document.all) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target <u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='microsoft.html' onmouseover='window.status=msg4; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>HTML document</font></a>.</font>");
}
else if (document.layers) {
      document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link As...'&gt;<br>provides access to save/download the file as a <a href='microsoft.html' onmouseover='window.status=msg4; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font face=times>HTML document</font></a>.</font>");
}
</script>
</td></tr>
</table>
</body>
</html>

----------------------

The only problem is that this is not working in Netscape - opening in a new window.

Any ideas?

Paul
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Expert Comment

by:rongreen
ID: 6320563
I'm not sure I understand. When I right click the links they pop-up the right mouse menu,  "Save link as..." as stated.  If I left click on the "Word document" link Word is opened with the document; when I left click on "HTML document" the named document is opened in the current window. Pressing "Back" returns me to your document (but not at the click location, instead, a few lines up, such that the link is no longer visable)

Have I made myself perfectly obscure? :-)
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6320705
Ron,

Are you using IE or NN?

Yes, both right-clicks work in IE & NN.

For left-clicking, Word opens in a new window as it should in both IE & NN, however, for the HTML document, the named document is opened in a new window in IE, but incorrectly so in the current window for NN.

Please let me know if this is the same functionality that you get.  Additionally, any ideas how to correct it for NN?

Thanks,

Paul
0
 

Accepted Solution

by:
rongreen earned 45 total points
ID: 6322680
Your check for tagName in function checkHref will be false in NN 4.x. (tagName is not known to NN 4.x -- IE4+,NN 6 only.)  So your openWindow function does not get called; instead the link is opened in the current window.    
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6324830
rongreen,

Since the tagName in function checkHref () doesn't work in NN, how should I write it so the openWindow () function gets called?

Thanks,

Paul
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6329406
rongreen,

nimaig,

I am trying to allow two different options to follow an <a href>:  to download links/files or to view an HTML file in a new window.  If the user right-clicks the link, then he can simply select 'Save Target As' (IE) or 'Save Link As' (NN) to download the file via the JavaScript code.  Alternatively, if the user left-clicks on the link, I want it to open a new window maximized per the openWindow(URL) function, while keeping the initial page unchanged/cursor remaining in the same location as where the user left-clicked the link.

The attached HTML file works just great in Microsoft Internet Explorer, but in Netscape Navigator, after opening the link in a new window, the original page is also incorrectly linking to the same <a href> location.

The reason for my JS code initially is because since I need to determine the user's browser beforehand, I must imbed the HTML within the document.write JavaScript code for display/format reasons.

Knowing that 'event.returnValue = false;' isn't allowable for NN 4.7x, I am working on an alternative solution to resolve the problem.  In the onclick=clickHref(this); of each <a href>, again this works for IE, but as you can see below, I am trying to get NN to recognize that I don't want the link to be executed.

I have tried to use, onclick=return clickHref(this); but when I have tried this, the 'return false;' executes, but neither of the statements, strURL = aObj.href; or openWindow(strURL); gets executed only the return false; statement.  For the 'return false;' to work properly, I understand that the function call must be of a return nature, but how can I get the preceding statements to
execute as well beforehand?

Therefore, I have now been trying some variation of document.captureEvents(); and document.releaseEvents(); but no luck with these methods either as of yet.

Any ideas how to correct it for NN by using one of the methods above?

Thanks,

Paul

------------------------------------

<html>
<head>
<script language="JavaScript">
function openWindow(URL) {
 var availWidth = screen.availWidth + 1;
 var availHeight = screen.availHeight + 1;
 var x = 0, y = 0;
 if (document.all) {
  x = window.screenTop;
  y = window.screenLeft;
 }
 else if (document.layers) {
  x = window.screenX;
  y = window.screenY;
  availWidth = availWidth - 11;
  availHeight = availHeight - 156;
 }
 var arguments =
'resizable=yes,toolbar=yes,location=yes,directories=yes,addressbar=yes,scrollbars=yes,status=yes,menubar=yes,top=0,left=0,screenX='+x+',screenY='+y+',width='+availWidth+',height='+availHeight;
 var newWindow = window.open(URL,'_blank',arguments);
}

function clickHref(aObj) {
 strURL = aObj.href;
 openWindow(strURL);
 if (document.layers) {
  //document.captureEvents(aObj.href);
  //document.releaseEvents(aObj.href);
  return false;
 }
 else
  event.returnValue = false;
}

</script>
<style type="text/css">
a:link, a:visited, a:active { text-decoration: underline; color: blue; }
a:hover { text-decoration: underline; color: red; }
</style>
</head>
<body>
<center>  
<hr size=1 noshade color=black width=954>
</center>
<table width=954 border=0 cellpadding=0 cellspacing=0>
<tr><td height=375 width=800><spacer type=block></td></tr>
<tr><td>
<script language="JavaScript">
var msg='Internet - Microsoft.com';
var nomsg='';
if (document.all) {
 document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select 'Save Target
<u>A</u>s...'&gt;<br>provides access to save/download the file as a <a href='http://www.microsoft.com/'
onmouseover='window.status=msg; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font
face=times>HTML document - JS function</font></a>.</font>");
}
else if (document.layers) {
 document.write("<font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave Link
As...'&gt;<br>provides access to save/download the file as a <a href='http://www.microsoft.com/'
onmouseover='window.status=msg; return true'; onmouseout='window.status=nomsg; return true'; onclick=clickHref(this);><font
face=times>HTML document - JS function</font></a>.</font>");
 document.write("<p><br><font face=times color=#333333 size=2>The following link &lt;right-click mouse, select '<u>S</u>ave
Link As...'&gt;<br>provides access to save/download the file as a <a href='http://www.microsoft.com/'
onmouseover='window.status=msg; return true'; onmouseout='window.status=nomsg; return true'; onclick=return
clickHref(this);><font face=times>HTML document - return JS function</font></a>.</font>");
}
</script>
<tr><td height=375 width=800><spacer type=block></td></tr>
</td></tr>
</table>
</body>
</html>
0
 
LVL 1

Author Comment

by:madforplaid
ID: 6330074
rongreen,

Making these changes has resolved all issues:

----------------------

function clickHref(aObj) {
     strURL = aObj.href;
     openWindow(strURL);
     return false;
}

onclick='return clickHref(this);'

----------------------

Thanks for your valuable help!!

Paul
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now