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 1 of 1
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Smile Manipulating DIV visibility script problem

    Hey everyone,

    Here is the HTML snippet, (Yes, I have the script tag in the header calling to functions in an external JS file)

    Code:
    <a href="#" onclick="disp('block2');disp('block3');showh('block1');fade(block1');">
    BUTTON 1</a>
    <a href="#" onclick="disp('block1');disp('block3');showh('block2');fade('block2');">
    BUTTON 2</a>
    <a href="#" onclick="disp('block1');disp('block2');showh('block3');fade('block3');">
    BUTTON 3</a>
    <!-- START DIVS HERE -->
    <div style="opacity:0; display:none; color:#FFF;" id="block1">aaaaaaaaaaaaaaaaaa</div>
    <div style="opacity:0; display:none; color:#FFF;" id="block2">bbbbbbbbbbbbbbbbb</div>
    <div style="opacity:0; display:none; color:#FFF;" id="block3">ccccccccccccccccc</div>

    Here is the Javascript

    Code:
    var TimeToFade = 1000.0;
    
    function fade(eid)
    {
      var element = document.getElementById(eid);
      if(element == null)
        return;
       
      if(element.FadeState == null)
      {
        if(element.style.opacity == null
            || element.style.opacity == ''
            || element.style.opacity == '1')
        {
          element.FadeState = 2;
        }
        else
        {
          element.FadeState = -2;
        }
      }
       
      if(element.FadeState == 1 || element.FadeState == -1)
      {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
      }
      else
      {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
      }  
    }
    function animateFade(lastTick, eid)
    {  
      var curTick = new Date().getTime();
      var elapsedTicks = curTick - lastTick;
     
      var element = document.getElementById(eid);
     
      if(element.FadeTimeLeft <= elapsedTicks)
      {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        return;
      }
     
      element.FadeTimeLeft -= elapsedTicks;
      var newOpVal = element.FadeTimeLeft/TimeToFade;
      if(element.FadeState == 1)
        newOpVal = 1 - newOpVal;
    
      element.style.opacity = newOpVal;
      element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
     
      setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
    }
    
    function showh(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block')
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    }
    
    function disp(id) {
    	var e = document.getElementById(id);
    	e.style.display = 'none';
    	e.style.opacity = '0';
    	}
    PROBLEM: If I click on "button 1" the content of the block1 becomes visible and fades in. (CSS display property changes to block, fade() function runs) on a second click of "button 1" it reverses, (CSS display property changes to none, fade() function runs) content goes away and the DIV is taken out of the nesting thus allowing block 2 or block 3 to occupy the same space on the webpage. --- This is all correct but the problem i'm having is that when I click on "Button 1" and then my next click is "Button 2" I get the content of both DIV's (block1 + block2) displayed one above the other, I can't seem to find the right scripting to force only 1 of the DIV's to be in the visible state at one time. In other words if I click "button1" and have BLOCK1 open and then click "button2", I want BLOCK1 to FADE the content out and then set CSS visibility:none

    I have tried several code variations but no matter what i do something keeps getting the "opacity" state of the DIV's screwed up, so a button click causes a DIV to become visible but instead of fading content IN it shows as if the content opacity was set to 1 and fades it OUT, when in fact its CSS opacity SHOULD have been at 0 at the time the script ran. - Sorry if this is long but I'm trying to be sure i get the idea across right. Thanks for any help or suggestions.
    Last edited by ARCLite Studio; 07-13-2011 at 02:19 AM. Reason: RESOLVED IT MYSELF - Thanks Though


 

Posting Permissions

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