Link to home
Start Free TrialLog in
Avatar of frijazz
frijazz

asked on

open link in new window and scroll original page to a certain position

Is it possible to open link in new window and scroll original page to a certain position at the same time ? Means that when the visitor closes the new window he is on a different place on the original page.
Avatar of Deepak Vasudevan
Deepak Vasudevan
Flag of India image

You can have a new window open by window.open(). Scrolling is possible by window.scrollBy() It takes x and y coordinates.
Avatar of jbondc
jbondc

Hello frijazz,

This is more a javascript question...

If I understand your looking for a javascript function that will scroll to somewhere in your page.

I'd recommend using the scriptaculous library which you can download at: http://script.aculo.us/downloads

The following example would do the trick:

<script type="text/javascript" src="js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous/src/scriptaculous.js"></script>

<a href='javascript:void(0);' onclick="new Effect.ScrollTo($('scroll_here'));  window.open ('http://www.experts-exchange.com','mywindow');">scroll then open popup</a>

content

<div id='scroll_here'>.........</div>
You can also use old html functionality for scrolling ...


You define an anchor in your page and on the link when you open the window you'll also scroll to the anchor. ;)


<a href="page.htm#jumphere" onclick="newPopup(myURL);">new Window</a>
...
<a name="jumphere"></a>
...


so when you click on the first link it opens the window and also scroll the page to the anchor (without to have to calculate the x/y position ... and also without loading javascript lybraries into client browser) ....

--
Hope I can Help,
TzH2O
http://romania.pentru-toti.ro

Avatar of frijazz

ASKER

thanks txh20, but with my limited knowledge, I cant get it to work.
What should I use <a name="jumphere"></a> for ?

I tried:
<a href="#" onclick="http://www.myothertestpage.com;">test</a>
and
<a href="#" onclick="newPopup(http://www.myothertestpage.com);">test</a>

It scrolls to the top, but no new window opens.
Have you declared your newPopu function? ....

I'll give you a piece of example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Popup Test</title>
<script language="javascript">
var popUpWin=0;

function popUpWindow(URLStr, left, top, width, height)
{
  if(popUpWin)
  {
    if(!popUpWin.closed) popUpWin.close();
  }
  popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width='+width+',height='+height+',left='+left+', top='+top+',screenX='+left+',screenY='+top+'');
}
</script>
</head>
<body>
<p><a href="#jumphere" onclick="popUpWindow('http://www.google.com', 20, 20, 400, 400)">here opens a popup, and scrolls to:</a> </p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p><a name="jumphere"></a>here</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>


Hope I can Help,
TzH2O
http://linkuri.pentru-toti.ro
Avatar of frijazz

ASKER

tzh20 thanks a lot, this is very good, much more than I need, but very good.
For the simplicity I need, I would have prefered your original suggestion with only html, but I didnt get it to work.
Please could you explain that one again ?

jbondc, thanks, I suppose your suggestion can do much of the same, but tzh20suggestion is simpler so I will give him the points.
deepaknet, thanks to you to, but I am going to inject this in thousands of files and dont see how i can use your suggestion.

I will give txh20 the points.


txh20, can you do this with onlu html ? This is how I want it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Popup Test</title>
<script language="javascript">
var popUpWin=0;

function popUpWindow(URLStr, left, top, width, height)
{
  if(popUpWin)
  {
    if(!popUpWin.closed) popUpWin.close();
  }
  popUpWin = open(URLStr, 'popUpWin');
}
</script>
</head>
<body>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...
</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p><a href="#" onclick="popUpWindow('http://www.google.com')">here opens a popup, and scrolls to:</a> </p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p><a name="jumphere"></a>here</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
ASKER CERTIFIED SOLUTION
Avatar of C TG
C TG
Flag of Romania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of frijazz

ASKER

Thank you. The answer is very good. Sorry for my late acceptance.
I suppose that there are no way to achieve this by not putting
anything in the header ? I mean by putting all the code in the body.