Cards incompatible with IE11?

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:

contact.zip (196.4 KB)

I would appreciate your analysis on how to resolve the errors and the elongated cards.

Thanks.

P.S. Here are the IE11 errors:

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:

https://kiramek.com/contact.html

I see the following error:

“ReferenceError: Can’t find variable: $”

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.)

Bootstrap 4 apparently supports IE11:

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 & @InStacks (thank you, gentlemen, for kindly replying).

Consider this new page in my site I uploaded today:

https://kiramek.com/2000m.html

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.

Thanks.

Hello @JDW, so lets see:
I see this in IE11:

And the long size apparently is because you have some content on the right side, look what happened when I resize the width to 50%:

See there is content there…
So please try yo find out what is happening in there.

The other think that I found was in normal screen:

You have a large space from the card to the footer and is apparently because the .blog.lg padding, if I disable it look what happened:

Hope it will guide you in the solution…

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.

Cheers, Jannis

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?

No need, just call it different:

Clear the IE cache?

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>

…using your recommended method of DOMContentLoaded?

1 Like
<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>
1 Like

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?

Yeah, leave it in the footer for now to reduce changes.

At the end there isn’t much difference.

1 Like

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:

No problem in any other browser.

Oh how I hate IE! I hate it!

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!

@Pealco

Thank you for your help.

I still have the following 4 problems in IE11, and would appreciate hearing your thoughts:

  1. 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).

  2. 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)

  3. 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>
  1. 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:
<style>
.btn.search {
  background-color: none !important/* No background */
  border: none; /* No borders */
  color: #C0C0C0; /* Gray text */
  padding: 0px 1px; /* Padding to fix 1px truncation on left of icon */
  font-size: 18px;  /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

.btn.search:hover {
  color: #ffffff !important;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  border-radius: 10px 0px 0px 10px;
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="./search-results.html" method="get">
      <input type="hidden" name="cx" value="018348177762133457495:mdzyzovqz2q"></input>
      <input type="hidden" name="lr" value="lang_ja"></input>
      <input type="hidden" name="ie" value="UTF-8"></input>
      <input type="hidden" name="cof" value="FORID:11"></input>
      <input type="text" placeholder="サイト内検索..." name="q" autofocus id="SearchFieldBL" accesskey="F" class="search" autocomplete="off" maxlength="128" required pattern=".*\S.*" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('検索キーワードを入力してください。')"></input>
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<button class="btn search"><i class="fa fa-search" onclick="openSearch()"></i></button>

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
  document.getElementById("SearchFieldBL").focus();
  document.getElementById("SearchFieldBL").select();
}

function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

I look forward to your kind reply.

Thank you,

James

Reply to 4.

In code you have:

<button class="btn search"><i class="fa fa-search" onclick="openSearch()"></i></button>

But the function is called inside the < i >not inside the button itself so just change your code to this:

<button class="btn search fa fa-search" onclick="openSearch()"></button>

And with that change it will work.
Check in here with ie:

LINK

1 Like

Thank you. I confirmed your code works and Problem No.4 is now SOLVED!

Thank you, @Pealco

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!

–James

Reply to #2

A lot of digging but I think I found a solution, for some reason you or classes or blocs app or something else mess with the width of the column.

So what to do to fix things:
Open the tree of your project like this:

And in the same picture see the width is “Infinite” just force it to 12.


As you can see in mobile view, you will see that there is NO width. So force it to 12 again

Now lets go to cards LG view:

Press the column for the first card, and you will see that you already have it to 6, but change it to 5 and then change it again to 6:

Choose the second column for the second card for the same row, you will found out that the width instead of being 6 it is infinite:

so change it again to 6:

No lets change to Mobile View:

Select the first column with the first card, and you will see that the width is infinite:

So change it to 12:

No choose the second column with the second card and you will find that there is a ZERO in the width:

So change the width to 12:

And then change the remaining 2 rows with the steps that I indicate above, and voila, there is your page working in SAFARI - LG:

SAFARI-XS:

IE - LG:

IE-SM:

And Finally IE-XS:

Hope it will help you…

2 Likes

@Pealco

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.

THANK YOU!

Hello @JDW it is a pleasure to help.
I’m a little occupied with my snippet code site, but more in my own company site.

And about those 2 other issues are they fixed? I see in one of them that you are waiting for @norm to fix #3 I guess.

And probably no one uses Google Analytics because of RGPD :rofl:

1 Like

The release version of Blocs 3.3 fixed issue #3 for me, thankfully.

The only issue not yet fixed is this:

  1. 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.

Thanks again.

1 Like

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?

Thanks.