Archives for category: User Interface (Web)

I was playing with the HTML5 Canvas element trying to allow client side zooming/panning/rotating of an image.  I finally figured out an implementation that will accommodate the zooming and I am still working on the panning/rotating pieces of the functionality.  I use a SELECT element to act as the scale (Zoom) for the image.  Even though it is not present in the code snippet below, I use a Generic Handler to populate my ASP.NET Image control.  The HTML5 canvas uses the ASP.NET Image control as the source of the image and then I can use JavaScript and the Canvas element to manipulate the image on the client side.

The HTML:

Zoom:
<select id="ZoomSelect" onchange="drawpicture();">
   <option id="Zoom50" value=".5">50%</option>
   <option id="Zoom75" value=".75">75%</option>
   <option id="Zoom100" value="1" selected="selected">100%</option>
   <option id="Zoom125" value="1.25">125%</option>
   <option id="Zoom150" value="1.5">150%</option>
   <option id="Zoom175" value="1.75">175%</option>
   <option id="Zoom200" value="2">200%</option>
</select>
<canvas id="viewer"></canvas>
<asp:Image ID="imgViewer" runat="server" style="display:none;" />

The JavaScript:

window.onload = function () {
   drawpicture();
};

function drawpicture() {
   var canvas = document.getElementById("viewer");
   var context = canvas.getContext("2d");
   var imageObj = document.getElementById('<%= imgViewer.ClientID %>');
   var scale = $('#ZoomSelect option:selected').val();
   context.clearRect(0, 0, 3000, 3000); // clear canvas for re-draw
   context.canvas.width = imageObj.width * scale;
   context.canvas.height = imageObj.height * scale;
   context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imageObj.width * scale, imageObj.height * scale);
}
Advertisements

I was working on a few pages where I wanted the content to automatically fill the height/width regardless of browser size.  I set my DIV tag with a id of “Content” and then created the following JQuery automatically scale the DIV tag to the appropriate height and width. I only have one DIV tag that required dynamic height and width so I was able to just subtract the height and width of the other elements on the page.  Replace N with the height/width of the other elements on the page.

The JQuery:

$(function () {
   $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
   $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
   $(window).resize(function () {
      $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
      $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
   });
});

JQuery Break down:

$(window).height()

I use $(window).height() to get the height of the browser window

(($(window).height()) - N)

then subtract the height of the other static elements in my page

$('#content').css({ 'height': (($(window).height()) - N) + 'px' });

Lastly we assign it to the height style property of my DIV tag with the id of Content.

The width functionality is similar except we use $(window).width() instead.

You’ll notice we also cover on window resize by including:

$(window).resize(function () {
      $('#content').css({ 'height': (($(window).height()) - N) + 'px' });
      $('#content').css({ 'width': (($(window).width()) - N) + 'px' });
});

I’m working on a HTML5 web site and need a way to have borders on the TD tags without using the cellpadding and cellspacing attributes like I usually implement.  After some googling I found a solution here.  The answer does not mention HTML5 specifically but it worked like a charm.

table
{
 border-spacing: 0px;
 border-collapse: collapse;
}

I was creating a UI from a PSD file and after I extracted the image background I realized that it was only 970px wide.  So I went searching for a good way to stretch it out in the background and I ran across this gem.

The HTML:

<div id="dvbackground">
 <img src="YOURIMAGESOURCE" class="stretch" alt="" />
</div>

The CSS:

#dvbackground
{
 width:100%;
 height:100%;
 position: fixed;
 left:0px;
 top:0px;
 z-index: -1;
}

.stretch
{
 width:100%;
 height:100%;
}