We Keep Coding

Google Materialize not working in IE 11

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

Dynamically loaded Bootstrap Modal does not scroll on iOS 9

Scenario: The project I'm working on requires that content get loaded into a Bootstrap 3 modal asynchronously, with loading indication displayed to the user. The actual loading is not an issue (see my Codepen below), but what is an issue is scrolling on iOS 9 devices when the loaded content is large. It works correctly on every other device that I've tried, including iOS 8. I think the DOM doesn't update the 's scroll height, so it doesn't think the modal should be scrollable.
The only work-around I've found that reliably works (but is unacceptable) is to hide/show the modal's body, thus forcing a recalculation. Bootstrap's own handleUpdate function doesn't take care of the issue.
I've created a minimal example on Codepen at http://codepen.io/jkrehm/full/LpRzJV/ (code available here). I wish I could embed a QR code in my question so you could easily get to it on your phones.
The most relevant code is this:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this).find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal.modal('handleUpdate');
});
});
If I change the code so the content is loaded before the modal is shown, things work fine, but there's no loading indicator for the user (just a pause of indeterminate length after they click the button and before the modal appears).
Summary: What can I do to convince iOS 9 to recalculate the .modal-body's scroll height?
Update (Aug 15, 2017):
Apparently there is no satisfactory resolution to this issue. Bootstrap has chosen to remove -webkit-overflow-scrolling:touch from the modals and filed a bug with Webkit about it. Maybe it will get fixed someday, maybe not. For now, the provided work-arounds are the best "solutions".

CSS work-around:
.modal-dialog {
height: 101%;
}
Works by making it so that the dialog is always scroll-able, regardless of content size.
From: https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164

My co-worker and I were able to figure out a hacky work-around for this issue.
Using my code from above, something like this will make scrolling work on iOS 9:
// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
$(this)
.css('overflow-y', 'hidden')
.find('.modal-body')
.html('loading...')
.load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
// Use Bootstrap's built-in function to fix scrolling (to no avail)
$modal
.css('overflow-y', '')
.modal('handleUpdate');
});
});
Note the .css('overflow-y', ...) lines. That's the magic sauce. Instead of mucking with the actual CSS, though, we're using a class – .modal-scrollfix – that we add & remove to achieve the same results.
I've created a fork of my previous pen and applied the fix. http://codepen.io/jkrehm/full/OybdrW/ (code)
I have a ticket open with Bootstrap about this issue, but I'm not sure what they can do except add documentation. Hopefully Apple fixes the issue with a future version of iOS Safari.

I managed to fix this by adding the following line just after the contecnt was dynamically loaded via javascript :
$("div#myModal").css('overflow', 'auto');

Safari refresh prevents jQuery execution

I'm working on a Drupal 7 site, the mobile version of the site which uses Bootsrap as theme.
There is a custom block (created w/ drupal) using jQuery to move some elements on a page, changing some classes and IDs. This block works just fine.
My problem is in a custom module which renders a block. I have some jQuery code in the module's template that is not running on refresh in Safari, but it runs if I go on the address bar and hit "Go" on the keyboard.
edit: IE and Chrome seem to also have a problem, but the jQuery code runs sometimes, doesn't matter if is a refresh, clear cache or whatever.
Nothing special in browser's console.
My jQuery code is supposed to move some elements in the page, on jQuery(document).ready, but is not even working for a simple alert.
p.s.: the jQuery in my custom module's template doesn't have anything to do with the code or the HTML elements affected by the custom block, but I thought maybe it would be good to mention it.
I hope you can understand the issue :)
Thanks.

I was using jQuery(document).ready to execute my code. I changed to jQuery(window).load and now it works fine. The code executes on first page load and on every refresh.

After like two weeks and almost killing myself, this is only thing that worked for ios safari.
$(window).on('load', function () {
setTimeout(() => {
DoLoad();
}, 180);
});

I had a similar problem and tried probably a dozen or more ways to address an issue with Safari. It looks like Safari triggers $(window).on('load',...) jQuery call before DOM completely builds. Or perhaps there is some kind of timing/racing condition. In my case, it was causing an issue, but only after page reloads, only with Safari, and only with a certain cloud provider. Chrome was fine, on prem hosting was fine. The only way which worked somewhat reliably was to introduce an artificial delay via setTimeout() function.
$(window).on('load', function () {
setTimeout(() => {
$.getScript('{{url}}').done(function(){
$("#element").js_function({
arguments
});
});
}, 360);
});

Javascript code loading issue with IE7 and IE8

The website in question is cpavalet.com
My javascript loads fine on all browsers except ie7 and ie8. For a few hours now I have been trying to debug the issue to no avail.
I am using jQuery and modernizr, and using the supersized library for the full-sized background images.
The weird thing is, sometimes when I load the page it loads correctly, other times the javascript doesn't work on the page. I think it has to do with the order the scripts are loaded. I am using document.ready for my jquery scripts.
Can anyone shed some light as to why it's not working correctly in ie7 and ie8? I am currently using ie8 for testing purposes.
I am using javascript for: image slider on home page, full-size background images, back to top link to slide to the top, and form validation.
Thanks!
Corey

My guess as to why it wasn't loading correctly was partly correct. I thought that it was because of the order I had my scripts being run on the page.
The answer is that I was using the defer attribute when loading my scripts. When I removed the defer attributes, the scripts started working correctly again.

Jquery Drag and Drop problem, jump to a new page

I want to use Jquery to implement a page that contains js from quotemedia.com. After I embed the js into the sortable, when I drag and drop the element that contains the js, it jump to full page display.
This happens under Firefox, IE is ok.
The running code is here: http://jsfiddle.net/dodoflying/9BkJ5/ Please use firefox to drag and drop element shopping to see the problem.
Is is a bug under firefox? How could I solve this problem?
Thanks in advance!
Don

I don't know if it's a bug on FF or a bad implementation in IE, anyway if you don't have a problem put the JS in a seperate html and include the html page in an iframe you'll still see the iframe reloaded but not the whole page, refer for this link for more info.
iFrame reload on sortable
Edit: by the way, you don't need to connect the list to itself...it's already connected so this is not needed:
$( ".column" ).sortable({
connectWith: ".column"
});
Now back to the main issue, as you can see the iframe (or your code) will be reloaded each time you change it's order in the dom tree, so instead of using sortable..maybe you will be able to come up with a similar effect by absolutely position these DIVs and change their position (CSS top & left using JS) when dragging them but this would require A LOT of work.

I just found it could be solved by using Jquery to remove the following javascript
<script src="http://app.quotemedia.com/quotetools/miniCharts.go?webmasterId=93004&symbol='.$symbol_chart.'&toolWidth=660&chhig=130&chbg=ffffff&chln=333333&chgrd=D5DDE8&chxyc=2B5286&chtcol=2B5286&chbgch=ffffff&chbdr=2B5286&chfill=ee5E739B&chfill2=8BA9E0" type="text/javascript" language="javascript"></script>
Under both Firefox and IE, it is ok.