We Keep Coding

javascript not properly running on my website on IE browser

I created a website and it works perfectly fine on chrome but on IE the js doesn't seem to be working. I'm not sure what's going on because I added a < noscript > tag to check if JS wasn't loading but it doesn't show up (which means JS is running fine), and I went to some of those "check if JS is enabled on your browser" sites and they all said it was working.
Then I checked the settings and it had it enabled as well. So JavaScript seems to be working but the JS on my website (such as smoothly scrolling down when I click a link in the navbar) isn't working.
Anyone have any reasons as to why? Am I forgetting to put an extra tag or something. Any help is appreciated

document.querySelectorAll returns a NodeList NOT an array. forEach on a NodeList is not supported in IE. See https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Browser_compatibility
It should work if you replace the forEach with a For loop or use the Array.prototype.forEach (which is also documented on the page in the link above)

How to debug non-dynamic script after dynamic script loads on the same page

This answer https://stackoverflow.com/a/10929430/749227
to this question Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool? is spot on for debugging dynamic scripts.
The issue I am facing is that I have a page that has a script on it, and after it loads an ajax request fires which returns with some HTML and a script that get put into the page. With the //# sourceURL=myDynamicDocumentFragment.html bit added, I can debug the dynamic script just fine.
But once it's loaded, then the other script that is part of the outer page that initially loaded goes off the rails. I can set breakpoints on blank lines and can't set them on legitimate lines. The debugger will stop on them but it won't be at the place in the code where I'd expect.
What it appears to be is that the dev tools window is showing the original script, and the debugger itself is running on something else - some updated version of code that includes both the outer page's script and the dynamic script that was added later. Or maybe it just hiccups with respect to line numbers it's displaying and what those map to in the code it's actually running.
I wish I had a good simple code snippet to demonstrate the issue, but I don't. Has anyone seen this, and does anyone know of a way to have Chrome 'refresh' the dev tools scripts/debugger without refreshing the page? (it has to be w/o refreshing the page since things work fine when the page loads - it's only after the dynamic script is dropped in that the wheels come off)
Note: I've tagged with Chrome since that's what I'm using (v 38). I don't know how other browsers fare.

You can find scripts injected into head or evaluated, here is a break point added on youtube evaluated (another js file).
You can find this in chrome as well, adding console.log (click on message shown), and voila you have source code you can add break points.
Here mozila print debugging/breakpoint over evaluated script on utube page:
Update
Sorry, I understand chrome was out of the scope, my engrish :)
How I did debugging on chrome over injected scripts, but there are cases when you cannot attach to execution if script is active (page load plus few milliseconds), you need to search for workarounds.
Added this at the begin of the script injected:
//# sourceURL=jseinjectedsource.js
console.log("evaluated");
and voila console:
Better check this way better than my explanation chrome developer

Check to see if your script is using a source map (if you're using TypeScript this is typically on by default for VS projects).
I've found Chrome to be really bad with source maps, often refusing to update them, or stop displaying them after the source map line is removed from the code.

JavaScript Prepended Content Not Showing On Anchor Click In Safari

I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).

Google Maps V3 within a jQuery UI dialog for IE7/8

I have problems visualizing my google map within a jquery dialog. The problem is present only on ie 7 and ie 8, furthermore ie7 doesn't even show the map, ie8 shows it once and when you try to see it again, the map is misplaced.
Here is the scenario. I have a link which when precessed would show a dialog. The content of the dialog is loaded via ajax. The loaded page contains some other stuff apart from the map itself. In ie7 i don't see the page at all, i8 shows it correctly the first time around. When you close the dialog and open it again the map would no longer be visible.
The issue(s) is not present on all real browsers and ie9,but i found something strange. When the dialog is opened for the second time and I have dev tools open ( the developer plugin for IE) when I close it, or minimize the dev tools panel , the map is somehow refreshed and gets displayed correctly. Any idea what event my that be triggering. Any help would be appreciated.
Thanks,
Peter

Call the initialise function after dialog opens. For example, onfocus of a button or textbox.
onfocus="initialise();";
it works for me.... even in IE

Pretty sure gmaps v3 doesn't support IE7, the IE8 problem is kinda hard to assist you with without seeing the code.

The Google Maps JavaScript API V3 does support IE7+ (Source: Which web browsers does the Google Maps JS API support?) but I've seen issues when combining it with jQuery, sometimes they kinda collide on some object's property and mess up. Maybe you could cut this down to the simplest code possible and report it on the issue tracker?

IE7 excanvas -- $(document).ready() and IE7 creates problem

EDIT: I've identified a link to the below problem to the use of $(document).ready() instead of using the old fashioned onload attribute of the body
The problem
In IE7 the canvas/excanvas does not render until you hit reload -- I've cleared my cache multiple times, and the result is consistent.
The canvas is always empty on initial page load, and an error comes up "object does not support this property or method" -- a message that refers to the .getcontext() call. However, once I hit reload, it magically works. Always after a reload.. it works. never by any other means of reaching the page does it work. There is always an error on initial page load.
By "initial page load" i mean when the page loads from a clicked link, a manual entry to the address bar or via the back/forward buttons.
Here's a reproduction:
http://www.trevorsimonton.com/canvas_problem/example7.html
Note that there's a lot of extra Javascript in there to reproduce the Drupal environment where this problem originated.
The code
I am using excanvas r3 -- http://code.google.com/p/explorercanvas/downloads/detail?name=excanvas_r3.zip and Drupal 6
EDIT: I removed a bunch of the code I had, because I have 2 places on the site where I am handling canvases completely differently. I was able to reproduce the problem at the destination above (http://www.trevorsimonton.com/canvas_problem/example7.html)
The root of the question
Does anyone know more about how excanvas or IE7's behavior that might trigger this kind of issue? What, aside from the browser's cache, could be causing the page to load differently between a "reload" command and anything else?

Because this is Drupal 6 I'm using Jquery 1.3.2
Apparently $(document).ready() fires before excanvas is really ready. Although that's not the case in most browsers, of course IE is going to be different.
IE7 needs all calls to getContext() to originate from a function passed into the body tag's onready attribute.
Do do this in drupal is a little tricky, but I just hard coded it into the page template.
See this if you want the full how-to: excanvas and JQuery 1.3.2 document ready don't get along