» »

JavaScript offsetTop in brskalniki

JavaScript offsetTop in brskalniki

shorvat ::

Lep pozdrav,

za ugotavljanje pozicije vgnezdenega elementa DIV uporabljam javascript offsetTop parameter. Izmeril/testiral sem podatke v štirih brskalnikih (IE, FF, Chrome, Opera) in ugotovil, da IE izračuna oddaljenost od zgornjega roba s precejšnjo razliko od ostale trojice.

Link do testne strani: http://www.mojagostilna.com/offsetTest....

Moji podatki:
IE: prvi ->     DIV -> 22 : TD -> 3 : TABLE -> 15 : BODY -> 0    =    40px
   drugi ->     DIV -> 22 : TD -> 3 : TABLE -> 97 : BODY -> 0    =    122px

FF: prvi ->     DIV -> 22 : TD -> 3 : TABLE -> 8 : BODY -> 0     =    33px
   drugi ->     DIV -> 22 : TD -> 3 : TABLE -> 90 : BODY -> 0    =    115px

Opera: prvi ->  DIV -> 23 : TD -> 3 : TABLE -> 8 : BODY -> 0     =    34px
      drugi ->  DIV -> 23 : TD -> 3 : TABLE -> 90 : BODY -> 0    =    116px

Chrome: prvi -> DIV -> 22 : TD -> 2 : TABLE -> 8 : BODY -> 0     =    32px
       drugi -> DIV -> 22 : TD -> 2 : TABLE -> 90 : BODY -> 0    =    114px

To so razdalje po osi Y za oba obarvana kvadratka, ki ju vidite na zgornjem linku

Rezultati se razlikujejo pri vseh brskalnikih, ampak najbolj izstopa IE. Tako majhne razlike kot so pri ostalih brskalnikih so sprejemljive.

Kakšen predlog?

HTML:
<table border="1">
	<tr>
		<td>k</td>
		<td>
			<div style="padding-left: 30px; padding-top: 20px; border: solid 1px;">
				<div id="prvi" style="background-color: #335577; width: 30px; height: 50px;">k</div>
			</div>
		</td>
		<td><span id="prvi_podatki"></span></td>
	</tr>
</table>


<table border="1" width="1200">
	<tr>
		<td width="500">k</td>
		<td width="500">
			<div style="padding-left: 30px; padding-top: 20px; border: solid 1px;">
				<div id="drugi" style="background-color: #775533; width: 30px; height: 50px;">k</div>
			</div>
		</td>
		<td><span id="drugi_podatki"></span></td>
	</tr>
</table>


JavaScript:
function getYprvi()
{
	var iReturnValue = 0;
	var oElement = document.getElementById('prvi');
	while( oElement != null ) {
		document.getElementById('prvi_podatki').innerHTML = document.getElementById('prvi_podatki').innerHTML + " : " + oElement.nodeName + " -> " + oElement.offsetTop;
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}

function getYdrugi()
{
	var iReturnValue = 0;
	var oElement = document.getElementById('drugi');
	while( oElement != null ) {
		document.getElementById('drugi_podatki').innerHTML = document.getElementById('drugi_podatki').innerHTML + " : " + oElement.nodeName + " -> " + oElement.offsetTop;
		iReturnValue += oElement.offsetTop;
		oElement = oElement.offsetParent;
	}
	return iReturnValue;
}
getYprvi();
getYdrugi();


Hvala za odgovore in lp, Sašo

DiTi ::

še poiskusil oz. slišal za jquery knjižnico. glede na kompleksnost ti jo priporočam. dobiš pa s position() in meni dela v vseh brskalnikih ok.

shorvat ::

poznam jQuery in ga uporabljam ko je le mogoče ... ampak v tem projektu ga ne morem ...

Nevro^ ::

poskusi formatirat css, ker problem je v margin-u, ker si ga pač vsak browser po svoje razlaga...

EDIT:
* {
	border: 0;
	margin: 0;
	padding: 0;
	outline: none;
}

Zgodovina sprememb…

  • spremenil: Nevro^ ()

shorvat ::

To ne bo šlo, ker bo JS koda ki jo pišem vključena na spletnih mestih, katerih sam ne nadzorujem....

Nevro^ ::

Uff... pol pa že v osnovi pušiš! ;) Ena rešitev je iframe, druga pa da narediš en xml z vsemi potrebnimi podatki, katere lahko pol druge spletne strani parsajo in nek osnovni template, ki ga pol lastniki spletnih strani urejajo po želji in potrebah!

shorvat ::

Gre za storitev, ki bo omogočala nadzor nad tem, kateri del spletne strani je najbolj "gledan", katere vsebine uporabnike najbolj zanimajo itd itd... skratka, analiza za izboljšavo spletnega portala ... zato mora biti to JS koda ... noben iframe in tudi ne xml me ne rešijo ... tako da ne pušim v osnovi :)

Nevro^ ::

Ok. tega nisem vedel! Sem mislil, da bi rad da lahko webmasterji vključijo neke podatke iz tvoje spletne strani na svojo spletno stran! Kako boš videl s pomočjo js-ja na kateri del spletne strani si uporabniki ogledujejo? Na podlagi miške? To je žal bolj kilav podatek, namreč v večini primerov je miška popolnoma drugje kot so oči! ;) Pa ne zdaj to razumet narobe... poskušam ti zgolj pomagat!

shorvat ::

Pozicija miške nima vpliva in je v "raziskavi" ne upoštevamo ... zalo zalo smo zašli iz prvotne teme ... ima kdo kakšno idejo oz. algoritem, ki v vseh browser-jih poda "pravilen" podatek o poziciji določenega tag-a?


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

AJAX kratke naloge

Oddelek: Izdelava spletišč
192132 (1599) Yacked2
»

Ajax readyState == 3 ne deluje?

Oddelek: Izdelava spletišč
9665 (588) Housy
»

Javascript pomoč

Oddelek: Izdelava spletišč
201964 (1520) Lion29
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje
81792 (1647) kogledom
»

Internet strani kot slideshow

Oddelek: Izdelava spletišč
211978 (1729) sverde21

Več podobnih tem