...

View Full Version : Fade In Div Almost There HELP



dude9er
10-19-2006, 04:50 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!!

A1ien51
10-19-2006, 04:41 PM
Scriptaculous (http://wiki.script.aculo.us/scriptaculous/show/HomePage)

new Event.Appear('divid');

Eric

muscaria
11-02-2006, 09:29 AM
THANKS EVERYONE!! This has been a pain in the butt!!


1. the thing is, that u making transparent <div>, but not invisible (incative), so when you need to place in <div> the link (<a href..) - after it goes to opacity: 0, is still active and cursor: pointer. so, u like even don't see the link, you still can click on it.

2. seems like code is undone, cause you don't use .hidden style and shiftOpacity(id, millisec) function. probably in the beginning it was correct way to've done the script. anyway,

3. on opacity('help1', 100, 0, 500)(fade-out) <div> appears and fading out, even it wasn't visible before.

Here is the way i solved it:

1. after the same time (setTimeout("hideElement('"+id+"')",(timer * speed));) as fade-out going, im calling the hideElement(id) function which just making it :hidden (display: none probably should work as well)

2. i changed the code a little....

3. and just put visibility: hidden; in css



Here is comleted code, all in once, just put it in to html file and separate .js or .css if you need.




<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) {




// FADE-OUT ---------------------------------------------
for(i = opacStart; i >= opacEnd; i--){
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
setTimeout("hideElement('"+id+"')",(timer * speed));



} else if(opacStart < opacEnd) {

// FADE-IN ------------------------------------------------
document.getElementById(id).style.visibility = 'visible';
for(i = opacStart; i <= opacEnd; i++){
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}//function

//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 hideElement(id) {
document.getElementById(id).style.visibility = 'hidden';
return;
}


</SCRIPT>

<style type="text/css">
div#a_box {
padding: 3px;
position: absolute;
float: right;
border: 1px solid #3300FF;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
}

</style>

<a href="javascript:opacity('a_box', 0, 100, 500)">OPEN DIV code</a>
<a href="javascript:opacity('a_box', 100, 0, 500)">CLOSE DIV code</a>


<div id="a_box" style="width:275px; height:100px;">
awhole bunch of text
<a href="#">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum