SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Fade In Box Almost There HELP
-
Oct 18, 2006, 16:58 #1
- Join Date
- Apr 2004
- Location
- canada
- Posts
- 274
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Fade In Box Almost There HELP
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!!
Code:<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>
Code:<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>
Code:<div id="help1" class="opac_xmpl" style="width:675px; height:200px;"> awhole bunch of text</div>
Code://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!!
-
Oct 20, 2006, 08:15 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
css
Code:#help1 { display: none; }
ie
Code: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++; } document.getElementById(id).style.display == 'none'; } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } document.getElementById(id).style.display == 'block'; } }
-
Oct 20, 2006, 10:33 #3
- Join Date
- Apr 2004
- Location
- canada
- Posts
- 274
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks gRoberts, this works great and is exactly what I needed.
Bookmarks