IE 7&8 Support

Introduction

It is a rare case you are required to build HTML support IE 7 and 8. Luckily, I have received the requirement.
It is a multiple form page. It needs to work with IE 7 and 8 with following features.
– jQuery basic selector, DOM manipulation.
– jQuery UI.
– jQuery form validation, ideally to make it unobtrusive.
– Bootstrap
– DataTable.js

Here, I am my favour to mark down anything I believe useful for further. I hope it helps you in any way.

Versions of library

This is my biggest headache. As a software engineer, I am attempted to upgrade any library to the greatest and latest. However, it is not the case here. The latest and greatest are actually dumping supports to IE 7 and 8.

I struggled a bit to find the right versions of libraries and their dependency. So, I can get my wanted features in IE 7 & 8.

Here is the list of libraries and their version do work on IE 7 & 8, as far as I found. I will review the list and update in future as I go.

|:———————-|:—————–|

Library Version Compatible
jQuery 1.12.4
jQuery UI 1.12.0
jQuery validation 1.11.1
Bootstrap 3.3.7
Font Awesome 4.6.3
DataTables 1.10.12

For ASP.NET, I used following nuget package.

<package id="bootstrap.less" version="3.3.7" targetFramework="net452" />
<package id="jQuery" version="1.12.4" targetFramework="net452" />
<package id="jQuery.UI.Combined" version="1.12.0" targetFramework="net452" />
<package id="jQuery.Validation" version="1.11.1" targetFramework="net452" />
<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net452" />
<package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net452" />

More updating…

Enjoy coding…
Please let me know if I make a mistake. Much appreciated.

Advertisements

Quick HTML Front End Prototyping

Introduction

My focus is on web application back end development. In some projects, I also need to put on a web front ender’s hat doing HTML prototype and front end coding. I quite enjoy the variety of web development works.

Given the fact, I am still not a full dedicated front ender. Sometime, I spend some extra time setting up a HTML template.

This the reason of this article. I need to document some useful websites, tools and pitfalls for myself and hopefully for you.

Common libraries

  • Boostrap and Zurb foundation. Notice: I found Zurb doesn’t support IE 8.
  • Font awesome. IE 8 campatible
  • Modernizr
  • Custom font if required.

Useful links

Password protect (C# specific)

I use C# for prototypes, the cshtml or aspx will be easily migrated in my build solution during implementation period.

I use HttpAuthModule to password protect a internet published prototype.

IE 8 with boostrap

IE 8 don’t support css media query. In this case, we need a respond.js to do the magic for Boostrap, following this webpage.

However, I have struggled to make this work on IE 8, until I fully understand the following quotes on the webpage.

Internet Explorer 8 and Respond.js
Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.

Respond.js and cross-domain CSS
Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. See the Respond.js docs for details.

What I need are :
1. downloading the Boostrap and host my own, rather than referencing using CDNs.
2. put the Boostrap css reference in front of the respond.js reference.

like this.

<link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" >
<link rel="stylesheet" href="/Assets/App.css" media='all'>

    <!--[if lt IE 9]>
      <a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js</a>
      <a href="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js</a>
    <![endif]-->

Finally, it looks like.

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>
        <asp:ContentPlaceHolder ID="title" runat="server" />
    </title>
    <meta name="description" content="Automation Tools" />
    <asp:ContentPlaceHolder ID="head" runat="server" />

    <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Assets/Vendors/bootstrap/css/bootstrap-theme.css" >

    <link rel="stylesheet" href="/Assets/Vendors/font-awesome/css/font-awesome.min.css" media='all'>
    <link rel="stylesheet" href="/Assets/App.css" media='all'>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css' media='all'>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" />
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" />
    <![endif]-->
</head>
<body>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" />
    <script src="/Assets/Vendors/bootstrap/js/bootstrap.min.js" />

    <script src="/Assets/App.js" />
</body>
</html>