Here’s one page from my site, which also shows a JS error and in IE11 it has the problem where the cards elongate when the browser window width is decreased beyond a certain point:
Ok, I guess I’ve stumped you folks yet again, so here’s my attempt to stimulate brain cells among those of you who know far more about these matters than I do…
Look at this page in Safari and press Option-CMD-U:
When I click it, it takes me to the following script in my page code:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
</script>
Safari specifically tells me:
“Can’t find variable: $”
With regard to this one line in that script:
“$(window).resize(function () {”
I created “hideme” in the Class field of the right sidebar to work with the script to hide my dropdown navigation menu at times when it needs to be hidden. And as I said my earlier post, per your request, I disabled “Minify HTML” and “Minify Main CSS” so the page you see is without those minifications, and yet I still get the error.
Can some please explain why?
(Please check your own Blocs generated sites too. I’m curious if I am the lone Blocs user on the planet who gets these errors. Thanks.)
I can hardly believe it. I cannot be the only Blocs user with all these problems. Yet this thread isn’t gaining much attention beyond @Pealco & @Jannis (thank you, gentlemen, for kindly replying).
Consider this new page in my site I uploaded today:
When I increase and decrease the browser window width in IE11, my graphics inside the 3 side-by-side cards in the middle of the page get horizontally smashed or widened. In other words, IE11 is not scaling those Card graphics PROPORTIONALLY for some reason. No problem in FireFox or Chrome (on Mac and Windows) and no problem in Safari either.
Please see my previous two posts, as I have posted questions there too.
I don’t know who generates this small JS snippet. This of cause won’t work any more, because Blocs 3.2 (or 3.3?) loaded jQuery just before the closing body tag (which is perfectly fine).
If this snippet is generated by Blocs itself, @Norm has to check.
I added that “resize” script to my Project Header this past April. Please see my forum post below. The purpose is to hide my drop-down navigation menu at times when it needs to be hidden.
Thank you for the reminder about Blocs having moved jQuery to just before the closing body tag. I moved that “resize” script to the Project Footer and re-uploaded my site, and while I no longer see the “$” error in Safari, Chrome or Firefox anymore, the error is still there in IE11! Would you know why? If not, @Pealco, would you know why?
Not being a coder, I need a bit more handholding. Specifically, how do I change the following code…
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
});
</script>
Thank you for the hand-holding. I was thinking that might be the case, but I wanted to be sure.
By the way, you really recommend adding that extra code instead of running existing code in the FOOTER? Doesn’t your method basically achieve the same thing since jQuery is loaded BEFORE the footer code is executed?
After much fiddling this morning I finally found a solution for that one problem (but not all my other IE11 problems) of that particular bulleted list vanishing in the XS breakpoint in IE11.
Until today, I had the bulleted List inside Bloc > Row > Column > Row > Column > Row Column > List, and just now I eliminated the last Row & Column to make it Bloc > Row > Column > Row > Column > List. But there was no change in IE11. When the window width in IE11 is shrunk to past the XS breakpoint, my bulleted List would still vanish. Here’s a screenshot of that Bulleted List in Blocs:
But just now I found that the Column containing the “注意事項” header text in that gray box was set to Infinity and the Column containing the Bulleted List too was set to Infinity. I changed them both to “12” and re-uploaded, and now in IE11 when the widow is set to the XS width, the Bulleted List does NOT vanish and all is well with that! It’s a relief.
I also fixed the gaps and missing table on my “download.html” page merely by moving the first table into its own row. I have no idea WHY that works, but it makes IE11 happy. I also fixed my “new.html” page by eliminating the nested Row > Column that contained the two images and moved them up higher. It seems IE11 doesn’t like nested Rows and Columns beyond a certain point, which is a huge limitation and headache!
I still have the following 4 problems in IE11, and would appreciate hearing your thoughts:
On my “2000m.html” page, my graphics are smashed horizontally as I decrease the IE11 window width (i.e., graphics won’t proportionally scale, and I don’t understand why).
Every Card elongates in my site (especially on my “contact.html” page) when I decrease the IE11 browser window width, and I don’t understand why. Earlier in this thread you said it was probably “flex-basis” and then you asked me to send you my document, and I did, but that conversation died. So we should go back to it. Here’s a sample page from my document: contact.zip (196.4 KB)
I still get an error IE11 on every page in my site that says “$” is undefined. That error points to the following script which was added by me to hide content and which is now in my Project Footer:
<script>
$(window).resize(function () {
var x = document.getElementsByClassName("hideme");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
});
</script>
Clicking on the Magnifier icon (top right corner) of any page in my site DOES NOTHING. No full screen search field appears at all. I simply do NOT understand why. Please remember that icon is actually a Code Widget in my site which uses the following code:
I’m waiting for a reply from Norm about Problem No. 3, but if you have ideas on how to solve Problem No.1 and No.2, I would love to hear your thoughts!
That took you a lot of time to put together. I am humbled and eternally grateful by your kind help. There aren’t many in this forum who go that far to help others. You are a shining star in this forum. Thank you!
It took me a while to make all the changes on that page so everything looked right in all the break points but I finally did it and confirmed it is working properly now in IE11.
The horribly painful thing about IE11 is that you are forced to design specifically for it. No other browser had any issues with my “infinity” Column width settings – only IE11. So to fix all the cards across my site (and I have many on many pages) means I need to do the same changes, which in turn means changing Classes I have setup to keep things looking right in various breakpoints, which means a lot of time spent redesigning things.
Oh how I hate IE!
But thank you again for rescuing me and everyone else who still needs to support that silly browser. Surely I cannot be the only one. Or maybe I’m the only one who uses Google Analytics and notices just how many IE users there are and sees the need to continue support for them. But I suspect your efforts will help more Blocs users than just me.
The release version of Blocs 3.3 fixed issue #3 for me, thankfully.
The only issue not yet fixed is this:
On my “2000m.html” page, my graphics are smashed horizontally as I decrease the IE11 window width (i.e., graphics won’t proportionally scale, and I don’t understand why).
However, I have “infinity” Column width settings for those cards in SM & XS, so maybe changing them to “12” will fix that too. After I finish testing I will post a reply about that.
Well, drat! Changing Column width to “12” in SM & XS doesn’t fix the problem on my 2000m.html page. All those graphics are inside Cards. But here’s the strange part, I also have graphics inside Cards on my products.html page too and on that page the graphics don’t get horizontally smashed in IE11 as I decrease the browser window width. I don’t use any custom Classes on any of those images either. And on both web pages I use 1x, 2x and 3x graphic sizes too. It’s very odd.
Since you have IE11, can you please confirm if you can see my graphics get horizontally smashed on my 2000m.html page?