Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Javascript conflicting with css postion:fixed element

Macman1993

Macman1993

macrumors 6502
Original poster
Nov 23, 2007
337
16
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>
 
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';
 
angelwatt said:
Rather than adjusting the height, adjust the display property. It'll be better overall.

Hide:
PHP: 
slider.style.height = 'none';
Unhide:
PHP: 
slider.style.height = 'block';
Click to expand...

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;
   	}
   	
}
 
Macman1993 said:
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
Click to expand...

In my haste I botched it by forgetting to change the style property to display. It's slider.style.display rather than height.
 
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.
 
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.
 
Macman1993 said:
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.
Click to expand...

I was going to say something about the HTML comment, but thought maybe you added that to the post only. Glad it works now.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back