@manhng

Welcome to my blog!

Browser IE11

March 5, 2020 13:19

Browser IE11 (edit)

Responsive Web Design

Non Responsive Web Design

https://bootstrapdocs.com/v3.3.6/docs/examples/non-responsive/

Responsive Web Design:

https://bootstrapdocs.com/v3.3.6/docs/examples/dashboard/

Bootstrap 4+5 (IE11):

https://getbootstrap.com/

https://blog.bootswatch.com/

Bootstrap 3 (IE8+9):

https://bootstrapdocs.com/v3.3.6/docs/getting-started/

https://www.w3schools.com/icons/default.asp (Font Awesome)

https://bootstrapdocs.com/v3.3.6/docs/components/#glyphicons (Glyphicons)

https://bootstrapdocs.com/v3.3.6/docs/examples/dashboard/ (Dashboard Admin Theme)

https://fonts.google.com/

https://github.com/typekit/webfontloader

https://thomaspark.co/projects/fontcdn/

https://github.com/seatgeek/react-infinite

https://qwerty.dev/ (Font)

https://glyphsearch.com/ (Icon)

https://wrapbootstrap.com/

https://bootswatch.com/

https://www.toptal.com/twitter-bootstrap/the-10-most-common-bootstrap-mistakes

http://thegioi360.vn/posts/t6252-10-Loi-thuong-gap-khi-dung-Bootstrap

https://viblo.asia/p/10-loi-thuong-gap-khi-su-dung-bootstrap-l5XRBJEbRqPe

https://www.toptal.com/front-end/what-is-bootstrap-a-short-tutorial-on-the-what-why-and-how

Tip 1: Những ví dụ tốt cho thấy những thiết kế khác nhau có được bằng cách nào được trình bày ở Bootstrap Expo, một trang tập hợp những sites dùng Bootstrap. Hãy xem xét, lấy cảm hứng, và bắt đầu xây dựng thiết kế riêng biệt của bạn.

Tip 2: Hãy bắt đầu bằng việc không dùng file bootstrap.js, và tạo site chỉ bằng HTML và CSS. Sau đó, thêm thành phần nào cần cho những việc cụ thể, từng cái một.

Tip 3: Bootlint: tool kiểm tra cấu trúc HTML của những projects dùng Bootstrap.

Tip 4: Bootstrap là framework ưu tiên hỗ trợ mobile (mobile first framework) + thiết bị cảm ứng không có hành động rê chuột, mà chỉ có hành động chạm (only touch events) nên trên mobile nó sẽ không làm việc đúng.

IE test example page:

http://output.jsbin.com/kuvoz/1

https://css-tricks.com/box-sizing/

https://accessibility.psu.edu/headings/

WordPress

https://thomaspark.co/

Common social media icons:

  • Facebook (fa fa-facebook) to be used for Facebook pages; or (fa fa-facebook-square) to be used for Facebook groups
  • Twitter (fa fa-twitter)
  • Google Plus (fa fa-google-plus)
  • Github (fa fa-github)
  • Pinterest (fa fa-pinterest)
  • LinkedIn (fa fa-linkedin)
  • Flickr (fa fa-flickr)
  • Instagram (fa fa-instagram)
  • Vimeo (fa fa-vimeo)
  • Tumblr (fa fa-tumblr)
  • Skype (fa fa-skype)
  • YouTube (fa fa-youtube); or (fa fa-youtube-play)
  • Blogger (fa fa-blogger)
  • WordPress (fa fa-wordpress)
  • Snapchat (fa-snapchat-ghost)
  • RSS (fa fa-rss)

Framework Use:

https://support.microsoft.com/en-us/help/3135465/how-to-enable-javascript-in-windows

https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie (HAY)

https://www.sitepoint.com/check-ie-version/

https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser (HAY)

DOMContentLoaded vs jQuery.ready

https://eager.io/blog/how-to-decide-when-your-code-should-run/

JavaScript HTML DOM EventListener

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

setTimeout

https://freetuts.net/settimeout-va-setinterval-trong-javascript-391.html

Examples

....
<script type="text/javascript" language="javascript">
function StyleForMsIEVersionOnly() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
{
document.getElementById("tdElement").style.padingRight = "124px";
} else {
document.getElementById("tdElement").style.paddingRight = "94px";
}
}
function showWaitingMessage() {
document.getElementById("spanElement").style.display = 'block'; // to show SPAN
setTimeout(function () {
hideWaitingMessage();
}, 3000);
}
function hideWaitingMessage() {
document.getElementById("spanElement").style.display = 'none'; // to hide SPAN
}
window.addEventListener('DOMContentLoaded', function () {
StyleForMsIEVersionOnly();
document.getElementById("spanElement").style.display = 'none';
document.getElementById("btnAction").addEventListener("click", showWaitingMessage);
});
</script>
</div>
</asp:Panel>
</asp:Content>

Problem with new Date().toLocaleDateString() in IE11

July 17, 2019 09:59

IE11 Date Problem (edit)

IE11 > F12 to Debug > Copy date string value > Paste in w3schools

https://stackoverflow.com/questions/21413757/tolocaledatestring-changes-in-ie11

https://stackoverflow.com/questions/25294363/ie-11-issue-with-javascript-tolocaledatestring-formatting

Usage Code

<!DOCTYPE html>
<html>
<body>

<p>Click the button to extract characters from the string.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
var str = "‎MM‎/‎dd‎/‎yyyy".replace(/\u200E/g, '');

document.getElementById("demo").innerHTML = str;
}
</script>

</body>
</html>Abc

Categories

Recent posts