Javascript-форум - растянуть div на страницу

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - растянуть div на страницу (https://javascript.ru/forum/jquery/17542-rastyanut-div-na-stranicu.html)

gorilas

23.05.2011 19:14

растянуть div на страницу

Добрый день, прошу помощи, второй день бьюсь, не могу разобратся.
Нужно привязать значение width в css к размеру документа $(document) или $(window).
Задача, нужно получить ширину документа, и назначить правило для (#content) width - (минус) 200px.
В идеале конечно должно быть немного подругому, ну хотя бы так сделать.
С ув. Алексей.

nikita.mmf

23.05.2011 19:23

А в чем конкретно задача, может получиться сделать средствами чистого css?

gorilas

23.05.2011 21:32

Цитата:

Сообщение от nikita.mmf (Сообщение 105842)

А в чем конкретно задача, может получиться сделать средствами чистого css?

Есть (галерея) подгружаемая с базы, лежит на главной странице сайта.
Не получается растянуть её на 100% на разных мониторах.
В css значение width = (...%) установить можно только целое число, так как <ui> постоянно подгружается и не имеет точного размера.
Вот и пришла идея, заставить скрипт получить ширину, и менять операяс на эту ширину , ширину div A.
В иделе чтото типа если document witdh = (XXX) то width css. ... = столько-то.
В html болие мения шарю а вот о jquery пока непойму только юсаю, изредка что-то подправлю, ну вобщем не шарю.
Надеюсб на вашу помощь:dance:
С ув. Алексей.

Aetae

23.05.2011 22:02

<html style="background:#dfd;">
  <body>

  <div style="background:#ddf;margin-right:200px">
    <br>100%-200px<br><br>
  </div>
  <br>
  <div style="width:60%">
    <div style="background:#ddf;margin-right:200px">
      <br>60%-200px<br><br>
    </div>
  </div>

  </body>
</html>

gorilas

24.05.2011 14:50

Цитата:

Сообщение от Aetae (Сообщение 105859)

<html style="background:#dfd;">
  <body>

  <div style="background:#ddf;margin-right:200px">
    <br>100%-200px<br><br>
  </div>
  <br>
  <div style="width:60%">
    <div style="background:#ddf;margin-right:200px">
      <br>60%-200px<br><br>
    </div>
  </div>

  </body>
</html>

к сажелегию этот вариант не подходит.
Блок которым надо управлять формируется скриптом, во втарых если ему задать сто% width она будет вычислятся из количества блоков <li> подтянутых с базы даных и умноженое на длину описаную в css.
Тоесть если в галерее 5 img то длина 5Х120px.
Задача получать размер опр. эллемента иммено в px а не в % можно сделать так - ($(window).width();- размер окна иммено в пикселях. Или $(document).width();- размер документа ) затем (послать это значение) на $('.custom_html').width(-200px). Что-то типа такого.
Я могу получить ширину но незнаю как передать её для следующей функции.
Либо надо получить какуюто переменую (Х= width (window)) а потом с етим (Х) работать.
Может кто ещё что предложит.

С ув. Алекасейю

ksa	24.05.2011 15:02

gorilas, ты явно не дооцениваешь возможностей разметки... Было бы ооочень полезно тебе сделать тестовый пример, на котором можно было бы что-то показывать и пробовать.
В противном случае решение проблемы только за твои деньги.

gorilas

24.05.2011 15:07

Цитата:

Сообщение от ksa (Сообщение 105923)

К сожалению незнаю как галерея на local сервере, не знаю как опубликовать. а в сайт вставлять сыровата ещё тема.

ksa	24.05.2011 15:16

gorilas, нам весь твой сайт без надобности... :) Я тебе про маленький тестовый пример пишу... Т.е. нет денег - начинай работать сам. В противном случае начинай копить. ;)

gorilas

24.05.2011 16:18

Цитата:

Сообщение от ksa (Сообщение 105928)

Спасибо за помощь
вот templeites

<!-- ====================================== product_list ================================= -->
<script type="text/javascript" src="js/111/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/111/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/111/2.js"></script> 

<!-- ====================================== product_list <link type="text/css" href="1css.css" rel="stylesheet"> ================================= --> 
{literal}
<script type="text/javascript">


</script>
{/literal}
<div id="wrap" align="center">

<ul id="mycarousel" class="jcarousel-skin-tango">
{foreach from=$__products item=_product}
{if $_product.slug}
{assign var=_product_url value="?productID=`$_product.productID`&product_slug=`$_product.slug`"|set_query_html}
{else}
{assign var=_product_url value="?productID=`$_product.productID`"|set_query_html}
{/if}
<li style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+20}; height: {if $__block_height}{$__block_height}{elseif $_product.thumbnail}{$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+45}{else}55{/if};">
{if $_product.thumbnail}
<table cellpadding="0" cellspacing="0" style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE}; height: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE};"><tr><td valign="bottom" align="center">
<a href="{$_product_url}">
<img src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_product.thumbnail|escape:'url'} " alt="{$_product.name|escape:'html'}" width="100" height="100">
</a>
</td></tr></table>
{/if}
<a href="{$_product_url}">{$_product.name}</a>
{if $_product.Price}<div class="totalPrice">{$_product.price_str}</div>{/if}
</li>
{/foreach}
</ul>

</div>

ширину надо назначать в css для селектора
(.jcarousel-skin-tango .jcarousel-clip-horizontal)

ksa	24.05.2011 16:29

Цитата:

Сообщение от gorilas

вот templeites

Т.е. ты считаешь что вот это

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="js/111/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/111/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/111/2.js"></script> 
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap" align="center">

<ul id="mycarousel" class="jcarousel-skin-tango">
{foreach from=$__products item=_product}
{if $_product.slug}
{assign var=_product_url value="?productID=`$_product.productID`&product_slug=`$_product.slug`"|set_query_html}
{else}
{assign var=_product_url value="?productID=`$_product.productID`"|set_query_html}
{/if}
<li style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+20}; height: {if $__block_height}{$__block_height}{elseif $_product.thumbnail}{$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+45}{else}55{/if};">
{if $_product.thumbnail}
<table cellpadding="0" cellspacing="0" style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE}; height: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE};"><tr><td valign="bottom" align="center">
<a href="{$_product_url}">
<img src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_product.thumbnail|escape:'url'} " alt="{$_product.name|escape:'html'}" width="100" height="100">
</a>
</td></tr></table>
{/if}
<a href="{$_product_url}">{$_product.name}</a>
{if $_product.Price}<div class="totalPrice">{$_product.price_str}</div>{/if}
</li>
{/foreach}
</ul>
</div>
</body>
</html>

у меня уже будет работать? :)

gorilas

24.05.2011 16:38

=)
Я так не считаю ))
Щас дам другой пример.

ksa	24.05.2011 16:50

gorilas, пример нужно делать по принципу "скопировал, вставил, запустил - увидел".

gorilas

24.05.2011 16:55

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#centr").width()     /* ====== получаю размер селектора "#centr" в пикселях ===========  */

     $("#center1").width( "#center" - 270 px ) /* ====== для селектора "#center1" назначаю ширину селектора "#center" -270px ===========  */
</script>
<style type="text/css">
#centr {
width:100%; /*  */
 height:200px;
 border: 1px solid aqua;
 background: #faebd7;
 }
 #centr1{
  /* width:100%; */ 
 height:150px;
 border: 1px solid blue;

 }
</style>

</head>

<body>
  <div  id="centr">
    <div id="centr1">
  
  
    </div>
  </div>
</body>
</html>

Пример простенький, но смысл тот-же.

Kolyaj

24.05.2011 17:02

Для #center1 указать margin-right: 270px, width оставить auto.

walik

24.05.2011 17:24

Цитата:

Сообщение от gorilas

"#center" - 270 px

Цитата:

Сообщение от gorilas

для селектора "#center1" назначаю ширину селектора "#center" -270px

:blink:

$('#center).width() - 270

Цитата:

Сообщение от gorilas

$("#centr").width()
получаю размер селектора "#centr" в пикселях

Вы не просто должны вызвать функцию, а сохранить ширину в переменную, что бы потом использовать.

gorilas

24.05.2011 17:25

Цитата:

Сообщение от Kolyaj (Сообщение 105938)

Для #center1 указать margin-right: 270px, width оставить auto.

Это просто пример.
Задача установить ширину id = center1 именно -270пик. от id = center.
Табличная вёрстка в моём случае тоже не подходит.

gorilas

24.05.2011 17:28

Цитата:

Сообщение от walik (Сообщение 105942)

:blink:

$('#center).width() - 270

а сохранить ширину в переменную, что бы потом использовать.

Вот это для меня и проблема.
Как получить переменую, и как передать след. функции, для обработки.
Почитал рус. мануал по jquery:-? для меня сами понятия (перменая , функция, селектро, атрибут) непонятны, с ява не знаком.
Если где-то это разжовано в примерах, ткните носом.
С ув. Алексей.

ksa	25.05.2011 09:19

Цитата:

Сообщение от gorilas

Задача установить ширину id = center1 именно -270пик. от id = center.

Так вот если поставить

#centr1{
	height:150px;
	*!*margin-right: 270px;*/!*
	border: 1px solid blue;
}

всё так и будет...

gorilas

25.05.2011 12:16

Цитата:

Сообщение от ksa (Сообщение 105992)

Так вот если поставить

#centr1{
	height:150px;
	*!*margin-right: 270px;*/!*
	border: 1px solid blue;
}

всё так и будет...

Конкретно в этом примере да....
так как id centr1 постояной ширины, но представим (пример), что в div center1, в блок ui с помощью ajax всё время что-то подгружается с сервера, он постояно меняется - увеличевается.
поэтому смосоп с margin у меня не срабатывает.
Задача поставить чёткую длину center1
Например здесь бек граунд при загрузке дом и масштабировании привязывается к (window) размеру окна http://ruseller.com/lessons.php?rub=32&id=1034.
Mне надо привязать (width) к определёному блоку div.

Просто мне неясен сам синтаксис jquery, сам скрипт я примерно в голове представляю, пример

1) получить переменую равную (width div id=center)
==== var peremenaj = $("#center").width()

2) дальше мне надо с этой переменой работать, вижу это примерно так

jquery находит (#center1) и устанвливает для него( действие bind ) $("#centr1").width( peremenaja - 270px)

Вот как правильно это всё написать ???

ksa	25.05.2011 13:15

Цитата:

Сообщение от gorilas

но представим (пример), что в div center1, в блок ui с помощью ajax всё время что-то подгружается с сервера, он постояно меняется - увеличевается.

При таком раскладе как в твоём примере его ширина будет постоянная.

Если твой пример не удачный - сделай более приближенный к боевому, будем тренироваться на нём... :)

gorilas

25.05.2011 15:24

Всем спасибо сами разобрались

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    function divresize() {
        var windowwidth = $("#centr").width(); //определяем высоту окна браузера
        var x = 500;
        $("#centr1").css('width', windowwidth - x); //устанавливаем высоту блока(равно высоте окна за вычетом шапки и подвала)
    }
    divresize(); //вызываем функцию изменения размера блока
    $(window).bind("resize", function(){ //при изменении размера окна вызываем функцию
        divresize(); 
    });
});





</script>
<style type="text/css">
#centr {
width:90%; /*  */
 height:300px;
 border: 1px solid aqua;
 background: #faebd7;
 }
 #centr1{

 height:100px;
 border: 1px solid blue;
background: #00f000;
 }

</style>

</head>

<body>
  <div  id="centr"  align="center">
  <p>
	  centr
	  <br>width:100%; 
 <br>height:400px;
       </p> 
    <div id="centr1">
    
    </div>
	
  </div>
</body>
</html>

ksa	25.05.2011 15:27

Цитата:

Сообщение от gorilas

сами разобрались

Страсть к скриптам таки победила... :)

gorilas

25.05.2011 15:30

можно ещё проще

$(document).ready(function() {
    function divresize() {  //саздаём и называем функцию - divresize
        
         $("#centr1").css('width',  $("#centr").width() - 500 );} // описываем  как работает функция 

               //ширина  "centr1"  =  "centr" -500 (500рх), или *0,8 (80%), или /2 (50%) ну вобшем математика.

    divresize(); //вызываем функцию divresize и устанавливаем width для #centr1
    $(window).bind("resize", function(){ //при изменении размера окна вызываем функцию divresize и .........
        divresize(); 
    });
});

Подредактировал коменты.
С ув. Алексей.

Часовой пояс GMT +3, время: 01:53.