Get and set user timezone in cookies with jQuery

Scenario:

  1. Find the user timezone from it’s browser default time and then get the confirmation from the user about it’s timezone.
  2. User should be able to select different time zone
  3. Store the timezone in a cookie
  4. Perform the above procedure only if the user is logged in (asp.net identity)

Solution:

  • Using jQuery check if user is authenticated (asp.net identity)
  • If authenticated check if the timezone cookie is already set
  • If the cookie is not set yet, get confirmation from user about it’s timezone using bootstrap modal and store it in a cookie

 

Add a bootstrap modal form to your page with timezone drop-down list:

 <div class='modal fade' id='modalTimeZoneApprove' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
 <div class='modal-dialog' role='document'>
 <div class='modal-content'>
 <div class='modal-header'>
 <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
 <h4 class='modal-title'>Approve Your TimeZone</h4>
 </div>
 <div class='modal-body'>
 <p>Your default time zone is : <span id="spanTimeZone"></span></p>
 <br />
 <p>You can change your timezone: </p>
 <select class="form-control" id="zoneList">
 <option value="-13">--Select--</option>
 <option value="-12">(GMT-12:00) International Date Line West</option>
 <option value="-11">(GMT-11:00) Midway Island, Samoa</option>
 <option value="-10">(GMT-10:00) Hawaii</option>
 <option value="-9">(GMT-09:00) Alaska</option>
 <option value="-8">(GMT-08:00) Pacific Time (US & Canada)</option>
 <option value="-8">(GMT-08:00) Tijuana, Baja California</option>
 <option value="-7">(GMT-07:00) Arizona</option>
 <option value="-7">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
 <option value="-7">(GMT-07:00) Mountain Time (US & Canada)</option>
 <option value="-6">(GMT-06:00) Central America</option>
 <option value="-6">(GMT-06:00) Central Time (US & Canada)</option>
 <option value="-6">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
 <option value="-6">(GMT-06:00) Saskatchewan</option>
 <option value="-5">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
 <option value="-5">(GMT-05:00) Eastern Time (US & Canada)</option>
 <option value="-5">(GMT-05:00) Indiana (East)</option>
 <option value="-4">(GMT-04:00) Atlantic Time (Canada)</option>
 <option value="-4">(GMT-04:00) Caracas, La Paz</option>
 <option value="-4">(GMT-04:00) Manaus</option>
 <option value="-4">(GMT-04:00) Santiago</option>
 <option value="-3.5">(GMT-03:30) Newfoundland</option>
 <option value="-3">(GMT-03:00) Brasilia</option>
 <option value="-3">(GMT-03:00) Buenos Aires, Georgetown</option>
 <option value="-3">(GMT-03:00) Greenland</option>
 <option value="-3">(GMT-03:00) Montevideo</option>
 <option value="-2">(GMT-02:00) Mid-Atlantic</option>
 <option value="-1">(GMT-01:00) Cape Verde Is.</option>
 <option value="-1">(GMT-01:00) Azores</option>
 <option value="0">(GMT+00:00) Casablanca, Monrovia, Reykjavik</option>
 <option value="0">(GMT+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London</option>
 <option value="1">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
 <option value="1">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
 <option value="1">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
 <option value="1">(GMT+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
 <option value="1">(GMT+01:00) West Central Africa</option>
 <option value="2">(GMT+02:00) Amman</option>
 <option value="2">(GMT+02:00) Athens, Bucharest, Istanbul</option>
 <option value="2">(GMT+02:00) Beirut</option>
 <option value="2">(GMT+02:00) Cairo</option>
 <option value="2">(GMT+02:00) Harare, Pretoria</option>
 <option value="2">(GMT+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
 <option value="2">(GMT+02:00) Jerusalem</option>
 <option value="2">(GMT+02:00) Minsk</option>
 <option value="2">(GMT+02:00) Windhoek</option>
 <option value="3">(GMT+03:00) Kuwait, Riyadh, Baghdad</option>
 <option value="3">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
 <option value="3">(GMT+03:00) Nairobi</option>
 <option value="3">(GMT+03:00) Tbilisi</option>
 <option value="3.5">(GMT+03:30) Tehran</option>
 <option value="4">(GMT+04:00) Abu Dhabi, Muscat</option>
 <option value="4">(GMT+04:00) Baku</option>
 <option value="4">(GMT+04:00) Yerevan</option>
 <option value="4.5">(GMT+04:30) Kabul</option>
 <option value="5">(GMT+05:00) Yekaterinburg</option>
 <option value="5">(GMT+05:00) Islamabad, Karachi, Tashkent</option>
 <option value="5.5">(GMT+05:30) Sri Jayawardenapura</option>
 <option value="5.5">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
 <option value="5.75">(GMT+05:45) Kathmandu</option>
 <option value="6">(GMT+06:00) Almaty, Novosibirsk</option>
 <option value="6">(GMT+06:00) Astana, Dhaka</option>
 <option value="6.5">(GMT+06:30) Yangon (Rangoon)</option>
 <option value="7">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
 <option value="7">(GMT+07:00) Krasnoyarsk</option>
 <option value="8">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
 <option value="8">(GMT+08:00) Kuala Lumpur, Singapore</option>
 <option value="8">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
 <option value="8">(GMT+08:00) Perth</option>
 <option value="8">(GMT+08:00) Taipei</option>
 <option value="9">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
 <option value="9">(GMT+09:00) Seoul</option>
 <option value="9">(GMT+09:00) Yakutsk</option>
 <option value="9.5">(GMT+09:30) Adelaide</option>
 <option value="9.5">(GMT+09:30) Darwin</option>
 <option value="10">(GMT+10:00) Brisbane</option>
 <option value="10">(GMT+10:00) Canberra, Melbourne, Sydney</option>
 <option value="10">(GMT+10:00) Hobart</option>
 <option value="10">(GMT+10:00) Guam, Port Moresby</option>
 <option value="10">(GMT+10:00) Vladivostok</option>
 <option value="11">(GMT+11:00) Magadan, Solomon Is., New Caledonia</option>
 <option value="12">(GMT+12:00) Auckland, Wellington</option>
 <option value="12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
 <option value="13">(GMT+13:00) Nuku'alofa</option>
 </select>
 </div>
 <div class='modal-footer'>
 <button type='button' class='btn btn-primary' id='confirmModalTimeZone'>Confrim</button>
 <button type='button' class='btn btn-default' data-dismiss='modal' id='closeModalApprove'>Cancel</button>
 </div>
 </div>
 </div>
 </div>

the modal will looks like this:
timezone

Now add JavaScript/jQuery methods to set the cookies if the users is authenticated (using asp.net Identity)

 function getCookie(cname) {
            var name = cname + "=";
            var decodedCookie = decodeURIComponent(document.cookie);
            var ca = decodedCookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

 function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
        }

 function checkCookie(cname) {
            var cookieName = getCookie(cname);
            if (cookieName != "") {
                alert("Welcome again " + cookieName);
            }
            else {
                $('#modalTimeZoneApprove').modal('show');
                cookieName = "GMT  " + get_time_zone_offset();
                if (cookieName != "" && cookieName != null) {
                    setCookie(cname, cookieName, 365); MediaQueryList
                }
            }
        }

  function get_time_zone_offset() {
            var current_date = new Date();
            return -current_date.getTimezoneOffset() / 60;
        }

 $(document).ready(function () {
            var isAuthenticated = '<%=HttpContext.Current.User.Identity.IsAuthenticated %>';
            if (isAuthenticated=="True") {

                var cookieName = getCookie("AccountTimeZone");
                if (cookieName != "") {
                    //do nothing!
                }
                else {
                    cookieName = "GMT  " + get_time_zone_offset();
                    $("#spanTimeZone").text(cookieName);
                    $('#modalTimeZoneApprove').modal('show');
                }

                $('#zoneList').on('change', function () {
                    $("#spanTimeZone").text($("#zoneList option:selected").text());
                })

                $("#confirmModalTimeZone").click(function () {
                    var zone = $("#spanTimeZone").text();
                    if (zone != "" && zone != null) {
                        setCookie("AccountTimeZone", zone, 365);
                    }
                    $('#modalTimeZoneApprove').modal('hide');
                });
            }

Removing added new line break after using SSI with Charset UTF-8 in Visual Studio or Notepad++

When using SSI in your HTML page with charset=”UTF-8″  the new line will be added after each time you use includes. it’s because your file encoding is saved with BOM or signature.

In order to overcome this, if you are using Visual Studio go to:  file> Advanced Saved Options  and change the Encoding to  UTF-8(Unicode without signature).

If you use Notepad++ go to: Encoding > Encode in UTF-8 Without BOM you should save all your Include files(.inc) to remove that extra space happen.

Meta tag in HTML5

The meta tag should still be defined in HTML 5 like XHTML.

it’s generally used to describe a characteristic of a Web page, such as the character encoding. Character encoding is the internal representation of letters, numbers, and symbols in a file such as a Web page or other file that is stored on a computer and may be transmitted over the Internet. There are many different character encoding sets. However, it is common practice to use a character encoding set that is widely supported, such as utf-8, which is a form of Unicode. The below meta tag indicates
that the content of the document is a Web page that uses utf-8 character encoding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

although your page will continue to work without defining this tag, it better to define it to get a green ribbon on Validator!

Document Type Definition for XHTML

Because multiple versions and types of HTML and XHTML exist, the W3C recommends
identifying the type of markup language used in a Web page document. The
three types of XHTML 1.0, XHTML 1.0 Transitional, XHTML 1.0 Strict, and
XHTML 1.0 Frameset are used for XHTML but with HTML5 its simply : <!DOCTYPE HTML>