PDA

View Full Version : Fade In Div Almost There HELP



dude9er
10-19-2006, 12:44 AM
OKay I modified the fade div seen here:
http://www.brainerror.net/scripts_js_blendtrans.php

My version seen here:
http://charity-funding.us/test/test.html

works great, however the hidden div tag (help1) now blocks access to all the text boxes below.

Can someone please look at the code and suggest a way of getting around this!! I am majorly stuck on this one. HELP!!



<SCRIPT LANGUAGE="Javascript">
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 100) {
opacity(id, 100, 0, millisec);
} else {
opacity(id, 0, 100, millisec);
}
}


</SCRIPT>


CSS


<style type="text/css">
div.opac_xmpl {
padding: 3px;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
float: right;
z-index: 1;
display: compact;
border: thin solid #3300FF;
}

.hidden {
visibility: hidden;
display: none;
}/* CSS Document */
</style>


DIV Code


<div id="help1" class="opac_xmpl" style="width:675px; height:200px;"> awhole bunch of text</div>




//OPEN DIV code
javascript:opacity('help1', 0, 100, 500)

//CLOSE DIV code
javascript:opacity('help1', 100, 0, 500)



THANKS EVERYONE!! This has been a pain in the butt!!

blm126
10-19-2006, 01:29 AM
In addition to changing the opacity you also need to change the display property.

dude9er
10-19-2006, 01:43 AM
thanks for the feedback. how is this done? Is it in the CSS or the javascript? I'm not sure how to go about this. Any help would be awesome!

blm126
10-19-2006, 01:59 AM
You would probably want to make that change in the javascript.

jigarshah
11-04-2006, 11:05 AM
opacity attribute does not pass w3c validation check? any solution ?

blm126
11-04-2006, 05:11 PM
That is a known bug in the w3c validator. Ignore it. Also please start a new thread for a new question.