scrollHeight doesn't work since last Chrome update - javascript

I had this function for a long time and it made my iframe change height on click, but since the last update of chrome it stoped working on chrome. i get the value 0, while on explorer or other platform it works great. any ideas how to make it works again?
function calcHeight() {
var the_height = document.getElementById('resize').contentWindow.document.body.scrollHeight;
window.alert(the_height);
document.getElementById('resize').height= the_height;
}

You could try to change how you reference the document to:
var the_height =
document.getElementById('resize').contentWindow.document.documentElement.scrollHeight;

Related

jQuery `[jQuery created Element].is(":hover")` Only Seems To Work In Chrome

Please see the code below (very stripped back and not my full function). I've also got a fiddle that you can test it at: https://jsfiddle.net/glenn2223/uk7e7rwe/1/
var
hov = $("<div class=\"over\">I'm Over You</div>"),
box = $("<div>Result: WAITING</div>")
$("body").append(hov).append(box);
$("#MeHover").on('mouseleave', function(){
var d = new Date();
box.text("Result: " + hov.is(":hover").toString().toUpperCase() );
});
We have a div and div.over overlaps it slightly. When you move from div to div.over I want the function to return true.
In my full function: this stops it from hiding the div.over element.
Opening it in Chrome it works as expected. However, it's not in pretty much everything else (Tested in: Edge, IE11 and Firefox).
Okay so we've found out why it doesn't work the :hover was removed from .is() a while back.
Rather than changing this question to suit my findings I will ask another (saves confusion).
My New Question: Keep jQuery Appended Element Open When Hovering It

Why getComputedStyle returns 'auto' for slider's width after page-reload?

Here a link: wbrapist.github.io/slider/index.html
First time when you loading page, it's fine (getComputedStyle returns valid value). But just try to reload page by Ctrl+F5, wait for a few seconds then just reload by F5 and you'll see that navigation of slider not at center position. In this moment you can open the browser's console and see that getComputedStyle after reload (F5) returns just 'auto' value. Why is this happening? Why after force reload (ctrl+f5) it's okay and in otherwise case is not?
Can notice: in that case my slider's switch slides animation is not working too. (there getting values via getComputedStyle() too)
Here a bit of code:
var sliderWidth = getComputedStyle(document.getElementsByClassName('slider')[0]).width;
function setSliderNavPosition() {
var nav = document.querySelector('.slider .navigation');
var navWidth = parseFloat(getComputedStyle(nav).width);
var slidersWidth = parseFloat(sliderWidth);
nav.style.left = ( (slidersWidth / 2) - (navWidth / 2) ) + 'px';
}
This trouble exist in Chrome and Mozilla at least.
It's a bad idea to use the document when it's not fully loaded. Depending on the time it takes to load it, your values are going to be different. That's why you get different behaviors.
To solve this, just wait for the document to be loaded by wrapping your code like this:
window.addEventListener('load', function(){
/* ...YOUR CODE GOES HERE... */
});

In popup document.getElementById(tur).value it is coming in IE but isnt coming in Chrome

My problem is with popup. I use document.getElementById(tur).value in popup but it is workin in IE but isnt working Chrome. i wrote alert but didnt anything.
function birimSec(tur,id,txt)
{
alert(document.getElementById(tur).value);//doesnt work
document.getElementById(tur).value=id;
document.getElementById(tur+'ACK').value=txt;
if(document.getElementById(tur).onchange != null)
document.getElementById(tur).onchange();
}
'tur' is coming correct and it is working in IE but in Chrome doesnt working wh ?
thans for everything.
What code is used to call this? The problem is more likely to be there than in the function itself.
i used this code and it is working now :)
var win = ifrm.contentWindow; // reference to iframe 2 window
// reference to iframe 2 document
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
// reference to form element in iframe 2 document
var fld = doc.forms['formName'].elements[tur];
var counter = win.counter; // global variable in iframe 2
win.clearGreeting(); // call function in iframe 2
the iframe in parent page. thanks everybody

Changing Display of Div not working correctly on iPad(8.0.1, Safari)

On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.
Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.

jquery thickbox reference problem

Completely restated my question:
Problem: Losing reference to an iFrame with Mozilla firefox 3.6 and 4.0
More info:
- Works fine in internet explorer 8 64-bit and 32-bit version.
How to reproduce? In Mozilla: Open the editor accordion menu. Click the 'editor openen' link, in the editor fill in some random text, then click 'bestand opslaan'. Fill in a name and click on 'save'. The content of the editor will be downloaded in HTML format.
Close the save file dialog box by clickin outside of it or on the specified buttons. Click on the 'bestand opslaan' button again and try to save your content to a file. You'll see nothing happening.
The problem isn't there in IE8. Try opening it in there.
Firebug tells me this the second time you open the save dialog:
iFrame.document is null
Example Link: http://www.newsletter.c-tz.nl/
More info:
- switched from thickbox to colorbox to try and resolve this issue and because thickbox isn't supported for a long time now.
- colorbox gives me the same problem so I don't think it is this.
- tried googling for iframe reference error and like, found nothing.
- tried putting the iframe code outside of the div that is called by the colorbox script, it retains it reference but not when I put it back inside that div.
Thanks to: JohnP who offered to open a 'hunt' on this.
Edit:
I thought maybe the saveFile.php file was causing trouble to the parent of the iframe but after removing it from the action variable in the editor.php script it still fails with the same error after you open the dialog for a second time.
Can someone maybe write a script that iterates through iframes by name and when the rignt iframe is found reference it to a var? I want to try it but don't know how..
I can't explain why it's work the first time for Firefox, but in Firefox the function to used for get iframe is different of IE : How to get the body's content of an iframe in Javascript?.
So, replace your JavaScript function "saveToFile" to this :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
var iFrameTag = document.getElementById('saveAs_Iframe');
var iFrame;
if ( iFrameTag.contentDocument )
{ // FF
iFrame = iFrameTag.contentDocument;
}
else if ( iFrame.contentWindow )
{ // IE
iFrame = iFrameTag.contentWindow.document;
}
var inframeEditorFileName = iFrame.getElementById('editor_filename');
var inframeEditorContent = iFrame.getElementById('editor_textarea');
editorFileName.value = saveAsFileName;
inframeEditorFileName.value = saveAsFileName;
inframeEditorContent.value = currentContent;
iFrame.editor_self.submit();
}
I replace the function with Firebug and it's works for me.
Update :
You can also used a crossbrowser solution, more simple, thanks to jQuery :
function saveToFile() {
var saveAsFileName = document.getElementById('saveAs_filename').value;
var currentContent = tinyMCE.editors["editor_textarea"].getContent();
var editorFileName = document.getElementById('editor_filename');
editorFileName.value = saveAsFileName;
$("#saveAs_Iframe").contents().find("#editor_filename").val(saveAsFileName)
$("#saveAs_Iframe").contents().find("#editor_textarea").val(currentContent)
$("#saveAs_Iframe").contents().find("form[name=editor_self]").submit();
}

Categories