Window scroll(), scrollTo(), scrollBy() not working on popup window - javascript

I am creating a new popup window and I want to scroll my page to specific location, I tried all three methods I mentioned on top but none of them is not working.
Here is my code
var w = window.open('','TEST','width='+divWidth+',height='+divHeight+'');
w.onload = function() {
w.scroll(200,300);
};
Any idea?

Gokhan, my guess is that the window's body is empty, yielding a content size of zero. Since the dimensions of the content are 0 width by 0 height, the window's viewport effectively collapses to nothing -- essentially reducing scroll() (and friends) to a noop.
I put together a little fiddle to demonstrate that having sufficient content fixes the problem. http://jsfiddle.net/blangenfeld/SXnA8/3/
UPDATED ANSWER
Okay, now I understand that you're creating a pop-up using content from a same-origin page. Try defining an onload for the pop-up window and doing your scrolling there.
<html>
<head>
<style type="text/css">
/* Just ensuring the size of the content for demo purposes */
body { min-width: 500px; min-height: 500px;}
</style>
<script type="text/javascript">
function showPopUp(url) {
popUp = window.open(url, "_blank", "width=300, height=300");
/* This works if the URL doesn't violate same-origin policy */
popUp.onload = function() {
this.scrollTo(100, 100);
}
};
</script>
</head>
<body>
<h1>Pop-up test</h1>
<a href="#" target="_blank" onclick="showPopUp('popup.html');">
Click for a same-domain pop-up
</a>
|
<a href="#" target="_blank" onclick="showPopUp('http://www.google.com');">
Click for a google.com pop-up
</a>
</body>
</html>

Related

stop parent page from scrolling down to iframe

I have embedded a website using iframe.
Whenever the parent page loads, the embedded page makes the parent page scroll down to the iframe. I cannot change any code in the embedded page, only the parent page.
Here's the [fiddle of the issue][1]:
HTML:
<iframe src="http://store.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
CSS:
body { margin-top: 100px; height: 1000px; }
How can I prevent the parent page from scrolling down to the iframe?
IMPORTANT UPDATE: ALMOST THERE
So we've added the following javascript to force the page to scroll bacl to the top:
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
window.scrollTo(0, 0);
window.removeEventListener("scroll", runOnScroll);
}
It does work as you can see [in this fiddle][2]. However, on the iPad and iPhone, you can clearly see the page scolling back then up again. On the PC, you can't see the transition.
Please visit [this website][3] so you can check both transitions (pc and mobile).
I'd like to know if there is anything we can add to the code so:
the transition in mobile is not noticed like in the pc (preferred choice)
OR
the transition is smoother (slower scrolling or something like that)
Ok, I added a bit of JavaScript that listens to the first time the document is scrolled down. When the document is scrolled down for the first time, it'll force itself back to the top, then it'll remove the listener so that the user may scroll as desired afterward.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css"></link>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<iframe src="http://store4549118.ecwid.com/#!/~/cart" width="100%" height="100%" id="Container"></iframe>
<script src="scripts.js"></script>
</body>
</html>
JAVASCRIPT (In a file named scripts.js)
window.addEventListener("scroll", runOnScroll);
function runOnScroll(){
$('html,body').animate({scrollTop: 0},1000);
window.removeEventListener("scroll", runOnScroll);
}
Give it a shot, and let me know if it works!

window.open Style using css

I would like to style my window.open,
I currently have some items on my webpage that open due to a certain class that is parsed, which there after opens the specified text in a new window.
I would like to change the font-size, font and padding etc.
Here is my javascript code.
<script type="text/javascript">
$(".Show a").click(function () {
var html = $(this).parent().next("div.show-dialog").html();
var my_window = window.open("", "mywindow1", "width=750,height=550");
$(my_window.document).find("body").html(html);
});
</script>
How do I parse css styles in javascript?
Check out this answer: https://stackoverflow.com/a/18758370/1060487
From the answer:
Build a complete HTML page in the opened window and reference your CSS-file there:
var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
I face this issue a few days ago. My issue was different just to style the popup center.
Here is the code which works for me
<a href="http://twitter.com/intent/tweet?text=[TWEET_CONTENT_GOES_HERE]"
onclick="window.open(this.href,
'twitterwindow',
`top=${(screen.height - 570)/2}, left=${(screen.width - 570)/2}, width=600,
height=300, resizable=1`); return false;">
Tweet this
</a>

iframe weirdness

I have two sites that I am sort of melding together. I'm using and iframe to display content from one page in the other as if it were all one site. The caveat here is that I need the page to display as normal when viewed in an iframe and to display a warning otherwise. I cannot import the iframe page into the host page due to IIS incompatibility so that option is out. The plan works fine when I simply display the page under all circumstances, it is when I try to implement the conditional display that I run into problems. On the iframe page I have the following:
<script type="text/javascript">
window.onload = function InFrame() {
MainContent_siteIsNotFramed
if (top != self) {
//document.getElementById("siteIsFramed").style.display = "inline"
siteIsFramed.visible = "true"
}
else {
//document.getElementById("MainContent_siteIsNotFramed").style.display = "inline"
siteIsNotFramed.visible = "true"
}
init();
};
</script>
This is my attempt to get the iframe page to handle its own conditional display. The only relevant code I have in the host page is the iframe itself which, for completelness, looks like this:
</head>
<body style="margin:0; height: 100%;">
<iframe runat="server" id="signInFrame" style="border: 0; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
</body>
</html>
When the content to display/not display, the content in the iframe will display with about half height. Without, it displays at full height (desired behavior). I've tried to be as thourough as possible, if anyone needs more details, let me know.
Try "positioning" the iframe:
<iframe runat="server" id="signInFrame" style="border: 0; position:absolute; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
The problem is that and iframe with default position (position: static) can't have a "relative" height (i.e. a %), so it ignores the height:100%, and applies the "default" height of an iframe (150px in FF).

Firefox iframe scrolling issue

I have a web page that is hosted in an iframe. I can only modify this page and not the containing page.
By default, my page's scrollbar is disabled, however if my page's size is over a certain threshold, I need to be able to turn on the vertical scrollbar. The following code seems to work in all browsers but Firefox:
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function setScrollbar() {
if (getDocHeight() > 5000) {
pageBody.style.overflow = 'scroll';
}
}
here is my HTML:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>My title</title></head>
<body id="pageBody" onload="setScrollbar();">
</body>
</html>
Firefox seems to be ignoring the style.overflow = 'scroll'. I've done a good bit of searching, and I can't seem to find a solution. Any ideas?
Replace this:
pageBody.style.overflow = 'scroll';
with this:
document.getElementById('pageBody').style.overflow = 'scroll';
When I've checked your code in FF I was getting JS error pageBody is undefined, that should solve the issue :)
Cheers
G.
style.overflow = 'auto' should work better. It makes the browser decide when to add scroll bars itself.
Unfortunately Firefox displays the scrollbars on the body of a frame based on the overflow style on the frame, not on the body. So the easiest way is to insert a 100% size borderless scrollable subframe, and load the real content in there instead.
If you don't want to do that, then you can mess around with nested DIVs like this:
<body style="margin: 0px;"> <!-- override default body margin -->
<div style="height: 100%; overflow: auto;"> <!-- The actual scrollable area -->
<div style="margin: 8px;"> <!-- to emulate default body margin -->
<!-- Content goes here -->
</div>
</div>
</body>

Can a child iframe onload event trigger a URL updation on the parent window and still keep back button functionality on browsers?

The question is on iframes/bookmarkablity and back button functionality.
This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar.
The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful.
Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue.
The following files are
index_parent.html (contains the iframes)
son.html
grandson.html
son and grandson are linked and any navigation between son and grandson in the parent iframe updates the address bar but breaks the back button in FF.
cat index_parent.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent</title>
<style>
body{
margin:0;
overflow: hidden;
}
iframe {
border: 1;
height: 100%;
width: 100%;
overflow-x: hidden;
}
</style>
<script language="javascript">
function update(url,title){
alert("parent_update")
document.title=title;
window.location.hash ="#" + url; // comment this to get the back button working
//in FF/webkit --but makes the url non bookmarkable
}
function parent_loader(){
alert("parent_loader")
if (window.location.hash.substr(1)) {
document.getElementById("embedframe").src=window.location.hash.substr(1);
} else {
document.getElementById("embedframe").src="son.html";
}
}
</script>
</head>
<body onLoad="parent_loader()" >
<H1> Parent</H1>
<iframe name="embedframe" id="embedframe" src="" frameborder="1" ></iframe>
</body>
</html>
cat son.html
<html>
<title> son </title>
<script language="JavaScript">
function son_loader() {
alert("son_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
};
</script>
<body onload="son_loader()" >
<H1> son </H1>
<a href="grandson.html">Grandson < /a>
</body>
</html>
cat grandson.html
<html>
<title> grandson </title>
<script language="JavaScript">
function grandson_loader() {
alert("grandson_loader");
if (self.location.href!=top.location.href) {
parent.update(location.href, document.title);
}
}
</script>
<body onload="grandson_loader()" >
<H1> Grandson </H1>
Father
</body>
</html>
You can set the destination of the Back button in your loader function explicitly using history.pushState, as described here:
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history

Categories

Resources