Keskustelu: Nettisivujen teko: JS (+CSS)

Koitan saada JS-koodilla määriteltyä content:in korkeuden, mutta ei ota onnistuakseen.

<script type="text/javascript">
var container = document.getElementById("container").style.height;
var banner = document.getElementById("banner").style.height;
var navigation = document.getElementById("navigation").style.height;
var footer = document.getElementById("footer").style.height;

document.getElementById("content").style.height = eval(container - banner -navigation - footer);
</script>

div#container {
	position: absolute;
	left: 5%;
	width: 90%;
	height: 90%;
	border: 1px solid black;
	background-color: white;
}

div#banner {
	position: relative;
	width: 100%;
	height: 150px;
	img-border: 0;
	img-align: center;
	background-color: green;
}

div#navigation {
	position: relative;
	width: 100%;
	height: 20px;
	text-align: left;
	border-top: 1px solid black;
	background-color: brown;
}

div#content {
	position: relative;
	width: 100%;
	text-align: left;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background-color: white;
}

div#footer {
	position: relative;
	width: 100%;
	height: 20px;
	text-align: center;
	background-color: brown;
}

Tyylitiedoston tyyleihin et pääse ihan noin helposti käsiksi, eikä moiseen taida ollakaan mitään tapaa, joka toimisi kaikissa selaimissa. Eli käy käsiksi vaikkapa elementin offsetHeight-propertyyn.

<script type="text/javascript">
var container = document.getElementById("container").offsetHeight;
var banner = document.getElementById("banner").offsetHeight;
var navigation = document.getElementById("navigation").offsetHeight;
var footer = document.getElementById("footer").offsetHeight;

document.getElementById("content").offsetHeight = eval(container - banner - navigation - footer);
</script>

Noin ei ainakaan toimi?

Vai tarkoitatko setAttributea?

Itse yrittäisin jotain seuraavantyylistä (hatusta tulee):

var container  = document.getElementById('container').offsetHeight;
var banner     = document.getElementById('banner').offsetHeight;
var navigation = document.getElementById('navigation').offsetHeight;
var footer     = document.getElementById('footer').offsetHeight;

document.getElementById('content').style.height = (container - banner - navigation - footer) + 'px';

Olga kirjoitti:

Itse yrittäisin jotain seuraavantyylistä (hatusta tulee):

var container  = document.getElementById('container').offsetHeight;
var banner     = document.getElementById('banner').offsetHeight;
var navigation = document.getElementById('navigation').offsetHeight;
var footer     = document.getElementById('footer').offsetHeight;

document.getElementById('content').style.height = (container - banner - navigation - footer) + 'px';

Ei toimi tälläkään.

JavaScript ei löydä elementtejä jos se ajetaan ennen kuin sivun sisältö on tullut.

window.onload = function() {
    var container  = document.getElementById('container').offsetHeight;
    var banner     = document.getElementById('banner').offsetHeight;
    var navigation = document.getElementById('navigation').offsetHeight;
    var footer     = document.getElementById('footer').offsetHeight;

    document.getElementById('content').style.height = (container - banner - navigation - footer) + 'px';
}

Kannattaa tutustua Firefoxin virhekonsoliin, se kertoo tämmöiset ongelmat välittömästi.

kiitos paljon Merri.
[offtopic]Virhekonsolista löytyy kyllä paljon virheitä jokaisesta sivusta..[/offtopic]

Hakoulinen kirjoitti:

kiitos paljon Merri.
[offtopic]Virhekonsolista löytyy kyllä paljon virheitä jokaisesta sivusta..[/offtopic]

Itse en kyllä ole juurikaan törmännyt asiaan.

Lähinnä tietyt bannerit saattavat luoda yhdestä pariin virheeseen, mutta muuten itselläni ei javaScript -erroreita netissä näy.

Yksikin js-error kertoo _aina_ jotain sivuston laadusta.

Lähinnä yleisin virhe on vain tämä, ja näitäkin oli viimeisen kuukauden aikana ilmaantunut logiini kaksi, ja itsehän siis nettaan suhteellisen paljon:
Virhe: uncaught exception: Ei lupaa kutsua metodia Location.toString

Niin no, voidaan lähteä siitä että virhekonsoliin kertyy Putkassakin aikamoinen läjä CSS-virheitä :) Esimerkiksi style="word-wrap:break-word" toistuu aikamoisen monesti, mikä on ilmeisesti IE:n oma lisäys jota myös Safari taitaa tukea. Sitten on jätetty font-sizestä määrittämättä mitä mittayksikköä käytetään (px vai pt?), joten Firefox jättää sen huomioitta ja kertoo tekevänsä niin.

Ei sen puoleen, kyllähän Googlenkin sivuilta tulee herjaa. Virheitä syntyy ja jää lurkkimaan aika helposti, eikä niitä päälle päin aina välttämättä huomaa.