Smooth Dynamic Rounded Corners

I have previously read about Javascript ways to make rounded corners but non of the suggested techniques produced antialiased (smooth) corners making me skeptic about the whole concept but curvyCorners proved me wrong – nice rounded corners with arbitrary radius, options for anti-aliasing and borders – Great work Cameron! I also tried the YUI compressor and was able to reduce the size significantly compared to the light version provided. If there is interest I can upload the compressed version.

As usual a demo is worth thousand words

IE6 PNG Transparency Fix with Javascript

As always when I need to use some transparent images cursing Internet Explorer 6 is inevitable so i wrote a quick javascript fix. Again mootools was the preferred framework because the ease of use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanksfunction fixPNG(){
 
 $$('*').each(function(el){
 
 	var imgURL = el.getStyle('background-image');
 
 	var imgURLLength = imgURL.length;
 
 	if ( imgURL != 'none' && imgURL.substring(imgURLLength  - 5, imgURLLength  - 2) == 'png'){
 
 		el.setStyles({
 
 			background: '',
 
 			filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"
 
 		});
 
 	};
 
if(el.getTag() == 'img' && el.getProperty('src').substring(el.getProperty('src').length  - 3) == 'png'){
 
 		var imgReplacer = new Element('input', {
 
 			'styles': {
 
 				'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + el.getProperty('src') + "')",
 
 				'position': 'relative',
 
 				'background': 'transparent'
 
 			},
 
 			'title': el.getProperty('alt')
 
 		});
 
imgReplacer.setStyles(el.getStyles('padding','margin','border','height','width'));
 
 		imgReplacer.setProperties(el.getProperties('id','class'));
 
 		imgReplacer.disabled = true;
 
 		el.replaceWith(imgReplacer);
 
 	};
 
 });
 
}
 
if(window.ie6){
 
 window.addEvent('domready', fixPNG);
 
}

Fix description: First I’m looking for all tags that have background-image style and replace it with Microsoft AlphaImageLoader filter, then I search for all <img> tags and replace them with <input> (img src used for style background image again using the MS filter). I used input since it is inline element but still has height and width – like the img tag.

PS. If you use any links in area with PNG used for bg put the links in div with style=”position:relative” else they will not be clickable due to the MS filters

and as always example: IE6 PNG Transparency Fix with JavaScript

Equal Height for Two / Three Columns DIV Layout

Something that really stops tableless layouts is the lack of ability to make two or three columns the same height. There are a lot of tricks but the solution I prefer is with Javascript.

Description of the solution: I used the mootools framework since it provides lots of useful predefined methods, selectors etc.

Usage: Just include the latest mootools js file (don’t need ajax, json, fx and other) and the following js. Than add the class defined in the function (class=”equals” in the example) to the columns you want to be in equal height.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// This Javascript is written by Peter Velichkov (www.creonfx.com)// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
function equalHeight(cl){
	var className = '.' + cl;
	var maxHeight = 0;
	$$(className).each(function(el) {
	if (el.offsetHeight & gt; maxHeight) {
		maxHeight = el.offsetHeight;
	}
	});
 
	if ($$('.dummyExtender') != '') {
	$$('.dummyExtender').each(function(el) {
		el.setStyle('height', maxHeight - el.getParent().offsetHeight + el.offsetHeight);
	});
	} else {
	$$(className).each(function(el) {
		var curExtender = new Element('div', {
		'class': 'dummyExtender'
		});
		curExtender.injectInside(el);
		curExtender.setStyle('height', maxHeight - el.offsetHeight);
	});
	}
}
 
window.addEvent('load',function() {
    equalHeight('equals');
});

Example: Equal Height DIV Columns

Update: Also since Internet Explorer 6 adds silly spacing in DIVs add the following lines to your css:

.dummyExtender{
font-size:0;
line-height:0;
padding:0;
margin:0;
}