Autor Zpráva
Divally
Profil *
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
O použití jenom overflow-x: hidden jste uvažoval? Nebo jsou problémem obě lišty?
Divally
Profil *
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
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 *
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);
}
Pokud si ale vedle telefonu udělám tlačítko, které by volalo fci 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);
}
Pokud si ale vedle telefonu udělám tlačítko, které by volalo fci 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
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 *
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
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 *
_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);         
}
Funguje to i s 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í.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: