Month: August 2008

$style – Get Any CSS Property Value of an Object

Here is a crossbrowser JavaScript function for getting CSS property values from DOM elements. The function $style requires the specification of two arguments:

$style(ElementId, CssProperty);

ElementId – the ID of the element from which we will extract CSS property values;
CssProperty – the CSS property we will extract from the element, for example – “background-color”;

The function $style:

function $style(ElementId, CssProperty)
{
function $(stringId)
{
return document.getElementById(stringId);
}
if($(ElementId).currentStyle)
{
var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});
return $(ElementId).currentStyle[convertToCamelCase];
}
else if (window.getComputedStyle)
{
var elementStyle = window.getComputedStyle($(ElementId), “”);
return elementStyle.getPropertyValue(CssProperty);
}
}

Example usage of the function:

1. Register the runtime routine of the $style in the <head>…</head>of your webpage, or as an external script.

2. The CSS for the example:

<style type=”text/css”>
#Div1
{
border: solid 1px red;
background: #00ff00;
color: #000;
font-family: “Trebuchet MS”, Arial, Verdana;
}
</style>

2. The HTML for the example:

<div id=”Div1″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras purus pede, aliquam vel, eleifend in, mollis sit amet, ante.</div>

3. The JavaScript for the example:

<script type=”text/javascript”>
function getElementStyles()
{
var elBgColor = $style(“Div1”, “background-color”);
var elForeColor = $style(“Div1”, “color”);
var elFont = $style(“Div1”, “font-family”);

alert(‘”Div1″ style settings:\n\nbackground color: ‘ + elBgColor + ‘;\n’ + ‘color: ‘ + elForeColor + ‘;\n’ + ‘font-family: ‘ + elFont + ‘;’);
}
</script>

4. And finally, you need an event to fire function. It could be any DOM event. For this example I have used the click event of a button:

<input type=”button” onclick=”getElementStyles()” value=”Get Element Styles” />

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Advertisements

Emulating border-color: transparent in Internet Explorer 6

Fortunately, Internet Explorer 7 supports border-color: transparent, but still, there are hardcore IE6 users and it seems that they will never update their browsers.

This post is targetted to the developers that care and dare to make their websites crossbrowser.

Thanks to a less known Interner Explorer CSS filter, the transparent border in Internet Explorer 6 can be easily achieved. Consider the following lines of CSS code:

.testDiv
{
width: 200px;
height: 200px;
border: solid 10px transparent;
}

It works correctly under Internet Explorer 7, FireFox, Opera and Safari, while Internet Explorer displays a solid black border around .testDiv. To put it to work with IE6, we will create another rule, that is visible only in version 6 (the *html hack) with just two lines of code:

*html .testDiv
{
border-color: pink;
filter: chroma(color=pink);
}

… And voila! The ugly black border around .testDiv magically disappears.

The final things you should have in mind before using this trick is the color (both border and chroma color) in the hack. Make sure you apply a border-color (and respectively use it in the chroma filter) that is not used in that div, as the chroma filter displays a certain color of the object and its content as transparent, i.e. if the border-color in the hack is orange, and the text in your element is orange as well, it will disappear when the orange chroma filter is applied.

Rounded Corners Panel.JS 1.0 Released

Experience the power of CSS with that cool widget!

Create rounded corners with any dimensions without additional images or sophisticated CSS and JavaScript coding. Rounded Corners Panel.JS does all this for you. You may choose between three types of rounded corner radius, you are allowed to specify dither (i.e. antialias) color, so your rounded corners’ edges do not look frayed. And more – you may tell which borders to style, and which not.

Take a look at the demo and have fun!

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Visit Rounded Corners Panel.JS 1.0
Download Rounded Corners Panel.JS 1.0

Skinnable Browser Dialogs 3.0

Skinnable Browser Dialogs is an easy and reliable way of replacing the boring and impossible to style browser GUI alert, prompt and confirm. Along with its cool API, allowing any type of interaction with the webpage that is possible with the original dialog boxes, the script comes with a set of 10 predefined skins – Acid, Blue, Default, Classic, Green, Mac, Orange, Red, WeMakeSites and Winternity. On the other hand, if you need a custom skin – creating one is a matter of several minutes and minimal knowledge of CSS.

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Just give it a try…

View Online Demo
Visit the Webpage of Skinnable Browser Dialogs
Download Skinnable Browser Dialogs

An Exotic CSS Hack for Internet Explorer

Here is a less known and rather exotic CSS hack, visible for Internet Explorer based on a rendering bug. Unfortunately, it is visible both in versions 6 and 7, but still it can be useful as a last resort for styling.

And here it comes:

h1
{
 color: green;
.color: red;
}

Internet Explorer 6 and 7 will render <h1>...</h1> in red, while all other browsers will disregard the dot-prefixed property.