Rants and sundry: July 2012

Monday, July 30, 2012

Making a div fill the page height

I overheard a co-worker complain about some of our HTML in the office today. There's a grid that we have in a div that is pretty much always too short for its content. It would be great if we could get a div to fill the entire page, excluding our header content.

I figured it out. It's okay, except there doesn't seem to be a nice way of automagically aligning to the header height. You pretty much have to set the "top" property to the height of your header.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta http-equiv="x-ua-compatible" content="IE=8">
 <style type="text/css">
  *{
   box-sizing: border-box;
  }
  .container{
   border: 3px solid red;
   margin: 5px;
   position: absolute;
   bottom:0px;
   top:0px;
   left:0px;
   right:0px;
  }
  .header{
   border: 3px solid green;
   margin: 5px;
   height: 200px;
   position: relative;
  }
  .tableContainer{
   border: 3px solid blue;
   position: absolute;
   margin: 5px 5px 5px 5px;
   bottom:0px;
   top:210px; /* Required for positioning. Could tie this with javascript to make it work */
   left:0px;
   right:0px;
   overflow: auto;
  }
  .tableMock{
   height:400px;
   background-color: #3399ff;
   width: 100%;
   color: white;
   text-align: center;
   font-weight: bold;
   font-size: 30px;
   font-family: arial, helvetica, 'san-serif';
   padding: 30px;
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="header"></div>
  <div class="tableContainer">
   <div class="tableMock">
    The table here could be as tall or short as you want. If it is larger than the containing div, scroll bars will appear (x and y). Otherwise no matter how large the screen gets, the containing div will always take up as much of it as it can.
   </div>
  </div>
 </div>
</body>
</html>

Thursday, July 26, 2012

Dates, Time Zones, JSON and MVC

Ran into an issue with sending a date to MVC. Needed to have a date within a certain range, and I'm using a Telerik date picker to do the date selection. Worked great, here in California. Didn't work so well in India.

When you create a date in Javascript, it appends the time zone.

Sat Jan 01 2000 00:00:00 GMT-0800 (Pacific Standard Time)

When you send it via ajax, it's converted to UTC, or

"2000-01-01T08:00:00.000Z"

This works fine for time zones with a negative UTC offset. For time with a positive offset, this can set their selection outside of the date range,

"1999-12-31T18:30:00.000Z"

I think this could be a fix...

myDate = new Date("1/1/2000")

Sat Jan 01 2000 00:00:00 GMT-0800 (Pacific Standard Time)

myDate.setMinutes(-myDate.getTimezoneOffset())

946684800000

myDate

Fri Dec 31 1999 16:00:00 GMT-0800 (Pacific Standard Time)

myDate.toJSON()

"2000-01-01T00:00:00.000Z"

And with my time set to IST

var myDate = new Date("1/1/2000")

undefined

myDate

Sat Jan 01 2000 00:00:00 GMT+0530 (India Standard Time)

myDate.setMinutes(-myDate.getTimezoneOffset())

946684800000

myDate

Sat Jan 01 2000 05:30:00 GMT+0530 (India Standard Time)

myDate.toJSON()

"2000-01-01T00:00:00.000Z"