Autor Zpráva
Majkll
Profil *
Zdravím,

Mám na stránke zoznam položiek (odkazov), ktorých je povedzme 50 a je to všetko v boxe, ktorý má maximálnu výšku 400px. Čiže je nemožné aby sa do tejto výšky tých 50 položiek zmestilo - preto je použitý scroll.. Avšak ja potrebujem aby sa na vrchu toho 400px boxu hneď zobrazila 30. položka v poradí (keď budem následne scrollovať tak nad ňou bude predošlých 29 a pod ňou zvyšných 20).
Ide o to aby sa hneď po načítaní stránky zobrazila na vrchu 30. položka ale pritom bude zachované poradie..
Ako by sa to dalo vyriešiť?

Názorná ukážka spomínaného boxu:
<ul id="list" style="max-height: 400px; overflow: auto;">
<li>Položka</li>
<li>Položka</li>
<li>Položka</li>
<li>Položka</li>
</ul>

Ďakujem
Str4wberry
Profil
Navrhuji následující:

1) Přidat position: relative pro #list.
2) Nastavit pro #list vlastnost scrollTop na hodnotu offsetTop třicáté položky.

Jak si můžete povšimnout, nastavení relativní posice je pro zjednodušení počítání offsetTop (vztahuje se k rodiči s právě relativní posicí).

Mohlo by to vypadat nějak takto.
<script>
var seznam = document.getElementById("list");
seznam.scrollTop = seznam.getElementsByTagName("li")[29].offsetTop; // 29 z toho důvodu, že je číslování od 0
</script>
Majkll
Profil *
ďakujem, na tej stránke to funguje avšak keďto nám k sebe na web nie..
Kde mám dať ten javascript súbor a ako? do <script></script>?
Str4wberry
Profil
Ano.
Majkll
Profil *
Ja skúšam všetko možné, ale nechce to ísť vôbec..
Môže to byť v súbore .php ??
Alebo je treba niečo do tej stránky dať aby to fungovalo?
Keďže to bude asi framework, s ktorým ja nemám žiadne skúsenosti tak neviem..

Alebo to skúste dať na Váš server do nejakého zvlášť súboru a či Vám to pôjde..
margin
Profil *
Majkll:
Keďže to bude asi framework, s ktorým ja nemám žiadne skúsenosti tak neviem..
Je to čistý JavaScript, z tvého popisu se nedá na dálku poznat, co máš spatně, k odhalení tvé chyby by pomohla živá ukázka.

Môže to byť v súbore .php ??
Pokud tím .php souborem bude (X)HTML stránka s výše uvedeným skriptem, tak může.
Majkll
Profil *
Trochu som sa hrabal v zdrojáku na tej stránke, kde bola ukážka a keď som obsah <script> upravil nasledovne, všetko ide ako má..

<script type="text/javascript">//<![CDATA[ 
window.onload=function(){
var seznam = document.getElementById("list");
seznam.scrollTop = seznam.getElementsByTagName("li")[4].offsetTop;
}//]]>  
</script>
Str4wberry
Profil
Tohle tam vytvořil jsFiddle. Mohlo by to vypadat i takto.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: