Keskustelu: Nettisivujen teko: Sisältö sivulla nykii

Ensiksikin, kiitokset siitä responsiivisuusohjeesta, jonka sain viime syksynä. Siirsin koodin kaikille sivuilleni ja siihen meni 3 - 4 kuukautta. Työ päättyi tällä viikolla.

-----------------------------

Uusi ongelma.

http://www.tunturisusi.com/tunturisusi/

Minulla on tämä sivu Creative commons-lisenssillä, koodaajan linkki sivun alareunassa. Koodaus on siten jonkun ammattilaisen tekemää.

Kun sivua vierittää alaspäin, niin ihan vasemmassa laidassa se kapea sisältö ei rullaudu juohevasti alas, vaan nykäisee siinä rullauksen puolivälissä. Näet, kun rullaat, mitä tapahtuu. Miten tuon nykäisyn saisi pois?

-----------------------------

Nykäisyn syy: Haluaisin laittaa tuollaisen koko sivun levyisen ison kuvan tuonne yläosaan. Sitä ei ole alkuperäisessä koodissa. Kun lisään kuvan, nykäisy tulee - ja kun poistan kuvan, nykäisy katoaa.

Kuvan voisi laittaa siihen header-koodiin, ja silloin sivu toimisi normaalisti, mutta silloin kuva ei olisi koko sivun levyinen.

Onko tähän minkäänlaista ratkaisua niin, että voisin pitää tuon kokolevyisen kuvan?

En testannut, mutta uskoisin, että ongelman syy on main.js-tiedostossa seuraavassa kohdassa:

// Calculate heights.
wh = $window.height();
sh = $sidebar_inner.outerHeight() + 30;

Noiden lukujen perusteella ilmeisesti lasketaan, milloin ollaan sivupalkin lopussa, ja asetetaan palkki kiinteään kohtaan. Luvuista puuttuu palkin yläreunan sijainti, koska ilman kuvaa se on ollut 0. Kuvan lisäyksen jälkeen laskuihin täytyy siis lisätä sisällön yläreunan sijainti.

// Calculate heights.
wh = $window.height();
sh = $sidebar_inner.outerHeight() + $("#wrapper").offset().top + 30;

Tunturisusi kirjoitti:

Siirsin koodin kaikille sivuilleni ja siihen meni 3 - 4 kuukautta. Työ päättyi tällä viikolla.

Oletko harkinnut esim. PHP:n käyttöä, jotta sivujen yhteiset osat (CSS, JS) voisivat olla vain yhdessä tiedostossa ja näin koko sivuston ulkoasun muokkaaminen olisi helpompaa?

http://www.tunturisusi.com/tunturisusi/

Kiitokset, ko. ongelma poistui.

Sisältö siinä loppuvaiheessa katoaa näkyvistä siinä vasemmalla, mutta ei ole niin paha, kuin tuo nykäys - eli tämän kanssa voi elää. ;)

PS. Poista selaushistoria, korjaus tulee näkyviin.

Tunturisusi kirjoitti:

Sisältö siinä loppuvaiheessa katoaa näkyvistä siinä vasemmalla

Ahaa, oikea korjaus onkin siis seuraava:

// rivi 189:
var sh, wh, st, y_offset;
// rivi 218:
y = Math.max(0, $window.scrollTop() - x) - y_offset;
// rivi 247:
wh = $window.height();
sh = $sidebar_inner.outerHeight() + 30;
y_offset = $("#wrapper").offset().top;

Tässä kuvan korkeus (y_offset) lisätään vain laskuun, missä palkki loppuu, mutta ei laskuun, mihin kohti ruutua palkki lukitaan.

Tunturisusi kirjoitti:

PS. Poista selaushistoria, korjaus tulee näkyviin.

Jännästi ei meinaa päivittyä millään. Voisi olla joka tapauksessa hyvä lisätä htaccess-tiedostoon selvät säännöt, kauanko tiedostot säilyvät välimuistissa, esim. jotain tällaista:

ExpiresActive On
ExpiresDefault "access plus 1 hour"

<FilesMatch "\.(ico|jpg|jpeg|png|gif)$">
  ExpiresDefault "access plus 30 days"
</FilesMatch>

http://www.tunturisusi.com/tunturisusi/

Kiitollisuudellani ei ole rajaa. Tämä toimii nyt täydellisesti. Kun kaksi päivää tätä itse yritin ja tuntui mahdottomalta, niin se on ikäänkuin ihme, kun täydellinen ratkaisu annetaan näin.

-----------------------

Sivujeni päivittyminen on ollut kaiken aikaa jonkinlainen "ongelma". Joudun kaiken aikaa poistamaan selaustietoja välimuistista, kun kaiken aikaa teen sivuille korjauksia.

Lisään pikapuoliin tuon tiedoston.

------------------------------

Pieni lisäkysymys: Käytän kaikilla sivuillani tuollaista yläkuvaa - ja se on joka sivulla korkeussuunnassa erikokoinen. Toimiiko tämä antamasi js-koodi kaikkien kuvakokojen kanssa?

Koodi toimii kaikkien kuvien kanssa, koska koodissa ei ole kuvan korkeutta lukuna vaan haetaan #wrapper-elementin yläreunan sijainti.

Kiitokset. Jos tulee jokin uusi ongelma, palaan asiaan, mutta nyt ei ole muuta.