scrollBy doesn't work in Firefox and Opera - javascript

This scrollBy function works in Internet Explorer, but ignores by Firefox and Opera. Can anyone help to solve this problem?
function scrollLeft(s){
document.frames['my_iframe'].scrollBy(-s,0);
window.frames['my_iframe'].scrollBy(-s,0);
}
function scrollRight(s){
document.frames['my_iframe'].scrollBy(s,0);
window.frames['my_iframe'].scrollBy(s,0);
}
Here is an example that works in Internet Explorer browser, but doesn't work in Firefox and Opera: http://igproject.ru/iframe-scrolling/index.htm

In Firefox, etc. you need to use scrollTo() instead of scrollBy().
See: http://jsfiddle.net/4CkML/
Example:
window.scrollTo(50,50);
You cannot use scrollTo/By if the domains don't match. You can see here that a javascript error is produced:
http://jsfiddle.net/3CbZc/
Permission denied to access property 'scrollTo'
Edit - Updating answer to incorporate answer from long comment chain:
var oIF = document.getElementById('my_iframe').contentWindow; oIF.scrollBy(s, 0);

Related

JQuery selector works perfect, except with Safari

I want to fetch an URL-Attribute from a div and my code works perfectly find, except on Safari, where this line:
var url = $('.image').css('background-image').split('url("')[1].split('")')[0];
throws an Error, because the .split-function cannot be executed on an undefined object. Can somebody explain me why Safari does not like this code?
So, I figured it out. When you call $('.image').css('background-color') on a browser that is not Safari, you get the following string:
url("http://www.image.com/image1.jpg")
When you call $('.image').css('background-color') using Safari, the following string is returned:
url(http://www.image.com/image1.jpg)

CreateContextualFragment not working in safari

We have a problem with a function (createContextualFragment) in safari.
We need to add some content in the body, so we use this line of code.
Code:
document.getElementsByTagName('body')[0].insertBefore(document.createRange().createContextualFragment("<div></div><script src="LINK_SOURCE"></script>"), null);
This line of code is working fine with Chrome and Firefox, but we are having some issue with createContextualFragment in Safari.
Error in Safari:
createContextualFragment —
asyncronousDocumentWrite2.html:28:115NotSupportedError: DOM Exception
9: The implementation did not support the requested type of object or
operation.
I realize that my answer is arriving a little late, but I recently ran into a similar situation.
What I found
According to https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment#Browser_compatibility
Range.createContextualFragment() is not supported in Safari 9.0 or 9.1. It does work fine in Safari 10 though.
What can you do?
Since Safari does not support createContextualFragment we can delegate the responsibility of creating our document fragment to jQuery. The following illustrates two options to do this depending on what version of jQuery you are using:
jQuery 1.8 or newer use ParseHTML
document.getElementsByTagName('body')[0].insertBefore($.parseHTML("<div></div><script src='http://google.ca'></script>"), null);
Otherwise just let jQuery figure out what to do
document.getElementsByTagName('body')[0].insertBefore($("<div></div>
<script src='http://google.ca'></script>"), null);
I have found out that setting range.selectNodeContents(document.createElement('div')); fixes the issue as indirecly pointed out in this article https://grrr.tech/posts/create-dom-node-from-html-string/#range.
My example usage:
document.querySelectorAll('.container').forEach((el) => {
const range = document.createRange();
range.selectNodeContents(el);
range.deleteContents();
range.selectNodeContents(document.createElement('div')); // fix for safari
el.appendChild(range.createContextualFragment(htmlContent));
});

JQuery security error in Opera and Internet Explorer

I am developing an app for social network which works in IFrame. The app works just fine in Google Chrome and Microsoft Firefox browsers, but in Opera 12.15 JQuery library v1.10.1 fails to load with security error Unhandled error: Security error: attempted to read protected variable on line 1513.
The screenshot is here:
It looks like the same bug exists in Internet Explorer 10.
How to deal with it?
UPDATE:
I have made dirty hack by commenting the lines 1513-1517 in the code of jquery:
// Support: IE>8
// If iframe document is assigned to "document" variable and if iframe has been reloaded,
// IE will throw "permission denied" error when accessing "document" variable, see jQuery #13936
/*if ( parent && parent.frameElement ) {
parent.attachEvent( "onbeforeunload", function() {
setDocument();
});
}*/
The functionality of my app seems to work now, maybe it is necessary to create issue in JQuery repo...
Bug report was created - http://bugs.jquery.com/ticket/13980.
Bug is now fixed.
Add this before you include JQuery:
var isIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
if (isIE11) {
if (typeof window.attachEvent == "undefined" || !window.attachEvent) {
window.attachEvent = window.addEventListener;
}
}
Hope it helps, It worked for me.

Firefox 4.06b IndexedDB support

Is it possible to access the IndexedDB API in Firefox 4.0b6? If so, how? window.indexedDB is not defined. Currently working off of this example:
http://hacks.mozilla.org/category/indexeddb/as/complete/
Note that in Google Chrome, it's window.webkitIndexedDB.
This information is difficult to find but it's called moz_indexedDB until the standard is further along: http://blog.dankantor.com/post/1018704095/ah-need-to-use-window-moz-indexeddb-instead-of
console.log("window.indexedDB: " + window.indexedDB);
window.indexedDB: undefined
console.log("window.moz_indexedDB: " + window.moz_indexedDB);
window.moz_indexedDB: [object IDBFactory]
You could also check out http://nparashuram.com/ttd/IndexedDB/index.html for specific examples on IE, FF and CHrome
Firefox 4b10: mozIndexedDb
Chrome 10: webkitIndexedDb

Internet Explorer returns modified values after read SVG element content

On Firefox and Google Chrome I can read the content of an SVG element, but with Internet Explorer some values are altered when read it.
I need some way to prevent Internet Explorer modify SVG values. The most convenient way would be by modifying the JavaScript code.
To read the SVG content I use the following function:
function xmlToString(xmlData) {
var xmlString;
// IE
if (window.ActiveXObject)
xmlString = xmlData.xml;
// Mozilla, Firefox, Opera, ...
else // I also tried using only next line for both: IE & FF but no success
xmlString = (new XMLSerializer()).serializeToString(xmlData);
return xmlString;
}
Here you can test what I say by yourself: JSFiddle experiment (you can try both: FF and IE).
Also, on next images I highlight where the problems are (you can check it with the previous JSFiddle).
Mozilla Firefox and Google Chroome (Success)
Internet Explorer (Fail)

Categories

Resources