Can Anyone do this????

maxxwilliams · Oct 18, 2012

Hi guys. I am looking for a pop up script that will open up pages on the internet. Pretty simple, but... I want them page that "pops up" to be scrolled down to a particular position.

Here is what I mean:

Code:

<script language="javascript" type="text/javascript">
<!--function popitup(url) {    newwindow=window.open(url,'name','height=200,width=150');    if (window.focus) {newwindow.focus()}    return false;}// --> </script>

Code:

<a href="popupex.html" onclick="return popitup('popupex.html')"
 >Link to popup</a>

This above is a simple pop up code. But, if I insert a URL, it will open up at the top left position. I want it to open up, as soon as people click the link, at a particular spot on the URL.

If I were to use google . com and open that, I wouldnt want the page to open and show the "Images, Search, Play.." etc butons on the top. I would like for the pop up to be focused on the GOOGLE Logo, for instance.

Can anyone help me?

jazzc · Oct 18, 2012

You must use an iframe.

sockpuppet · Oct 18, 2012

Is your popup on the same domain? then it's easy:

Code:

newwindow=window.open( url,'name','height=200,width=150');
newwindow.onload = function(){
    newwindow.scroll( 0, 600 );
};

But that won't work for a different domain because of the same origin policy
Your only choice is some ugly hack using an iframe with negative top and left values and simulate the two scrollbars.
Here an example i made in chrome, it loads bing.com and scrolls to the search box

Code:

<html>
<script>
window.onload = function(){
	document.getElementById('scrolly').addEventListener('scroll', function(event){
		document.getElementById('content').style.top = -1*event.target.scrollTop;		 
	});
	document.getElementById('scrollx').addEventListener('scroll', function(event){
		document.getElementById('content').style.left = -1*event.target.scrollLeft;		 
	});
	
	document.getElementById('scrolly').scrollTop = 219;
	document.getElementById('scrollx').scrollLeft = 216;
};
</script>
<body>
<div id="hack" style="position:relative;height:310px;width:510px;" >
<div id="scrolly" style="position:absolute;right:0;overflow-x:hidden;overflow-y:scroll;height:298px;z-index:2;">
<div id="scrolly-c" style="height:900px;width:1px;"></div>
</div>
<div id="scrollx" style="position:absolute;bottom:0;overflow-y:hidden;overflow-x:scroll;width:498px;z-index:2;">
<div id="scrollx-c" style="width:1024px;height:1px"></div>
</div>
<div id="wrapper" style="height:300px;width:500px;overflow:hidden;position:relative;" >
<div id="content" style="height:900px;width:1024px;position:absolute;z-index:1">
<iframe src="http://www.bing.com" height=900 width=1024 />
</div>
</div>
</div>
</body>
</html>

Lowbrow · Oct 18, 2012

You're going to need to use an iframe (or possible some javascript) in combination with some CSS creativity. I do not know of a ready-made solution that does this.

maxxwilliams · Oct 19, 2012

Thanks everyone. And wow, thanks sockpuppet...

I think I found a way to make it work on my site. Cheers

Can Anyone do this????

maxxwilliams

Regular Member

jazzc

Elite Member

sockpuppet

Junior Member

Lowbrow

Registered Member

maxxwilliams

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World