foto als link naar een video, in hetzelfde kader

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Ach, als je 'n werkend systeem hebt, waarom zou je dan überhaupt upgraden? Ik doe het alleen om sites te testen. En helaas is het bij Internet Explorer zo dat elke nieuwe versie in feite een compleet nieuwe browser is, wat css/html/javascript betreft.
Het is prima zo, hoog genoeg. En de ruimte lijkt me nu ook voldoende. Ik zat er aan te denken om boven de beide linker- en rechter kolommen een (info)tekst (0.7 em) te plaatsen: zoiets van “video stopt automatisch <br>als cursor afbeelding verlaat”. Denk je dat die info handig dan wel noodzakelijk is?
Daardoor zullen de vanwege deze tekstruimte de afbeeldingen nog wel iets zakken. Maar dat is niet zo heel erg lijkt me. De onderste tekst van o.a. “Historical -archive- records” gaan eruit. Ah, wacht. De info tekst zou natuurlijk ook daar kunnen komen te staan. Eigenlijk wel beter. Ja, daar kom ik dus al schrijvende achter. Moet ik nog even over nadenken, dwz zien in het geheel van de vormgeving. Wat denk jij?
Eigenlijk lijkt me dat niet echt nodig. Bovendien wordt de tekst dan 'n stuk ingewikkelder: voor touchscreens stopt de video pas. als je buiten de video het scherm aanraakt. (En touchscreens gaan echt heel veel gebruikt worden binnen korte tijd, nu Windows 8 daar min of meer op is ingesteld.) Dan krijg je dus óf 'n langere tekst, óf je moet gaan testen op touchscreen of niet, en daar is voor zover ik weet nog steeds geen echt betrouwbare methode voor.

De opening boven de bovenste afbeelding ontstaat gewoon, omdat ik 'n marge aan de bovenkant van de <a>'s heb gegeven. Maar die is bovenaan niet nodig, omdat de bovenste geen bovenbuur heeft. Dus daar krijg je dan 'n grote leegte. Niets tegen leegtes, maar deze is overbodig.
In mijn browser krijg ik nadat ik een maal op een afbeelding heb geklikt en de video in werking heb gezet en als ik daarna weer met de cursor van de afbeelding weg ga een zwarte stippellijn te zien die het gebied van de <a> van afbeelding en videocontrolepaneel omlijnt. Is die stippellijn in dezelfde kleur te maken als de achtergrond zodat hij niet meer te zien is? Zo niet dan maken we 'm knalgeel ;) .
Dat is de outline rondom een link die focus heeft. Dat is bedoeld voor mensen die de muis niet kunnen/willen gebruiken, maar met de Tab-toets van link naar link gaan. Dat lijntje geeft dan aan, welke link wordt gevolgd als ze op Enter drukken. Ik kan dat weghalen. In dit geval heeft het ook niet echt veel nut, omdat deze hele constructie ontoegankelijk is met alleen het toetsenbord. Wat trouwens eigenlijk wel 'n nadeel is. Als ik dit op m'n eigen site als voorbeeld neer zou zetten, zou ik er een alternatieve pagina met gewone standaard-video's bij maken, om die reden.

Hmmm, ik ben eigenlijk republikeins. Is dit dan het laatste gebruik van oranje?
Later vandaag ga ik er weer mee verder. Behalve dat balkje zijn het dan alleen nog dingen als waarschuwen als JavaScript uit staat en zo.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Nog even 'n kleine aanvulling op die melding dat de video automatisch wordt gestopt.
Normaal genomen wordt een video gestart en gepauzeerd door 'n klik of aanraking of zoiets. Dat is hier precies zo. Er is dus 'n redelijke kans dat mensen zelfs nooit zullen merken dat de video stopt als ze de video met de muis verlaten of buiten de video het scherm aanraken. Omdat ze nou eenmaal gewend zijn een video via knoppen te bedienen, zoals het ook hoort. (Op youtube bijvoorbeeld is vee kritiek, omdat die om volstrekt onduidelijke redenen elke video automatisch starten.)

Hier verdwijnt de video en komt de foto terug als je de video verlaat. Maar de video blijft spelen. Je weet alleen niet onder welk van die zes afbeeldingen die vermaledijde video herrie blijft maken. Daarom is als extra voorzorg dat pauzeren als je de video verlaat opgenomen. Maar dat is dus alleen maar 'n extra beveiliging, voor het geval iemand de knoppen niet gebruikt, wat ze normaal genomen wel zullen doen, omdat het overal zo werkt.
Omdat het alleen 'n extra is, lijkt het mij niet nodig dit te vermelden. Ik denk dat het eerder verwarrend werkt, omdat ook de knoppen gewoon werken.
En blijft nog staan dat het op touchscreens anders werkt dan op de desktop.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Ha, die post van 13.20 van jou heb ik dus gisteren gemist. Ik was nog op pag 4 aan het kijken terwijl jouw site met jouw nieuwe bericht al pag 5 had aangemaakt. Ik heb je site zo'n beetje de hele dag open staan en gebruik nl vaak de ververs-knop. Maar dat geldt natuurlijk voor dezelfde pagina.
Ach, als je 'n werkend systeem hebt, waarom zou je dan überhaupt upgraden?
Als je 'ns wist op welk systeem ik nu werkte. Vergeleken met de moderne voertuigen een soort trekschuit eigenlijk. Iets tussen P3 en P4. Daarom kan ik mijn edit programma ook niet gebruiken. En misschien dat daarom mijn Firefox wat eigenaardig doe?
Eigenlijk lijkt me dat niet echt nodig. Bovendien wordt de tekst dan 'n stuk ingewikkelder:
Oke.
Dat is de outline rondom een link die focus heeft. Dat is bedoeld voor mensen die de muis niet kunnen/willen gebruiken, maar met de Tab-toets van link naar link gaan.
Ja, dat is wel jammer. Zoals je al memoreerde werkt de tabtoets een stuk sneller dan de muis (als je er aan gewend bent geraakt).

Ik geloof dat we gisteren uiteindelijk het probleem met “oranje” hebben opgelost. Zijn we ook gelijk van die softe kleur van ons voetbalelftal af. Geen wonder dat het de laatste EK zo slecht ging.
De waarschuwing voor het gebruik van Javascript blijft.
Nog even 'n kleine aanvulling op die melding dat de video automatisch wordt gestopt.
Normaal genomen wordt een video gestart en gepauzeerd door 'n klik of aanraking of zoiets. Dat is hier precies zo. Er is dus 'n redelijke kans dat mensen zelfs nooit zullen merken dat de video stopt als …
en
Hier verdwijnt de video en komt de foto terug als je de video verlaat. Maar de video blijft spelen.


Oke. Ik was even in de veronderstelling dat het laden (en afhankelijk van wat er al geladen was) dan
ook zou stoppen. Maar dat maakt niet uit, de video's zijn ook erg klein. Qua data niet veel groter dan een grote jpg foto.
En blijft nog staan dat het op touchscreens anders werkt dan op de desktop.
Ja, je schenkt er met recht veel waarde aan. Het is nu nog tamelijk verwarrend maar het is (wordt) natuurlijk wel de toekomst. Er zijn al “etalage ruiten” die je met touch kunt bedienen. Ik loop gewoon nog een beetje achter in die dingen.
Maar zoals mijn vader zaliger zei: Beter laat dan nooit.

(ik heb nu ook de "wijzig" knop van je site ontdekt. Handig)
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Als je 'ns wist op welk systeem ik nu werkte. Vergeleken met de moderne voertuigen een soort trekschuit eigenlijk. Iets tussen P3 en P4. Daarom kan ik mijn edit programma ook niet gebruiken.
Dus ben ik met nu met zo links en rechts verzamelde hardware een "nieuwe" pc aan het assembleren waarop ik wel met mijn edit software kan werken. En voor deze pc wil ik mijn oude XP (32 bits) versie upgraden naar W7 64 bits. Natuurlijk met bijbetaling van zo'n 40,-. Maar daar schijnen nogal wat haken en ogen aan te zitten.
Ik heb een OES versie, die was nl al op de PC geinstalleerd (Fujitsu-Siemens) en een Recovery CD_ROM.
Of dat gaat werken...? De MS info geeft daarover niet echt (duidelijk) uitsluitsel.
Bill is wat dat beterft een beetje een zeikerdje.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Onderaan staat ook iets van 'Abonneer op dit onderwerp' of zoiets. Als je dat aanvinkt, krijg je 'n e-mail als er 'n nieuw bericht is.
Je kunt ook dat soort dingen instellen in je profiel onder Algemeen -> Abonnementenbeheer, maar dat is per categorie.

Het downloaden van de video blijft trouwens gewoon doorgaan, ook als deze is gestopt. De browser kan op 'n gegeven moment besluiten het downloaden te stoppen, om bandbreedte te sparen. Maar dat is dus (vermoedelijk) per browser verschillend. Daar is vrij algemeen verbazing over, want je zou 'n simpele stop- of stop-downloaden functie verwachten, die je vanuit JavaScript kunt aanroepen. Die bestaat dus niet. De browser stopt zelfstandig, of je moet de pagina verlaten.
De enige manier die ik heb gezien was van 'n kennelijk volmaakt wanhopige programmeur, die tijdens het downloaden via JavaScript de naam van de video veranderde. Dat werkte. Maar dan was de video helemaal niet meer af te spelen. Ongeveer alsof je bij 'n trein geen noodrem gebruikt om te stoppen, maar gewoon de hele motor eruit haalt.

Ik zal die getallen bij de volgende ronde 'ns heel lichtgrijs maken. dat ze er zeg maar niet stralend wit, maar niet-stralend wit uitzien. Misschien vind je dat mooier.
O, en die oranje achtergrond. Ik ben nogal republikeins. Compromisvoorstel: we maken de achtergrond in de kleuren van de Nederlandse vlag. En voor het internationale aspect het embleem van de VN erop.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Jouw bericht kruiste het mijne. Windows 7 is dus wél een prima systeem. Het is niet fundamenteel anders dan XP, maar gewoon veel gepolijster. En het kan eindelijk werken met een normaal account, waarbij je alleen voor 'gevaarlijke' dingen om het wachtwoord van de administrator wordt gevraagd. Windows 7 wordt trouwens vrij algemeen als 'n goed systeem gezien. Maar zolang je Windows 8 kunt vermijden...
Even voor de eerlijkheid: je blijkt het configuratiescherm (en andere programma's) ook te kunnen starten door de naam gewoon te gaan typen. Maar dat staat dus nergens aangegeven, moet je kennelijk maar raden. Bovendien werkt dat alleen als je de exacte naam kent, of in ieder geval het exacte begin. Maar goed, voor configuratiescherm werkt het dus. Er zit wel uitgebreide hulp bij, maar ook die werkt anders. Het is mij nog niet gelukt om op welke vraag dan ook 'n passend antwoord te krijgen. Gelukkig kun je ook op internet zoeken.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Republikeins. Geen probleem. Maar ik vind dat we dan ook iets moeten doen aan onze "nationale kledingdracht".
De nationale vlag? Prima.
Rode kop van de inspanning, wit shirt om vuil te maken, en dan blijft er niets anders over dan een blauwe broek met half lange pijpen om het folkloristische karakter van dit spel weer te geven.
O, en die oranje achtergrond.
ehhh, achtergrond? Welke achtergrond?
Even checken of we over hetzelfde praten.
Die van het paneel is nu transparant, toch? En dat vind ik wel mooi. Ik had het over de opvulling van het balkje, dat zich dan langzaam "oranje"vult.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

Gelukkig kun je ook op internet zoeken.
Ik doe niet anders. Heb al veel info door gespit. Maar je weet hoe het werkt op internet. Er staat ook een hele boel onzin op.
Uiteindelijk is alles wel te vinden, het probleem is dat je de "kul" info van de "goede" info moet zien te scheiden.
En dat is niet gemakkelijk voor een tamelijke leek zoals ik ben.
Ik zal die getallen bij de volgende ronde 'ns heel lichtgrijs maken. dat ze er zeg maar niet stralend wit, maar niet-stralend wit uitzien.
Goed idee.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Ja, ik bedoel ook het balkje, met oranje. Dat wordt 'n achtergrond, technisch gezien, vandaar dat ik het zo noem.
herman
Berichten: 105
Lid geworden op: vr 06 apr 2012, 19:37

Re: foto als link naar een video, in hetzelfde kader

Bericht door herman »

oke, we praten over hetzelfde.
Gelukkig.

Ik heb me nu ook op dit onderwerp geabonneerd.
Heb het eerst via instellingen geprobeerd maar daar kwam ik 123 niet zo uit.
Maar het staat dus ook gewoon onder aan de pagina.

Erg handig om even te checken in m'n mail als m'n bezigheden buitenshuis zijn.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Algemene dingen

Bericht door Goeroeboeroe »

Nou, ik denk dat het enigszins af is. Ik ga het hier in porties neerzetten, ingedeeld naar onderwerp. Ik denk dat het handig is als je voor de zekerheid 'n kopie maakt van wat hier verschijnt, want 'n forum kan plotseling kuren krijgen.

Eerst wat algemene dingen, die niet zozeer met video te maken hebben.

* Ik zou je css, afbeeldingen, JavaSrcript en video in een aparte map zetten. En eventuele vertalingen ook. Nu is het nog wel te overzien, maar voor je het weet heb je honderden bestanden. Als je dat niet indeelt, heb je 'n probleem. En later is het moeilijk te doen, omdat je dan met links en zo zit.
Ik heb zelf de nieuwe css, afbeeldingen, JavaScript en video's al in mappen gezet.

* Afbeeldingen kun je het best duidelijke namen geven. rk_foto1b is voor jou duidelijk, maar niet voor een zoekmachine of een screenreader. Mocht je dit gaan doen, gebruik dan - tussen woorden in de naam en geen _. stieren-op-straat zijn voor Google drie woorden, stieren_op_straat is er één.

* Je hebt nogal wat regels css er meerdere keren in staan. Dat is behoorlijk verwarrend en levert snel fouten op. Ik zou de dubbele regels eruit halen. Waarbij je wel even moet controleren of het nog werkt, want als je latere dubbele eruit haalt, kunnen de eerdere worden overruled door andere css. Het beste kun je de laatste steeds laten staan, maar voor de overzichtelijkheid is dat soms weer niet handig, omdat bij elkaar horende regels dan mogelijk niet bij elkaar staan.

* css kan vaker worden gecombineerd. Als twee elementen dezelfde css hebben, kun je aan het begin van de regel beide namen zetten, gescheiden door een komma. Of als heel veel hetzelfde is, kun je dat combineren, en dan alleen voor het afwijkende aparte regels maken.

* Het luidspreker-symbooltje is public domain en afkomstig van Luidsprekersymbooltje is public domain afkomstig van http://www.iconfinder.com/icondetails/1 ... olume_icon
Je hoeft het niet te vermelden, ik doe dat zelf meestal wel. Maar dit is 'n heel algemeen symbooltje, dus of je dat nou moet vermelden...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Wijzigingen die niet met <video> te maken hebben

Bericht door Goeroeboeroe »

Dit is 'n volledig overzicht, of dat is althans de bedoeling. Sommige dingen zijn al eerder genoemd. Gaat-ie.

In de html:

Code: Selecteer alles

<a href="earth_HHF3.jpg" title="earth" class="godver">
wordt

Code: Selecteer alles

<a aria-haspopup="true" href="#" class="godver">
aria-haspopup="true" zorgt dat het ook werkt op een touchscreen met Internet Explorer 10. WAI-ARIA zijn toegankelijkheidsregels voor screenreaders e.d. aria-haspopup is er daar één van: het element heeft een pop-up. Dat is hier dus het geval. Slimme oplossing van Microsoft, ze gebruiken een gestandaardiseerd al bestaand iets om :hover op een touchscreen te imiteren. Wat mij betreft beter dan de oplossing van Apple.
href="#" zorgt ervoor dat de link niet meer werkt. Als het 'n 'echte' link is, opent de afbeelding in een nieuw venster/tab als je erop klikt.
De title is weggehaald, omdat het nogal storend is en volgens mij overbodig. Als de afbeelding informatief is en niet alleen sier, kun je wel 'n alt="hier komt je omschrijving" toevoegen. Dat is ook van belang voor zoekmachines en screenreaders. Als de afbeelding eigenlijk geen informatie of zo biedt, maar alleen voor de sier is, kun je alt = "" toevoegen. Dan is voor screenreaders en zoekmachines duidelijk dat het alleen voor de sier is.
Terzijde: ik moet wel grinniken om dat 'godver', zeer herkenbaar. Maar bedenk even dat iedereen je code kan lezen. Ik heb zelf 'n aantal keren als id en zo 'klote-ie' gebruikt op m'n site, en dat laat ik lekker staan.

Als je wilt dat bij hoveren over deze afbeelding de cursor niet in 'n handje verandert (dat hoort eigenlijk alleen boven 'n link te gebeuren), moet je in de css

Code: Selecteer alles

a.godver:hover {background: url(earth_HHF3.jpg);}
veranderen in

Code: Selecteer alles

a.godver:hover {background: url(earth_HHF3.jpg); cursor: default;}
Volgende:

Code: Selecteer alles

<a href="earth_M.jpg" title="Movimag -moving images-" class="muisoverlogo">
wordt

Code: Selecteer alles

<a aria-haspopup="true" href="#" class="muisoverlogo">
en

Code: Selecteer alles

a:muisoverlogo:hover {background: url(earth_M.jpg);}
wordt

Code: Selecteer alles

a.muisoverlogo:hover {background: url(earth_M.jpg); cursor: default;}
met exact dezelfde uitleg als hierboven bij .godver

In de html:

Code: Selecteer alles

<div id="main_container">
wordt

Code: Selecteer alles

<div id="main_container" onclick="">
De onclick="" is JavaScript. Het zorgt ervoor dat #main_container op iOS (iPad e.d.) reageert op een klik (feitelijk 'n aanraking, maar ik noem het vanaf nu gewoon kliks, anders krijg ik RSI). JavaScript in de html is eigenlijk om allerlei redenen hartstikke verouderd en verkeerd, maar dit JavaScript doet verder helemaal niets, wat te zien is aan ="". Dat is namelijk wat het moet doen: zalig in bed blijven liggen luieren en vooral niet actief worden.
Als je het menu opent in iOS, kan het niet meer worden gesloten, omdat het alleen kan worden gesloten als iets anders op 'n klik reageert. Nu reageert de hele pagina, behalve de footer, op 'n klik en sluit het menu dus als je buiten het menu klikt. In Android werkt dit standaard zo. Voor IE 10 op 'n touchscreen komt zo 'n andere oplossing.

Het doctype kan probleemloos worden veranderd naar

Code: Selecteer alles

<!DOCTYPE html>
Dat is voor html5 (en later). Omdat jij al strict hebt gewerkt, is er geen enkele reden dit niet gelijk te gaan gebruiken. Bovendien móét je het gebruiken voor <video>, omdat dit anders niet goed werkt in sommige browsers.

De charset kun je zo laten, maar in html5 kun je ook volstaan met het veel simpeler

Code: Selecteer alles

<meta charset="utf-8">
In je css staat:

Code: Selecteer alles

body {overflow-y: scroll;}
Dit kun je probleemloos weghalen. Dit is een opdracht om áltijd de (lelijke) verticale scrollbalk te laten zien, ook als dat niet nodig is. Als de pagina verticaal niet past, verschijnt automatisch een scrollbalk.

In de css heb ik bij #footer_container weggehaald:
position: fixed;
bottom: 0;
De footer staat hierdoor altijd onderaan het venster, maar op lagere schermen betekent dit dat de footer soms over de onderste video komt te staan. En (vooral oudere) mobiele browsers krijgen hier 'n ongelooflijke hoestbui van en zetten die footer van de verslikking op de wildste plaatsen neer.
Nu staat de footer gewoon onderaan de pagina.

Als je nou in de css vervolgens toevoegt:

Code: Selecteer alles

@media screen and (min-height: 800px) {
	#footer_container {position: fixed; bottom: 0;}
}
(Let op de dubbele { en }, een stel voor de @media-regel, een stel voor de selector zelf.)
De @media-regel zorgt ervoor, dat deze css alleen werkt bij schermen met een minimale hoogte van 800px. Daar levert die fixed footer geen problemen op.
Standaard is de footer dus niet fixed. Pas als een browser expliciet meldt dat het venster hoger dan 800 px is, wordt de footer fixed. Hiermee sluit je de simpeler smartfones uit ,want die kennen die hele @media-regel niet. En ook de mobiele browsers die de hik krijgen van fixed, want dat zijn oudere browsers en die kennen die @media-regel ook niet en negeren hem dus. Niet 100% waterdicht, maar volgens mij wel waterdicht genoeg.
IE 8 kent @media queries (zo heten hoogtematen e.d. officieel) ook niet, dus daarin scrolt de footer altijd mee. Je kunt dat weer repareren met JavaScript (goede zielen hebben gratis gemaakt wat Microsoft kennelijk niet kan), maar soms bijt dat JavaScript weer andere dingen in dit helaas nog niet uitgeroeide technische hoogstandje van Microsoft. Als je dat beslist fixed wilt hebben in IE8, moet je het maar even melden.

Uitklapmenu werkend krijgen in IE 10 op Windows 8 in een touchscreen. Zoals al eerder vermeld moet je daarvoor aria-haspopup toevoegen, overal waar iets wordt geopend met :hover.

Code: Selecteer alles

<li><a class="top_parent" href="#">MOVIMAG</a>
wordt

Code: Selecteer alles

<li><a aria-haspopup="true" class="top_parent" href="#">MOVIMAG</a>
(Dit moet je vier keer doen, want er zijn vier uitklapmenu's.)
Met de muis werkt het trouwens precies zoals in alle browsers.

Dat wat het voor dit deel.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Heeft iets met <video> te maken, maar nog niet alles

Bericht door Goeroeboeroe »

Er zijn zes <a>'s waarin nu 'n afbeelding, en later een video met controls, staat:

Code: Selecteer alles

<a href="#" title="bulls on the street" class="lk_foto1b">
en nog vijf andere. Deze regel wordt:

Code: Selecteer alles

<a aria-haspopup="true" href="#" id="lk_foto1b">
(Dat moet je dus nog vijf keer doen, voor elke regel één keer.)
De title is weggehaald, omdat die tijdens het afspelen van de video bijzonder storend boven de video staat.
aria-haspop="true" is toegevoegd om de pop-up (nu nog 'n foto, later video met controls) te laten werken in IE 10 op een touchscreen.
De class is bij allemaal in een id veranderd. Dit voorkomt het verspringen van de pagina, waarover hieronder meer. Eigenlijk hoeft de class niet in een id te worden veranderd bij de bovenste twee, maar het is overzichtelijker om het gewoon bij allemaal te doen.
Om de css aan de nieuwe id te koppelen, moet je in de stylesheet .lk_foto1b veranderen in #lk_foto1b (idem .lk_foto2b t/m .rk_foto3b, in
#lk_foto2b t/m #rkfoto3b, dus zes keer).

Het verspringen. De video staat in een <a>. De href van die a is "#". Dit betekent dat, bij klikken op de <a> of iets erin zoals de controls van de video, de pagina helemaal naar boven gaat. Dat is vooral geestig op een smartfone als je de onderste wilt openen. Je klikt erop, de pagina schiet omhoog. Je scrolt naar beneden, terug naar die video. Maar als je ook maar enigszins onhandig scrolt, denkt de smartfone-die-eigenlijk-niet-zo-smart-is dat je klikt. Kom je eindelijk beneden aan, staat die foto er weer, want je hebt geklikt...
Dit maakt het afspelen van (de onderste) video's feitelijk onmogelijk in lagere schermen. Hetzelfde probleem speelt trouwens ook op de desktop, behalve dat daar scrollen niet met klikken kan worden verward.
(Omdat dit bij de bovenste twee video's niet speelt, hadden die hun class mogen houden. Zelfs op 'n smartfone in landschapsmodus zijn ze grotendeels zichtbaar.)
Door de class in een id te veranderen, kan ik linken naar de id. Omdat een id uniek is, kun je hem als anker gebruiken. Als je nu in de <a> met id="lk_foto2b" de href verandert naar href="#lk_foto2b" (let op het # aan het begin, dat geeft aan dat het binnen de pagina is), linkt de <a> naar zichzelf.
(Dit moet je voor de andere drie onderaan ook veranderen, elk naar hun eigen id.)
Als je nu op de <a> of iets daarbinnen klikt, zie je op hogere schermen geen verschil. Op lagere schermen blijft de video meestal gewoon ook precies zo staan, als hij al zichtbaar was. Maar als je hebt gescrold om bij de foto te komen, springt de pagina niet meer terug naar boven. Als de foto/video nog niet helemaal zichtbaar is, wordt hij nu volledig op het scherm gezet, inclusief controls. precies de bedoeling.
Dat is de reden dat de 'class' in een 'id' is veranderd bij deze zes <a>'s. Nu kan de href worden veranderd van "#" naar "#lk_foto2b". De href verwijst nu naar het element zelf, waardoor dit alleen nog verspringt als het niet (helemaal) zichtbaar is. (Bij de andere drie moet je de href veranderen naar de id die daarbij hoort.)

Dit is nog niet echt helemaal ideaal, maar al beter dan veel pagina's op kleine schermpjes. En het alternatief is een volledig nieuwe site maken, die vanaf het begin volledig geschikt is voor hele kleine en hele grote schermen. Ik gok dat je daar niet echt warm voor loopt. Overigens spelen dit soort problemen eigenlijk alleen maar op hele kleine schermen, dus het valt nogal mee.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Html voor als JavaScript uit staat

Bericht door Goeroeboeroe »

Code: Selecteer alles

<noscript>
	<div style="background: white; color: black; width: 60%; margin: 0 auto; border: ridge #daa520 10px; padding: 5px;">Zonder JavaScript kun je de video's, die verschijnen bij een muisover over 'n afbeelding, alleen bedienen door een rechtsklikken.</div>
</noscript>
De tekst in deze div wordt automatisch getoond, als JavaScript uit staat. Enkele opmerkingen:
* De css moet in dit geval IN het element worden gezet (inline). Als de css op de normale manier in een stylesheet wordt gezet, toont Internet Explorer 8 altijd (een deel van) het venstertje, of JavaScript nu aan- of uitstaat. Er moet een <div> binnen de <noscript>, omdat hetzelfde technische wonder anders de css gewoon negeert. Je kunt de css (en de tekst) natuurlijk volledig aanpassen. De border is nu hetzelfde als die bij de video's links.
* Deze tekst is gericht op alle desktopbrowsers, behalve Internet Explorer 8. Maar hij wordt getoond in álle browsers, waar JavaScript uit staat. Dit lijkt me geen probleem. In mobiele browsers kan JavaScript vaak niet eens worden uitgezet, en als dat wel kan, doet niemand het, want je hebt dan 'n soort peperduur veredeld horloge.
JavaScript staat in de regel uit vanwege de veiligheid. Iedereen die genoeg van veiligheid weet om JavaScript uit te zetten, zal beslist geen Internet Explorer 8 gebruiken. Die mensen gebruiken IE 9, of Firefox, of ...
* Het was nogal lastig 'n goede plaats te vinden voor het ventertje. position: absolute of fixed kon niet, omdat de positie dan wordt gekoppeld aan de breedte van het venster. Bij een smaller venster komt het venstertje daardoor over de linkerfoto's heen te staan. (position: absolute zou misschien kunnen als je 'n ouder 'n relatieve positie geeft, maar ik ben bang dat dat de hele lay-out gaat verstoren.)
Zonder absolute of fixed positie neemt het venstertje gewoon ruimte in, en duwt dus andere elementen opzij. Vandaar dat het niet boven het diafragma kan staan. Onder het diafragma bleek het uiteindelijk niets te verstoren en netjes in het midden te kunnen worden gezet. Omdat dit op desktopbrowsers is gericht, mag je aannemen dat het venster altijd hoog genoeg is om de waarschuwing te tonen.

Het staat nu dus hier:

Code: Selecteer alles

	<div id="content_container">
		<div id="content-index">
(...)
		</div>
		<noscript>
(...)
		</noscript>
	</div> <!-- sluit content_container -->
</div> <!-- sluit main_container -->
Om het venstertje in Firefox te zien:
Extra -> voorkeuren -> Inhoud. Daar het vinkje bij JavaScript even weghalen en de pagina opnieuw laden.
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto als link naar een video, in hetzelfde kader

Bericht door Goeroeboeroe »

Ik ga de rest in een nieuwe draad posten: http://css-voorbeelden.nl/forum/viewtopic.php?f=5&t=563
Dat is de code die min of meer afgerond is voor het <video>-deel. Deze draad wordt anders veel te chaotisch lang, ben ik bang. Nu kunnen we hier ook gewoon over de dingen binnen deze draad doorgaan, en meer specifiek over <video> in die andere draad.
Plaats reactie