Goeroeboeroe schreef: do 30 jan 2025, 01:31
Dit bedoelde ik dus met langer wachten
Gisteren ging het toevallig heel snel.
Nou ja, met "langer wachten" denk ik meer aan dagen of weken.
Dat is eigenlijk 'n beetje opzettelijk dat niet duidelijk staat vermeld dat het is bedoeld voor vragen e.d. bij de voorbeelden.
Maar die voorbeelden kon/kan ik niet vinden.
Tegenwoordig heeft haast niemand meer 'n eigen site, omdat de meeste mensen Facebook, Wordpress, een of andere bibliotheek of zoiets gebruiken. Dus ik vind het wel leuk als er af en toe nog 'ns iemand zelf html/css schrijft.
Nou, dat komt zo. Handleidingen zijn meestal niet vanuit het gezichtspunt van gebruikers geschreven en daardoor is het heel lastig (vooral in uitvoerige handleidingen) om een beetje snel te vinden wat je zoekt. HTML in combinatie met CSS biedt die mogelijkheid wel. Daarom ben ik jaren geleden begonnen met handleidingen voor mezelf daarmee te maken op basis van wat ik vond en waarvan ik verwachtte, dat ik die na verloop van tijd nog weleens nodig zou kunnen hebben.
Kortgeleden werd ik lid van een vereniging waarvan ik vond, dat ze een nogal knullige webstek (ik opteer voor m'n moerstaal waar dat kan) hadden. Omdat de ondersteuning van Drupal binnenkort zou eindigen, moesten ze hun webstek omzetten naar iets anders en hadden ze voor WP (WordPress) gekozen. Ik bood aan, om (vrijblijvend) iets te maken wat wat bezoekersvriendelijker zou zijn. Daar hadden ze wel oren naar, maar ik ben geen WP-fan en heb daardoor ook geen motivatie om me daar in te verdiepen. Ik vergelijk WP met een supermarkt die allerlei kant en klare producten bieden en HTML in combinatie met CSS met een kast met ingrediënten waarmee je heerlijke dingen naar eigen smaak kunt maken. Ook ben ik nogal gebruikersgericht, omdat ik het zelf ook prettig vind, wanneer iemand van mij uit gaat - en wie vind at niet? -. Daarom vind ik antwoorden op de vraag: "Wat wil je en waarom wil je dat?" belangrijker.
Ik ben niet iemand die het leuk vind om zomaar wat te prutsen; het moet een doel hebben. Dus een webstek ontwikkelen leek mij wel leuk en zinnig. Bovendien, van uitdagingen kun je veel leren.
Bij die vereniging hadden ze mensen waarvan ze verwachten, dat die mijn HTML/CSS-product wel om zouden kunnen zetten in WP. We zullen zien.
Ook op 'n forum als helpmij.nl kwamen vroeger soms wel tien vragen op één dag binnen, nu soms maar één per week, zag ik.
Dat zegt toch wel wat, volgens mij. Wanneer mensen tevreden zijn, komen ze terug en maken ze gratis reclame bij anderen, toch?
Bovendien vind ik het ook nog 'n leuke vraag.
Dat blijkt.
Dus als je geen haast hebt...
Maak je niet ongerust, maar laat je ook niet beïnvloeden door mijn reactietijd
Vandaag van hot naar her gerend dus lekker veel tijd om te denken.
Denken doe ik meestal wanneer ik wakker lig.
Even een vraagje tussendoor; Waar staat Goeroeboeroe voor? Ik ken de uil Oehoeboeroe uit de radioserie "Paulus de boskabouter" van Jean Dulieu
https://nl.wikipedia.org/wiki/Paulus-de-boskabouter (ja, ik ben oud). Ben jij familie van die uil?
Met de volgende mogelijkheden als resultaat.
Ik heb om te beginnen even je code aangepast:
Ik ben zelf ondertussen ook wat aan het klooien geweest met wat resultaat, dat ik verderop in deze reactie zal plaatsen. De code die ik jou gaf, had ik ergens vandaan gehaald en dan is het meestal iets wat nog eens goed bekeken (aangepast en/of uitgekleed) moet worden.
Code: Selecteer alles
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="xxx">
<title>xxx</title>
<style>
body {height: 150vh;}
div#div2 {margin-top: 140vh;}
p.ppup span {position: absolute; left: -9999px; ; background: #ffffcc; margin: 4px 0 0 0; padding: .2em .5em .3em .5em; border-style:solid; border-color:#28477a; border-width:1px; z-index: 6; border-radius: .5em;}
p.ppup:hover {text-decoration: none; background: #ffffcc; z-index: 6; position: relative;}
p.ppup:hover span {left: 2%;}
</style>
</head>
<body>
<section id="sec1">
<div id="div1">
<p id="p1" class="ppup">moerstaal
<span>Dit is de 'pop up'-tekst bovenaan.</span>
</p>
</div>
<div id="div2">
<p id="p2" class="ppup">moerstaal
<span>Dit is de 'pop up'-tekst onderaan.</span>
</p>
</div>
</section>
</body>
</html>
In neem aan dat dit ongeveer de bedoeling is.
Ik heb ondertussen gauw een kopie van mijn product gemaakt onder de naam "Goeroeboeroe". Vervolgens jouw "section"-deel in een html-pagina daarvan geplaatst en het "style"-deel in m'n CSS-bestand en daar mijn stijldeel even uitgeschakeld. Ik ga er binnenkort even mee aan de slag, want, zoals ik hier boven al schreef, zitten er (nog) dingen in die anders moeten, maar dat komt omdat wat ik eerder plaatste nog onbehandeld was. Ik kom daarop terug in een volgende reactie.
* De <a class="keyword" id="k1"> heb ik eruit gehaald, die is niet nodig.
Ah, fijn. Ik vroeg me al af waar die voor dienden.
Als er een link in moet komen, kun je die er weer gewoon in zetten. Alleen levert de combinatie pop-up/link op een touchscreen zeer moeilijk oplosbare problemen op.
Nou, feitelijk is het zo, dat ik in de tekst 'links' heb geplaatst, waarbij voor geïnteresseerden een 'pop up' verschijnt met aanvullende tekst, als een soort voetnoot.
* 0px mag gewoon 0 zijn (zonder eenheid)
Weet ik, maar beter 2 keer dan geen keer.
't Was een kopietje.
[KNIP]
Ik heb van het geknipte nota genomen en dat geldt ook verderop wanneer je dat tegenkomt.
* Ik heb de body, de pagina, 150vh hoog gemaakt. 1 vh is 1% van de hoogte van het venster, 150 vh is dus anderhalf keer de hoogte van het venster. Hierdoor kun je de pagina scrollen.
Er zit een tweede <div> in, precies hetzelfde als de eerste, alleen heeft die een idioot grote marge aan de bovenkant. Daardoor komt die aan de onderkant van het venster te staan (of daaronder) en kun je zien wat er aan de onderkant gebeurt.
Ja, die 2e is in mijn geval niet nodig, maar dat soort dingen krijg je met kopietjes van anderen.
Zal best niet helemaal zijn zoals je het wilt hebben, maar dit geeft even een bruikbaar houvast.
Als je nou denkt "waar ben ik aan begonnen", dan moet je dat vooral even melden. Ik vind dit soort klussen leuk, dus als je het te ingewikkeld vind en er niets mee doet, is dat geen probleem.
Maak je niet ongerust want ik ben heel blij met jouw reacties. Hopelijk kun jij ook een beetje tegen mijn "gekluns".
Goed, de mogelijkheden.
1) Werkt alleen bij hoveren (met de muis of een touchpad): zoals het nu is.
Als het ook moet werken op een touchscreen (maar dan zonder <a> met link, want dat levert bergen problemen op), kun je
Code: Selecteer alles
p.ppup:hover {... css ... }
p.ppup:hover span {... css ... }
vervangen door
Code: Selecteer alles
p.ppup:hover, p.ppup:focus {... css ...}
p.ppup:hover span, p.ppup:focus span {... css ...}
Je moet dan bij de <p> nog tabindex="-1" toevoegen, anders werkt de aanraking niet:
Als nu de <p> wordt aangeraakt, wordt de pop-up getoond. Als het scherm ergens anders wordt aangeraakt, sluit de pop-up weer. (Bij klikken met de muis op de <p> en ergens erbuiten klikken opent en sluit de pop-up ook.)
2) Je zou het gewoon zo kunnen laten als in de code van mij. (Met eventueel :focus en zo toegevoegd.) Je mag aannemen dat mensen weten dat ze moeten scrollen als tekst niet volledig is te zien.
Ja, dat laatste neem ik ook aan. Niettemin heb ik in mijn ontwerp de kop (met daarin menuknoppen) en de voet, van een deels transparant kleurverloop voorzien waar de pagina-inhoud dan onderdoor schuift. Zo is, zonder naar schuifbalken te hoeven kijken, te zien of er nog meer volgt.
3) Als de tekst echt alleen bij hoveren zichtbaar hoeft te worden, zou je een titel kunnen overwegen.
Momenteel heb ik het zo ingesteld, dat de bovenkant van het 'pop up'-blok net onder de gerelateerde koppeling valt. Daardoor werkt die koppeling feitelijk als titel.
Maar dit werkt dus niet op een touchscreen.
Mooi. dan speelt dat probleem dus niet.
En je kunt dat ook niet opmaken met een kleur of wat dan ook.
Ik neem aan, dat op die aanraakbeeldschermen, die kleur dan wegvalt, maar dat lijkt mij geen probleem.
[KNIP]
Ik doe dit zelf op deze site bij elke eerste afkorting.
Ik ben gewend om de eerste keer dat ik een afkorting gebruik waarvan ik niet zeker ben of die bij een lezer bekend is, de betekenis tussen haakjes daarachter te zetten (zoals je bovenaan ook bij de door mij gebruikte afkorting "WP" hebt kunnen vaststellen).
5) Je kunt de <span> een position: fixed geven. Dan wordt de span met de pop-up altijd gepositioneerd ten opzichte van het venster van de browser en staat dus altijd binnen het venster. Maar dat is niet echt ideaal, want als de <p> met moerstaal bijvoorbeeld onderaan het venster staat en je <span> heeft een fixed positie op 10 px vanaf de bovenkant, dan staat de span met de pop-up dus 'n onwijs eind van de <p> vandaan. Maar het kán.
Nee, wat ik wil, is dat de 'pop up' net onder de 'link' komt, zoals dat nu het geval is. Maar ... wanneer die 'link' op een bepaald moment toevallig helemaal rechts staat, dat die 'pop up' dus zo ver naar links opschuift als nodig. Nu blijkt een deel buiten het venster te vallen, waardoor een deel niet meer leesbaar is. Ik heb als noodverbandje de tekst met <br>'s ingekort, maar dat is voorlopig natuurlijk. Wanneer een 'link' toevallig een keer onderaan staat, zou de 'pop up' boven de link moeten komen. Dus, in het ingewikkeldste geval, dat de 'link' rechts onderaan staat, moet de koppeling naar boven en voor zover nodig naar links. Ja, een gek kan meer vragen, dan een wijze kan bieden.
[KNIP]
6) Je zou de pop-up gedeeltelijk óver 'moerstaal' kunnen zetten. Bijvoorbeeld een heel klein beetje lager, zodat 'moerstaal' nog half is te zien.
Ik heb hem zoveel lager gezet, dat 'moerstaal' als titel fungeert.
[KNIP]
Je mag aannemen dat mensen begrijpen dat ze moeten scrollen, als ze maar een stukje van de pop-up zien.
[/quote]
Mee eens, maar inmiddels weet je wat ik wil en waarom.
Dat is heel simpel te doen met iets als:
De <p> met 'moerstaal' heeft een absolute positie. De <span> met de pop-up wordt daardoor gepositioneerd ten opzichte van de <p>: 0 px vanaf links, dus precies onder 'moerstaal'. En 10 px lager dan 'moerstaal', dus 'moerstaal' is dus nog gedeeltelijk te zien.
Ik heb dat gedaan middels "margin-top: 1.7em;"
Tenzij je echt dringende redenen hebt om het anders te doen (schoolopgave, baas-zonder-hersenen, of zo), zou ik het eigenlijk zo laten als in mijn code. Of eventueel voor oplossing 6 kiezen. (Eventueel met die toevoeging van :focus uit oplossing 1, dan werkt het ook op touchscreens.)
Nee, het is puur een eigen wens om dingen zo te willen zoals ik hierboven heb uitgelegd. Dus,
een 'pop up' die net onder de link verschijnt, maar wanneer daar onder of rechts van onvoldoende ruimte voor is, dat die dan voor zover nodig naar links schuift en/of naar net boven die 'link' springt.
7) Als het echt zo moet dat de pop-up altijd binnen het venster moet staan (en niet zoals bij oplossing 4 altijd zichtbaar mag zijn), ontkom je inderdaad niet aan JavaScript. Dat is relatief eenvoudig, maar wel even wat meer werk. Als je dat wilt, wil ik daar best even naar kijken, maar dat kan dan wel 'n paar dagen duren.
Ik heb het gevoel, dat wat ik wil, zoals ik hier net boven in vette tekst heb samengevat (waarschijnlijk was ik in m'n eerste bericht wat verwarrend) met CSS mogelijk zou moeten zijn.
Die code van mij helemaal bovenaan is in principe een hele pagina. Die kun je kopiëren en in je browser openen. En je kunt die natuurlijk aanpassen. Als die <a> terug moet en zo, kan dat gewoon. Maar ik geef er zelf altijd de voorkeur aan om een probleem op te lossen met zo weinig mogelijk code. Dan kunnen er ook maar weinig fouten in zitten. Als het dan werkt en je gaat geleidelijk dingen toevoegen, zie je gelijk als het misgaat.
Dat is ook mijn uitgangspunt, maar omdat mogelijk anderen later ook met mijn code uit de voeten moeten kunnen, "overdrijf" ik niet alleen met toelichtende tekst middels <!-- --> en /* */ maar voeg ik ook onderdelen van stijlen niet samen.
Wordt vervolgd.
N.B. Is er ook een optie, dat ik een e-mail waarschuwing krijg, wanneer er een nieuwe reactie is?