Archive for September, 2010

Published by Pui-chor on 23 Sep 2010

Full Background Image with jQuery

Refreshing without Reloading or zoom to 100%…

I have the full background image worked using jQuery. The code works for Chrome and Firefox. For Internet Explorer, it worked in version 8 in my school but not in my home computer. I am not sure what causes the problem. I have to re-fresh but not re-load the page in order to see the background image. The main reason is that the background image is generated from a script on the server side. My home computer IE does not show the image while rendering the page, only refreshing it by zooming the page, then the image will show. Nothing is wrong with the script generating the image. It must be the timing and sequencing of the browser program screwed up.

Here is the refreshing code without reloading the page using the function zoom:

var zoom_factor=100;
function zoom(how)
var bodyStyle =;
zoom_factor = (how)?100:110;
zoomed = bodyStyle.zoom;
if ((zoomed)&&(zoom_factor!=100))
bodyStyle.setAttribute(‘zoom’, parseInt(zoom_factor)+’%');

With the body tag, add the onload call:

<body onload=zoom(1)>

The original code for full background image with jquery:


#maincontent {
position: absolute;
top: 10;
left: 30;
z-index: 50;

.fullBg {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: auto;

<script type=”text/javascript” xsrc=”” mce_src=””>
<script type=”text/javascript”>
// You may specify partial version numbers, such as “1″ or “1.3″,
//  with the same result. Doing so will automatically load the
//  latest version matching that partial revision pattern
//  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.1).
google.load(“jquery”, “1.4.1″);


<script type=”text/javascript”>
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this);


function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height();

var winwidth = $(window).width();
var winheight = $(window).height();

var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;

var widthdiff = widthratio * imgwidth;
var heightdiff = heightratio * imgheight;

if(heightdiff>winheight) {
//width: winwidth+’px’,
width: ‘auto’,
height: heightdiff+’px’
else {
width: widthdiff+’px’,
//height: winheight+’px’
height: ‘auto’
$(window).resize(function() {

jQuery(function($) {

Then in the body:

<img xsrc=”someimageurl” mce_src=”someimageurl” id=”background” />
<div id=”maincontent”>….

Published by Pui-chor on 22 Sep 2010

Specifying Style Specific to IE

When I used the style for the font-size, position, text-align etc, I found IE displayed the same character or digit at the position too much off from the previous element. Chrome and Firefox displayed the character or digit at the same position relative to the previous element.

In order to deal with the IE specific style discrepancy, I added the following:

<!–[if IE]>
<style type=”text/css” media=”screen”>
p {
position: relative; top: -0.1em;

Published by Pui-chor on 21 Sep 2010

Pick A Number

It is one of the project I want to build and to test the concept. It worked! It is made with Ajax, a pretty new technology used nowaday. Client talked to the Server in background and update the content on the front webpage. Here is what you can try:

The Client side or customer side is the VIEW ONLY page such as the screen for the waiting patients to watch for their number to be serviced after they grabbed a number at the counter when they come in:  SCREEN SHOWING NUMBER TO BE SERVICED

The Server side or reception side is the UPDATE page to CALL the next serviceable client: CALLING SCREEN TO CALL FOR NEXT CUSTOMER

The main entry to set the number for the customer to grab is with-held for the time being. Just give me a shout at pc at chorwong dot com.

Next »