iframe dynamic height fails in IE outside of quirks mode - javascript

currently going through this problem at work which is driving me insane as I've got nowhere and I feel like I've tried EVERYTHING.
Basically I want an iframe height to adjust depending on the content within in. This works fine for FF, Chrome, Safari but it stays with a 200px height in IE unless in Quirks mode. To get around this I've attempted several javascript and jQuery workarounds without any success.
My attempts have included stuff along the lines of:
http://ramanisandeep.net/2009/12/16/how-to-dynamically-adjust-an-iframe%E2%80%99s-height/
http://www.iframehtml.com/iframe-scripts.html#resizeable-iframe
Generally I get an error saying access is denied or 'Microsoft JScript runtime error: Unable to get value of the property 'document': object is null or undefined'
Has anybody experienced a similar problem? Live demos I've found online seem to go mental when I switch IE to anything but quirks mode.
EDIT
Can anybody tell me why or suggest why this site: http://host.sonspring.com/iframe/ does what I want it to in IE8/9. Yet when I download it and follow the tutorial or use the jQuery plugin...it doesn't work at all. And this is downloading their version, not trying to even make it work on my own project!

Related

DOM issues in IE

I've developed an application that I had tested in Chrome and Firefox but then upon testing in IE I noticed a few things weren't working quite as they should so I made a couple tweaks and everything seemed to be working as it should.
However, as if by some sort of magic when I was going through another round of testing in IE I started noticing that I was getting a lot of debugging errors that I had previously been getting.
They all seem to be to be DOM related with IE being unable to get the value of properties because the object is either null or undefined.
I was having none of these issues previously and I have absolutely no idea what might have changed to be causing this but does anyone have any experience of this sort of issue and have some suggestions as to how to resolve the issue?
I've had a look through all the different pages and functions I've been working on the last couple hours but can see nothing obvious that might be causing this.
Any help would be very much appreciated.
Thanks!
The latest versions of IE come with a pretty decent script debugger. If you press F12, a developer tools window will pop up. Click on the "Script" tab and start working your problem from there. Its not as robust or efficient as firebug or chrome's developer console, but its better than nothing and more often than not can get you pointed in the right direction when it comes to squishing IE bugs.

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

jQuery (or something) is not working properly on IE8

UPDATE:
I was told to test this in IE9 - It works fine in IE9 (for me,
anyways).
I was told by a friend that THIS page is not running properly on IE8 - I was told that the thumbnails are loading properly, but the image in the center is not. I do not have IE8 and I have been unsuccessful in my attempt to download it.
The images are being loaded (well, adjusted) through jQuery and I have a feeling that it is my javascript code that is failing in some way, causing the described errors in IE8.
I put my code through JSLint and the errors I saw were telling me to add spaces in the code - but I highly doubt this could be causing the IE8 issue.
The JS file being loaded is "slideshow.js" which can be easily found through Chrome's inspect element.
I will keep inspecting this from my end looking for JS errors and what not but I would really appreciate some help on this issue.
Thank you very much,
Evan
Problem looks to be
.img-wrapper in style.css with position:absolute.
The problem was that IE8 does not support the "naturalWidth" property. Rather, one should create a new image object, and get the "width" from this new image object.
For more details, refer to this link..

Javascript div popup Not working in IE9 standard but does work in other modes

Having trouble with my site and IE9, if i change the compatability mode to anything other than IE 9 standard my login popup works however when in IE9 standard which is the defult it does not work. I think the best way to look at this is to try it yourself. My Site
I don't have IE9 handy, but a guess would be that it might be falling over due to a JavaScript error: Uncaught TypeError: Cannot set property 'popup' of null. This error is occurring because the point at which you're creating a Popup for popup_4, the DOM element for popup_4 doesn't exist yet.
You could fix that by moving the popup_4 div above the script block that's creating the Popup objects.

Site works in Firefox and Chrome but not Internet Explorer

Apologies but this is not a programming question, but it may have a programming answer.
For some reason my site, http://pctools.alwinsights.com will not display properly in IE (I'm using version 8) but it's fine in firefox and chrome. The content does not appear in the centre of the screen in IE and also generates two JS error messages while the pages are loading.
I've tried enabling Active X and Scripts in the security settings but with no joy. I've also looked around the net but cannot find an answer, well not one that works!
Unfortunately I know nothing about javascript so really don't know where to start with the error messages that are generated.
Any help appreciated.
regards
Nigel
Update:
OK initial error has gone, I'd screwed up with a directory name - apologies.
I've found out that if I disable the option to display the last twitter feed in the wordpress theme it loads OK. So it is the JS code in a php script called thememx-document.js that is causing the error. The code generating the error is "var twitterHtml = jQuery.cookie(twitterCookieName);" It says it's charcater 4, which is a space but I don't understand this.
I can live without Twitter on this site but it still leaves issues as to why content isn't centred nor the pop-up ad is not showing (compare to Firefox) but this may not be a programming issue that warrants a question on this site.
Thanks to all for your comments and input.
Nigel
Start with valid code; a validator will pick up lots of problems. Among yours is content before the Doctype, which triggers quirks mode. Quirks mode causes browsers to emulate bugs in ancient browsers and become much more inconsistent with each other. One of the emulated bugs in Internet Explorer breaks standard centring techniques.
for not properly disply-- its the problem of CSS ...IE7 and IE8 dosen't support css3.so you should simply make another css stylesheet for IE and call it on page only if someone visit your site using IE. and for other broswers it will show exiting style.
and abot JS error --you should check all your php coding and then fix it. its not JS problem. if you are not familar with PHP coding then i am here to offer my free service to you or anyone else. i will help you as i can.
First, having problems with any version of IE is expected and the norm. IE is the worst browser on the planet.
You have a link element on your first line. Links belong inside the head element. Placing it on the first line throws IE into 'quirks mode' and then IE becomes even worse than it normally is.
Good.
OK, maybe your site has to work for IE. 9 times out of 10, the problem is a terminal comma. The following is understood in real browsers but generates an unintelligible error in IE:
var x = [ 1, 2, 3, ];
The tenth time (in my experience), it's string indexing.
var x = "abc";
var c = x[2];
In a real browser, c is set to "c"; in IE, another unhelpful error message.
If this helps, remember: in IE, it's very important to create as many circular dependencies as possible. That is, attach to DOM elements JavaScript functions that have references to other DOM elements. IE fails to clean up such dependencies when the user leaves your site and so leaks memory. Once it leaks enough memory, IE slows and eventually freezes the OS and the user learns a valuable lesson: don't use IE. (Microsoft has a good page explaining how to do this although, inexplicably, they recommend against doing it.)

Categories

Resources