Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fade In Div 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>
    CSS
    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>
    DIV Code
    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!!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Scriptaculous

    new Event.Appear('divid');

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dude9er View Post
    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.


    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) {
    
    
    
    	
    	// 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>
    Last edited by muscaria; 11-02-2006 at 12:00 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •