| Autor | Zpráva | ||
|---|---|---|---|
| Divally Profil * |
#1 · Zasláno: 31. 7. 2012, 15:46:03
Ahoj všem,
trápí mě jedna věc. Mám na stránce iframe a v něm nějaký obrázek, který je větší než velikost iframu. Takže se mi na okrajích iframu dělají scrollbary - ty tam ale nechci, takže jsem tělu dokumentu nastavil overflow: hidden a scrollbary zmizly. Potíž je v tom, že overflow: hidden zapříčiní to, že se v iframu nedá scrollovat vůbec. Potřeboval bych nějakým způsobem v IE8 skrýt scrollbary iframu, ale zároveň ponechat možnost scrollování obsahem iframu. Napádá vás něco? Předem děkuju za každý tip! |
||
| Str4wberry Profil |
#2 · Zasláno: 31. 7. 2012, 16:40:17
O použití jenom
overflow-x: hidden jste uvažoval? Nebo jsou problémem obě lišty?
|
||
| Divally Profil * |
#3 · Zasláno: 31. 7. 2012, 20:50:38
Str4wberry:
Problém jsou obě lišty :( Ideální by bylo, kdyby nebyly vidět vůbec. Případně by se mi líbilo řešení sceollbarů, jako je např. na iPhonu nebo Androidích telefonech. Ale chápu, že to už je trochu moc :) |
||
| Str4wberry Profil |
#4 · Zasláno: 31. 7. 2012, 22:30:31
Moc to není, je to jednoduše řešitelné JavaScriptem, pomocí kterého se vytvoří vlastní ovládání pro posouvání stránky.
V zásadě vidím dva postupy: 1) Vytvořit si mechanismus pro posun v nadřazené stránce. Tedy vložit <iframe> se scrolling="no", nějakou rozumnou šířkou a výšku přeměřit a nastavit pomocí JS. To vše hodit do menšího boxu s overflow: hidden; position: relative. Vlastní posouvání potom bude fungovat na základě změny absolutní posice <iframe>.
2) Řešit to ve stránce, co se vkládá do nadřazené. V podstatě celou ji obalit a udělat drag&drop (rovněž změna absolutní posice, obdobně jako v prvním případě). Mimochodem, k čemu tento netradiční postup potřebujete? |
||
| Divally Profil * |
#5 · Zasláno: 1. 8. 2012, 10:51:00 · Upravil/a: Divally
Jedná se v podstatě o rozhraní smartphonu.
Mám hlavní stránku s tělem dotykového telefonu. Místo displaye je iframe a v něm se zobrazují stránky s jednotlivými obrazovkami. Ale některé obrazovky jsou dlouhé a proto se nevejdou na display a je potřeba "v displayi" scrollovat. Pokud tam jsou ty scrollbary, tak zakrývají části obrazovky a nejsou tak vidět některé prvky. Navíc to nevypadá zrovna pěkně. Dalo by se jednoduše rozšířit tělo telefonu tak, aby se tam vertikální scrollbar vešel, horizontální by se pomocí overflow-x: hidden skryl a bylo by vyřešeno. Potíž je ale v tom, že cca 90% stránek s obsahem displaye je krátkých a vejdou se na display, tak není potřeba scrollovat - a v tu chvíli už to bude vypadat divně :-/
Aktuálně jsem ve fázi, kdy mám tělo telefonu s iframem místo displaye: <iframe src="home.html" width="344" height="607" frameborder="0" scrolling="no" name="display" id="display"> iframe {position: absolute; top: 81px; left: 456px; overflow:hidden;}A stránku s obsahem displaye, ve které je absolutně napozicovaný dlouhý obrázek: <img src="home.png" width="344" height="883" border="0" /> img {position: absolute; top: 0; left: 0;}Jen si nějak nevím rady s tím mechanismem posouvání, tak jak jste jej popsal. Po chvilce hledání jsem narazil na ScrollTo a ScrollBy, a napadlo mě toto:
var myIframe = document.getElementById('display');
function scrollWindow()
{
myIframe.contentWindow.scrollBy(100,100);
}scrollWindow(), tak to nefunguje.
Navíc bylo by vhodnější ovládat posouvání buď kolečkem u myši nebo drag&drop, aby bylo ovládání intuitivnější. Jedná se v podstatě o rozhraní smartphonu. Mám hlavní stránku s tělem dotykového telefonu. Místo displaye je iframe a v něm se zobrazují stránky s jednotlivými obrazovkami. Ale některé obrazovky jsou dlouhé a proto se nevejdou na display a je potřeba "v displayi" scrollovat. Pokud tam jsou ty scrollbary, tak zakrývají části obrazovky a nejsou tak vidět některé prvky. Navíc to nevypadá zrovna pěkně. Dalo by se jednoduše rozšířit tělo telefonu tak, aby se tam vertikální scrollbar vešel, horizontální by se pomocí overflow-x: hidden skryl a bylo by vyřešeno. Potíž je ale v tom, že cca 90% stránek s obsahem displaye je krátkých a vejdou se na display, tak není potřeba scrollovat - a v tu chvíli už to bude vypadat divně :-/
Aktuálně jsem ve fázi, kdy mám tělo telefonu s iframem místo displaye: <iframe src="home.html" width="344" height="607" frameborder="0" scrolling="no" name="display" id="display"> iframe {position: absolute; top: 81px; left: 456px; overflow:hidden;}A stránku s obsahem displaye, ve které je absolutně napozicovaný dlouhý obrázek: <img src="home.png" width="344" height="883" border="0" /> img {position: absolute; top: 0; left: 0;}Jen si nějak nevím rady s tím mechanismem posouvání, tak jak jste jej popsal. Po chvilce hledání jsem narazil na ScrollTo a ScrollBy, a napadlo mě toto:
var myIframe = document.getElementById('display');
function scrollWindow()
{
myIframe.contentWindow.scrollBy(100,100);
}scrollWindow(), tak to nefunguje.
Navíc bylo by vhodnější ovládat posouvání buď kolečkem u myši nebo drag&drop, aby bylo ovládání intuitivnější. |
||
| Keeehi Profil |
#6 · Zasláno: 1. 8. 2012, 10:57:38
Je tam ten iframe vůbec důležitý? Mě to přijde, že jen dělá zbytečný obal. Proč se nemohou zobrazovat stránky přímo ale musejí být v iframe?
|
||
| Divally Profil * |
#7 · Zasláno: 1. 8. 2012, 11:24:26
Protože to tělo telefonu se nemění, zůstává pořád stejné.
Jediné co se pohybuje a mění je obsah displaye - v závislosti na kterou z položek se klikne. Jako nejjednodušší a zároveň nejrychlejší řešení mi přišlo udělat statickou stránku s tělem telefonu, iframe místo displaye a v iframu zobrazovat screeny displaye ve formě klikací mapy. Tim pádem se bude moci uživatel pohybovat v menu toho telefonu. Je to hodně jednoduchý řešení, ale pro představu uživatele o tom, jak menu telefonu vypadá, to v pohodě stačí. |
||
| _es Profil |
#8 · Zasláno: 1. 8. 2012, 12:16:00
Divally:
Nenačítava sa do toho iframe obsah z cudzej domény? JS nemá prístup k dokumentom načítaným z inej domény, teda ani nemôže posúvať cudzí obsah v iframe. K objektu window v iframe môžeš pristupovať cez frames.display, vlastnosť contentWindow tuším nepodporuje dosť prehliadačov.
|
||
| Divally Profil * |
#9 · Zasláno: 1. 8. 2012, 13:26:43
_es:
Do iframu se načítá html soubor, který leží ve stejném adresáři. Takto už to funguje: function scrollDisplay(name, x, y)
{
var frame = document.getElementById(name);
frames.display.scrollBy(x, y);
}contentWindow, ale pokud je frames.display podporovanější, nemám důvod ho nepoužít :)
Posouvání nahoru/dolu se provádí pomocí tlačítek vedle telefonu, které volají scrollDisplay('display', 0, 100) a scrollDisplay('display', 0, -100).
Pokud by se to dalo místo tlačítek navázat nějak na události kolečka scroll up a scroll down, bylo by to úplně ideální. |
||
|
Časová prodleva: 12 let
|
|||
0