Categories
CSS & HTML Tips

CSS: Complementary Background in Float

Consider a PSD wordpress theme design with a blog post title like this:

problem

Apparently there’s a whole image background on the page instead of a solid color wherein the page title falls into, making the situation a little more complicated. Because if it’s just a solid color, I can simply do the following to achieve a flexible page title with a floating complementary background (or a solid dark red border) to the right.

The HTML:

<h1><span>page title</span></h1>

The CSS:

h1 {background:url(border-bg.png) repeat-x 0 50%} /* the dark red bar */
h1 span {display:inline;padding:0 4px;background:#fff} /* with #fff as the page background solid color */

Short and sweet.

However, with a cloth of varying colors as the page background instead of a solid color such as the example shown at the beginning of this post, the situation is a little more complicated. And the span has to be no background at all but transparent.

The solution

The solution is to make separate elements for page title and the complementary background of dark red border, both floated left, with their parent fixed in width and overflow:hidden.

The HTML:

<h1>
	<span class="wrap">
		<span class="title">page title</span>
		<span class="complementary"></span>
	</span>
</h1>

The CSS:

h1 {
	width:500px; /* width of the title area */
	overflow:hidden;
}
.wrap {
	display:block;
	width:5000px; /* sliding rail */
	white-space:nowrap;
	overflow:hidden;
}
.title {
	/* no background for title text */
	float:left; /* I slides on the rail */
	padding:2px 8px; /* maybe just right padding or margin */
}
.complementary {
	float:left; /* I slides on the rail, immediately after .title */
	width:500px; /* equals or wider than the width of h1 */
	background:url(border-bg.png) repeat-x 0 50%;
}

It’s just like looking at a railway stretching from your far left to your far right through a window, and there’s 2 trains on it. One is constantly varying in length and the other is adjusting its position accordingly.

Categories
JavaScript Tips & Tutorials

A slightly better approach than <body onload="…">

A tiny little quick tip for javascript beginners.

While you still can execute javascript code upon page loading completion with:

<body onload="jsFunc();">

You can just attach or define an onload event to body in the normal code flow:

window.onload = function() {
	jsFunc();
}
Categories
JavaScript Tips & Tutorials

JavaScript: Show & Tick a Specific Local Time Clock (Fixed Time Zone) instead of Client Time

When I’m coding for a new sub site where I need to show the local time of mine and my developers’ wherever the visitors are. Things get a little bit more tricky.

Time basics in JavaScript and PHP

To offset time zone differences in calculation, both JavaScript and PHP specs have time stamps representing the time that has elapsed from the Epoch of Linux (Jan 1st, 1970, 00:00:00 GMT) – the ground zero.

However, PHP goes with seconds while JavaScript goes with milliseconds. You need to multiply 1000 to the value returned by time() in PHP to use in Date.setTime() with JavaScript or divide by 1000 in the other way around with Date.getTime() and date().

The solution

To achieve what we are aiming for, that is, to display a chosen local time in any specific time zone (such as you, the developer’s) in any visitors’ browser no matter what the time zone he or she’s based, you have 2 options.

The 1st is to get the time of your server by PHP and inject into client side javascript, converting it to GMT time and adding the offset thus transforming the time to that of your time zone.

The 2nd is simpler, in that no PHP is involved which also incurs the risk of the client time not being accurate. It’s rare though, and as the project is not that much a time critical one, we’ll take this route.

JavaScript on-page ticking clock of your own time rather than visitor’s

The HTML:

<span id="date"></span>
<span id="day"></span>
<span id="clock"></span>

The JavaScript:

function updateClock() {

	var clientTime = new Date();
	var currentTime = new Date();
	var timeOffset = 8 * 60 * 60 * 1000;
	currentTime.setTime(clientTime.getTime() + timeOffset);

	var currentHours = currentTime.getUTCHours();
	var currentMinutes = currentTime.getUTCMinutes();
	var currentSeconds = currentTime.getUTCSeconds();
	var currentMonth = currentTime.getUTCMonth();
	var currentDate = currentTime.getUTCDate();
	var currentDay = currentTime.getUTCDay();
	
	switch(currentMonth) {
		case 0:currentMonth = 'Jan';break;
		case 1:currentMonth = 'Feb';break;
		case 2:currentMonth = 'Mar';break;
		case 3:currentMonth = 'Apr';break;
		case 4:currentMonth = 'May';break;
		case 5:currentMonth = 'June';break;
		case 6:currentMonth = 'July';break;
		case 7:currentMonth = 'Aug';break;
		case 8:currentMonth = 'Sep';break;
		case 9:currentMonth = 'Oct';break;
		case 10:currentMonth = 'Nov';break;
		case 11:currentMonth = 'Dec';break;
	}
	
	switch(currentDay) {
		case 0:currentDay = 'Sunday';break;
		case 1:currentDay = 'Monday';break;
		case 2:currentDay = 'Tuesday';break;
		case 3:currentDay = 'Wednesday';break;
		case 4:currentDay = 'Thursday';break;
		case 5:currentDay = 'Friday';break;
		case 6:currentDay = 'Saturday';break;
	}
	
	currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
	currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

	document.getElementById("clock").innerHTML = currentHours + ":" + currentMinutes + ":" + currentSeconds;
	document.getElementById("date").setAttribute('class', currentMonth);
	document.getElementById("date").innerHTML = currentDate;
	document.getElementById("day").innerHTML = currentDay;
}

window.onload = function() {
	updateClock();
	setInterval(updateClock, 1000);
}

In the JavaScript code above, highlighted in navy blue is what matters. currentTime, your local time to be displayed, is got by adding an offset of timeOffset to clientTime.getTime(), the GMT time stamp. I’m living in time zone GMT +8, therefore var timeOffset = 8 * 60 * 60 * 1000. Just modify it according to your time zone.

Also you have to use UTC methods to get time parts or the browser would automatically convert the time stamp into visitor’s local time.

Categories
JavaScript Tips & Tutorials

JavaScript: Multi-dimensional Array

In JavaScript, you initiate an array of 3 elements by:

var myArray = new Array(3);

Or:

var myArray = ['', '', ''];

And then to populate them with some values, you need:

for (var i = 0; i < 3; i++) {
	myArray[i] = i;
}

This is pretty much a single dimensional array. To create a multi-dimensional array such as a 2 dimensional one, you need to add one more dimension, initiating yet another array for each of the 1st-dimension elements:

var myArray = new Array(3);

for (var i = 0; i < 3; i++) {
	myArray[i] = new Array(3);
	for (var j = 0; j < 3; j++) {
		myArray[i][j] = '';
	}
}

A more straightforward approach is to directly assign values to multi-dimensional array variables:

myArray[0][0] = '';
myArray[0][1] = '';
myArray[0][2] = '';
myArray[1][0] = '';
myArray[1][1] = '';
myArray[1][2] = '';
myArray[2][0] = '';
myArray[2][1] = '';
myArray[2][2] = '';