Blur effect on a div.

Give a div blur effect using java

[achshar]

Hello...
i have a div which appears on onclick event i simply want it to appear and hide with a blur effect..
i have an idea on how this can be done.... we use java to slide the transpiracy level of the div starting from 100 eventually coming to 0 but due to lack of knowledge of java i am not able to do it...
plz if any of you could help me it would be greatly appriciated
here is what i have
[codes]
<a onclick="showDiv();" style="cursor:pointer;">Click here</a>

<div id="divToHide">
to show this content <br />
<a onclick="hideDiv()" style="cursor:pointer;">close</a>
</div>
[/codes]

here the divToHide is the one hidden and who should bear the blur effect

[whoisgregg]

Welcome to WebmasterWorld, achshar!

To adjust the transparency level of the div, you adjust two different values. First, you adjust opacity for standards compliant browsers, then you add an alpha(opacity) filter for IE.

var element = document.getElementById(el_id);
element.style.opacity = .5;
element.style.filter = 'alpha(opacity = ' + 50 + ')';

To animate, you can use setTimeout to call a function in a tight loop that decrements the opacity value each time it runs.

[Fotiman]

Note, Java is not the same thing as JavaScript. They are two very different languages, so try not to say "Java" when you mean "JavaScript". :)

[achshar]

@ whoisgregg Hello i am so glad to hear from you. well i did something similar to what you suggested but it is not working.. Have a look

var opacity=0;
var=t;
var div_is_visible=0;
function optionsEffect() {
document.getElementById('div-to-show').style.opacity=opacity; 
document.getElementById('div-to-show').style.filter = 'alpha(opacity = ' + opacity + ')'; //IE stuff
o=o+1; // it increases the opacity by 1
t=setTimeout("optionsEffect()",10); // this line makes a loop every 100th of a second
}
function showOptions () { // this function checks if the div is not already visible and hence stops repetitions
if (!div_is_visible) {
div_is_visible=1;
optionsEffect();
}
}
<div onclick="showOptions">Click here to show the hidden div</div>

The comments explain what the code is but i am most probably wrong at something. i can work with php but JavaScript goes over my head sometimes. May be it is that i have get element by id multiple times.. Plz if anyone can have a look over it and correct me .. Thank you.

And @ Fotiman Sorry.. i actually meant JavaScript only. I will take care of this from now.. :)

[achshar]

ohkzzz after about 2-3 hours of me banging my head on my pc i finaly got it workin.. This is a hell lot of code [atleast for me] but still if anybody wants to know how i did it.

<script type="text/javascript">
var opacity=0;
var t;
function optionsEffect()
{
if(opacity<101) {
document.getElementById('options-content').style.opacity=opacity/100;
document.getElementById('options-content').style.filter = "alpha(opacity=" + opacity + ")"; 
opacity=opacity+1;
t=setTimeout("optionsEffect()",10);
}
}
function optionsEffectReverse()
{
if(opacity>0) {
document.getElementById('options-content').style.opacity=opacity/100;
document.getElementById('options-content').style.filter = "alpha(opacity=" + opacity + ")"; 
opacity=opacity-1;
t=setTimeout("optionsEffectReverse()",10);
}
}
function showOptions() {
 document.getElementById('more-options').href = "../css/options.css";
 optionsEffect();
}
function confirmHideOptions() {
 document.getElementById('more-options').href = "";
 }
function hideOptions() {
optionsEffectReverse();
confirmHideOptions();
}
</script>

May be all i needed was some idea... i did it well.. if anybody intrested, it can be ssen working here when you click the small options logo. it dosent work in Ie though... but it should work... Does anybody know why it doesn't?
<snipped url>

[edited by: whoisgregg at 5:02 pm (utc) on Nov. 29, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]