| Autor | Zpráva | ||
|---|---|---|---|
| mistr moskva Profil * |
#1 · Zasláno: 28. 8. 2013, 18:52:57
Dobrý den,
živá ukázka je zde http://www.pensionsilma.cz, konkrétní kód je zde: <script type="text/javascript">
<!--
var the_slide_height=document.getElementById('sidebar').offsetHeight;
document.getElementById('slide').style.height=the_slide_height+"px";
//-->
</script>Pomocí tohoto scriptu dopasovávám obrázek na pravé straně layoutu. Vše funguje poměrně slušně - v závislosti na mé znalosti javascriptu, která je opravdu minimální. Potřebuji předělat tuto část: document.getElementById('slide').style.height, tak aby se výška předala všem obrázkům nacházejícím se v divu slideshow. Zkoušel jsem obrázkům nastavit class a přistupovat k nim prostřednictvím document.getElementsByClassName, ale nešlo mě to. Vygooglil jsem něco o nepodporované funkci. Tak nevím. Předem děkuji za Vaše konstruktivní nápady, nebo případné odkazy na příklady/návody. :) |
||
| han5vk Profil |
Po asi 25 sekundovom hľadaní na google som našiel toto:
http://stackoverflow.com/questions/8876710/javascript-select-an-image-element-inside-a-div |
||
| mistr moskva Profil * |
#3 · Zasláno: 28. 8. 2013, 19:07:27 · Upravil/a: mistr moskva
Já teda nad tímto zápisem přemýšlím jen 10s, ale nebudu v tomto případě tuto výšku udělovat všem obrázkům?
Jak říkám, javascript umím velice okrajově. Tato konstrukce mě přišla nesprávná... Aha, už tomu rozumím. Já bohužel nevládnu dostatečně angličtinou. Ale tomuhle rozumím. Díky :) |
||
| moskva Profil * |
#4 · Zasláno: 28. 8. 2013, 21:47:28
Upravil jsem tedy script takto:
<script type="text/javascript">
<!--
var the_slide_height=document.getElementById('sidebar').offsetHeight;
document.getElementById('slideshow').getElementsByTagName('img')style.height=the_slide_height+"px";
//-->
</script>a bohužel nejede. Můžete mi někdo prosím poradit, kde mám chybu? |
||
| moskva Profil * |
#5 · Zasláno: 28. 8. 2013, 22:30:44
Nakonec jsem se inspiroval zde: document.getElementsByTagName("img") versus document.images
a napsal to takto:¨ <script type="text/javascript">
<!--
var the_slide_height=document.getElementById('sidebar').offsetHeight;
var images = document.images;
var slide_images = images.namedItem("slide");
slide_images.style.height=the_slide_height+"px";
//-->
</script>Všude to frčí, akorát IE reaguje následovně: "Aplikace Internet Explorer zakázala této webové stránce spustit scripty nebo ovládací prvky ActiveX." Když kliknu na "povolit blokovaný obsah" vše jede jak má. S tím IE to není dvakrát elegantní, ale tohle asi nemůžu ovlivnit. :/ |
||
| margin Profil * |
#6 · Zasláno: 28. 8. 2013, 22:41:43
moskva:
„S tím IE to není dvakrát elegantní, ale tohle asi nemůžu ovlivnit.“ Můžeš. javascript-hláška o bezpečnosti |
||
| moskva Profil * |
#7 · Zasláno: 28. 8. 2013, 22:43:43 · Upravil/a: moskva
Tak ještě jedno doplnění. Ten IE otravuje jen na locale. Na serveru to je vše ok. :)
Tak moje reakce byla bohužel unáhlená. Vložil jsem do toho divu další obrázky a patřičně je pojmenoval. Script ale upraví výšku jen u prvního obrázku. Ostatní se vykreslí v plné velikosti. Každopádně i to že script zafunguje jen na jeden obrázek, beru jako dobré znamení. Možná budu muset ten kód jen nějak rozšířit. Jen nevím jak přesně. Napadlo mě, že bych měl prvně zjistit kolik obrázku je v tom divu a pak s tou informací nějak dále pracovat? Pokud by někoho napadlo řešení, tak samozřejmě uvítám jakékoliv nápady. :) |
||
| pako Profil * |
#8 · Zasláno: 29. 8. 2013, 09:01:54
toto by mohlo fungovat, ale netestoval som:
var imgs = document.getElementById('slideshow').getElementsByTagName('img'),
il, i;
for (i = 0, il = imgs.length; i < il ; i+=1 ) {
imgs[i].style.height = the_slide_height+"px";
}getElementsByTagName vracia NodeList co je kvazi pole a ak chces nieco nastavit kazdemu clenovi musis ich prejst v cykle
|
||
| moskva Profil * |
#9 · Zasláno: 29. 8. 2013, 11:22:18
pako: Implementoval jsem a funguje to. Děkuji ti moc za tvojí pomoc :)
|
||
| pako Profil * |
#10 · Zasláno: 29. 8. 2013, 11:42:46
este by som uvazoval spravit z toho maleho skriptu funkciu a volat ju aj na udalost okna
resize
|
||
| _es Profil |
#11 · Zasláno: 29. 8. 2013, 15:09:21
moskva:
Je nesprávne riešiť v JS to, čo má byť vyriešené v CSS. |
||
| moskva Profil * |
#12 · Zasláno: 29. 8. 2013, 20:24:54
pako: Nevím přesně jak to myslíš.
Ale osobně jsem zjistil menší nedostatek v situaci, kdy mám viewport zmenšený třeba o panel, který mě informuje o průběhu stahovaní - proměná the_slide_height je pak o menší o výšku tohoto panelu a tedy i ty obrázky jsou pak menší. Pokud tento panel uzavřu, tak div ze kterého počítám výšku se automaticky dokreslí na výšku celého okna, ale obrázek už ne. Dalo by se to řešit tou události okna resize? Asi bych po jakékoliv změně velikosti viewportu potřeboval znovu načíst ten script? Uvažuji správně? _es: Já jsem si samozřejmě tvého tvrzení vědom. Nicméně, pokud mě nenavedeš na konstruktivní řešení pomocí CSS, je pro mě tvoje informace naprosto nerelevantní. Jsou to teda moje cca čtvrté webovky, tedy ani CSS neovládám jako profík, nicméně se domnívám, že řešení pomocí CSS v mém případě není dost dobře možné - alespoň pokud budu chtít mít kód co nejrobustnější, k co nejvíce zobrazovacím zařízením. Samozřejmě nechci toto řešení brát na lehkou váhu. A rád se přiučím, takže pokud napíšeš návrh, jak můj požadavek vyřešit jen pomocí CSS, rád jej vyzkouším. |
||
| Chamurappi Profil |
#13 · Zasláno: 29. 8. 2013, 20:38:23
Reaguji na moskvu:
„řešení pomocí CSS v mém případě není dost dobře možné - alespoň pokud budu chtít mít kód co nejrobustnější“ S tím nesouhlasím. Podívej se na svůj web teď — když změním výšku okna (třeba tím, že si otevřu hledání), velikost obrázků se nepřizpůsobuje, to ti připadá robustní? „Asi bych po jakékoliv změně velikosti viewportu potřeboval znovu načíst ten script?“ Ne, potřeboval bys ho dát do funkce a tu volat při window.onresize. Ale nedělej to.
„pokud napíšeš návrh, jak můj požadavek vyřešit jen pomocí CSS, rád jej vyzkouším“ Nastavit height: 100% všem předkům v hierarchii.
|
||
| moskva Profil * |
#14 · Zasláno: 30. 8. 2013, 09:04:10
Chamurappi:
Já netvrdím, že moje řešení je 100%. Ale považuji tuto cestu za správnou. A tvůj příklad s otevřeným hledáním je sice pravdivý, nicméně mi tento nedostatek nepřipadá kritický. Ne, potřeboval bys ho dát do funkce a tu volat při window.onresize. Ale nedělej to. Proč to nedoporučuješ? Nastavit height: 100% všem předkům v hierarchii. Zkoušel jsem to. Tady je ukázka: http://pensionsilma.cz/wp-content/themes/pensionsilma/test/index.php Je možné, že jsem něco opomněl, nebo někde udělal chybu, ale výsledek není uspokojivý. Dospěl k závěru, že pokud má div height 100%, tak jej velký obrázek roztáhne - prostě je mu dovoleno vykreslit se v jeho plné výšce. Toto nepotřebuji, potřebuji aby výška toho obrázku byla max. výška viewportu. |
||
| Chamurappi Profil |
#15 · Zasláno: 30. 8. 2013, 10:09:57
Reaguji na moskvu:
„nicméně mi tento nedostatek nepřipadá kritický“ Pokud postupně zanedbáš všechny případy, kdy tvůj postup robustní není, tak ti může připadat nejrobustnější. „Proč to nedoporučuješ?“ Není to dostatečně univerzální a nefunguje to bez zapnutého JS. > Nastavit height: 100% všem předkům v hierarchii. > Zkoušel jsem to. A obrázku samozřejmě také :-) |
||
| moskva Profil * |
#16 · Zasláno: 30. 8. 2013, 12:21:01
Chamurappi:
:) jede to. Tak toto řešení prostřednictvím CSS je bezesporu nejelegantnější. Opravdu děkuji za konstruktivní řešení :) |
||
|
Časová prodleva: 11 let
|
|||
0