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.
You can have a new window open by window.open(). Scrolling is possible by window.scrollBy() It takes x and y coordinates.
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"></scri pt>
<script type="text/javascript" src="js/scriptaculous/src/ scriptacul ous.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>
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/
<script type="text/javascript" src="js/scriptaculous/src/
<a href='javascript:void(0);'
content
<div id='scroll_here'>.........
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
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);"
...
<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
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.
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
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,di rectories= no,status= no,menubar =no,scroll bars=no,re sizable=no ,copyhisto ry=yes,wid th='+width +',height= '+height+' ,left='+le ft+', 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
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,di
}
</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><a name="jumphere"></a>here</
<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
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')">h ere 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>
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><a href="#" onclick="popUpWindow('http://www.google.com')">h
<p>...</p><p>...</p><p>...
<p>...</p><p>...</p><p>...
<p><a name="jumphere"></a>here</
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.