Archive for October, 2007

Smooth Dynamic Rounded Corners

Tuesday, October 23rd, 2007

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

Accessible Non-Standard Fonts in WebSites

Saturday, October 20th, 2007

Lets face it – the web is limited, web sites are created for different browsers, video modes, operating systems, but to be even more frustrated we have to use the same old, boring fonts. For a special project I needed more artistic and out of the box general feeling(not the standard Verdana, Times new Roman and Arial) and since creating pictures was not an option (due to SEO and Accessibility reasons) I found different approach – sIFR – a collection of Adobe Flash and Javascript files. Generally the idea is designing the page as usual, include the Javascript file, edit the flash file to include your fancy font and point out in the HTML which headings you want replaced – and it is all SEO Friendly and Accessible since search engines and screen readers still see your original headings.

More instructions can be found on sIFR’s homepage and if you are still curious check out the demo

Install Adobe Flex Builder Alpha on Debian

Sunday, October 7th, 2007

After bumping my head against the monitor for couple of minutes i have successfully installed Adobe Flex Builder Linux Public Alpha on my Debian Unstable Linux. Here is the procedure:

1. wget http://download.macromedia.com/pub/labs/flex/\
flexbuilder_linux/flexbuilder_linux_install_a1_100207.bin

2. apt-get install eclipse sun-java5-bin

3. update-alternatives –config java
(set /usr/lib/jvm/java-1.5.0-sun/jre/bin/java to be used)

4. run the installer

Enjoy

Nvidia Driver Version 96.43.01 is Patched too

Sunday, October 7th, 2007

We received couple of requests for the legacy drivers too, so here you go guys : http://grizach.servebeer.com/nvpatch

Also we summed the access logs from all the mirrors and we found out that we have more than 10 000 downloads.

Cheers

IE6 PNG Transparency Fix with Javascript

Wednesday, October 3rd, 2007

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