I am having issues getting some jquery to work on internet explorer...sometimes it seems to work, and sometimes it doesn't seem to work. Having no issues with chrome/firefox though, i don't understand what can be the cause of these issues.
I am not including the jquery source from the file, but rather putting the file inline the file. I have split it up into a few lines like they do in the actual jquery.min.js though, so that shouldn't be causing any issues.
The rest of the HTML is all on one line though, could the length of this line be causing issues? When clicking some of the links on the page and the listners should activate on the click() function it just opens up the windows explorer tool instead of catching it and having e.preventDefault() activating.
I could show you guys the source for the JS, but I know that is working properly, as I said its fine on chrome/firefox, so I feel there is some hidden issue I don't know about for internet explorer. I have listed all of the possible details and causes of this issue....help please? Thanks to any information and I can answer any questions to get this working :)
EDIT:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" content="application/octet-stream" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- JQUERY 1.7.2 HERE --></head><body><!-- HTML IS HERE WITH LOTS OF DIVS --><!-- JQUERY CODE HERE --></body></html>
Had the same issues with javascript, that was running perfectly under Chrome and Firefox and seemed to totally not load on IE, and I was amazed to find out that Internet explorer is not executing your javascript if you have console.log in your code, used for debugging (or other purposes), and thanks to stackoverflow I understood about this.
So if everything in IE seems to work fine with Dev. tools open (F12) then after removing console.log from your scripts everything will be ok.
If you have any console.log statements, take them out. If developer tools are enabled (F12), IE will work. Otherwise, it will stop executing code with console.log.
The best way to test this is open the developer tools, and then see if the code works in IE. If it does, then removing the statements should fix the problem.
Related
I know that there already is a question like this: Force IE9 into browser compatibility view
But since adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the the head section and reloading the page with ctrl+F5 didn't help there must be another way.
On my website is also a bxslider and according to this: bxslider not working in IE9 I replaced the elements (which had empty href attribute) with tags - still not effect. The images of the slider are displayed in full size one below the other. After activating compatibility mode the site works perfect.
I don't wanna rebuild my application from the scratch so what could I do to force the compatibility-view? Or is there at least a good free debugging tool for that? I downloaded the firefox addon IE Tab which has a debugbar but to use it you have to buy a premium version. I just don't know what is causing the error...
I found what was causing the error: Why does JavaScript only work after opening developer tools in IE once?
So frustrating and so simple. It was caused by the console.logs in the script. Without them it works like a charm.
If you use this code at the start of your JS (I use it in all my projects) https://gist.githubusercontent.com/elijahmanor/7884984/raw/console-monkey-patch.js it will override the console.log function so you avoid errors in IE but still get logging in modern browsers like chrome.
We have built a Magento Community 1.7.0.1 template that is fully based on jQuery mobile v1.2.0. It also loads the regular jQuery library version 1.8.2.
Everything works fine in every browser (Chrome, Firefox, Opera, ...) except in Internet Explorer the following error is showing in the console:
SCRIPT65535: Invalid calling object
index, line 1 character 1
We have been searching on how to fix this issue but haven't found any solution. The same error appears on both IE8 and IE9. We have tried removing all add-ons, accelerators, ... and the issue still persists.
The following is code is located on line 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
EDIT1: Weird thing is, if I start up developer tools in IE and under the script tab click on "Start debugging" the error goes way when I refresh the page. When I click on "Stop debugging" and refresh the page, the error still DOES NOT show. Weirdest thing ever...
Has any of you come across this issue already? Any idea how I can go around to debug/solve this?
After debugging a bit more I found out that the following code was causing the issue:
<body onload="setTimeout(scrollTo, 0, 0, 1)">
Simply remove that and it will work again ;)
I'm trying to debug an intermittent, possibly timing-related drawing problem with JavaScript in Internet Explorer (IE9 including in IE8 mode).
Using the Developer Tools, I'm stepping through the lines that create, style, and display elements, but the actual browser window remains unchanged (and shows the Windows "Not Responding" title text much of the time), so I can't see what happens when.
With Firefox and Firebug, I can see the main window update at each step. But regrettably this problem doesn't occur in FF, so I can't debug there.
I've web-searched and looked at the MS articles on using the Developer Tools, but I can't find any discussion about single-stepping through JavaScript and seeing the results of each step. Is something wrong on my system, or is this just not possible?
32-bit IE9 on 64-bit Windows 7, in case that's relevant.
If you are able to step through the javascript code but the browser is not refreshing and crashing your best bet to debug it might be to isolate the problem. Say you are doing five things on a certain piece of code. Reduce that to just one thing and gradually pile up different process on top.
Not sure if this is the answer you are looking, but I have run into similar problem with IE 9 before so if you provide some code snippet which can be replicated I could help you further.
Update
If you are running into intermittent issues with IE make sure to add a meta tag so that IE doesn't load quirks mode after encountering something on your code. Add the following tag. More information here
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
I have a very strange issue going on here. It's only occurring on Internet Explorer (what a surprise).
Basically I'm trying to fix a site that was given to me after some third-rate developers finished it and obviously did not test on IE.
They've setup a javascript slideshow, now on the pages with the slideshow active, the whole enclosing "body_section" div is being pushed all the way to the left. Have a look for yourselves:
http://sapaconstruction.com.au/sapa/
That's the homepage which floats everything to the left. Now on this page:
http://sapaconstruction.com.au/sapa/?page_id=4
Everything looks normal, so it must have something to do with the javascript slideshow. Here's what the javascript they've written looks like (it's embed on the page).
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/compressed.js"></script>
<script type="text/javascript">
$('homeslideshow').style.display='none';
$('wrapper').style.display='block';
var homeslideshow=new TINY.slideshow("homeslideshow");
window.onload=function(){
homeslideshow.auto=true;
homeslideshow.speed=5;
homeslideshow.init("homeslideshow","image","imgprev","imgnext","imglink");
}
</script>
Any help with this issue would be amazing, I've wracked my brain for hours trying hacks and margin fixes and things like that.
Well, I can tell you this. This site has way more problems than just that. In looking at the source, there is a div that comes before the html node. I would first of all fix that, as even in firefox, this is causing some strange things to happen. As a matter of fact, I think this "ieonly" div is what is causing the issue, as in IE this div becomes the wrapper in the body. Whoever built this site was not very familiar with cross browser design, and tried to bake in way too many IE hacks.
EDIT:
The problem was IE was in quirks mode due to the lack of a doctype. The following doctype should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can someone help me please?
Am working on this page:
http://www.lorealprofessionnel.co.uk/about-us/loreal-professionnel-portfolio
On INTERNET EXPLORER, why I can't see arrows to navigate through the carousel. It works on all others browsers
I have put :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE[all version here]" />
but nothing !
Actually those elements appear and disappear on Chrome too. When they're invisibile it seems something has given them explicit positions which are fighting with the logic in the original CSS. I can't find where precisely quickly because the page loads over 20 JavaScript files. I have rarely seen so much code to do so little. Screams of corporate CMS. I'm not surprised debugging this is a nightmare.