2011-11-03 69 views
0

我正在影响CSS来改变绝对位置。为什么这个用于制作div的jQuery代码转到右上角或左上角不起作用?

jQuery的 - 这种改变绝对定位的左上角和右上角,最终我想这样做的每一个角落,但我开始与这个

$('#topLeft').click(function() { 
    $('#questionField').css('top', '0'); 
    $('#questionField').css('left', '0'); 
}); 

$('#topRight').click(function() { 
    $('#questionField').css('top', '0'); 
    $('#questionField').css('right', '0'); 
}); 

HTML(是不是所有我的ID和这种正确的):

<body> 
    <div id="questionField">  
     <form id="questions" action="process.html"> 
      <fieldset> 
       <legend>Hello World!</legend> 
       <p>Firstly, which corner would you like this question box to be in?</p> 
       <input type="radio" name="corner" id="topLeft" /><label for="topLeft"> Top Left</label><br /> 
       <input type="radio" name="corner" id="topRight" /><label for="topRight"> Top Right</label><br /> 
       <input type="radio" name="corner" id="bottomLeft" /><label for="bottomLeft"> Bottom Left</label><br /> 
       <input type="radio" name="corner" id="bottomRight" /><label for="bottomRight"> Bottom Right</label><br /> 

       <p>Now, some questions.</p> 
       <label for="color">Favorite Color: </label><input type="text" id="color" /><br /> 
       <label for="animal">Favorite Animal: </label><input type="text" id="animal" /><br /> 
      <label for="paintBrush">Favorite Paint Brush: </label><input type="text" id="paintBrush" /><br /> 
       <label for="movie">Favorite Movie: </label><input type="text" id="movie" /> 
      </fieldset> 
     </form> 
    </div> 
</body> 

CSS(它的工作原理,如果我手动影响这个没有的jQuery,但是jQuery的似乎并不想影响它!):

#questionField { 
    position: absolute; 
    top: auto; 
    bottom: auto; 
    left: auto; 
    right: auto; 
    padding: 10px; 
} 

回答

0

有一些细微之处意味着你的代码,而正确的,将无法正常工作......

  1. #questionField元素是目前广100%,所以它已经触及的左侧页面(左侧:0)和页面右侧(右侧:0)。您需要小于100%的宽度才能看到从左到右的变化。

  2. 你应该设置位置:绝对使用固定坐标的元素

  3. 虽然这些调整将工作(见我JS Fiddle)一旦点击,你可能会得到奇怪的行为,例如,如果我点击左上角,右上角,然后左上角,然后右上角,当您左右两侧都选择左和右:0设置时,该框会停止移动,因为它会产生困惑 - 它不能满足这两个规则,并会选择坚持左边。您需要还原之前设置的属性才能使其工作。这里是完整的工作代码(假设你已经在元素上放了一个宽度)。

    $(document).ready(function() { 
        $('#topLeft').click(function() { 
         $('#questionField').css({ 
          position: 'absolute', 
          'top': '0px', 
          'left': '0px', 
          'right': 'auto' 
         }); 
        }); 
    
        $('#topRight').click(function() { 
         $('#questionField').css({ 
          position: 'absolute', 
          'top': '0px', 
          'right': '0px', 
          'left': 'auto' 
         }); 
        }); 
    }); 
    
+0

这真的很好。非常感谢你,正是我想要的。 快速的问题,如果我可以:1. .css({});东西覆盖CSS,或添加到它?我假设覆盖。 –

+0

@DougSmith它只覆盖正在设置的CSS属性。其他的CSS属性是独立的,这是造成你的问题。这就是说:我不想自吹自擂,但是您应该尝试添加和删除类而不是单独的样式,因为它使代码更容易调整和管理,因为它越来越复杂。您不必担心覆盖不需要的CSS属性,因为当旧类被移除时它们会消失。 – Blazemonger

+0

我同意在大多数情况下添加和删除类更容易管理长期,所以你可能希望适应该方法。当然,我的答案中有三个部分都对完成这项工作做出了贡献,而JavaScript只是其中的一部分。 – Fenton

-1

你应该填充一个int而不是一个字符串。

.css('top', 0); 
+0

我不认为jQuery的关心。 –

+0

它不..... –

+0

@TimJoyce对不起:) –

-1

你必须也把.css('position', 'absolute')通过jQuery的,如果不是在CSS定义

它将工作,如果它的覆盖与另一个值只加!重要的是这样

.css('position', 'absolute !important'); 

我希望这可以帮助。

-1

你还没有真正说过什么没有解决它,但只是确保你在元素加载后调用jquery。

$(function(){ 
$('#topLeft').click(function() { 
    $('#questionField').css('top', '0'); 
    $('#questionField').css('left', '0'); 
}); 

$('#topRight').click(function() { 
    $('#questionField').css('top', '0'); 
    $('#questionField').css('right', '0'); 
}); 
}); 

另外,我不认为在你的CSS,你需要声明元素的各个角落。顶部&左边应该是足够的。

+0

但我最终想要纳入底部。而不工作,我的意思是当我点击单选按钮时,什么都没有发生。 –

2

您对内联样式的使用正在受到阻碍。点击两个按钮后,jQuery在DIV上设置内联CSS样式,它看起来像这样:<div id="questionField" style="left: 0px; top: 0px; right: 0px; "> - “left:0”覆盖“right:0”并且它固定在左上角。

您需要在创建新内联样式之前删除旧的内联样式,或者切换CSS类。我会推荐后者。试试这个:

$('#topLeft').click(function() { 
    $('#questionField').removeClass().addClass('topleft'); 
}); 

$('#topRight').click(function() { 
    $('#questionField').removeClass().addClass('topright'); 
}); 

CSS:

#questionField { 
    position: absolute; 
    padding: 10px; 
} 
.topleft { 
    top: 0; 
    left: 0; 
} 
.topright { 
    top: 0; 
    right: 0; 
} 

http://jsfiddle.net/mblase75/H8R6D/2/

添加在底角现在是微不足道的:http://jsfiddle.net/mblase75/H8R6D/3/

唯一的问题是,这将删除所有类在DIV上,包括你不想删除的。如果这是一个问题,请用.removeClass('topright bottomright bottomleft')(或类似的东西替换.removeClass();它应只列出您要删除的)。

+0

我没有看到任何内联样式。 –

+0

@TimJoyce'$('#questionField').css('left','0');'在DIV上设置内联样式。 – Blazemonger

+0

在发布代码之前发表了评论。阅读它没有意义。现在有道理。 –

1

此外,不要忘记设置相对定位CSS回默认,当用户更改自己的喜好:

$('#questionField').css({ 
    'top': '0', 
    'left': '0', 
    'right': 'auto', // <-- 
    'bottom': 'auto' // <-- 
}); 
0

你将不得不设置leftauto当你点击了右上,反之亦然。如果你只是更新对象的CSS,你会有left,top,right所有设置为零,而不是像你想的那样只需要top,right

UPDATE

添加一些代码,CSS:

#questionField 
    { 
     position: absolute; 
     padding: 10px; 
     width: 500px; 
    } 
    div.topright 
    { 
     top: 0; 
     right: 0; 
    } 
    div.topleft 
    { 
     top: 0; 
     left: 0; 
    } 
    div.bottomright 
    { 
     bottom: 0; 
     right: 0; 
    } 
    div.bottomleft 
    { 
     bottom: 0; 
     left: 0; 
    } 

    $(document).ready(function() { 
     $('#topLeft').click(function() { 
      $('#questionField').removeClass('topright bottomright bottomleft').addClass('topleft'); 
     }); 
     $('#topRight').click(function() { 
      $('#questionField').removeClass('topleft bottomright bottomleft').addClass('topright'); 
     }); 
     $('#bottomLeft').click(function() { 
      $('#questionField').removeClass('topleft topright bottomright').addClass('bottomleft'); 
     }); 
     $('#bottomRight').click(function() { 
      $('#questionField').removeClass('topleft topright bottomleft').addClass('bottomright'); 
     }); 
    }); 
相关问题