Archief - Javascript, hulp nodig

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
t

tghmember

Legacy Member
Hallo allemaal

Ik zou graag willen dat, wanneer ik een kleine thumbnail aanklik, die image vanboven verschijnt (in de grotere thumbnail) met zijn uitleg erbij.

Om een idee te geven van wat ik precies bedoel is hier een screenshot van het huidige ontwerp
View image: Knipsel

In principe moet er na de functie waarin de image over gezet wordt, nog een query uitgevoerd worden naar de databank en daaruit moet uitleg en prijs gehaald worden. Is dit mogelijk?

Hoe kan ik dit best verwezenlijken?
b

bealzebub

Legacy Member
Afhankelijk van je browser support zou je gewoon CSS3 via de target selector kunnen gebruiken om dat te bereiken.

What?s the Deal With :Target in CSS? | Design Shack

Je kan eventueel naar Javascript terugvallen voor oudere browsers.

Ik zou sowieso nie via een round-trip naar de server werken voor je prijzen en dergelijke. Een prijs en wat uitleg is niet zoveel extra data als je toch al al die images downloadt. Render alles gewoon direct in de pagina en verberg/toon wat relevant is.

Je kan trouwens perfect dezelfde image voor je thumbnail als voor je uitleg gebruiken en gewoon door de browser laten resizen. Dat bespaart je het maken van de thumbnails en de browser moet niet twee keer een image downloaden (tenzij de grote afbeelding anders is dan de thumbnail natuurlijk).
b

bealzebub

Legacy Member
Voorbeeld: Edit this Fiddle - jsFiddle

Het mooie eraan is dat de url aangepast wordt en ook nog een bookmarkable is (en de juiste gegevens zal tonen als de bookmark terug opgeroepen wordt). Dat is iets wat je op jsFiddle in die edit mode niet te zien krijgt, maar t is wel zo.
t

tghmember

Legacy Member
Bedankt! Nu ben ik aan het denken of het misschien niet beter is om toch gewoon Javascript the gebruiken. Niet iedereen heeft de nieuwste browsers de laatste tijd...

Wat denken jullie?

PS. Zou iemand een JSfiddle met de Javascriptcode kunnen posten?
b

bealzebub

Legacy Member
tghmember zei:
Bedankt! Nu ben ik aan het denken of het misschien niet beter is om toch gewoon Javascript the gebruiken. Niet iedereen heeft de nieuwste browsers de laatste tijd...

Wat denken jullie?
Klik om te vergroten...

Nee. In dit geval is het beter van de support voor CSS3 te shimmen voor IE en de native CSS implementatie te gebruiken voor al de rest.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

Problem solved en maximum performance op alle deftige browsers. T is alleen IE tot versie 8 die die selector niet heeft, alle andere browsers hebben het al een eeuwigheid: :target » Learn CSS3 | Cheat Sheet | CSS Tutorial | Selectors | Properties

En als er voor de rest geen Javascript met je siteje gemoeid is steek je jQuery (of het framework dat je wil gebruiken voor Selectivizr) ook in die IE conditional tag die je bij de docs op selectivizr ziet.
t

tghmember

Legacy Member
Ik heb net deze techniek toegepast, wat mij wel opvalt is, de pagina scrollt naar de 'detailsections', waardoor de detailssections vanboven aan de pagina staan. Kan ik ook zorgen dat zo'n A href die naar een #id verwijst, naar de top van de pagina scrollt ipv naar die id?
-

-BVR-

Legacy Member
bealzebub, in plaats van uw sections zou ik articles gebruiken. detail-container kan een section zijn. (En ge gebruikt classes en ID's nogal vreemd door elkaar)
b

bealzebub

Legacy Member
tghmember zei:
Bump, zou dit onderdeel vandaag nog moeten afhebben! :D
Klik om te vergroten...

K dacht wel dat we weer iemands huiswerk aan t doen waren… Vandaag geen tijd om jouw taken af te werken, sorry.

BramVroy zei:
bealzebub, in plaats van uw sections zou ik articles gebruiken. detail-container kan een section zijn. (En ge gebruikt classes en ID's nogal vreemd door elkaar)
Klik om te vergroten...

T was raprap gedaan rechtstreeks in JSFiddle… Maar k zie nie in wat er zo raar aan is: id's voor de targets (omdat dat het doet werken) en op al de rest gewoon classes die wat verduidelijken (ze zijn meestal zelfs overbodig).

Idd, section voor de container en article voor de details is semantisch een pak juister, nie aan gedacht (was met andere dingen bezig… werken bv. :))

Soit, t principe was geillustreerd, da was de enige bedoeling ;)
t

tghmember

Legacy Member
K dacht wel dat we weer iemands huiswerk aan t doen waren… Vandaag geen tijd om jouw taken af te werken, sorry.
Klik om te vergroten...

Huiswerk? Niet echt,
eerder een eigen project waar ik persoonlijke deadlines in stel, en gisteren kon ik even niet verder door de scroll issue. Zou fijn zijn als iemand hiermee kon helpen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan