Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > передача переменной - в значение ширины таблицы

Автор: Teleport 12.11.2008, 19:35

В данном коде я предполагаю сделать - в зависимости от разрешения экрана назначать разную ширину таблицы и напечатать значение ширины в таблице.

Код


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<body>

<script LANGUAGE="javascript">
var height=0;
var width=0;
var tab_w=100;

if (self.screen) // for NN4 and IE4
{
width = screen.width
height = screen.height
}
else if (self.java) // for NN3 with enabled Java
{
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}

if (width == 800 && height == 600)
{ tab_w= 600  }
else if (width == 1024 && height == 768)
{ tab_w= 800  }
else if (width == 1280 && height == 1024)
{ tab_w= 1000  }
else
{ location.href = "unknown.html" }
</SCRIPT> 

<table width= "?????" border="1"> <!-- как тут указать ширину-то? -->
  <tr>
    <td>
    <p>
    <script language="javascript">
    ?????
     <!-- как тут напечатать ширину? -->
    </script>
    </p>
    </td>
  </tr>
</table>


</body>
</html>

так вот как подправить? чтобы вышло то, что я хочу smile

Автор: destrd 12.11.2008, 19:43

Код


<input type="text" name="your_name" id="your_name_input" />

<script type="text/javascript">
  var name_input = document.getElementById('your_name_input')
  name_input.value="Medved"
</script>

Вот так же и работайте со своей таблицей через DOM

Автор: Teleport 12.11.2008, 20:24

2 destrd - мне нужен пример в моем коде по моему вопросу. С твоим примером я не разберусь.

Автор: Wheels 12.11.2008, 23:34

мб так?
xxx - id Вашей таблицы. (<table id=xxx>) Ширину тут указывать не надо.

Код


<script>
// Тут определяете нужную длину таблицы и записываете в переменную tabwidth
var tbl = document.getElementById('xxx');
tbl.style.width = tabwidth;

var divtblw = document.getElementById('tblw');
divtblw.innerHTML = tabwidth;
</script>

А там, где нужно вставить значение вставьте див (<div id=tblw></div>)

Сразу предупреждаю - я в js дилетант! =)

Автор: Wheels 13.11.2008, 00:00

destrd, таких как ты терпеть не могу.

Teleport, Подправьте под свои нужды.

Код


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body onLoad=mytable();>
<script LANGUAGE="javascript">
function mytable()
{
    var tab_w = screen.width;
    var tbl = document.getElementById('oioi');
    tbl.style.width = tab_w;
    var divtblw = document.getElementById('tblw');
    divtblw.innerHTML = tab_w;
}
window.onload = function()
{
    mytable();
}
</SCRIPT>
<table id="oioi" border="1">
  <tr>
    <td>
    <p>
<div id="tblw"></div>
    </p>
    </td>
  </tr>
</table>
</body>
</html>

а еще показать разрешение можно так:

Код


<script language="JavaScript"> document.write(screen.width)</script>

P.S. могут быть ошибки.

Автор: Michael.de 13.11.2008, 03:23

Teleport, напишу несколько замечаний. 100% гарантии, что всё правильно не даю. Если ошибся, другие поправят:
1. вместо <script LANGUAGE="javascript"> лучше писать <script type='text/javascript'>
2. <script type='text/javascript'> ... </script> я всегда задаю в HEAD - раньше загрузится.
3. не надо вставлять <script type='text/javascript'> ... </script> посреди HTML - для этого есть id и getElementById() {или getElementsByTagName() или getElementsByName() }
4. По твоим вопросам:
B строках 37 и 40 задаёшь таблице и <p> id: <table id='tb' border="1"> и <p id='p1'>, создаёшь ф-цию (напр.) init() и переписываешь боди на <body onload='init();'>, в ф-ции пишешь:

Код


function init(){
 // инициируется при загрузке, патамушта анлоад :))
 tbl = document.getElementById('tb');
 p = document.getElementById('p1');
 // далее выясняем ширину экрана и задаём таблице например 70% от неё:
 tbl.style.width = shirina * 0.7 + 'px';
 // а так пишем в <p>:
 p.innerHTML = shirina;
}

P.S. пишу не в едиторе - могут быть ашипки smile

Автор: Teleport 13.11.2008, 23:41

Wheels, Michael.de - Люди, спасибо огромное! А то я парился бы долго еще)))))))
на основании ваших советов - я вот что написал, но есть вопросы.

Код


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<script LANGUAGE="javascript">
function init()
{
var height=0;
var width=0;

if (self.screen) // for NN4 and IE4
{
width = screen.width
height = screen.height
}
else if (self.java) // for NN3 with enabled Java
{
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
 // инициируется при загрузке, патамушта анлоад :))
 tabl = document.getElementById('tab1');
 p = document.getElementById('p1');
 // далее выясняем ширину экрана и задаём таблице ширину

 if (width == 800 && height == 600)
{ tab1.style.width= 600}
else if (width == 1024 && height == 768)
{ tab1.style.width= 800}
else if (width == 1280 && height == 1024)
{ tab1.style.width= 1000 + 'px';
   tab1.style.height= 1000 + 'px';}//тут еще и высоту задал
 // а так пишем в <p>:
 p.innerHTML = tab1.style.width;
}
</SCRIPT> 
</head>

<body OnLoad="init();" OnResize="init();" OnReload="init();">

<table id="tab1"  border="1" >
  <tr>
    <td>
    <p id= "p1">
    </p>
    </td>
  </tr>
</table>

</body>
</html>

1)работает в Опере, IE7, а вот в FireFox - ничего не работает!! Как быть? для этого броузера?
2) и почему это вместо <script LANGUAGE="javascript"> лучше писать <script type='text/javascript'>

Автор: destrd 14.11.2008, 00:04

Цитата(Wheels @ 13.11.2008, 01:00

)

destrd, таких как ты терпеть не могу.

Спасибо

. Велика ли разница между тем, что я написал и вы smile

Как работали через DOM так ничего и не изменилось. Мне просто было лень писать подробный код. Кто-то более подробно пишет, кто-то просто на мысль наводит.

Цитата(Teleport @ 14.11.2008, 00:41

)

2) и почему это вместо <script LANGUAGE="javascript"> лучше писать <script type='text/javascript'>

Насколько я помню, w3c валидато требует (хотелось бы видеть) писать type. А вот по поводу language не помню.

Автор: Teleport 14.11.2008, 01:37

2 destrd - спасибо за ответ на вопрос. ;)
Люди, а что делать с отображением в FireFox моего последнего кода ?? ))))))) Подскажите пожалуйста, а то мне не понятно)))))))))

Автор: destrd 14.11.2008, 01:50

Цитата(Teleport @ 14.11.2008, 02:37

)

Люди, а что делать с отображением в FireFox моего последнего кода ??

А он пишет, контора пишет smile

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

Автор: Teleport 14.11.2008, 01:58

2 destrd - нну а делать-то с этим что? smile

я и использую document.getElementById()...
подробнее нужно мне...

Автор: Michael.de 14.11.2008, 02:08

Teleport:
1. OnReload() - неизвестная науке ф-ция (и они все пишутся в нижнем регистре).
2. "NN4 and IE4", "NN3 with enabled Java" - какие-то старые браузеры.
3. добавил несколько ";", исправил регистр и ещё по мелочам:

Код


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Super program ;)</title>
<script type='text/javascript'>
var tabl, p, height=width=0;
function init(){
 if (self.screen){// for NN4 and IE4
  width=screen.width;
  height=screen.height;
 }
 else if (self.java){// for NN3 with enabled Java
  var jkit=java.awt.Toolkit.getDefaultToolkit();
  var scrsize=jkit.getScreenSize();
  width=scrsize.width;
  height=scrsize.height;
 }
 tabl=document.getElementById('tab1');
 p=document.getElementById('p1');
 // далее выясняем ширину экрана и задаём таблице ширину:
 var e='px';// e - extention
 if (width == 800 && height == 600) tab1.style.width= 600+e;
 else if (width == 1024 && height == 768) tab1.style.width= 800+e;
 else if (width == 1280 && height == 1024){//тут еще и высоту задал
  tab1.style.width=1000+e;
  tab1.style.height=1000+e;
 }
 // хмм... а что же делать, если разрешение монитора другое? (у меня 1440*900)
 else {// в качестве примера:
  tab1.style.width=width/2+e;
  tab1.style.height=height/2+e;
 }
 p.innerHTML=tab1.style.width;// пишем содержимое в <p>
}

function resize(){
 // а работает ли ресайз?
 alert('Resize?\nYes... but twice in IE6 :/');
 // тут нужно высчитывать не разреш. монитора, а актуальные размеры окна
 // (я не помню как) и если нужно, менять размеры таблицы и содержимое <p>
}
</script> 
</head>
<body onload='init();' onresize='resize();'>
<table id='tab1' border='1'>
<tr><td><p id='p1'></p></td></tr>
</table>
</body>
</html>

Проверял в IE6, FF3 и последней Опере.

Автор: Teleport 14.11.2008, 02:41

2 Michael.de а вот не фига smile

, у меня версия FF - 2.0.0.14 - и ничего не пашет в нем - ни мой пример, ни твой... smile

ой я не внимательный, а.... tabl и tab1 перепутал в 18 строке smile

)))))))))))))))))))))))))) Все работает!!
Нну FF и придирчивый блин! IE и Opera все съели и слова не сказали, а FF - не фига...))))))) шутка, конечно smile

Цитата

2. "NN4 and IE4", "NN3 with enabled Java" - какие-то старые браузеры.

Это я просто из старого примера брал smile

забыл удалить, тогда более новых броузеров наверное не было smile

Насчет регистра и Reloada - спасибо, не знал smile

И насчет более широкого разрешения - спасибо за подсказку. Я это уже предусмотрел. )))))