Is it something wrong or jquery bug?

So we have such code for example and in third click the layer don't change to bottom again..

<style type="text/css">
#menu1 {
  width:100%; 
  height:32px; 
  overflow:hidden; 
  background:#ff0033; 
  position:fixed; 
  left:0px; 
  cursor:pointer; 
  bottom:174px;
}
#content1 {
  position:fixed; 
  width:100%; 
  left:0; 
  overflow:auto; 
  background:blue; 
  height:200px;  
  bottom:300px;
}
</style>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
  var click1=0;
  $("#menu1").click(function () {
    if (click1==0) {
      $("#content1").css({ bottom: "250px", display: "block", position: "fixed" });
      click1 = 1;
    } else {
      $("#content1").css({ top: "100px", "display": "block", display: "block", position: "fixed" });
      click1 = 0;
    }
  });
});
</script>

Is it something wrong or jquery bug?

So we have such code for example and in third click the layer don't change to bottom again..

<style type="text/css">
#menu1 {
  width:100%; 
  height:32px; 
  overflow:hidden; 
  background:#ff0033; 
  position:fixed; 
  left:0px; 
  cursor:pointer; 
  bottom:174px;
}
#content1 {
  position:fixed; 
  width:100%; 
  left:0; 
  overflow:auto; 
  background:blue; 
  height:200px;  
  bottom:300px;
}
</style>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
  var click1=0;
  $("#menu1").click(function () {
    if (click1==0) {
      $("#content1").css({ bottom: "250px", display: "block", position: "fixed" });
      click1 = 1;
    } else {
      $("#content1").css({ top: "100px", "display": "block", display: "block", position: "fixed" });
      click1 = 0;
    }
  });
});
</script>

• javascript
• jquery

1 Answer 1

if you have both top and bottom set you have issues in that they either both get applied (and height is calculated), or if a height is set, only top gets applied. So you need to wipe the ones you're not using:

{ bottom: 250, top: 'auto' }
{ top: 100, bottom: 'auto' }