window.open scrollbars not working in Chrome - javascript

I have a link that opens a popup window using window.open(). The problem is the scrollbars don't work in Chrome. They work in IE and Firefox, so I'm thinking it has something to do with Chromes new scroll bars. This is an example of the code I'm using:
html:
Click Me
jQuery:
$('a').click(function() {
window.open("http://google.com", "", "width=300,height=300,scrollbars=1");
});
I also set up a jsfiddle here http://jsfiddle.net/88GBR/
Any thoughts would be much appreciated.

from http://www.w3schools.com/jsref/met_win_open.asp
scrollbars=yes|no|1|0 Whether or not to display scroll bars. IE, Firefox & Opera only
try to set css-prop explicitly overflow: scroll;, otherwise no chance I guess

Works fine for me, Chrome Version 32.0.1700.76 m running on Windows Vista x32
Tried to post screenshot but I don't have required rep, tried to post this as a comment instead of an answer but hey... don't have that rep either :D

in this way should work, but i would try the window.open action in a 'div' and not in an 'anchor'
$("#divClick").click(function(){
window.open("https://www.google.com","some","toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=900px,height=500px");
}

In my case..
call 3 function then working fine~!!
document.open --> document.writer --> document.close
e.g.
var option = 'menubar=no,status=no,titlebar=no,toolbar=no,scrollbars=yes,resizable=yes,height=600,width=800';
var win = window.open(null, null, option);
var div = domConstruct.create('div');
/// add content in div ...
win.document.open(); // must call...
win.document.write(div.innerHTML);
win.document.close(); // must cal...

it worked for me, i find my crome was not supporting scrollbars=1 so i changed it as scrollbars=yes
var docprint = window.open('', '', 'scrollbars=yes,resizeable=yes,width=900, height=850');
docprint.document.open();
docprint.document.write('<html><head><title>Print Page Setup<\/title>');
docprint.document.write('<\/head><body onLoad="self.print()"><center>');
docprint.document.write(data);
docprint.document.write('<\/center><\/body><\/html>');
docprint.document.close();
docprint.focus();

Related

window.open & close several times

I made a new window using window.open(); and I want to close it. So I made this code.
$('#open').on('click', function () {
var win = window.open("", "", "width=400, height=200");
$newWindow = $(win.document.body);
// more code
$newWindow.find('#close').on('click', function () {
win.close(); // just works once
});
});
And it works good in FF, works just once in Chrome (close button stops working), and does not work on IE11 (just tested v11)...
What am I doing wrong? ie, how to fix this to work cross browser?
jsFiddle
The problem is with this line:
$newWindow.html(content);
You need to clone the element before you add it to the popup. Otherwise you are removing the original element and moving it to the new spot.
$newWindow.html(content.clone());
Updated Fiddle: http://jsfiddle.net/XL7LR/10/

Safari Scrolling issue with jQuery .remove()

I'm developing a plugin for a website building program, and am building the preview page for it. It's sort of a parallax scrolling plugin and the issue I'm having is that in Safari, when you scroll down to a certain point, it wont allow you to scroll any further. It's fine in firefox and chrome, but I saw the same issue in opera. I've managed to narrow it down to the function that's causing it, but I have no idea why or how to fix it.
When I comment out this function, the page scrolls fine, but it doesn't remove the empty divs like I need it to do:
function removeStuff() {
$('.conP').each(function(){
var divDad = $(this),
divses = $(this).children();
if (divses.hasClass('empty'))
divDad.remove();
});
}
here's the preview page where the issue can be observed:
http://reveriesrefined.com/myftp/dack_stev/
//////////EDIT:
I've simplified the code to this:
$('.conP_%id% > .empty').parent().remove();
however, it's still causing scrolling issues in safari and opera, but not the other browsers.
Any help is VERY VERY appreciated!
Actually, I found the issue already. Somehow even though commenting out the function mentioned above seemed to solve it, it was actually a line of code in another function.
I had this function:
function autoPlay() {
var backDiv = $('#outterLax div:first');
backDiv.hide();
$('.conP').hide();
backDiv.remove();
$('#outterLax').append(backDiv);
backDiv.show();
}
but the line:
$('.conP').hide();
was unnecessary as that was already being accomplished elsewhere in my code.

Javascript Print iframe contents only

This is my code
<script>
var body = "dddddd"
var script = "<script>window.print();</scr'+'ipt>";
var newWin = $("#printf")[0].contentWindow.document;
newWin.open();
newWin.close();
$("body",newWin).append(body+script);
</script>
<iframe id="printf"></iframe>
This works but it prints the parent page, how do I get it to print just the iframe?
I would not expect that to work
try instead
window.frames["printf"].focus();
window.frames["printf"].print();
and use
<iframe id="printf" name="printf"></iframe>
Alternatively try good old
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();
if jQuery cannot hack it
Live Demo
document.getElementById("printf").contentWindow.print();
Same origin policy applies.
Easy way (tested on ie7+, firefox, Chrome,safari ) would be this
//id is the id of the iframe
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
an alternate option, which may or may not be suitable, but cleaner if it is:
If you always want to just print the iframe from the page, you can have a separate "#media print{}" stylesheet that hides everything besides the iframe. Then you can just print the page normally.
You can use this command:
document.getElementById('iframeid').contentWindow.print();
This command basically is the same as window.print(), but as the window we would like to print is in the iframe, we first need to obtain an instance of that window as a javascript object.
So, in reference to that iframe, we first obtain the iframe by using it's id, and then it's contentWindow returns a window(DOM) object. So, we are able to directly use the window.print() function on this object.
I had issues with all of the above solutions in IE8, have found a decent workaround that is tested in IE 8+9, Chrome, Safari and Firefox. For my situation i needed to print a report that was generated dynamically:
// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';
Note the printPage() javascript method before the body close tag.
Next create the iframe and append it to the parent body so its contentWindow is available:
var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);
Next set the content:
newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';
Here we are setting the dynamic content variable to the iframe's window object then invoking it via the javascript: scheme.
Finally to print; focus the iframe and call the javascript printPage() function within the iframe content:
newIframe.focus();
setTimeout(function() {
newIframe.contentWindow.printPage();
}, 200);
return;
The setTimeout is not necessarily needed, however if you're loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap 'newIframe.contentWindow.printPage();' in a try catch and place the setTimeout wrapped version in the catch block.
Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.
EDIT:
Instead of using setTimeout to call the printPage function use the following:
newIframe.onload = function() {
newIframe.contentWindow.printPage();
}
At this time, there is no need for the script tag inside the iframe. This works for me (tested in Chrome, Firefox, IE11 and node-webkit 0.12):
<script>
window.onload = function() {
var body = 'dddddd';
var newWin = document.getElementById('printf').contentWindow;
newWin.document.write(body);
newWin.document.close(); //important!
newWin.focus(); //IE fix
newWin.print();
}
</script>
<iframe id="printf"></iframe>
Thanks to all answers, save my day.
If you are setting the contents of IFrame using javascript document.write() then you must close the document by newWin.document.close(); otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents.
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
I was stuck trying to implement this in typescript, all of the above would not work. I had to first cast the element in order for typescript to have access to the contentWindow.
let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
Use this code for IE9 and above:
window.frames["printf"].focus();
window.frames["printf"].print();
For IE8:
window.frames[0].focus();
window.frames[0].print();
I am wondering what's your purpose of doing the iframe print.
I met a similar problem a moment ago: use chrome's print preview to generate a PDF file of a iframe.
Finally I solved my problem with a trick:
$('#print').click(function() {
$('#noniframe').hide(); // hide other elements
window.print(); // now, only the iframe left
$('#noniframe').show(); // show other elements again.
});

Setting an image source via Javascript unreliable in Internet Explorer

I am simply trying to change the SRC attribute of an image via javascript like so:
document.getElementById('fooImage').src = img;
Where img is a variable that has a link to the file.
In all other browsers (Chrome, Firefox, Safari) this works. In IE (7+) this also works too sometimes.
Using IE's built-in developer tools, I can see that the image's SRC tag is set. Is there something else in the locals window that could help me debug why the image doesn't actually show on screen?
I've also tried using jQuery to do this and same outcome:
$("#fooImage").attr("src", img);
An ideas?
In debugging this I would hard code it first...
document.getElementById('fooImage').src = "myimage.png";
I've used the following in my website and it works like this...
var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/1.png";
Some other things to check:
Make sure your ID= tag is not in the <DIV section but inside the <IMG section... for example <div class="style1"><img src="yourpicture" id="someid">. If `id='someid' is in the div tag then you can't change the picture / the picture won't show up.
are you using window.onload?, body onload? the proper way to use the first is..
window.onload = function () { YourFunctionHere(); };
Try a different test image. I had issues in the past with showing png's, I changed it to a gif or jpg and it worked. I don't understand how that was "way back" but it doesn't seem to be an issue anymore but hey... something to try.
try a full url
using https?
try sticking the image somewhere else in your program and see what happens.
try adding this to your HTML (put your website in place of mine - lookup BASE href on google for more info)
<BASE href="http://perrycs/" />
Make sure the image isn't hidden behind a layer (I know it works in some browsers)
tell us the website so we can check it out and get more info to help you in debugging this, seeing context (surrounding code) helps...
Given that it works in other browsers, searching on this topic it seems that often the problem is how IE caches images (ref. Epascarello's comment). Your code is the same as what I have - it works fine except in IE10.
I too, faced this conundrum. Then discovered that it works in 'Page Inspector', so after some digging discovered that (in Internet Explorer) by going to Tools.Internet Options.Advanced
uncheck the 'Disable script debugging (Internet Explorer)' and the one below it.
I found that with IE9 after changing an image.src with
var strVar="C:Users/x/Desktop/caution.png"
image.src=strVar
and calling an alert(image.src) I would get something like this n the alertbox:
file:///C:Users/x/Desktop/"C:Users/x/Desktop/caution.png"
So I tried
image.src=strVar.replace(/\"/g,"")
to remove qoutemarks
and it worked!
alert(image.src)
file:///C:Users/x/Desktop/caution.png

Firefox 3.6.x does not fire off my onload event

I have a Firefox 3.6.2 problem (3.5.x works just fine).
This is the code:
...
var newImage = new Image();
newImage.onload=function() {swapMapImg(newImage);};
newImage.src = newBackground;
...
function swapMapImg(newImage) {
alert('bingo');
}
Firefox 3.6.2 no longer fires off my onload event, any ideas?
I would personally start using jQuery if you can and use their onload functions. It should make life a LOT easier for you as someone else is maintaining and testing the code
Turns out the following code:
var currentBackground = tableElem.style.backgroundImage;
returns two different strings in 3.5.x and 3.6.x as shown below:
3.5.x --> url(http://localhost:8080/WellSeismicMap/......);
3.6.x --> url("http://localhost:8080/WellSeismicMap/......");
notice the quotation mark in char position 4 in the 3.6.x version well this was throwing my substr function out and generating an invalid url.
Thanks for your help anyway chaps!
I'm using Firefox 3.6.2 and your code works for me. Are you sure:
newImage.src = newBackground;
Is working? I mean, do you still see the image appear on the page? Because if the link's broken, onload isn't going to happen.

Categories

Resources