We Keep Coding

IFrame in jQuery UI dialog sometimes doesn't load content in Chrome until dialog is moved or resized (but works in FF and Edge)

This is a truly odd one. I have a site which makes heavy use of jQuery UI dialogs to then show an iframe. The iframe loads content from the site itself, so there are no origin issues.
Works perfectly in FireFox and Edge. But in Chrome (my version is 87), it sometimes just displays a white, blank dialog UNTIL you click the titlebar and move it! Or, until you open the Developer Tools.
This was driving me absolutely crazy, but I eventually found two solutions (posted below) if anyone else has this same weird problem.

STEP ONE:
I had to add a bit of code for when the iframe is finished loading. Ex:
// if we are inside our iframe...
$(document).ready(function() { parent.nudgeiFrame(); });
This calls a function on the PARENT page that is loading the dialog, not from within the iframe itself!
SOLUTION #1 (less elegant)
It would "nudge" the entire dialog by one pixel, after a brief delay. This worked extremely well, but it has the downside of making your dialog slowly move down the screen if they keep reloading it. Most users probably would never notice it, so I kept this option for a while:
function nudgeiFrame() {
setTimeout(function() {
$("div[role=dialog]").each(function() {
$(this).addClass('ui-draggable-dragging');
$(this).addClass('ui-dialog-dragging');
var y = $(this).css('top');
var oldy = y;
y = parseFloat(y.replace("px", ""));
var newy = (y + 1) + "px";
$(this).css('top', newy);
});
}, 75);
}
SOLUTION #2 (More elegant)
I discovered (through HOURS of testing) that all I really needed to do was to add content to the dialog (not the iframe).
I decided to add a simple so that it wouldn't cause the dialog to resize or anything like that. Believe it or not, this works and doesn't cause any ill-effects that I can see.
function nudgeiFrame() {
setTimeout(function() {
$("div[role=dialog]").each(function() {
$(this).append("<span></span>");
});
}, 75);
}
I hope this helps someone out there. Took me such a long time to figure out.

location.href in IE & Edge

Having issues getting my one page web application to work in Internet Explorer and Edge. It works perfectly fine in other browsers.
The issue that I'm having is that I can't seem to get the navigation to work.
I've tried the following:
location.href = '#quickQuiz'
location.href = '/#quickQuiz'
window.location.href = '#quickQuiz'
window.location.href = '/#quickQuiz'
document.location.href = '/#quickQuiz'
document.location.href = '#quickQuiz'
function goHere(where) { window.location = where; return false; }
location.hash = '#quickQuiz'
location.hash = '/#quickQuiz'
All of them works perfectly fine on other browsers. What am I doing wrong?
http://www.snabbteori.se if you wanna see it for yourself.
EDIT1: Additional code
The item in my navigation menu looks like the following:
<li data-icon="info"><a id="teoriNav">Teori</a></li>
And then I check for a click event on it. I know that it's possible to just put href="#teori in there, but I am just using this one as an example, there are other links where I need to perform AJAX calls too, this one doesn't need it though just to verify there isn't something wrong with my AJAX calls causing it.
$(document).delegate('#teoriNav', 'click', function () {
location.hash('#teori');');
});
I've also tried this but doesn't work:
$('#teoriNav').click( function() {
location.hash('#teori');
});
EDIT2: Updates
I believe I've fixed all jQuery errors and some other issues. The only thing I'm getting in the Internet Explorer console is:
HTML1300: Navigation occured.
DOM7011: The code on this page disabled back and forward caching.
And then when I click on the button I get output which I wrote which confirms it registers my click on the button. But still it won't navigate.
EDIT3: Ugly temporary fix
It works after doing a page reload after navigating.
var isIE = /*#cc_on!#*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if(isEdge || isIE)
location.reload();
But I hate the fact that the site has to reload, and if someone has a real fix for this I would really appreciate it...

Edge has an issue with links if your code is not propper. You should check your console for any errors, This is most likely.
We will need more information from your side to help you further.
Post your HTML and your Javascript (just relating to this area of problem)
and we can then better help you.
I sagest fixing your jQuery errors first and trying again.
Ok my Browser test have given me a variation of 30-60 error relating to jQuery across Mac to Win. These will need to be addressed.
You also have a XSS issue that needs to be resolved. You have HTTPS from facebook but then HTTP on your website, These will need to match.

JQuery Feature Detection for <a href="data:..."> support?

I have am using html2canvas to enable screenshots of divs within my web application. It's working well enough in Chrome (including Android), Safari (including iOS) and FireFox. In IE 11, however the image won't save.
Code looks like this:
function displayModalWithImage(canvas, filename) {
var modalcontainer = $('#snapshot');
var modalcontainer_body = modalcontainer.children().find('.snap_shot_container');
var modalcontainer_save = modalcontainer.children().find('.save_snapshot');
var image = new Image();
var data = canvas.toDataURL("image/png");
image.src = data;
modalcontainer_save.attr('download', filename +".png");
modalcontainer_save.attr('href',
data.replace(/^data[:]image\/png[;]/i, "data:application/octet-stream;"));
$(modalcontainer_body).html('');
$(image).appendTo(modalcontainer_body);
$(modalcontainer_save).on('click', function() {
modalcontainer.modal('hide');
});
modalcontainer.modal();
}
Browser behavior varies:
Chrome: displays modal and then saves the file when "Save" is clicked. (acceptable)
Firefox: displays modal and then displays a separate dialog when "Save" is clicked (acceptable)
Safari: display modal and then loads image in a separate tab when "Save" is clicked (acceptable... maybe)
IE 11: displays modal, but does nothing but hide the dialog when "Save" is clicked (unacceptable)
The data.replace was suggested by another SO answer, but it did not appear to have any effect on the behavior of any of the browsers. Previously the href attribute was simply set to data.
So, anyway, at this point replacing the modal dialog with a simple window.location = data is a viable alternative. But, since Chrome works well and Safari and FF work well enough, i'd like to simply do a feature detection that would window.location for IE but show the modal for the other browsers. But, I don't know what "feature" is missing in IE to check for.
tl;dr
is there simply a change or bug in my javascript that would enable IE to work (save the image encoded as data to a file).
if not, which feature in IE should I detect for that would enable me to customize the behavior for IE
if that's not an option; what's the current best practices for old-fashioned browser detection?

JQwidgets scroll doesn't work on chrome when i close opened window

I use JQwidgets ,, I use to print data onclick print-button
as code :
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..
google-chrome Version 34.0.1847.131 m
This worked fine on Firefox and IE..
How to fix the scroll after closing printing-window on chrome
Fiddle-Demo

It looks like you're not the only one with this issue.
I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.
If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.
Here is a JS fiddle to demonstrate that you need to change your approach: DEMO
You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.
I recommend 2 alternative possible solutions:
Option1:
<input type="button" value="Print" onclick="window.print(); return false;" />
This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.
This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).
DEMO
Option2:
User clicks on a link/button that opens a new tab/window
In the same function the data from your table gets loaded into a JSON Object
The JSON object is loaded into a print template in the new tab/window
the template initiates the print function
By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.

This is a browser bug - you'd have to find some sort of hack to fix it.
Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.
Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.
Simple, easy, fun.
var needToReload = false;
$("#print").click(function () {
... as you have
needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}
$('#contentjqxgrid').scroll(function () {
if (needToReload) {
window.location.reload();
}
});

$("#jqxscrollbar").jqxScrollBar({
width: 5,
height:180,
theme:'energyblue',
vertical:true
});
$("#jqxscrollbar1").jqxScrollBar({
width: 300,
height:5,
theme:'energyblue'
});
Look at jsfiddle: http://jsfiddle.net/8PtUX/6/

Getting scrollTop to work in IE Quirks Mode from an iframe within an iframe

I'm having a rather frustrating time trying to force my page to scroll back to the top after submitting a form.
The code I'm trialling this with is simple:
$('body').prepend('Click here');
$('body').on("click", "#testing", function() {
window.top.$('body, html').animate({ scrollTop: 0 }, 0);
});
This works, as intended, on FireFox - but not Internet Explorer.
It's worth noting that I'm using the UWA widget format and my code is essentially embedded within two iframes. There is an iframe for the HTML template and iframe containing this widget. I have control over neither of these frames, nor can I give you the full code because it is literally thousands of lines of horribly-written, misaligned HTML and JavaScript.
Here are some facts that I've put together to see if anyone can spot the problem because I'm don't really know where to begin looking:
In FireFox, this code works fine - clicking the link instantly scrolls the whole page to the top
If I open the IE console the Page Default Standard is "Quirks Mode". Changing this to "IE9 Standards" fixes the problem, i.e. clicking the link scrolls the whole page back to the top
Changing window.top to window.parent works in neither browser
Changing window.top to window.parent.parent also works in FF but doesn't work in IE
Changing animate({ scrollTop: 0 }, 0); to scrollTop(0) works in FF but doesn't work in IE
If I run the following alerts in IE, bizarrely (to me), here is the output:
alert(typeof window.parent); // object
alert(typeof window.top); // object
alert(typeof window.parent.parent); // object
alert(typeof window.parent.$('html')); // object
alert(typeof window.parent.$('body')); // object
alert(window.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.$('html').offset().top); // 0
alert(window.parent.$('body').offset().top); // 0
alert(window.top.$('html').offset().top); // 0
alert(window.top.$('body').offset().top); // 0
In short, it looks like window.top is accessible and so is the $('html') element from there... so why can't I get my page to scroll unless I force standards mode in my browser?