Google Materialize not working in IE 11 - javascript

IE is used still by 15.5% of the web users so I would like to support it and Materialize is not supported in IE 7. However, Im testing it in latest browser.
The problem area of the code is that the materialize.js is not working. Specifically this part:
/** Navbar mobile collapse **/
$('.button-collapse').sideNav();
Also not working is the dropdown menus, so definetly a JS problem.
Here are the steps I have tried so far:
Putting jQuery above the materialize css and js files. I had some functionality brought back by putting at the top of the page rather than the bottom.
Used an Async load an example is given below:
jQl.loadjQ('https://code.jquery.com/jquery-3.2.1.min.js'); Ql.loadjQ('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js');
Tried to use a materialize hack:
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
If you can help me get unstuck, much appreciated. Otherwise works fine in Chrome so unlikely to be a coding error. ***UPDATE works in firefox but not opera.

"Hallo Leute",
I fixed the problem by manually uploading the js and css files to the web host environment. Now it works in IE just need to test Opera.
Great stuff critically said

Related

JQuery Mobile 1.4.5 does not seem to invoke javascript on ipad

Using JQuery mobile 1.4.5 (https://jquerymobile.com/)
Ironically, everything works on desktop browsers, but I cannot seem to get anything to work when testing on an iPad ...
My stripped down page (HTML) contains the following:
<div data-role="content">
<script src="test.js"></script>
<script>
$( document ).on( 'pagecreate', function( event ) { do_something(); });
</script>
</div>
The file "test.js", contains the following code:
function do_something() {
alert('here in do_something()');
}
When testing on an iPad, all I get is a grey circle with a "spinning comet" rotating around in the circle and the page never even renders (Yes, I tried rebooting the iPad, clearing browser history/data, etc).
On all other browsers, I get the alert.
Ultimately, I am trying to load google maps into the page along with the javascript I need to manipulate various DOM elements as well as manipulate the map -- which I CAN do and is working on all other browsers -- just can't seem to get anything to work when testing on an iPad (I do not know how to view source or console messages via iPad Safari, which makes debugging a nightmare).
ANY suggestions would be helpful.
Thanks in advance.
First of all, you missed some important information like, were "all other browsers" running on your desktop machine or are we talking about other mobile devices? This is extremely important.
As you can see spinner that would mean jQuery Mobile and jQuery are loaded.
If they were successfully running on your desktop computer then you may check these:
Make sure none of your content is running on or from localhost. This will work just fine on desktop computers, but if you try to test it on any other device it will fail.
Make sure you are not using an absolute path in your jQM application, this will also fail on any remote device. I presume something similar may be the case as jQM is not able to show the first page
You will need to use a remote debugging feature. As you are using an iPad I again presume you own a Mac. Follow this tutorial: https://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/ as it is the only fool-proof method where you will find what was wrong. Unfortunately, if you are using Windows machine then you would need to use Chrome and Android device.
There's also a chance, some of your *.js content is loading from localhost or other sources not available to your iPad. This also may be the case as you stated above alert is not triggering on iPad. Which would mean that some major JavaScript has occurred thus blocking the load of other JavaScript content.
And there's one other foolproof method you can use that always helped me in this case. Trim your code to the bare minimum, even if that means you need to remove most of your HTML content and JavaScript. Test it, if it works, start including removed content. First include remote JavaScript content, CSS and similar. Then if it still works, start including actual HTML and code. Sooner or later you will stumble on the problematic code, missing content, or content that was not loaded into your iPad.
Thanks to all who provided some insight...
Turned out it was an external javascript file that contained a try/catch block as:
try {
// code
}
catch {
// code
}
When changed to:
try {
// code
}
catch(err) {
// code
}
... after the change was made, all tests passed !!

Website with javascript doesn't work in IE9 but in IE9's compatibility mode - how to force compatibility view?

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.

Javascript issues in Safari and Internet Explorer

The problem is that the slider on the home and products page only works with firefox chrome and Opera. It just fails to move in either IE or Safari. The second issue is about how the site scales on mobile devices. I've looked into mobile event handling, but with less than great results.
http://dextersaltmedia.net78.net/
Copy-pasting the entire responsiveslides.jquery.js file into the console makes the thing work normally, so your problem is in
<script type="text/javascript" src="responsiveslides.min.js"></script>
The only issue is that the library module never runs, even though the library gets included as a file.
Put your script tags at the end of the page, that might work better. Or try placing the library script tag at the end alone.
Ideally though, you should just bunch up jquery and the library file in one .js file and include that one.

Chrome update breaks site. Maybe Salvattore?

the latest Chrome update breaks this site: katie-scott.com. It works properly in Safari and Firefox but none of the content loads in Chrome 33.0.1750.117 (I think it last worked in version 31). I have no idea why this has broken.
It uses a wordpress loop to place all the thumbnails and Salvattore to arrange them into columns. It looks like either the wordpress loop isn't working or salvattore isn't working. Probably the Wordpress loop. But why would a Chrome update break Wordpress!? It was working perfectly!
Thanks!

Javascript for flash menu not loading in IE9 but fine in all other browsers

I have a flash menu on a site. The menu works fine in all browsers EXCEPT IE9. It looks like this javascript file is not loading:
<script type="text/javascript" src="scripts/ActiveContentDropDownWide.js"></script>
In IE9 it just displays BUTTON1, BUTTON2 etc but in all other browsers it displays the complete menu. This is what happens when the ActiveContentDropDownWide.js script is removed which is why it seems to be a problem with that script and IE9. But I could be wrong?
Any ideas would be greatly appreciated.
Try doing a Fiddler capture with IE9 and FF. Then, compare the 2 captures using Fiddler's Diff feature.
It is seems to me that the menu is hiding behind the content
maybe it is z-index problem if the flash menu inside a div ,give it high z-index number or google for ie9 z-index problem.
The javascript file that powers some of the menu needed to be updated with a new version that supports IE9. Once I updated it, the menu worked fine in IE9. Thanks.

Categories