jQuery абсолютное позиционирование & проблема с границей

Я прилагаю образец файла HTML5, где я определил 2 div для абсолютного позиционирования вдоль границы. Оба не работают. Не могли бы вы помочь? Я застрял здесь долгое время и попробовал несколько перестановок, комбинации того, что я видел в Интернете. Обратите внимание, что мне нужно использовать переменные, определенные в этом файле, для использования с css и т. Д.jQuery абсолютное позиционирование & проблема с границей

Заранее благодарим вас за помощь. Пойду, если вы сможете опубликовать весь файл после внесения изменений в прилагаемый файл. С уважением, sbguy

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Absolute Positioning Test</title> 
<style type="text/css"> 
html, body { 
    position:absolute; 
    top:0; 
    right:0; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
    height:100%; 
    width:100%; 
} 
div { 
    position:absolute; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/JavaScript"> 
var A_height = 100; 
var A_width = 100; 
var A_top = 20; 
var A_left = 20; 
var B_height = 200; 
var B_width = 200; 
var B_top = 200; 
var B_left = 200; 
jQuery("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'}); 
jQuery("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'}); 
jQuery("#A").offset({top: A_top, left: A_left}); 
jQuery("#B").offset({top: B_top, left: B_left}); 
</script> 
</head> 
<body> 
<div id="A"> 
<p>HELLO A</p> 
</div> 
<div id="B"> 
<BR></BR> 
<p>HELLO B</p> 
</div> 
</body> 
</html>

источник

2011-12-19 user1104170

Что не работает? – mrtsherman

Чтение немного собственного не помешает. Я уверен, что $ (document) .ready() упоминается в начале каждого учебника jQuery – ZolaKt

Вы пытаетесь манипулировать элементами, которые еще не были созданы. Другими словами, сценарий выполняется до того, как div были добавлены в DOM, поэтому jQuery не может их найти. Либо переместите свой сценарий на дно, либо поместите все в функцию и передайте эту функцию в jQuery, чтобы он вызывался при загрузке страницы (см. Метод .ready()). В приведенном ниже примере кода я просто переместил блок сценария в конец. Все остальное существенно не изменилось с вашего исходного кода.

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Absolute Positioning Test</title> 
<style type="text/css"> 
html, body { 
    position:absolute; 
    top:0; 
    right:0; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
    height:100%; 
    width:100%; 
} 
div { 
    position:absolute; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="A"> 
     <p>HELLO A</p> 
    </div> 
    <div id="B"> 
     <BR></BR> 
     <p>HELLO B</p> 
    </div> 

<script type="text/JavaScript"> 
var A_height = 100; 
var A_width = 100; 
var A_top = 20; 
var A_left = 20; 
var B_height = 200; 
var B_width = 200; 
var B_top = 200; 
var B_left = 200; 
jQuery("#A").css({ 'width': A_width, 'height': A_height, 'border':'1px solid black'}); 
jQuery("#B").css({ 'width': B_width, 'height': B_height, 'border':'1px solid black'}); 
jQuery("#A").offset({top: A_top, left: A_left}); 
jQuery("#B").offset({top: B_top, left: B_left}); 
</script> 

</body> 
</html>

источник

2011-12-19 07:55:28

-1

Этот скрипт работает:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Absolute Positioning Test</title> 
<style type="text/css"> 

html, body { 
    position:absolute; 
    top:0; 
    right:0; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
    height:100%; 
    width:100%; 
} 
div { 
    position:absolute; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
} 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
A_height = 100; 
A_width = 100; 
A_top = 20; 
A_left = 20; 
B_height = 200; 
B_width = 200; 
B_top = 200; 
B_left = 200; 
$("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'}); 
$("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'}); 
$("#A").offset({top: A_top, left: A_left}); 
$("#B").offset({top: B_top, left: B_left}); 
          }); 
</script> 
</head> 
<body> 
<div id="A"> 
<p>HELLO A</p> 
</div> 
<div id="B"> 
<BR></BR> 

<p>HELLO B</p> 
</div> 
</body> 
</html>

источник

2011-12-19 07:55:44

Это working. Просто вы должны обернуть свой код javascript .ready(). Например:

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Absolute Positioning Test</title> 
<style type="text/css"> 
html, body { 
    position:absolute; 
    top:0; 
    right:0; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
    height:100%; 
    width:100%; 
} 
div { 
    position:absolute; 
    margin:0px; 
    padding:0px 0px 0px 0px; 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/JavaScript"> 
jQuery(function($) { 
    var A_height = 100; 
    var A_width = 100; 
    var A_top = 20; 
    var A_left = 20; 
    var B_height = 200; 
    var B_width = 200; 
    var B_top = 200; 
    var B_left = 200; 
    jQuery("#A").css({ "width": A_width, "height": A_height, "border":'1px solid black'}); 
    jQuery("#B").css({ "width":B_width, "height":B_height, "border":'1px solid black'}); 
    jQuery("#A").offset({top: A_top, left: A_left}); 
    jQuery("#B").offset({top: B_top, left: B_left}); 
}); 
</script> 
</head> 
<body> 
<div id="A"> 
<p>HELLO A</p> 
</div> 
<div id="B"> 
<BR></BR> 
<p>HELLO B</p> 
</div> 
</body> 
</html>

источник

2011-12-19 07:56:20

jQuery абсолютное позиционирование & проблема с границей

ответ

Смежные вопросы