Fong coding resources

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

05 June 2016

Getting the most of your Gear VR

The Samsung Gear VR is awesome. The Oculus store has lots of cool apps in it. But it does limit you to a closed system.

You can get VR content from other sources like Google / Bittorrent etc.

Here is how you can do it.

The VR player I think its really good is

VaR VR Video Player

https://play.google.com/store/apps/details?id=com.abg.VRVideoPlayer&hl=en

The reason I like it is because it allows you to select a video mode based on different file formats and your files could be stored anywhere in the phone including SD card.

But the first problem most people face it when they plug their phone in their Gear VR, the Oculus app will start up and excludes the app currently running.

The way to solve this is to use the Package Disabler Pro

https://play.google.com/store/apps/details?id=com.ospolice.packagedisablerpro&hl=en

Just install the app and disable the Gear VR Service. Next time you plug in the phone, the Oculus app won't take over. If you want to use the Oculus app again, just uncheck the Gear VR Service in the app.

Yes, it cost 99 cents and yes you can 'clip' your phone in the Gear VR losely without plugging it in. But spending 99 cents might save your 800 dollars phone from falling to the floor and the damage would cost you a lot more. Hence I would recommend getting this app.

Ok this should free you exploring the world of VR outside the confine of the Samsung store.

VR is great and I look forward to see more open license contents.