The “opacity” problem

The simple and short CSS “opacity:0.5″ property works just fine, at least on the most modern browsers, but affects not only the div`s background, but also the inner elements, making everything inside transparent. This can be solved by two ways.

The solution from the future

Using the CSS3 background property RBGA, the only problem its this will only works with CSS3 enabled browsers.

CSS
div{
background-color:rgba(255,255,255,0.5);
}

The solution for the past

Or by a workaround using a transparent empty element positioned behind the content, like this:

HTML

<div class="trans_box">
<p>My awesome content</p>
<div class="trans_back"></div>
</div>

CSS

.trans_box{
position:relative;
z-index:1;
}
.trans_back{
position:absolute;
z-index:-1
top:0;
left:0;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
background:black;
opacity:0.5;
}

The problem, again, its this just work on modern browsers, but we have a Javascript solution for the always loved IE family

CSS

.trans_back{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // ie8 hack
filter: alpha(opacity=50); // ie6-7 hack
}

The Jquery way

But hey, thats was an UGLY solution, so here it comes jQuery to saves the day. Using the same concept we can make a simple function that replace the ugliness of the hack, and will maintain the simplest html structure possible.

HTML
<div class="trans_box">
<p>My awesome content</p>
</div>

JS
$('.trans_box').append('<div class="trans_back"></div>');
$('.trans_box .trans_back').css({'opacity':0.50});

CSS
.trans_box{
position:relative;
z-index:1;
}
.trans_back{
background:black;
width:100%;
height:100%; // the height needs to be fixed in order to display correctly on ie6
position:absolute;
top:0;left:0;
z-index:-1;
display:block;
}

And thats all, i hope this little resume could save you some headaches.

$(".clean").each(function(){
var value = $(this).val();
$(this).focusin(function(){if($(this).val() == value){$(this).val("");};});
$(this).focusout(function(){if($(this).val() == ''){$(this).val(value);};});
});

Just add the class “.clean” to your input tag and voilá.

Cocombobox Jquery Plugin

This will add a “Combobox” kind of interaction to a standard list of elements, view the example page:

http://pablonoel.com/lab/jquery/cocombobox/

Default HTML:

<form action="#" method="post">
<h3>Combobox Default Configuration</h3>
<ol>
<li>Select an Option</li>
<li><a title="enlace" rel="first" href="#">First Option</a></li>
<li><a title="enlace" rel="second" href="#">Second Option</a></li>
<li><a title="enlace" rel="third" href="#">Third Option</a></li>
</ol>
</form>

Default Call

$("ol").cocombobox();

Generated HTML

<form action="#" method="post">
<h3>Combobox Default Configuration</h3>
<div style="position: relative; height: 20px; z-index: 9938;" class="comboboxccbx"><ol style="overflow: hidden; position: absolute; height: 20px; z-index: 9938;" class="min">
<li id="option">Select an Option</li>
<li><a href="#" title="enlace" rel="first">First Option</a></li>
<li><a href="#" title="enlace" rel="second">Second Option</a></li>
<li><a href="#" title="enlace" rel="third">Third Option</a></li>
</ol><input name="combobox" id="combobox" value="" type="hidden"></div>
</form>
There is no documentation yet, and no changelog, but this is the first release, you can Download it and tell me your comments.