[JS events] kan ik een onresize event op een DIV plaatsen

[Mitrilvich]

Iedereen kent wel die leuke schaduw effecten die nog wel eens te zien is bij een aantal leuke websites. Vrijwel iedere website die zo'n dergelijk schaduw effect heeft, heeft dat gemaakt door het in photoshop (of gimp) te generen en dan slim uit te knippen en te plaatsen in een DIV of iets dergelijks. Zelf heb ik dat ook een paar keer gedaan, maar ergens vind ik dat geen structurele oplossing aangezien per site weer opnieuw die shadow effecten getekend moeten worden in je favoriete foto-editor.

Ik ben zelf geen designer, maar meer een programmeur. Ik speel graag met prototype en scriptaculous en het ligt dan dus ook voor de hand (voor mij) dat ik daarin een oplossing zoek. In IE is er een filter (CSS attribuut) om een schaduw te generen, maar enkel IE is natuurlijk niet genoeg. Er zijn tal van shaduw scripts (JS) te vinden maar vaak maken ze alsnog gebruik van plaatjes of genereren ze geen mooie schaduwen (ja, ik ben kieskeurig ) zie:
http://www.tastypopsicle.com/dropshadow/
http://ajaxian.com/archiv...p-shadows-with-javascript
http://www.ruzee.com/blog/shadedborder (cross-browser problemen)
http://www.mindsack.com/uxe/shadows/

Dus... ben ik zelf maar gaan klussen met JS en dat lukt best wel aardig op een paar probleempjes na:
1. Hij crasht in IE (nieuw bug in IE ofzo?)
2 De shaduw wordt toegepast op een div element. Wanneer dat div element van grote verandert, moet de schaduw natuurlijk volgen. Hiervoor wil ik een 'onresize' event aan dat div element koppelen die dan opnieuw de shadow goed zet.

Bij punt 1 heb ik nog geen idee hoe ik dat op moet lossen (een browser hoort toch niet door JS te kunnen crashen?)
Punt 2, in IE kan ik wel met prototype een event aan een div koppelen, maar dit werkt weer niet in firefox.

Mijn vraag ligt voornamelijk bij punt 2, hoe kan ik een 'onresize' event aan een div koppelen?

linkje, IE gebruikers op eigen risico (en de rest ook )!
http://devbox.nl/got/20070331/shadow/
De relevante JS vind je hier:
http://devbox.nl/got/20070331/shadow/js/shadow/shadow.js


ps.
Het is laat, dus de typo's haal ik er morgen wel uit.

[ Voor 3% gewijzigd door Mitrilvich op 01-04-2007 11:12 . Reden: Toevoegen van link naar hudige JS ]

[Blaise]

Bij punt 1 heb ik nog geen idee hoe ik dat op moet lossen (een browser hoort toch niet door JS te kunnen crashen?)

Zou niet horen nee, maar gebeurt vaak genoeg. Bij mij crasht IE overigens niet.

Mijn vraag ligt voornamelijk bij punt 2, hoe kan ik een 'onresize' event aan een div koppelen?

Je huidige schaduw script werkt door de hoogte van een element op te vragen en vervolgens daarachter een schaduw te plaatsen.

Als de div kleiner of groter wordt d.m.v. Javascript (toggle) bestaat er ergens een functie die recursief de nieuwe hoogte en breedte instelt van dat element. Daar kan je instellen dat dan ook de schaduw opnieuw moet worden berekend door Effect.RecalcDrowShadows() aan te roepen.

Je zou ook om de X tijd kunnen checken of de dimensies van een element zijn veranderd, maar dat is omslachtig en traag.

Ik vrees echter dat als je de animatie én schaduw realtime berekent, dat veel te zwaar is voor een browser, waardoor de animatie niet vloeiend verloopt. Een CSS-only oplossing voor de schaduw zou dan beter zijn.

[Mitrilvich]

Blaise schreef op zondag 01 april 2007 @ 04:31:
[...]
Zou niet horen nee, maar gebeurt vaak genoeg. Bij mij crasht IE overigens niet.

Ik had al ergens een vermoeden dat dat misschien aan mijn computer zou liggen, ff kijken of ik IE hier kan fixen

[...]
Je huidige schaduw script werkt door de hoogte van een element op te vragen en vervolgens daarachter een schaduw te plaatsen.

Als de div kleiner of groter wordt d.m.v. Javascript (toggle) bestaat er ergens een functie die recursief de nieuwe hoogte en breedte instelt van dat element. Daar kan je instellen dat dan ook de schaduw opnieuw moet worden berekend door Effect.RecalcDrowShadows() aan te roepen.

Indien de inhoud van een containing-blok groter wordt, wordt het containing blok ook automatisch groter (een aantal uitzonderingen daargelaten. Dit betekend dus dat het toggle scriptje zich niet de hele DOM-tree ophoog werkt om alle elementen onderweg ook de vergroten/verkleinen.

Ik heb gedacht een het declareren van een globaal event die alle animatie moeten triggeren en waar alle schaduwen zich op moeten aanmelden, maar hierbij moet de originele scriptaculous bibliotheek aangepast worden. Omdat ik deze wil kunnen updaten (naar nieuwere versies met nieuwe goodies erin ) wil ik deze zo origineel mogelijk houden.

Je zou ook om de X tijd kunnen checken of de dimensies van een element zijn veranderd, maar dat is omslachtig en traag.

Ik had de code zo geschreven deze alleen de schaduws aanpast waarvan het relevante div-element in afmetingen is veranderd om de overhead met dit trucje zo klein mogelijk te houden. Dit werkt best wel goed in beide browsers, zelf bij de hogere (25 hz) refreshrates, maar netjes is anders

Ik vrees echter dat als je de animatie én schaduw realtime berekent, dat veel te zwaar is voor een browser, waardoor de animatie niet vloeiend verloopt. Een CSS-only oplossing voor de schaduw zou dan beter zijn.

Idd, een CSS-only oplossing zou het mooiste zijn, helaas lukt dat alleen nog maar bij IE.

Ik heb er nu ook een checkbox bij gezet om te laten zien dat het periodiek updaten werkt en een achtergrond toegevoegd om de transparantie van de schaduw te laten zien.

[Mitrilvich]

Heeft er echt niemand een idee hoe ik een 'onresize' event in firefox af kan vangen?
In IE kan ik namelijk wel hetvolgende registreren:

code: javascript/prototype

var divEl = $('div_element_id');
Event.observe(divEl, 'resize', function(event) { alert('Hij is veranderd!'); })

Maar dit werkt helaas niet in IE firefox

edit: foutje in voorbeeld code

[ Voor 19% gewijzigd door Mitrilvich op 03-04-2007 22:11 ]

[b19a]

Waarom hang je niet een eventhandler voor resize aan je window? Dan kun je in je eigen code vervolgens alle schaduwen opnieuw laten renderen (mochten ze geresized zijn).

[Mitrilvich]

BoukeHaarsma schreef op dinsdag 03 april 2007 @ 16:52:
Waarom hang je niet een eventhandler voor resize aan je window? Dan kun je in je eigen code vervolgens alle schaduwen opnieuw laten renderen (mochten ze geresized zijn).

Het 'onresize' event van het window kan idd wel opgevangen worden, maar deze gaat alleen 'af' wanneer het gehele venster resized. Ik zoek een manier om een event af te vangen wanneer een DIV-element resized.
Dit resizen van een DIV gebeurt in mijn geval vaak door javascript (AJAX) en niet het resizen van het complete venster. Anders zou dat idd een goede oplossing zijn .

[Verwijderd]

uhh als je een call doet naar je event voor het resizen van je div kun je toch ook de event voor de resizing voor je shadow aanroepen... nee nog beter 1 call die het allebei afvangt.

En wat ik even niet snap is wat doet ajax met die resize actie dan....of is dat alleen laden van de inhoud van de div