Message of pop up op website

[Sjonnies]

Hoi allemaal, ik heb mij hier net geregistreerd omdat ik een vraag heb over mijn website.
Ik heb al jaren een website, zelf gemaakt in HTML en CSS, maar ik ben echt een beginneling op dat gebied.
Nu is mijn website vol met vakantie foto's van de landen waar ik geweest ben, die foto's laat ik dan zien met thumbnails en als je op een thumbnail klikt opent zich daarop een Lightbox.
Hier ben ik zeer tevreden over, alleen zou ik graag op de pagina met de thumbnail een Pop up willen laten verschijnen, met de tekst van uitleg, dat men op de thumbnail moet klikken om de foto's in het groot te zien.
Deze Pop up of Message kan je dan wegklikken of verdwijnt zelf na bv 5 seconden.

Ik heb al heel wat gezocht op Google maar kom er niet uit. Dus vandaar mijn vraag hier, ik kan zo 1,2,3 geen HTML of CSS forums vinden, ja in het engels. Maar ik probeer het eerst hier.

Alvast bedankt.


...

[Barrycade]

Pop ups, wow, Web 1.0 vibes.

Maar heb je nu aangepaste mouse over tekstjes of staat daar nu;
(Even random voorbeeld) Picasa_Thailand_Sjonnie_DCS-1000.jpg?

[Zenomyscus]

Los van je vraag zou je je kunnen afvragen of een popup de beste manier is om je gebruikers te informeren. Persoonlijk erger ik me dood aan popups die ik vrijwel automatisch wegklik zonder te lezen. Als dat niet binnen een seconde lukt klik ik de gehele site weg vast niet iedereen is zo extreem als ik, maar ik durf te stellen dat niemand popups fijn vind. De meesten zullen ook wel verwachten dat je de thumbnails kunt vergroten. Mocht je dat duidelijker willen maken zou ik persoonlijk een regeltje boven of onder de afbeeldingen plaatsen. Dat hoeft niet eens veel op te vallen, een soort voetnoot.

Popups blokkeren de gebruiker en dat doet naar mijn mening enorm afbreuk aan de ervaring. Daarnaast moet je dan opslaan of iemand het gezien heeft, want anders krijgen ze bij ieder bezoek die melding.

Tot slot weet ik niet of deze vragen toegestaan zijn. In elk geval niet zonder zelf aan te geven wat je al gedaan hebt. Niet lullig bedoelt overigens.

[RobIII]

Barrycade schreef op dinsdag 1 augustus 2023 @ 17:34:
Pop ups, wow, Web 1.0 vibes.

Niet zo'n popup natuurlijk TS bedoelt gewoon een Divje dat ergens tevoorschijn ploept en weggeklikt kan worden danwel verdwijnt na een paar seconden. Een "notification".

@Sjonnies Die vragen die er staan wanneer je hier een nieuw topic opent staan er natuurlijk niet voor niets:

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

Geef eens aan dan wat je al gevonden en/of geprobeerd hebt? "Ik heb al heel wat gezocht op Google maar kom er niet uit" kunnen wij ook niet veel mee Waar kom je niet uit? Wat is er mis met, zeg, zoiets of de talloze alternatieven?

Zie ook onze Quickstart en Kan iemand even... en scriptrequests.

Ten slotte: Ik sluit me aan bij @Zenomyscus; gewoon een regeltje erboven/onder/naast met een korte uitleg ("Klik op de afbeeldingen voor de grote versie") is beter dan een element dat je moet wegklikken of opdringerig voor je snufferd tevoorschijn komt.

[ Voor 29% gewijzigd door RobIII op 01-08-2023 18:22 ]

[Sjonnies]

Thanks voor jullie antwoorden, en wat jullie zeggen, zit wel een kern van waarheid in. Zo zie je maar dan meningen van anderen er heel er toe doen.
Zoals ik al zei, ben ik een amateur op het gebied van HTML en CSS, ik had op Google naar zo iets gezocht en daar stond de HTML code en CSS code, die plaatste ik op mijn website, maar werkte niet.
Zo heb ik een paar avonden lopen stoeien.
Toen dacht ik van: misschien kan iemand mij hiermee helpen om mij verder op weg te helpen en wat uitleg hierover geven.

[RobIII]

Sjonnies schreef op dinsdag 1 augustus 2023 @ 18:47:
Zoals ik al zei, ben ik een amateur op het gebied van HTML en CSS, ik had op Google naar zo iets gezocht en daar stond de HTML code en CSS code, die plaatste ik op mijn website, maar werkte niet.

Met "werkt niet" kunnen we je niet helpen. Met "kom er niet uit" ook niet. Als je niet aangeeft wát er niet werkt (en evt. welke foutmeldingen), wáár je niet uit komt, hoe moeten wij je dan helpen? Ga je ook naar de dokter "Er is iets mis" en verwacht je vervolgens dat je dokter een recept uitschrijft?

Dus; laat eens iets zien. Post relevante(!!) code, geef aan wat er (niet) gebeurt, wat je al gezocht/gevonden hebt om dat op te lossen etc. en dan kunnen we je allicht inde juiste richting wijzen

[ Voor 14% gewijzigd door RobIII op 01-08-2023 19:03 ]

[Arunia]

Vroeger gebruikte je iframes. Later werden dit div tags welke je ergens kunt plaatsen op je site.

[RobIII]

Arunia schreef op dinsdag 1 augustus 2023 @ 19:03:
Vroeger gebruikte je iframes. Later werden dit div tags welke je ergens kunt plaatsen op je site.

Horse hockey. Divs bestaan net zo lang als langer dan iFrames (HTML 3.2 vs 4.0 als ik me niet vergis). Dat je een iFrame gebruikte omdat je div niet kende of vice versa, swa. Maar het is niet alsof er voor notificaties (of 'popups') eerst iFrames en dan divs gebruikt werden (ook niet omgekeerd). Iets met the right tool for the right job enzo. Altijd al zo geweest. Verder zie ik ook niet echt de relevantie voor de vraag van TS om eerlijk te zijn?

[ Voor 40% gewijzigd door RobIII op 01-08-2023 19:22 ]

[Cyphax]

Ik denk dat je misschien het beste het dialog-element hiervoor kan gebruiken: https://developer.mozilla...s/Web/HTML/Element/dialog
De voorbeelden op die pagina geven wel een goed beeld van wat je ermee kan en hoe.

[Arunia]

RobIII schreef op dinsdag 1 augustus 2023 @ 19:07:
[...]

Horse hockey. Divs bestaan net zo lang als langer dan iFrames (HTML 3.2 vs 4.0 als ik me niet vergis). Dat je een iFrame gebruikte omdat je div niet kende of vice versa, swa. Maar het is niet alsof er voor notificaties (of 'popups') eerst iFrames en dan divs gebruikt werden (ook niet omgekeerd). Iets met the right tool for the right job enzo. Altijd al zo geweest. Verder zie ik ook niet echt de relevantie voor de vraag van TS om eerlijk te zijn?

Daar kun je zeker gelijk in hebben. Ben lang geleden nog voor css met webdesign bezig geweest.

Maar dacht dat TS het wel interessant zou vinden. Niet alles hoeft meteen functioneel te zijn natuurlijk. Interesse in achtergrond zeg maar. Maar goed, DIV zou ik er voor gebruiken.

[AW_Bos]

@Sjonnies
Als je met JavaScript en CSS in de weer wilt gaan als beginner. Kijk dan naar dit:
http://fancybox.net/

Het werkt prima, voldoet aan je verwachtingen. V5 is wat complexer, en ik raad die even af voor een beginnende gebruiker. Als het niet lukt, laat dan even wat wat je hebt gedaan. Hoe uitgebreid je jouw probleem omschrijft, hoe makkelijker wij je kunnen helpen.

[Sjonnies]

RobIII schreef op dinsdag 1 augustus 2023 @ 19:02:
[...]

Met "werkt niet" kunnen we je niet helpen. Met "kom er niet uit" ook niet. Als je niet aangeeft wát er niet werkt (en evt. welke foutmeldingen), wáár je niet uit komt, hoe moeten wij je dan helpen? Ga je ook naar de dokter "Er is iets mis" en verwacht je vervolgens dat je dokter een recept uitschrijft?

Dus; laat eens iets zien. Post relevante(!!) code, geef aan wat er (niet) gebeurt, wat je al gezocht/gevonden hebt om dat op te lossen etc. en dan kunnen we je allicht inde juiste richting wijzen

Ik begrijp wat je bedoelt, maar als je al een paar avonden aan het zoeken, uitproberen, klooien bent en het lukt niet dan snap je misschien wel dat je dan niet alles kan schrijven wat je allemaal geprobeerd hebt.
Ik heb op google gezocht en vond een paar voorbeelden, zowel HTML met CSS en soms zat er een Jquery bij. Nu werk ik met Dreamweaver, en probeerde de HTML en CSS en Jquery te plaatsen op mijn website, maar dat werkte dus niet. Nu weet ik dus niet of ik die HTML "gewoon" ergens tussen kan plakken, en waar?? in de HEAD of in de BODY.... of...? En de CSS kan die in mijn bestaande CSS plakken.
Zoals ik al zei ben ik een beginneling en ben allang blij dat ik zover ben gekomen al die jaren....

Mocht dit nog niet genoeg info zijn, laat dan aub zitten dat ik deze vraag heb gesteld.

Ik zal de tekst bovenin mijn website plaatsen zodat het voor iedereen duidelijk is.

Ik zal ook eens kijken naar de tip van @AW_Bos bedankt hiervoor.

[Hahn]

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
[...]

Ik begrijp wat je bedoelt, maar als je al een paar avonden aan het zoeken, uitproberen, klooien bent en het lukt niet dan snap je misschien wel dat je dan niet alles kan schrijven wat je allemaal geprobeerd hebt.

Even recht voor z'n raap gezegd: als jij niet precies vertelt wat je al geprobeerd hebt, dan loop je het risico dat je 10 tips krijgt die je alle 10 allang hebt geprobeerd, waardoor je iedereen z'n tijd verdaan hebt.

En nee, "ik heb een stukje code gevonden en geprobeerd, maar dat werkte niet" is niet precies genoeg. Welke stuk code, hoe heb je het geprobeerd en wat werkte er niet?

[RobIII]

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
[...]

Ik begrijp wat je bedoelt, maar als je al een paar avonden aan het zoeken, uitproberen, klooien bent en het lukt niet dan snap je misschien wel dat je dan niet alles kan schrijven wat je allemaal geprobeerd hebt.

Toch is dat wél de bedoeling
Anders gaan mensen hier allemaal hun tijd zitten verdoen met oplossingen aandragen die je allemaal al geprobeerd hebt. Zonde van hun, maar ook jouw, tijd

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Ik heb op google gezocht en vond een paar voorbeelden, zowel HTML met CSS en soms zat er een Jquery bij.

Nou, daar zou je al wat linkjes van kunnen posten.

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Nu werk ik met Dreamweaver, en probeerde de HTML en CSS en Jquery te plaatsen op mijn website, maar dat werkte dus niet.

Nu geef je weer niet aan wat er dan niet werkte? Helemaal niks? Zag 't er niet uit? Kreeg je foutmeldingen? En, zo ja, welke?

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Nu weet ik dus niet of ik die HTML "gewoon" ergens tussen kan plakken, en waar?? in de HEAD of in de BODY.... of...?

Dat staat doorgaans wel in 't artikel waar je zoiets vindt beschreven? Het is nogal afhankelijk van wat je gevonden hebt wat waar hoort, dus daar kunnen we je geen "one size fits all" antwoord op geven.

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
En de CSS kan die in mijn bestaande CSS plakken.

Doorgaans wel, maar ook hier: daar kunnen we geen antwoord op geven zonder een link of relevante(!) code of ... Je geeft ons niks om mee te werken, dan kunnen we daar ook geen antwoord op geven...

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Zoals ik al zei ben ik een beginneling en ben allang blij dat ik zover ben gekomen al die jaren....

We zijn allemaal ooit ergens bij 0 begonnen

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Mocht dit nog niet genoeg info zijn, laat dan aub zitten dat ik deze vraag heb gesteld.

Jammer dat je het zo snel op geeft...

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
Ik zal de tekst bovenin mijn website plaatsen zodat het voor iedereen duidelijk is.

Dat is wel de makkelijkste oplossing én scheelt frustrerende popups

Maar lang verhaal kort: Als je altijd alleen maar lukraak code hebt ge-copy/paste dan mis je essentiële basiskennis en dat is wat hier wel een beetje doorschemert. De vragen zoals wat-hoort-waar zou je met wat basiskennis moeten kunnen beantwoorden. Ook zou ik je niet moeten hoeven wijzen op 't gebruik van de developer console (meestal F12) waarin je bijvoorbeeld JS foutmeldingen kunt zien, of moeten vertellen hoe je zaken debugged. Dat geeft allemaal niet, zoals ik zei, we zijn ooit allemaal ergens begonnen. Maar dan moet je ons wél iets geven waar we wat mee kunnen. Zie mijn eerdere "dokter opmerking". Je blijft eigenlijk zeggen "Er is iets mis" waarop je dokter vraagt: "Wat dan?" en waarop jij dan weer zegt "Ik heb al pillen genomen, maar die deden niks" waarop je dokter vraagt "welke pillen dan?" waarop jij zegt "vanalles / weet ik niet / zeg ik niet"...

[ Voor 14% gewijzigd door RobIII op 02-08-2023 16:42 ]

[Ypho]

Wellicht (als je een beetje handig bent) kun je iets met Toastr. Dit zijn meer "notificaties", maar zijn volgens mij wel een beetje wat je bedoelt.

Via de playground kun je met wat klikken de juiste code in elkaar fietsen: https://codeseven.github.io/toastr/demo.html

[AW_Bos]

Sjonnies schreef op woensdag 2 augustus 2023 @ 16:31:
[...]

Ik begrijp wat je bedoelt, maar als je al een paar avonden aan het zoeken, uitproberen, klooien bent en het lukt niet dan snap je misschien wel dat je dan niet alles kan schrijven wat je allemaal geprobeerd hebt.

Ik heb helaas nog geen code of voorbeelden gezien, @Sjonnies. Maar stel nou dat je flinke stappen had gemaakt en je het uiteindelijk 98% van je implementatie in je site al goed had, zou het dan niet frustrerend zijn om uiteindelijk toch de handdoek in de ring te gooien?

Dus laat het even bezinken, lees de reacties hier in dit topic, en kom eens op met je code en een voorbeeld.

[AW_Bos]

Ypho schreef op woensdag 2 augustus 2023 @ 16:43:
Wellicht (als je een beetje handig bent) kun je iets met Toastr. Dit zijn meer "notificaties", maar zijn volgens mij wel een beetje wat je bedoelt.

Via de playground kun je met wat klikken de juiste code in elkaar fietsen: https://codeseven.github.io/toastr/demo.html

Toasts vind ik meer bedoeld voor bevestigingen na een actie, zoals: "Uw instellingen zijn opgeslagen", "Er is een fout opgetreden: bla bla". Niet voor zomaar een bericht.

Gebruik liever een Lightbox/Fancybox oplossing met een div overlay. Of zet een duidelijk bericht bovenaan de website. Dat is tevens minder hindelijker. Als je een script zoekt, kijk dan wel of deze mobiel vriendelijk is. Niets is zo vervelend als een site die mobielvriendelijk is, maar dat de tekst in de overlay buiten beeld valt...