Cards incompatible with IE11?

I Need Help
17

What specifically should I untick?

image
image.png792×774 54.1 KB

18

“Minify HTML” and “Minify Main CSS”

1 Like
19

Done. And I just re-uploaded all the *.html files and style.css (the only CSS file that gets unminified), and reloaded in IE11, but everything I said before remains true. Same page errors when I open the IE11 Console (F12 key). Same elongated boxes. Same gaps. Same missing table. Etc…

No changes at all by unminifying.

Those of you with a copy of IE11, either on a real Windows PC or using Virtual Box (I’ve tested in both), can test my Blocs created pages here:

20

Still you habe JavaScript errors on your website, doesn’t matter which browser.

21

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:

IE11_Page_Errors
IE11_Page_Errors1890×718 21.9 KB

22

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

23

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 & @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.

Thanks.

24

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

image
image2150×1414 576 KB

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%:

image
image2150×1414 632 KB

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:

image
image2530×1414 457 KB

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:

image
image2530×1414 486 KB

Hope it will guide you in the solution…

25

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

27

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?

28

No need, just call it different:

Clear the IE cache?

29

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
30 
<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
31

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?

32

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

At the end there isn’t much difference.

1 Like
33

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:

image
image3372×2174 771 KB

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!

34

@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

35

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
36

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

37

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:

image
image.png2844×1362 438 KB

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

image
image.png2844×1362 369 KB

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:

image
image.png2844×1362 422 KB

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:

image
image.png2844×1362 423 KB

so change it again to 6:

image
image.png2844×1362 423 KB

No lets change to Mobile View:

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

image
image.png2844×1362 353 KB

So change it to 12:

image
image.png2844×1362 352 KB

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

image
image.png2844×1362 346 KB

So change the width to 12:

image
image.png2844×1362 345 KB

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

image
image.png2542×1600 364 KB

SAFARI-XS:

image
image.jpg2542×1600 280 KB

IE - LG:

image
image.png2492×1600 219 KB

IE-SM:

image
image.jpg2492×1600 556 KB

And Finally IE-XS:

image
image.jpg2492×1600 552 KB

Hope it will help you…

2 Likes