Autor Zpráva
Chamurappi
Profil
Představte si element s neznámým obsahem, pružnou šířkou, pevně danou známou max-height a overflow-y: auto. Je-li neznámý obsah delší než max-height, objeví se napravo posuvník, což je sice pěkné, ale uživatel si ho nemusí všimnout, protože se seznamuje s tím neznámým obsahem — ten je vlevo a nemusí z něj být patrné, že je uříznutý.

Cílem tedy je zobrazit něco rozumného vlevo (či dole), ale pouze tehdy, vynutí-li si obsah přítomnost svislého posuvníku. S využitím libovolně složitých konstrukcí HTML a CSS, bez javascriptového přeměřování. Má někdo nějaký zázračný nápad?

Povedlo se mi najít určité řešení využívající CSS 3, ale funguje jen v jedné rodině prohlížečů. Lepší než nic, ale uvítal bych nějakou fintu i pro ostatní. (Přesouvat svislý posuvník doleva se mi nechce.)
peta
Profil
Posuvnik vlevo i vpravo? (ale pro to se nehodi graficky klasicky win posuvnik)
Vice zde...
Stranka 1/1 + sipky (js)
Sipku smerujici dolu pod textem? Cely text nebo jen spodek bych oramoval a nad ramecek dal sipku.
Jeste by slo udelat to, ze vnejsi div das overflow a vnitrni oramujes. Pokud nebude ramecek ukoncen, uzivatel by se mohl dovtipit, ze text pokracuje.
Ted me napadl jeste takovy zpusob, ze bys javascriptem pridal cas ostatniho textu pod to a prekryl ho obrazkem s opacitou do ztracena. To jsem nekde videl na jakesi strance. bez js by se to dalo udelat v css, ale bylo by to soucasti toho rolovaciho divu, coz je trochu zavadejici. V prvnim pripade by bylo dobre voditko i levy ramecek, ktery by nahle skoncil. Pri rolovani by pak nahore tez vznikal text do ztracena.
Pripadne by se dal pouzit js, ktery by text pomalu roloval.

"funguje jen v jedné rodině prohlížečů" To je sice fajn, ale kdyz nevis, co je to za prohlizec, tak ten link je na houby :) Mimochodem, zkousel jsi to s ruznym doctype? Ve FF mi to dava pruhy k obema blokum, v IE jen k levemu. Ie je asi ten prohlizec, ktery to zobrazi ok. Ale nemyslim si, ze cerveny pruh neco resi. To je jen cervena ozdoba jako treba kvetinka

http://www.smoothdivscroll.com/#quickdemo

OT
http://javascript.internet.com/text-effects/jswavetext.html
Joker
Profil
Chamurappi:
Pro pravidelné návštěvníky by asi stačilo umístit na konec odkazu nějaký symbol, brzy si (snad) zvyknou, že není symbol = obsah pokračuje.
Možná dostatečně nízký symbol by šlo umístit i na spodní okraj aniž by vznikal problém že se bude zobrazovat i když výška bude těsně ke spodnímu okraji.

Případně na pozadí třeba proužek s nějakým vzorem, který by vycházel tak, že na dané výšce bude viditelně ořízlý, to alespoň upoutá pozornost na ten posuvník.
Petr ZZZ
Profil
Chamurappi:
Grafické řešení nastíněné Jokerem mi přijde zajímavé. Podobný princip mám na některých stránkách (např. o loňském srazu DJPW) – <html> a <body> mají na pozadí různé obrázky a <body> má velký spodní margin. Tím je konec elementu (v mém případě rovnou celého <body>) graficky zvýrazněn, takže pravidelný návštěvník už tuší, že dokud se neobjeví důvěrně známý konec, element pokračuje. (Tedy – bude tušit, až sjednotím design na celém webu. :-)

Dodatek 1: Ještě by šlo dát příslušnému elementu i nějaký menší horní (a postranní) margin a orámovat ho tak obrázkem na pozadí kolem dokola. Bude-li jeho obsah dlouhý, spodní část orámování nebude vidět a brouzdal bude mít nutkání rolovat, aby viděl orámování celé. Rám by byl ovšem vidět vždy, i když se nezobrazí posuvník. Což by sice neodpovídalo tvému zadání, nicméně si myslím, že by to bylo ergonomičtější/srozumitelnější než kdyby se jednou zobrazila nějaká postranní čára (která navíc soutěží o pozornost s posuvníkem) a jindy ne.

Dodatek 2: Ještě mě napadá, nešlo by nějak využít faktu, že objevení se posuvníku způsobí zúžení okénka? Tedy napozicovat tam nějaký <div> s okrajem, který skryješ pomocí z-indexu a který se objeví pouze tehdy, když posuvník způsobí zúžení okna? Přiznám se ale, že bych se hodně nadřel, kdybych to měl opravdu nakódovat a navíc netuším, zda to lze takto vůbec řešit (navíc když má být šířka okna variabilní).
peta
Profil
Petr ZZZ: Osobne si myslim, ze spolehat na inteligenci navstevnika nelze :) Ale nevim, jak to resit bez JS, aby to bylo jednoznacne. Ono by slo dat symetricky nad text a pod text nejaky symbol a spolehat, ze navstevnik, kdyz symbol neuvidi, bude rolovat. Nebo rozpuleny obrazek. Ale musi byt symetricky i nahore, aby vytvarel nutkani stejny docilit dole.

Ten ztracejici text jsem myslel neco takoveho, ale do ztracena a blok musi byt oramovany.
http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png
[[text[img]]] Pomoci css by to slo udelat tak, ze pres blok s textem napozicujes jiny blok s png s opacitou.
[text[img]] Oramovane by bylo vsechno, ale obrazek by byl vetsi (position:absolute; bottom:0;) a ram prekryl.
Pokud by tam text nebyl a pozadi bylo bile, tak opacita by nebyla videt.
Chamurappi
Profil
Reaguji na peta:
Stranka 1/1 + sipky (js)
Nevím, kolik stránek má neznámý obsah, protože je neznámý, a JavaScriptem ho přeměřit nesmím, protože… jsem to řekl.
Přeměřování nechci, protože je příliš mnoho situací ovlivňujících délku obsahu, které bych pak musel/chtěl ošetřit.

Pokud nebude ramecek ukoncen, uzivatel by se mohl dovtipit, ze text pokracuje.
To by sice šlo, ale orámovávat neoříznutý blok nechci. Čtenář nepotřebuje vědět, kde končí, pokud konec uříznutý není.

Mimochodem, zkousel jsi to s ruznym doctype?
Nezkoušel, existují jen dva režimy a já potřebuji, aby to fungovalo ve standardním.

To je jen cervena ozdoba jako treba kvetinka“ … „Osobne si myslim, ze spolehat na inteligenci navstevnika nelze :)
Cílová skupina je inteligentní, pochopila by i červený pruh, i květinku, i obrázek se šipkou.


Reaguji na Jokera:
by asi stačilo umístit na konec nějaký symbol, brzy si (snad) zvyknou, že není symbol = obsah pokračuje
Hodilo by se to spíš naopak, že by symbol značil pokračování. Škoda, že neexistuje nějaká pseudotřída :scrollable nebo tak něco.

na pozadí třeba proužek s nějakým vzorem, který by vycházel tak, že na dané výšce bude viditelně ořízlý
Trefit se bude těžké, ta maximální výška je stanovená v em jednotkách. Ale asi by to šlo přidáním dalšího obalu.


Reaguji na Petra ZZZ:
nicméně si myslím, že by to bylo ergonomičtější/srozumitelnější než kdyby se jednou zobrazila nějaká postranní čára (která navíc soutěží o pozornost s posuvníkem)
Posuvník je kdesi vpravo v tramtárii, ten se o pozornost neuchází. Postranní čára může být i zjevně nekompletní gradient, z něhož půjde vytušit pokračování i přibližná délka obsahu.

Ještě mě napadá, nešlo by nějak využít faktu, že objevení se posuvníku způsobí zúžení okénka?
Tohle je úvaha směrem, na který jsem mířil. Se zúžením prostoru se trochu pracovat dá, ale musel bych znát nezúženou (pevnou) šířku — dal bych dovnitř dva plovoucí elementy, jejichž šířka by dala v součtu nezúženou šířku — pak by přítomnost svislého posuvníku způsobila odskočení druhého plovoucího elementu na další řádek a o zbytek by se postarala kouzla s marginem a pozicováním. Bohužel pevnou šířku nemám a procentuální šířky uvnitř elementu s posuvníkem se počítají z šířky po odečtení posuvníku.

Podobnou fintu mám v té odkázané ukázce, akorát používám writing-mode: tb-rl, při němž se float: left chová v podstatě jako hypotetický a jinak nedosažitelný float: top a element odskočený na další řádek skončí uříznutý za levým okrajem.
DoubleThink
Profil *
Jen k tomu javascriptu - nedovedu si představit CSS konstrukci, která by byla, byť jen řádově, dopředně a zpětně stabilní jako skript.
Str4wberry
Profil
Když jsem nad tím před pár týdny přemýšlel, napadlo mě fixně naposicovat do spodní části průsvitný obrázek s přechodem (nebo něco podobného), který by konec obsahu při přítomnosti posuvníku plynule zakryl. Ale moc elegantní mi to nepřijde.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0