johna's blog

Full width HTML5 video without preserving the aspect ratio

2016-08-10T12:00:00+10:00

I recently needed to show a video on a web page that needed to take the full width of the container (in this case, the full screen width) but keep a consistent height.

After some research I found a Stack Overflow post that lead me to a blog post, and a comment was left with what seems to be a good solution. This blog post has since been removed so I can't reference it or credit the author.

This works by changing a CSS transform property value when the video is loaded or the browser window resized.

Here's the JavaScript function (jQuery required), but see the source of the working example below for how to use.

function sizeVideo(video) {
	var rawWidth = $(video).prop("videoWidth");
	var rawHeight = $(video).prop("videoHeight");
	var origAspect = rawWidth / rawHeight;
	var containerWidth = $(video).width();
	var containerHeight = $(video).height();
	var targetAspect = containerWidth / containerHeight;
	var multi = (targetAspect / origAspect);
	$(video).css({
		"transform": "scaleX(" + multi + ")",
		"-ms-transform": "scaleX(" + multi + ")",
		"-moz-transform": "scaleX(" + multi + ")",
		"-webkit-transform": "scaleX(" + multi + ")",
		"-o-transform": "scaleX(" + multi + ")"
	});
}

The following working example uses the basic Bootstrap 3.x template and includes necessary CSS and an example of what events to call this function in.

Working example

Excellent tutorial to make DHTML windows

2011-03-06T12:00:00+10:00

I found this article which looks at building dynamic DHTML windows that can appear like those on the Windows desktop and are draggable, resizable, and can be minimised and restored.

See the sample here.

The full article is here.

100% CSS Layout

2008-05-28T12:00:00+10:00

I had been looking for a CSS layout that has three components - a header, footer and content area - and the following characteristics:

When the content in the content area does not fill the available window space the footer should be set to the bottom of the page.
When the content overflows the footer should be positioned at the end of the document, off the screen.
The content area should fill at least all remaining window space so that any object I put inside it can scale to 100% of its height.
The content area should have a minimum height so that it won't look silly in a very tiny window (unlikely)
If the user resizes the browser the content area should resize.

I couldn't find a pure CSS solution so I came up with a solution that uses CSS and JavaScript.

View Sample (new window)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function maxContent(){ var divContent = getElementDimensions(document.getElementById("content")); var divHeader = getElementDimensions(document.getElementById("header")); var divFooter = getElementDimensions(document.getElementById("footer")); var remainder = document.documentElement.clientHeight - divContent.y - divFooter.height - 0 if(remainder<250){remainder=250}; //minimum height of content document.getElementById("content").style.height = remainder + "px"; function getElementDimensions(q){ var offsetY=offsetX=0; var height=q.scrollHeight; var width=q.scrollWidth; while(q){ offsetX+=q.offsetLeft; offsetY+=q.offsetTop; q=q.offsetParent; } return{ "x":offsetX,"y":offsetY,"height":height,"width":width }; } } window.onload = maxContent; window.onresize = maxContent; </script> <style type="text/css"> html,body { margin:0; padding:0; } div#container { } div#header { background-color:#fbb; } div#content { background-color:#bfb; } div#footer { background-color:#bbf; width:100%; bottom:0; } </style> </head> <body> <div id="container"> <div id="header"> Header </div> <div id="content"> <table border="1" height="100%"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> </table> </div> <div id="footer"> Footer </div> </div> </body> </html>

Setting a Maximum Page Width Using CSS

2008-02-16T12:00:00+10:00

When designing a web site one of the first decisions to make is whether to use a fixed-width, liquid or other type layout.

Fixed-width designs are popular but have certain limitations. If you design for 800x600 your layout may look much too small at a higher resolution. If you design for 1024x768, lower resolution screens will require a horizontal scrollbar.

Liquid designs, although not the perfect solution, have less compromises. At very low resolutions they can become very difficult to read and at very high resolutions line lengths can become very long and also difficult to read.

A good compromise in my opinion is to use a liquid layout but set a limit to the width.

One method of doing this reliably on popular browsers is to use the following styling:

<div style="max-width:1004px;width:expression(document.body.clientWidth>1004?'1004px':'auto')">

In this case, the maximum width is set to 1004 (for 1024x768 screen resolution less 20px for the vertical scroll bar).