Как поменять значение width в css
Здравствуйте. Существует следующая проблема:
Есть шаблон joomla, все в нем устраивает кроме того, что при выводе широкой таблицы(элемента) часть таблицы не видно. Настроить шаблон не получилось. Ширина шаблона фиксированная и равна 962 пикселя. Решение проблемы вижу в следующем - написать javascript который динамически будет считать ширину документа исходя из размера таблицы(элемента) и автоматически подставлять ее в (ширину документа) в css(width). Вообщем получилось следующее: ===== <!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="ru-ru" lang="ru-ru" > <head> <base href="http://localhost/tablica/fizika/6-test.html" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" /> <title>Test</title> <link rel="stylesheet" href="/tablica/plugins/system/modalizer/modals/fancybox/jquery.fancybox-1.3.1.css" type="text/css" /> <link rel="stylesheet" href="http://localhost/tablica/components/com_tag/css/tagcloud.css" type="text/css" /> <style type="text/css">
<!--
#wrapper { margin: 0 auto; width: 962px;padding:0;}
.s-c-s #colmid { left:160px;}
.s-c-s #colright { margin-left:-320px;}
.s-c-s #col1pad { margin-left:320px;}
.s-c-s #col2 { left:160px;width:160px;}
.s-c-s #col3 { width:160px;}
.s-c-x #colright { left:160px;}
.s-c-x #col1wrap { right:160px;}
.s-c-x #col1 { margin-left:160px;}
.s-c-x #col2 { right:160px;width:160px;}
.x-c-s #colright { margin-left:-160px;}
.x-c-s #col1 { margin-left:160px;}
.x-c-s #col3 { left:160px;width:160px;}
-->
</style>
<script type="text/javascript">
//функция wf()
function wf() {
var tb = document.getElementById('tb'); //вытягиваем tb из <table border="1" id="tb"/>
var xrt = tb.offsetWidth; //берем значение offsetWidth от tb т.е. ширину таблицы
var wd; // создаем переменную в которую поместим новое значение ширины документа
if (xrt > 640) // 640 - ширина модуля вывода статьи
{
wd = 962 + (xrt - 640); // вычисляем новую ширину документа
}
else
{
wd = 962; // Если ширина таблицы не превышает 640 пикселей оставляем значение по умолчанию 962 пикселя
}
//alert(wd); - тестируем, что получилось в wd
}
</script>
</head><body onLoad="wf()"/> <!-- //Вызываем функцию wf() по событию onLoad(загрузка документа)--> <div> <table border="1" id="tb"/> <!- присваиваем id=tb таблице> <tbody> <tr> <td bgcolor="#cccccc"></td> ..... ... </tbody> </table>=== Вопрос в следующем: Как подставить значение wd вместо 962 в строку из блока css - #wrapper { margin: 0 auto; width: 962px;padding:0;} ? |
удалено.
|
удалено.
|
Цитата:
#wrapper { margin: 0 auto; width: 962px;padding:0;}
находится в теле html(№4 в выделенном блоке css), а не в отдельном файле, даже в этом случае изменить нельзя? Насколько я понял, то ширину модуля в моем случае определяет строка: <div id="wrapper" class="foreground"> значение "wrapper" берется из блока css вверху страницы. Как мне пристроить document.getElementById('tb').style.width = wd + 'px';
чтобы менялась ширина страницы на необходимую.Просто я не силен в программировании в общем и в javascript в частности. |
удалено.
|
Большое спасибо! Все работает.
Подскажите какое событие лучше выбрать. Я так понимаю событие onLoad в <body onLoad="wf()"/> запустит ф-цию wf(), только тогда, когда загрузится весь документ, а если будут перебои со связью и не загрузится к примеру счетчик, то событие не произойдет? |
Произойдет, но по таймауту загрузки. Короче ждать долго :)
А нахрена такой бред делать надо? А если у чела JS отключен? На выходе очередная говностраница? Такого дерьма полный интернет :) |
| Часовой пояс GMT +3, время: 00:52. |