Mar 11

Here is a quick reference on setting the opacity of html elements using CSS, Javascript and JQuery.

.someClass {
   opacity: 0.6;
   /* For IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; 
   /* For IE6 - 8 NB. Element needs to have layout */
   filter: alpha(opacity=60);

To change the CSS Opacity with Javascript

 // for most browsers
document.getElementById("myElement").style.opacity = ".4";
// for IE
document.getElementById("myElement").style.filter = "alpha(opacity=40)"; 

To change the CSS Opacity with JQuery

$(".someClass").css({ opacity: .4 });

// or we can animate the change

	opacity: .4
	}, 1000, function() {

written by objects \\ tags: ,

Mar 04

We often use Descendant selectors to select elements that are descendants of another element in the document tree. For example we can use the following css to give a border to all div’s inside any div of class panels.

div.panels div {
   border: 1px solid silver;

But what if we have nested div’s inside our panels div and we only want a border aroun the top level div’s, ie. the direct descendant of our panels div.

We can use Child selectors to achieve this. They work similarly to Descendant selectors and select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.

Changing our css to now use a Child selector, and only give borders to direct descendants of divs with a class of panel, results in the following.

div.panels>div {
   border: 1px solid silver;

written by objects \\ tags: , ,