Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Опредилить высоту таблицы (https://javascript.ru/forum/misc/3183-opredilit-vysotu-tablicy.html)

konstantinopol 25.03.2009 15:54
Опредилить высоту таблицы
 
Как определить высоту таблицы созданой в JS в определённом <div id="tablica">
document.getElementById('tablica').height - не подходит.

Очень надо.

Gvozd 25.03.2009 16:05
искать нужно уссерднее
Измерения окна, документа и элементов

Kolyaj 25.03.2009 16:06
document.getElementById('tablica').offsetHeight

konstantinopol 25.03.2009 16:21
При document.getElementById('tablica').offsetHeight
Хм, alert возвращает ноль. Я посмотрел код с FireBud и он показал что teblica не имеет значения hight. Возможно поэтому я и получаю ноль. Но если есть таблица значит где-то должны быть и её данные??

Gvozd 25.03.2009 16:25
неужели это заметил только я?
вы сейчас у чего пытаетесь выяснить высоту?
явно не у таблицы. а у содержащего ее дива(да, бывает такое что див меньше, чем содержащиеся в нем элементы)
document.getElementById('tablica').getElementsByTagName('table')[0].offsetHeight

konstantinopol 25.03.2009 16:52
Вложений: 1
У меня посложнее будет ситуация.
Сверху можно увидить что стоит в div="tablica" но в нём оказывается не таблица а полныв полно других дивов. А команда
document.getElementById('tablica').getElementsByTagName('table')[0].offsetHeight

выдаёт ошибку . Как получить полный размер дива?

Gvozd 25.03.2009 17:00
в зависимости от того, как вы используете CSS ваш див может быть размеом меньше, чем элементы содержащиеся в нем.
попробуйте например посчитать сумму всех дочерних элементов.
если не получится, приложите в атаче образец вашей странички для теста.
потому что телепатически можно долго гадать, что у вас там происходит.

konstantinopol 25.03.2009 17:09
Вы мне предлогаете пощитать "на пальцах" или с помощью программы(функции)?
Таблица каждый раз разных размеров поэтому "на пальцах" щитать бесполезно. А как пощитать дочерние элементоы понятия не имею.

Gvozd 25.03.2009 17:18
почитайте раздел статей, где говорится про DOM
а вот так примерно будет выглядеть "посчитать"
elem=document.getElementById('tablica')
_offsetHeight=0;
children=elem.childNodes
for(i=0,s=children.length;i<s;i++)
{
if(children[i].nodeType==1)//только потомки-теги.без чисто текстовых нод
{
_offsetHeight+=children[i].offsetHeight;//суммируем
}
}
alert(_offsetHeight);

извините что без ворматирования.набирал прямо тут
только может не сработать, если потомки страдают той же "болезнью", что и родитель, то есть имеют меньший размер, чем содержимое.
все зависит от вашего CSS.
но, в принципе описанное действие можно проводить рекурсивно.
кжется так и делают в jQuery

Kolyaj 25.03.2009 17:21
Gvozd,
издеваешься чтоли? Это вообще не будет работать в большинстве случаев.

konstantinopol 25.03.2009 17:27
В щетчике тоже ноль выкидывает.
Код впринцепи не большой попробуйте запустить у себя если несложно, может увидите то чего не вижу я...

<title>Golfclub suche</title>
	<style type="text/css">
	/* Start of css that is not needed for the script */
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-top:0px;
		background-image:url('../../images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:10px;
	}
	p{
		margin-top:0px;
	}
	a{
		color:#660000;
		text-decoration:none;

	}	
	/* End of css that is not needed for the script */
	
	/* Don't delete anything below here */
	.dhtmlgoodies_contentBox{
		border:1px solid #317082;
		height:100%;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow: auto;
		padding:2px;
		width:600px;			
	}
	.dhtmlgoodies_content{
		position:relative;		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		width:100%;
		font-size:0.8em;
		
	}
	</style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAqhsoVuEo3BxAXgujPIiHdhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTtTNmWH0QF_Ew4EPElCVnWRPcXSQ" type="text/javascript"></script>
 	<script type="text/javascript">

	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();

	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 8; 	// Higher value = faster script
	var slidedownTimer = 7;		// Lower value = faster script
	var slidedownContentBox;
	function slidedown_showHide(boxId)
	{
		start();
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
		
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];	
		}

		contentHeight = slidedownContent.offsetHeight;
	
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{

		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';

		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);	// Choose a lower value than 10 to make the script move faster
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;
		
	}
	</script>
  </head>
<body onunload="GUnload()">
<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;">Show/Hide map</a></div>
	<div class="dhtmlgoodies_contentBox" id="box1">
		<div class="dhtmlgoodies_content" id="subBox1">
			<div id="map" style="width: 600px; height: 600px"></div><br>
					
					<div id="verbindung">
					<table border="0">
						<tr>
							<td>
								<input type="text" name="zieladresse" id="zieladresse"/>
							</td>
							<td>
								<a href="javascript:makeDirection()" value="Verbindung suchen..">Verbindung suchen..</a>
							</td>
						</tr>
					</table>
					</div>
			<div id="directions"></div>
			<div id="tabelle"></div>
		</div>
	</div>
</div>


<script type="text/javascript">
		var gdir=null;
		var i = 0; 
		var geocoder;
		var map;
		var side_bar_html;
      		
		var address;	
		function myclick(i) {
   		     gmarkers[i].openInfoWindowHtml(htmls[i],{maxWidth:230});
   		}
		function start(){
			geocoder = new GClientGeocoder();
			side_bar_html = "";
			var gmarkers = [];
			var htmls = [];
			
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());

			var mt = map.getMapTypes();
			address = "Bonn";
			geocoder.getLocations(address, addAddressToMap);
		}

		function addAddressToMap(response){
			if (!response || response.Status.code != 200) {
				alert("Die eingegebene Adresse konnte nicht gefunden werden.");
			} else {
				place = response.Placemark[0];
      				point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
				map.setCenter(new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]),11);
				marker = new GMarker(point);
        			map.addOverlay(marker);
				marker.openInfoWindowHtml("info");
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml(info);
   				     });
				side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        			i++;
			}
		}
		
		function makeDirection(){
			var tablica = document.createElement("div");
			tablica.setAttribute("id", "tablica");
			document.getElementById('subBox1').appendChild(tablica);
			gdir = new GDirections(map, document.getElementById("tablica"));
			setDirections(document.getElementById("zieladresse").value, address, "de");
		}
		function setDirections(fromAddress, toAddress, locale) {
			gdir.load("from: " + fromAddress + " to: " + toAddress,{ "locale": locale });
			
		}
</script>

</body>

Gvozd 25.03.2009 17:29
Kolyaj,
нет. не издеваюсь.
я искренне полагал, что этот способ должен сработать.
Если вы знаете способ, который гарантировано(или хотя бы в большинстве случаев) будет работать, опубликуйте его.
сам я эту задачу ранее не решал, поэтому все мои рассуждения на уровне "а почему бы не..."
готовых решений у меня под рукой нет

Gvozd 25.03.2009 17:32
konstantinopol,
искренне не понимаю, как добится появления упомянутой таблицы

konstantinopol 25.03.2009 17:36
А вы пробовали запустить добавленный скрипт??

Kolyaj 25.03.2009 17:43
Цитата:
Сообщение от Gvozd
Если вы знаете способ, который гарантировано(или хотя бы в большинстве случаев) будет работать, опубликуйте его.
offsetHeight у нужного элемента.

Gvozd 25.03.2009 17:46
Цитата:
TypeError: document.getElementById("tablica") has no properties
что я должен нажать у вас, чтобы таблица появмлась
--вопрос уже снят--
что я должен ввести в строку запроса, чтобы мне показало непустую таблицу? я по немецки не знаю, чот там от меня хочет.
PS повесьте срабатывание makeDirection() не только на надпись, но и на нажатие enter-а

konstantinopol 25.03.2009 17:47
Как я уже писал выше offsetHeight передаёт 0.

Kolyaj 25.03.2009 17:48
Цитата:
Сообщение от konstantinopol
Как я уже писал выше offsetHeight передаёт 0.
Таблица в этот момент должна быть видима на экране, т.к. никаких display: none.

konstantinopol 25.03.2009 17:50
Пардон моя ошибка.
Нужно ввести город. Например Berlin или Leverkusen.
Для начала мне нужно чтобы размеры правильные были а потом уже можно задуматься о enter

Gvozd 25.03.2009 17:56 
console.log(document.getElementById('tablica').offsetHeight)

выдал мне 1298
тестировалось в мозилле

konstantinopol 25.03.2009 18:01
Где он тебе это выдал??
У меня ничего не выдаёт как бы я это не написал.

Gvozd 25.03.2009 18:07
да прямо в консоли фаербага написал, и оно мне выдало

konstantinopol 25.03.2009 18:10
Ну это конечно хороше что в консоле FireBug но где это нарисовать в коде чтобы он выдавал это значение???
Это тоже "небольшая" проблема.

Gvozd 25.03.2009 18:17 
function makeDirection(){
            var tablica = document.createElement("div");
            tablica.setAttribute("id", "tablica");
            document.getElementById('subBox1').appendChild(tablica);
            gdir = new GDirections(map, document.getElementById("tablica"));
            setDirections(document.getElementById("zieladresse").value, address, "de");
			setTimeout(function(){alert(document.getElementById('tablica').offsetHeight)},5000);
        }

повесил на "через 5 секунд", потому что понятия не имею, когда приходит с сервера ответ. можете посмтотреть в google-API сами этот момент.
ищите обработчик события ответа с сервера

konstantinopol 25.03.2009 18:26
Спасибо огромное за помощь. Всё работает как надо.

К сожалению :
Вы должны добавить отзыв кому-то ещё, прежде чем сможете снова добавить его Gvozd.

Gvozd 25.03.2009 18:27
пожалуйста.
больше не наступайте на эти грабли с асинхронностью

konstantinopol 25.03.2009 18:32
Постораюсь


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