You are currently browsing the category archive for the 'Code' category.
This is an awesome little tool. A JavaScript pop-up calendar that populates an input field based on what date you select. You can format the output of the date, and even alter its style in the CSS.
Click here to see it in action, or download the source files to use in your next project.
Enjoy 
If you’ve ever tried to create a website layout using transparent PNG’s, you would have also found that your beautiful image has an unsightly gray background in Internet Explorer. Today I show you a very simple fix for this common problem.
The solution is a simple JavaScript include. Pop this file into any page you want to support Transparent PNG’s in, and presto! No more ugly gray background.
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
Click here to view it in action. Try resizing the window to see the transparent star move over the background.
Although not that widely supported, I have found a way to make 100% height with CSS work in IE, Firefox and Opera. Three of the most major browsers right now. Today, I show you how to accomplish this fun little trick. First we must look at the html and body tags. In CSS’ eyes, these tags are block level elements. Meaning by default that they have a value of auto height and width. Changing these values in your CSS, you can quickly add 100% height to your design.
Here’s the code:
html, body {height: 100%;}
And there you have it. Wasn’t that easy? Now any time you add an element within your page, you can give it a value of a 100% height using CSS! If your still a little confused, thats ok. I wrote a quick page for you to use as a way of learning.
<!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" xml:lang="en" lang="en">
<head>
<title>Call me Jack | 100% Height with CSS</title>
<style>
html, body {margin: 0; padding: 0;}
html, body, div {height: 100%;}
div {width: 50%; background-color: green; margin: 0px auto 0px; text-align: center; padding: 20px;}
</style>
</head>
<body>
<div><a href="http://callmejack.wordpress.com" target="_blank">Call me Jack</a></div>
</body>
</html>
