Minulla on sellaisia sivuja, joissa riittää scrollattavaa alaspäin. Sivun yksittäisiä elementtejä voi muokata sivun reunassa olevista Muokkaa napeista.
Varsinainen Muokkaus-loota avataan javascriptillä.
Voisiko kyseisen lootan keskittää sivulle sen näkyvään osaan ilman että se huomioisi ympärillä olevien elementtien sijaintia tai sitä, miten pitkälle alaspäin sivua on scrollattu?
pistemies kirjoitti:
Minulla on sellaisia sivuja, joissa riittää scrollattavaa alaspäin. Sivun yksittäisiä elementtejä voi muokata sivun reunassa olevista Muokkaa napeista.
Varsinainen Muokkaus-loota avataan javascriptillä.
Voisiko kyseisen lootan keskittää sivulle sen näkyvään osaan ilman että se huomioisi ympärillä olevien elementtien sijaintia tai sitä, miten pitkälle alaspäin sivua on scrollattu?
Kyllä voi. Ehkä kuitenkin mieluummin keskitys kannattaa silti tehdä javascriptillä.
Katso tämmöiseen yksinkertaiseen juttuun esimerkkiä mistä tahansa Lightbox-kikkareesta.
Sain tämän osittain toimimaan koodeja tutkimlla tällä tavalla:
position:absolute; top:50%;
Tuo ei vielä riitä...se ottaa korkeuden documentin yläreunasta ja tulostuu sen mukaisesti.
pistemies kirjoitti:
position:absolute; top:50%;Tuo ei vielä riitä...se ottaa korkeuden documentin yläreunasta ja tulostuu sen mukaisesti.
Mikiäli ymmärsin oikein, niin seuraavista sisällön keskittämisesimerkkisivuista saattaa olla apua:
Eli kaksi erilaista CSS-toteutusta (sans JavaScript).
Osmo kirjoitti:
Mikiäli ymmärsin oikein, niin seuraavista sisällön keskittämisesimerkkisivuista saattaa olla apua
Kiitos. Ehkä et iha oivaltanu. Nuo esimerkit toimii, jos sivun korkeus ei ylitä ruudun korkeutta.
Mutta minulla sivun korkeus saattaa olla lähes 1500px. Kyseessä on dokumentti-sivu, johon teen muokkaus-toimintoa. Homma pitäisi toimia niin, että kun on selannut sivua vaikka tuonne 1400px alaspäin ja klikkaa siellä olevan tekstin vieressä Muokkaa-painiketta, muokkaus-laatikko avautuu tuohon kohtaan.
Javascriptillä olen saanut pomittua documentin korkeuden ja leveyden ja tehnyt ulomman divin sen kokoiseksi (Lightboxissa oli tällä tavoin).
Mutta edelleen tuon sisemmän laatikon oikea etäisyys yläreunasta on hakusessa.
Ps. Muistelen että CSS kielessä oli jokin toiminto, millä elementin saa pysymään paikaallaan vaikka sivua rullaisi alaspäin. En vaan yhtään muista minkä niminen se oli, mahtaisiko sillä onnistua?
position: fixed;
Tuo nyt tekee ainakin sen, että elementti pysyy paikallaan suhteessa ikkunaan.
Sitten kannattanee kokeilla vaihtaa position-ominaisuuden arvoa ehdottomasta (absolute) kiinteään (fixed), jolloin sivun korkeudella ei ole väliä.
vesikuusi kirjoitti:
position: fixed;Tuo nyt tekee ainakin sen, että elementti pysyy paikallaan suhteessa ikkunaan.
Kiitos! Tällähän se onnistui!
Aihe on jo aika vanha, joten et voi enää vastata siihen.