Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa

Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 23.12.2008. u 15:46 · pre 217 meseci #1

Nadam se da se ovo može postići pomoću JavaScripta pa bih molio da neko predloži rešenje...

Prvo ilustracija:

Recimo da je sivo polje jedan DIV sa tekstom (ili tabela, ako baš mora), a da su crvena polja različite slike istih dimenzija.
Količina teksta i broj slika su različite na različitim stranicama (PHP isporučuje iz baze), ali slike treba da se nižu samo do kraja teksta i da ne budu isečene. Dakle, ako poslednja slika ne može da stane do kraja teksta, ne treba ni da se prikaže, kao ni one posle nje.

Moglo bi se nabudžiti da PHP proceni broj slika na osnovu dužine teksta i rezolucije ekrana (pošto se dimenzije prozora šalju tek nakon učitavanja)... ali onda bi bio haos kad korisnik promeni veličinu prozora.

ima li elegantnijeg rešenja?

Potpis

[i.]

Re: Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 23.12.2008. u 22:35 · pre 217 meseci #2

Ne znam kako to mislish "isechene"... Jel ti te slike smeshtash u div-ove? Ali recimo, ako bi se vodio ovom logikom, da je svaka slika u zasebnom div-u i da svaka ima neki id, i da taj deo gde je tekst ima neki id. Pri tom, u nekom delu koda bi imao i neko skriveno polje koje ce za vrednost da ima ukupan broj uchitanih slika (podrazumevam da znash kako se to radi), a to polje ce imati i neki id npr. "br_slika". A sve te slike, odnosno, te obe kolone ce biti neki div-ovi sa id-evima...
E ti sad mozhesh da napravish neku funkciju koja bi se pozivala po zavrshetku uchitavanja te strane, npr:

Code:

<body onload = "provera()">

A kod te funkcije bi npr. ovako izgledao:

Code:

function provera(){
   var tekst_height = parseInt(document.getElementById('tekst').offsetHeight);
   var kolona1_height = parseInt(document.getElementById('kolona1').offsetHeight);
   var kolona2_height = parseInt(document.getElementById('kolona1').offsetHeight);

   var br_slika =  parseInt(document.getElementById('slika ').value) / 2;

   if (kolona1_height > tekst_height){
      var br = br_slika;
      while (kolona1_height > tekst_height){
          document.getElementById('prva_slika'+(br)).innerHTML = '';

          kolona1_height = parseInt(document.getElementById('kolona1').offsetHeight); //azuriranje visine prve kolone
          br--;
      }
   }

   if (kolona2_height > tekst_height){
      var br = br_slika;
      while (kolona2_height > tekst_height){
          document.getElementById('druga_slika'+(br)).innerHTML = '';

          kolona2_height = parseInt(document.getElementById('kolona2').offsetHeight); //azuriranje visine druge kolone
          br--;
      }
   }
}

E sad, za ovo shto sam ja napisao, u tom php kodu bi svaka slika trebala da bude u zasebnom div-u. Id svakog od tih div-ova bi trebao da pochine sa 'prva_slika' (za prvu kolonu) i 'druga_slika' (za drugu kolonu), a na to bi se dinamichki nadovezivao redni broj. Npr. imao bi neki brojach, koji bi se pri svakom sledecem dohvatanju slike iz baze povecavao i ta vrednost bi se nadovezivala na id slike. A na kraju bi vrednost tog brojacha trebao da dodelish onom skrivenom polju kojeg sam spominjao gore kako bi znao koliko je ukupno slika uchitano, i kako bi znao koju sliku treba da uklonish.
Ovaj deo: var br_slika = parseInt(document.getElementById('slika ').value) / 2; sam napisao tako, pod uslovom da taj brojach za to skriveno polje broji za obe kolone zajedno i pod uslovom da sa obe strane teksta ide jednak broj slika...

Ne mogu da garantujem da ce ovo da radi, nikad nisam imao potrebu za ovakvim "zahvatom", al' eto, nadam se da te nisam zbunio i da sam ti bar dao neku ideju... :)

Re: Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 25.12.2008. u 10:55 · pre 217 meseci #3

Hvala puno na odgovoru!

* isečene = prikazane delimično, kao kad ti nešto ne stane u prozor browsera
* da, tako sam baš i planirao: svaka slika je u zasebnom DIV-u i ima ID tipa SlikaLevo02

ovo što ti pozivaš sa ID "kolona1" je, pretpostavljam container DIV za jedan vertikalni niz slika?

Mislim da će ovo super odraditi posao pri učitavanju, ali ne i ako korisnik promeni veličinu prozora. U koji OnEvent da stavim funkciju da bih to dobio?

Ovih dana ću to da napišem sve, pa javljam da li je uspelo.

Potpis

[i.]

Re: Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 25.12.2008. u 11:23 · pre 217 meseci #4

Da, ti identifikatori kolona1 i kolona2 se odnose na te vertikalne skupove slika...

Mislim da sam to vec napisao iznad, <body onload = "provera()">, dakle poziv te funkcije ide na dogadjaj onload, odnosno, odmah po zavrsetku ucitavanja stranice.

Kazhem ti, ne mogu da garantujem da ce sve ovo shto sam ispisao i da uspe iz prve. To mi je prvo palo napamet, pa rek'o bar da ti dam neku ideju... :) Vidim da se razumesh u ovu tematiku, pa ako i negde bude "zatajio" ovaj moj kod, verovatno cesh uspeti da se snadjesh i da reshish taj problem...

Poz!

Re: Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 25.12.2008. u 11:35 · pre 217 meseci #5

nisamo se razumeli:

video sam da si predložio da stavim u onLoad, ali kako da je pokrenem pri promeni veličine prozora?

ako neko, npr, otvori stranicu u malom prozoru pa onda opali maximize, tekst će stati u manje redova a moje sličice će da se ređaju i ispod teksta.

Potpis

[i.]

Re: Dinamičko sakrivanje slika u zavisnosti od veličine drugog elementa 25.12.2008. u 14:45 · pre 217 meseci #6

Aha, e pa za taj sluchaj postoji dogadjaj onresize, i njega takodje stavljash unutar tag-a body.

Forum kao aplikacija na telefonu

Srodne teme