Javascript conflicting with css postion:fixed element

Discussion in 'Web Design and Development' started by Macman1993, Mar 1, 2010.

  1. Macman1993 macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #1
    I'm having a bit of trouble with this chat feature I've been putting together for a site I'm working on. The basic function of this script I wrote is simply to hold the chat (will be embedded I just took it out for now the chat will be over the black background). Basically this is my crude imitation of the facebook chat. The blue bar has a fixed position and will always show up at the bottom of the page and clicking it will make the chat appear by means of setting the chat to a height of 310px. Clicking it again will set the height to 0px giving it the illusion of vanishing.

    That all works fine but I realized their is a bug in this that one wont notice at first glance. Bare with me for explaining it just follow these steps and you will see the problem.

    1) Expand the black box by clicking the blue bar
    2) Scroll on the page (up or down it doesn't matter)
    3) Click the blue bar to collapse the black box

    At this point you should see that the black box didn't properly collapse, it will remain the size of the amount you scrolled. I.E. if you scrolled 10px up it will be 10px tall staying where the top originally was and vice versa for if you scroll down. Heres the source code of the page I'm testing it on. Note that the <br /> tags are only there so the page will be long enough to scroll on, on a real page with content those will be taken out and on a real page this problem still occurs. So I'm pretty confused about this bug and I would really appreciate any help someone smarter then me could offer. Thanks

    Heres the source code (its only long because of the <br /> tags its very small amounts of real code. Thanks again for the help

    HTML:
    <html>
    <head>
    
    <title>Chat Demo</title>
    </head>
    
    <body>
    
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    
                
    
    
           
           
        <div style="position: fixed;bottom:0px;width:100%;height:18px;
              background-color:#057DF3;text-align:center;
              cursor:pointer;" onclick="Slide();">
              
              
          <table width="100%" height="15px">
           
                Click to expand/close the chat (upgrade your browser if the chat blocks videos)
            
          </table>
      	</div>
      	
      	
      <div id="Slider" style="position:fixed;bottom:18px;
           width:100%;height:0px;background-color:#000000;color:#000000;overflow:hidden;">
           
           
        <table width="100%" height="310px">
          <tr>
            <td valign="top" style="padding:3px;">
            
            
    
    
            </td>
          </tr>
        </table>  
        
        
      </div>
    
    
    <SCRIPT language="JavaScript">
    
    var up = false;
    
    function Slide()
    {	
    	slider = document.getElementById('Slider');
    	
    	if (!up) {
       		slider.style.height = 310 + 'px';
       		up = true;
       	}
       	
       	else {
       		slider.style.height = 0 + 'px';
       		up = false;
       	}
       	
    }
    
    
    
    
    
    </SCRIPT>
    </div>            
    
    
    </body>
    
    
    </html>
    
    
    
    
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Rather than adjusting the height, adjust the display property. It'll be better overall.

    Hide:
    PHP:
    slider.style.display 'none';
    Unhide:
    PHP:
    slider.style.display 'block';
     
  3. Macman1993 thread starter macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #3
    Not sure if I totally understood what you meant I edited it to this but I figure I must have missed something since this doesn't work

    HTML:
    function Slide()
    {	
    	slider = document.getElementById('Slider');
    <--Unhide-->
    	if (!up) {
       		slider.style.height = 'block';
       		up = true;
       	}
       	
    <--Hide-->
       	else {
       		slider.style.height = 'none';
       		up = false;
       	}
       	
    }
    
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    In my haste I botched it by forgetting to change the style property to display. It's slider.style.display rather than height.
     
  5. Macman1993 thread starter macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #5
    I tried that but now the slide function produces no visible changes. I tried changing the boxes default height to 310 just to be sure and still nothing happened. Btw the box (which later hold the chat) must be down at start otherwise it being up every time the chat loads will annoy the hell out of people.
     
  6. Macman1993 thread starter macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #6
    Oh I fixed it, turns out my stupid comment I put in was done wrong (amazing how stupid things like that cause problems) but I got it to work perfectly, thanks a lot for the help.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    I was going to say something about the HTML comment, but thought maybe you added that to the post only. Glad it works now.
     

Share This Page