[js/css] csshover.htc loslaten op dynamische data - Softwareontwikkeling

donderdag 13 september 2007 14:41

Acties:

Topicstarter

Om de hover pseudo class te kunnen gebruiken in IE6 gebruik ik de welbekende csshover.htc. Nu is deze standaard geattached aan het ondocumentready event.

code:

1	<attach event="ondocumentready" handler="parseStylesheets" />

Mijn probleem is dat de data die op de pagina komt (getoond in een aantal layers onder elkaar die van kleur veranderen als er overheen gehovered wordt) nog niet aanwezig is wanneer het ondocumentready event gefired wordt. Ik trek de data nl. m.b.v. AJAX op de achtergrond binnen (i.v.m. de laadtijd) terwijl ik een 'busy/loading'-gifje laat zien in de "holder" (ook weer een layer) waar de data in vertoond wordt totdat de uiteindelijke data binnengeladen is.

Mijn concrete vraag nu: is het mogelijk om een custom event te firen onder IE6 waaraan ik dan vervolgens de parseStylesheets handler kan koppelen zoals dit in bovenstaande code (op regel 1 van de csshover.htc) gebeurd?

vrijdag 14 september 2007 09:24

Acties:

Rekcor

Voor zover ik het begrepen heb, kun je met een htc een soort javascript aan een element hangen, die niet-gesupportte CSS events emuleert.

Als dat zo is, waarom los je e.e.a. niet gewoon op met Javascript?

vrijdag 14 september 2007 10:03

Acties:

Hardcell

Topicstarter

Omdat het:

1. Een hoop werk is om voor de hover state van elk element 2 javascript functies (1 voor onmouseover en 1 voor onmouseout) te gaan bouwen die deze emuleren.
2. De code er onoverzichtelijker en moeilijker onderhoudbaar op wordt op deze manier.
3. In de toekomst toch alle browsers de hover pseudo-state gaan ondersteunen, het is eigenlijk alleen een 'hack' om IE6 te ondersteunen voor tot die tijd.

In principe doet die htc file wat hij moet doen, alleen op het verkeerde moment (correct me if i'm wrong). Als ik nu zelf een event kan firen (zodra alle data binnen is) en die parseStylesheets() functie hieraan zou kunnen attachen ben ik er toch volgens mij?!'

In firefox lukt het me wel om een custom event te firen:

code:

1
2
3

var event = document.createEvent("Events");
event.initEvent("onPageLoaded", true, true);
document.body.dispatchEvent(event);

Maar helaas vreet IE6 deze code weer niet!!

vrijdag 14 september 2007 11:20

Acties:

Rekcor

De officiele MSDN-reference al bekeken?

http://msdn2.microsoft.com/en-us/library/ms531018.aspx

Methods

createEventObject

Creates an event object that can be used to pass event context information to the PUBLIC:EVENT element's fire method.

detachEvent

Detaches from the event.

fire

Fires the event, given an event object.

fireChange

Notifies the containing document that the value of the property has changed by firing the onpropertychange event on the element.

fireEvent

Fires the event, given a dispatch.

fireEvent

Fires the specified event.

vrijdag 14 september 2007 12:21

Acties:

Hardcell

Topicstarter

Heb ik nu geprobeerd maar dit lijkt niets te doen. Ik weet alleen niet of dit komt omdat het event niet gefired wordt of doordat het attachen niet werkt.

Ik heb de volgende code tussen de <head></head> tags om te testen:

code:

1	<PUBLIC:EVENT NAME="onPageLoaded" ID="plID" />

en in de javascript functie na het laden van de data:

code:

1 2	var oEvent = document.createEventObject(); plID.fire(oEvent);

Er zitten geen fouten in de js (volgens IE6) maar er gebeurd ook niets..

vrijdag 14 september 2007 12:57

Acties:

Rekcor

Als ik naar http://soebam.runningrang...als/csshover/csshover.htc kijk, zie ik gewoon een soort Javascript.

Waarom csshover.htc niet gewoon als jscript geincluded, en dan gewoon de functie parseStylesheets aangeroepen?

vrijdag 14 september 2007 15:31

Acties:

Hardcell

Topicstarter

Is inderdaad javascript in zo'n htc file. Ik ga hem nu ook includen en de parseStylesheets() handmatig aanroepen op alle pagina's.Is een stuk makkelijker dan een event bouwen onder IE.

vrijdag 14 september 2007 16:12

Acties:

SchizoDuckie

Kwaak

Hardcell schreef op vrijdag 14 september 2007 @ 15:31:
Is inderdaad javascript in zo'n htc file. Ik ga hem nu ook includen en de parseStylesheets() handmatig aanroepen op alle pagina's.Is een stuk makkelijker dan een event bouwen onder IE.

En dan ga je die ook in alle andere browsers dan IE elke keer uitvoeren zodat er én een event handler aanzit én een css behavior?

Stop uploading passwords to Github!

vrijdag 14 september 2007 16:22

Acties:

crisp

Devver

Pixelated

De vraag is of het ook echt noodzakelijk is dat je :hover effectjes werken in IE6 (uiteindelijk toch een zwaar verouderde browser met sterk afnemend marktaandeel). Immers praten we hier (neem ik aan) puur over stylistische zaken.

Voor de Tnet frontpage heb ik toendertijd ook overwogen om de csshover.htc in te zetten, maar ik stuitte daarbij al op onoverkomelijke performance problemen en nog een aantal andere zaken die niet of nauwelijks in alle gevallen op te lossen waren. Uiteindelijk heb ik toen besloten om die nifty hover-effectjes voor IE6 dan maar achterwege te laten.

Intentionally left blank

vrijdag 14 september 2007 17:09

Acties:

Rekcor

SchizoDuckie schreef op vrijdag 14 september 2007 @ 16:12:
[...]

En dan ga je die ook in alle andere browsers dan IE elke keer uitvoeren zodat er én een event handler aanzit én een css behavior?

Dit kun je natuurlijk gemakkelijk ondervangen mbv een if (browser is 'IE') then, etc.

vrijdag 14 september 2007 17:27

Acties:

moozzuzz

Rekcor schreef op vrijdag 14 september 2007 @ 17:09:
vloekt onverbeterlijk...

met cond comments hoop ik :^)

maandag 17 september 2007 15:56

Acties:

Hardcell

Topicstarter

moozzuzz schreef op vrijdag 14 september 2007 @ 17:27:
[...]

met cond comments hoop ik :^)

Dit vang ik uiteraard af ja.

crisp schreef op vrijdag 14 september 2007 @ 16:22:
De vraag is of het ook echt noodzakelijk is dat je :hover effectjes werken in IE6 (uiteindelijk toch een zwaar verouderde browser met sterk afnemend marktaandeel). Immers praten we hier (neem ik aan) puur over stylistische zaken.

Voor de Tnet frontpage heb ik toendertijd ook overwogen om de csshover.htc in te zetten, maar ik stuitte daarbij al op onoverkomelijke performance problemen en nog een aantal andere zaken die niet of nauwelijks in alle gevallen op te lossen waren. Uiteindelijk heb ik toen besloten om die nifty hover-effectjes voor IE6 dan maar achterwege te laten.

Ik had de rest van de lay-out al zo ontworpen dat ik het toch te 'scheef' vond gaan uitzien zonder die hover effectjes. Bij Tnet is het voordeel (lijkt mij) dat de meeste gebruikers wel een up-to-date browser hebben. Mijn ervaring is dat onze klanten (voornamelijk pharmaceuten) toch nog vaak IE6 gebruiken en niet te happig zijn om te updaten.

In ieder geval heb ik het nu zo opgelost dat hij in principe die parseStylesheets() in de onload van de body doet (bij IE6 dan) tenzij ik hem anders vertel in een variabele die ik zet voor ik de header include. Ik moet hem in dat geval handmatig aanroepen zodra ik alle gegevens op het scherm heb staan.

maandag 17 september 2007 16:05

Acties:

Rekcor

moozzuzz schreef op vrijdag 14 september 2007 @ 17:27:
[...]

met cond comments hoop ik :^)

?

We hebben het hier toch over javascript?

maandag 17 september 2007 17:26

Acties:

crisp

Devver

Pixelated

Rekcor schreef op maandag 17 september 2007 @ 16:05:
[...]

?

We hebben het hier toch over javascript?

conditional compilation dan

Intentionally left blank