Fong coding resources

08 July 2017

This is how you do Agile software development :)

18 June 2017

Access html elements in the same table row using jQuery

   <table>  
     <tr>  
       <td>Mary</td>  
       <td><div id="parentTimer"></div></td>  
       <td id="td">  
         <button id="btnStart" type="button" onclick="handleStart(event, this);">Start</button>  
         <input id="inputValue" value="Test" />  
       </td>  
     </tr>  
   </table>

   <script>  
     function handleStart(event, sender)  
     {  
       var $row = $(sender).parents('tr');  
       var desc = $row.find('#inputValue').val();  
       var div = $row.find('#parentTimer');  
       div.html('started');  
       alert(desc);  
     }  
   </script>

16 June 2017

Seamless HTML page transition

With more and more complex HTML + CSS3 + jQuery page design these days, it is very easy to have clunky webpages which take a while to load, with components like jQuery tab controls display partially before they are formatted. A way to get around that is to display web pages after they are fully rendered.

 CSS:  
 <style>  
   html { visibility:hidden; } /*html is initially hidden*/  
   /*fade in effect*/  
   body {  
     opacity: 1;   
     transition: 1s opacity;  
   }  
   body.fade-out {  
     opacity: 0;  
     transition: none;  
   }  
 </style>  
 JavaScript  
 <script>  
 $(document).ready(function() {  
  /*show html after page load*/  
  document.getElementsByTagName("html")[0].style.visibility = "visible";  
 });  
 </script>

11 December 2016

Resizable Div based on browser window height

Below is an example of how you can use jQuery to create a resizable div which will adjust to your browser height

 <html>  
 <head>  
   <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
 </head>  
 <body>  
   <style>  
     #divResizeable {  
       background-color: orange;  
       width: 100%;  
       height: 200px;  
       min-height :200px;  
     }  
   </style>  
   <div id="divResizeable">  
   </div>  
   <script>  
     $(document).ready(function () {  
       ResizeEvent();  
     });  
     window.onresize = function (event) {  
       ResizeEvent();  
     }  
     function ResizeEvent() {  
       dh = $(window).height() - 200;  
       $("#divResizeable").css({ "height": dh + "px" });  
     }  
   </script>  
 </body>  
 </html>

10 November 2016

HTML Table as Div

Below illustrates how we can use Div to display table content. Essentially just use css clear:left as the beginning of each row and css float:left for table cell

@using WebApplication2.Models
@model Product[]
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>

<body>
    <style>
        .body{
            font-family:Tahoma;
            font-size:10pt;
        }
        .TableLabel {
            width: 200px;
            min-width: 200px;
            max-width: 200px;
            background-color:powderblue;
        }
        .TableContent {
            width: 200px;
            min-width: 200px;
            max-width: 200px;
            background-color:lightgreen;
        }
        .DivRow
        {
           clear:left;
           width:400px;
        }
        .DivCellLabel{
            float:left;
            width:200px;
            background-color:powderblue;
        }
        .DivCellContent{
            float:left;
            width:200px;
            background-color:lightgreen;
        }
    </style>
    <div>
        <table cellpadding="0" cellspacing="0">
                @foreach (Product p in Model)
                {
                    <tr>
                        <td class="TableLabel" width="200px">@p.ProductCode</td>
                        <td class="TableContent" width="200px">@p.ProductName</td>
                    </tr>
                }
        </table>
    </div>
    <hr />
    <div>
        @foreach(Product p in Model)
        {
            <div class="DivRow">
                <div class="DivCellLabel">@p.ProductCode</div>
                <div class="DivCellContent">@p.ProductName</div>
            </div>
        }
    </div>
</body>
</html>

26 October 2016

How to put in a where condition / filter in your dataset in Crystal Report

If you are like me, a predominantly a Reporting Services developer, you will find Crystal Report a little awkward.

For example, finding the datasource a Crystal report refer to is easy. Where the filter condition is on the other hand, is not always obvious if you are used to SSRS.

It is apparently in the Report menu under formula workshop.

23 September 2016

Useful scripts for creating date ranges in SQL Server

When you want to find out the number of work days in a date range

     declare @WorkDays int  
     select @WorkDays = (  
                 (datediff(dd, @StartDate, @EndDate) + 1)  
                -(datediff(wk, @StartDate, @EndDate) * 2)  
                -(case when DATENAME(dw, @StartDate) = 'Sunday' then 1 else 0 end)  
                -(case when DATENAME(dw, @EndDate) = 'Saturday' then 1 else 0 end)  
               )

When your users want a date ranges

 set nocount on  
 declare @Now datetime  
 declare @Today datetime  
 set @Now = getdate()  
 set @Today = DATEADD(day, DATEDIFF(day, 0, @Now), 0)  
 declare @day int  
 declare @week int  
 declare @dayofweek int  
 declare @dayofyear int  
 set @day = datepart(day, @Today)  
 set @week = datepart(week, @Today)  
 set @dayofweek = datepart(weekday, @Today)  
 set @dayofyear = datepart(dayofyear, @Today)  
 declare @weekbegin datetime  
 set @weekbegin = DATEADD(day, (@dayofweek-1)* -1, @Today)  
 declare @lastweekbegin datetime  
 set @lastweekbegin = DATEADD(week, -1, @weekbegin)  
 declare @lastweekend datetime  
 set @lastweekend = DATEADD(day, 6, @lastweekbegin)  
 declare @monthbegin datetime  
 set @monthbegin = DATEADD(day, (@day-1)* -1, @Today)  
 declare @lastmonthbegin datetime  
 set @lastmonthbegin = DATEADD(month, -1, @monthbegin)  
 declare @lastmonthend datetime  
 set @lastmonthend = DATEADD(day, -1, @monthbegin)  
 declare @yearbegin datetime  
 set @yearbegin = DATEADD(day, (@dayofyear-1)* -1, @Today)  
 declare @lastyearbegin datetime  
 set @lastyearbegin = DATEADD(year, -1, @yearbegin)  
 declare @lastyearend datetime  
 set @lastyearend = DATEADD(day, -1, @yearbegin)  
 create table #daterange  
 (  
   label varchar(20),  
   startdate datetime,  
   enddate datetime  
 )  
 insert into #daterange(label, startdate, enddate) values ('Current Week', @weekbegin, @Today)  
 insert into #daterange(label, startdate, enddate) values ('Last Week', @lastweekbegin, @lastweekend)  
 insert into #daterange(label, startdate, enddate) values ('Current Month', @monthbegin, @Today)  
 insert into #daterange(label, startdate, enddate) values ('Last Month', @lastmonthbegin, @lastmonthend)  
 insert into #daterange(label, startdate, enddate) values ('Current Year', @yearbegin, @Today)  
 insert into #daterange(label, startdate, enddate) values ('Last Year', @lastyearbegin, @lastyearend)  
 update #daterange set enddate = DATEADD(day, 1, enddate)  
 select * from #daterange  
 drop table #daterange