breakthrough design

Gone are the days of attempting to hodge podge a transparent gif, in an attempt to match the “matte” of the gif in photoshop to the color of the background in your page.   The only way to achieve transparency is with a PNG.  You will see a dramatically higher level of clarity with png, allowing for near freedom; dropshadows, fonts, gradients are all handled fairly well with png.

What’s the Problem?

The problem however is that IE 6 definitively does NOT support transparent images.  I think Firefox has been supporting it since the ice ages, and probably earlier.  So, I can’t use transprent png’s??

The Solution

Thanks to Twin Helix (Angus Turnbull)’s IE PNG Fix, we can now use transparent images wherever we want, AND it supports transparent background images!   TO NOTE: There are other IE PNG Fixes, but we found them to be either: too obtrusive, or not supporting background images, (this also includes our old favorite sleight).

How to Use It

Implementation is just a few steps and doesn’t require long lines of css or javascript code.  Get the full directions here. Simply include the attached .htc file, blank 1x1px gif, and one quick line of CSS:

img, div { _behavior: url(scripts/iepngfix.php) }

** PLEASE NOTE: We found that the original script (which does not include an underscore), caused CSS Warnings in Firefox, so the addition of the underscore hides the declaration from Firefox and applies to IE Only.

In this case, we are applying the transparent png support to all images, and divs, you can use it for any elements you wish.

Known Issues

Being a bug fix, there are some known issues.  For example:

• Child links of absolutely positioned elements cannot be clicked.  There is a workaround for this, but not a full solution.
• z-index issues: when positioning dynamic elements (e.g. a dropdown navigation), images affected by the script will always appear in front of the absolutely positioned elements.  Working on a solution..

UPDATE

I know it’s pretty early for an update, as we just published this, but moving on…

Anyway, as this uses the CSS code above to implement the png fix, we would advise a specific class just for the fix which is applied on a case by case basis.  That way you can apply the fix only when needed, speeding up load time and preventing any javascript or css confusion.  For example:

.pngfix { _behavior: url(scripts/iepngfix.php) }

Alright have fun, and feel free to buy me a beer.

We can’t tell you how much we love wrestling with CSS bugs/oversights. There’s not a time when we wouldn’t want to kick back, relax, and fumble through 10-odd google pages, looking for a simple solution for giving an element 100% height.

So far, this is one of the best – 100% height solutions out there – looks like the handy work of ppk.

If you’re looking for a quick javascript fix, you’re at the right place! This function below will take in 3 parameters: The Content Object, the Container Object, and the amount of offset you’ll need.

• The Content object will contain your variable content (e.g. a <div> object), and the
• Container object will then be resized by the amount of
• Offset you have defined

Javascript Max-height Solution:

/*****************************
	name:	makeFullHeight
	desc:	gets the height of the content div, and resizes
                   the container to an exact px so that it's child
                   elements will fill 100% height
	param:	contentobj - the content object (e.g. a div)
		   containerobj - the container object that
                        is being resized
		   offsetpx(integer) - integer amount of px to
                   offset, this will change depending on your
                   application
	note:	MUST BE CALLED AFTER ELEMENTS HAVE
                   LOADED (or before the </body> tag)
*****************************/

function makeFullHeight(contentobj,containerobj,offsetpx){
	if(contentobj && containerobj){
		var contentHeight = contentobj.offsetHeight;
		var newHeight = contentHeight + offsetpx;
		containerobj.style.height = newHeight + 'px';
	}
}

The following code will iterate all your checkbox elements (within the form you specify), and disable them all. Tested in ie and mozilla only.


function disableAllChecks(fmobj) {
for (var i=0;i var e = fmobj.elements[i];
if ( e.type=='checkbox' ) {
e.disabled = true;
}
}
}


If you want to check the checkboxes, change the red line to


e.checked = true;


In case anyone else is coming across this issue, for some reason, when attempting to select all options in a multi-select “<select>” box, for some reason, IE doesn’t work the first time through my iteration. Here is more:

IE Select Bug

WORKAROUND

Don’t set Multiple immediately before selecting options

Alright, I found it – for some reason, when you use javascript to set the “multiple=true”, you cannot then immediately set selected=’true’. It just doesn’t work in Internet Explorer. (Or at least we couldn’t get it to work – please let us know if you find another solution).

The Old Function

function selectAll(selector){
if(!selector)alert('Selector doesnt exist');
else{
selector.multiple=true;
for(var i=0;i
selector.options[i].selected = true;
}
return false;
}
}


The New

function selectAll(selector){
if(!selector)alert('Selector doesnt exist');
else{
/**selector.multiple=true; Call this far in advance, or have it already set to "multiple"**/
for(var i=0;i
selector.options[i].selected = true;
}
return false;
}
}


My gosh, I have struggled with this conversion too many times! I shall endeavour to put an end to my troubles and anyone else’s who develops across all the layers.

The Problem: PHP is outputting the value of a textarea within javascript, which in turn is causing the javascript error “unterminated string literal…”

The Long Answer: Line Breaks, Carriage Returns, and Newline characters have different character representations depending on which language you’re in, and more so – how the character is being displayed. It seems when you pull a newline character from a mysql db, and display it in php it is displayed in ASCII format. I, myself am not all too familiar with it, but I do know it seems to be the format that the db stores data. Check out this ascii conversion table to see what all of our html characters translate to in ascii.

The Short Answer: You need to convert your ascii line breaks (both Line Break “\n” & Carriage Return “\r”) to javascript line breaks:

Solution:

$escaped_value = str_replace(chr(13),'n',$report[$column_name]);
$escaped_value = str_replace(chr(10),'',$escaped_value);

Explanation: In the first line, we use str_replace to convert chr(13) to javascript line break “\n”. Then in the second line, we convert the other possible line break (or carriage return) chr(10) to nothing (so as to prevent duplicate line breaks).