Archief - JS: alphaCorners - dynamisch afgeronde hoeken

Als ik een div een border geef dan maakt alpjaCorners ze mooi rond, maar als ik de border specifieer per zijde (left, right, top, bottom) dan doet hij dit niet .. dan heb ik een hoekige border .. voor de rest wel knap

caoimhin zei:

Als ik een div een border geef dan maakt alpjaCorners ze mooi rond, maar als ik de border specifieer per zijde (left, right, top, bottom) dan doet hij dit niet .. dan heb ik een hoekige border .. voor de rest wel knap

Klik om te vergroten...

Ja het is idd ineens een hele border ofwel geen border . Per-side borders is waarschijnlijk iets dat nooit het levenslicht zal zien in alphaCorners omdat de implementatie enorm veel werk zou vragen en het ook veel van de huidige optimalisaties teniet zou doen (ellipsvormige hoeken kunnen minder gemakkelijk geoptimaliseerd worden voor performance, en ook hoeken waarbij er een kleurovergang moet komen bij de diagonaal zouden voor vertraging zorgen).

Dat doet me denken aan een feature die er nog in een vorige versie in stak: achtergrondafbeeldingen voor de borders. Het zou maar een kleine aanpassing zijn om het er terug in te bouwen, alleen weet ik niet wat de beste manier zou zijn om de gewenste achtergrondimage voor de border in te stellen (autodetect met CSS gaat niet, want die laat geen border-background-image toe). Iemand een voorstel? Weer een nieuwe parameter in de round() functie zou het wel lang maken vind ik, maar wss zit er niets anders op dan dat (vb alphaCorners.round('', x, [], '', 'test.jpg')).

EDIT

Hmm ik heb mss een beter voorstel dan die extra parameter in de round functie: mbv CSS een nieuwe klasse definieren 'border' voor de gewenste elementen, en dan neemt alphaCorners automatisch de juiste opmaak over voor elementen die borders hebben waarvan die klasse 'border' van toepassing op is:

#eersteid .border {
background-image: url(test.jpg);
}
#tweedeid .border {
background-image: url(test2.jpg);
background-repeat: no-repeat;
}

De klasse border wordt dan dus eigenlijk niet gebruikt door de HTML, maar alphaCorners kan ze wel inlezen telkens voor de juiste elementen en dan toepassen op hun respectievelijke borders. Wat denken jullie ervan, goed zo, of nog verbeteringen/suggesties (altijd welkom)?

Ik heb nog een mogelijk probleem ondervonden (als iemand anders het ook eens kan checken zou mooi zijn). Als ik in IE (zowel 6 als 7) een h1 gebruik met een border-bottom en ik pas op één of meerdere divs alphaCorners toe, dan verdwijnt mijn border-bottom van mijn h1 element.

Edit: never mind, heb het na uitvoerig testen nog steeds ook als alphaCorners is uitgeschakeld

caoimhin zei:

Ik heb nog een mogelijk probleem ondervonden (als iemand anders het ook eens kan checken zou mooi zijn). Als ik in IE (zowel 6 als 7) een h1 gebruik met een border-bottom en ik pas op één of meerdere divs alphaCorners toe, dan verdwijnt mijn border-bottom van mijn h1 element.

Edit: never mind, heb het na uitvoerig testen nog steeds ook als alphaCorners is uitgeschakeld

Klik om te vergroten...

Ik heb mijn best gedaan om alphaCorners unobtrusive te maken, en tot nu toe zelf nog geen layout problemen tegengekomen. Als je zelf toch nog iets zou tegenkomen mag je het gerust laten weten, dan probeer ik het wel op te lossen.

Ik ben al weer bezig met een volgend project in mijn reeks alpha_ javascriptjes. Het wordt weer een heel interessante, stay tuned for more!

Ik heb een probleempje in samenwerking met Event.observe (scriptaculous). Als ik bv. een div #login heb met daarin form elementen en ik wil een Event.observe toepassen op één van die form elementen dan werkt dit niet als ik de div #login afgeronde hoeken wil geven met alphacorners.

caoimhin zei:

Ik heb een probleempje in samenwerking met Event.observe (scriptaculous). Als ik bv. een div #login heb met daarin form elementen en ik wil een Event.observe toepassen op één van die form elementen dan werkt dit niet als ik de div #login afgeronde hoeken wil geven met alphacorners.

Klik om te vergroten...

Dat lijkt me vreemd, alphaCorners is namelijk onafhankelijk van andere libs/vars/funcs. Alles is encapsulated in een singleton. Probeer eerst eens of het wel lukt zonder alphaCorners. Als dat het geval is, post dan aub je source hieronder en ik zal het verder proberen te debuggen.

EDIT Ah ik denk dat ik al weet waar dat vandaan zou kunnen komen, kzal morgenavond een nieuwe versie compressen/uploaden, no worries. Bedankt om dit te melden.

EDIT2 Debugversie 1.4 kan je hier vinden: http://laurent.sorber.be/alphacorners/debug/alphacorners.js. Laat me weten of het probleem nu weg is. Denk dat dit wel een van de laatste bugs zal zijn, de changelog wordt alsmaar kleiner.

Ik heb nog steeds het probleem. En als ik alphaCorners.round niet toepas op die bepaalde div dan heb ik het probleem niet.

Laat ik even schetsen wat het probleem is aan de hand van een voorbeeld:


Bij het aanvinken van de checkbox zou dus de verborgen div 'hidden_div' getoond moeten worden. Dat gebeurt niet. Als ik alphaCorners.round niet toepas doet hij dit wel. Voor alle duidelijkheid, alphaCorners wordt goed geladen want de div is weldegelijk afgerond.

caoimhin zei:

Ik heb nog steeds het probleem. En als ik alphaCorners.round niet toepas op die bepaalde div dan heb ik het probleem niet.

Klik om te vergroten...

Kort samengevat gaat de rest van dit gesprek over het feit dat de achtergrond van afgeronde objecten niet mee resizen in IE - dit is door een bug van IE en blijkbaar heeft IE7 er geen last meer van, maar ik blijf onderzoek doen naar IE6.

Ah ok, dat is nog een ander probleem. Om dit te begrijpen moet ik eerst iets uitleggen over IE: alphaCorners verwijdert eigenlijk de bg van het af te ronden element en plaatst er een childdiv in die (op geoptimaliseerde wijze ntk) de afgeronde hoeken zal renderen. Die childdiv heeft als eis dat hij net even groot is als de parent. Vanwege een bug in IE (er is geen fix, ik heb al talloze uren onderzoek gedaan), is het niet mogelijk om een absoluut gepositioneerd element de hoogte/breedte te geven van zijn parent. Daarom dat ik (alleen in het geval van IE) terugval op het meten van het element en de background een vaste hoogte/breedte in pixels geef voor IE. Andere browsers (FF,Opera,Safari,...) hebben hier geen last van. Daarom zal de kader bij de klik event niet open lijken te gaan in IE, maar wel in andere browsers. Maw alphaCorners afgeronde hoeken zijn in alle browsers buiten IE resizable.

Nu een constructieve oplossing voor uw probleem: ik zou proberen om het met twee achtergronden te werken (een voor de opengeklapte versie, een voor de gesloten). Een alternatief is de afgeronde hoeken als twee balken langs boven en onder de kader te maken, en dan de openklapbare content daartussen in een niet-afgeronde div. Ik begrijp echter dat dit later nog gewenste functionaliteit zal worden, en zal verder onderzoek blijven doen naar de bug in IE. Als het moet zal ben ik zelfs bereid een radicaal andere oplossing te zoeken.

Nog een opmerking: ik zie dat je alphaCorners.round toepast bij window.onload. Dit zal alphaCorners doen *vertragen*. Het script is slim genoeg om uit zichzelf voor window.onload al data te beginnen processen, je hoeft dus alleen maar alphaCorners.round aan te roepen en de rest wordt voor je gedaan op de snelst mogelijke manier.

EDIT Ik heb gemerkt dat IE7 geen last meer heeft van deze bug, ik ben nu code aant compressen en zal sevves de link posten naar de geupdate v1.4 die dus alleszins voor alle browsers buiten IE6 of lager het gewenste resultaat oplevert. Link: http://laurent.sorber.be/alphacorners/debug/alphacorners.js

EDIT2 Dus even kort samenvatten, de doelstellingen voor v1.4 zijn:
* Resizable bg support uitbreiden naar IE6.
* Wat code optimizen en terug onder 4kB (huidige release is 4.03kB )

Ik heb de nieuwe versie gedownload en heb nog steeds dit probleem in alle browsers (IE6, IE7, Firefox en Opera).

En de reden dat ik alphaCorners.round toepas met een window.onload is omdat ik soms JavaScript errors kreeg als ik het niet deed. Vooral bij een page refresh kon het gebeuren dat hij zogezegd de div die hij moest afronden niet vond. Nadat ik dat in een Event.observe heb gestoken had ik dat probleem niet meer.

caoimhin zei:

Ik heb de nieuwe versie gedownload en heb nog steeds dit probleem in alle browsers (IE6, IE7, Firefox en Opera).

En de reden dat ik alphaCorners.round toepas met een window.onload is omdat ik soms JavaScript errors kreeg als ik het niet deed. Vooral bij een page refresh kon het gebeuren dat hij zogezegd de div die hij moest afronden niet vond. Nadat ik dat in een Event.observe heb gestoken had ik dat probleem niet meer.

Klik om te vergroten...

Tiens, kunt gij uw code eens doorsturen via mail/pm? Want het is nogal moeilijk debuggen zo voor mij

Ik heb het probleem gevonden Het ligt aan het feit dat ik alphaCorners.round in een Event.observe steek. Als ik dit niet doe dan werkt het wel zoals het hoort. Zal dus wss de alphaCorners.round niet toepassen aangezien het bij het vernieuwen (dus effectief op F5 duwen) soms (heel af en toe maar ja ..) JavaScript errors genereert.

En nu is het helemaal opgelost :applause:

Gewoon de alphaCorners.round onderaan de pagina laden (net voor </body>) EN de Event.observes aanmaken NA het laden van alphaCorners.round. En dan werkt alles zoals het hoort (ook na veel refreshen). Alvast bedankt voor de hulp

Even melden dat je script ook op www.hasseltlokaal.be gebruikt wordt


Mss dat je die site als reclame kan gebruiken of zo, dunno

BloodSeaker zei:

Even melden dat je script ook op www.hasseltlokaal.be gebruikt wordt


Mss dat je die site als reclame kan gebruiken of zo, dunno

Klik om te vergroten...

Misschien later, ik ga deze zomer werken aan mijn eigen site en dan kan ik toch al één referentie zetten naar het gebruik van mijn scripts. Mooie site btw (nee, niet omdat het alphaCorners gebruikt, ik vind het gewoon veel beter dan de gemiddelde sitecheck op het subforum hier).

Nieuwste debugversie (v1.4a)
http://laurent.sorber.be/alphacorners/debug/alphacorners.js

Huidige changelog (v1.4a)
* Fixed overwriting of hoverevents.
* Improved onDOMReady reliability and speed significantly (which is beneficial for loading alphaCorners).
* Rounded objects are now also dynamically resizable in IE7 (only support for IE6 is lacking).
* Decreased chance of other possible inter-script conflicts by reducing the number of added props for rounded objects to one (namely object.alphaCorners).

Nog gepland voor v1.4
* Resizability van afgeronde objecten uitbreiden naar IE6.
* Terug onder 4kB (huidig: 4.25kB).

UPDATE 29-05

Het is me gelukt om de odd/even 1px bug in IE te omzeilen (was niet gemakkelijk), waardoor afgeronde objecten nu dynamisch vergroot/kleinbaar zijn in alle browsers. Door een andere IE bug echter, waarbij child elementen met width/height 100% niet de grootte van hun parent aannemen als die parent een border heeft ingesteld, is in het geval van afgeronde borders in combinatie met IE geen dynamische vergroot/kleinbaarheid beschikbaar.

v1.4 is nu beschikbaar!

Changelog

• Hoverevents worden nu toegevoegd ipv in beslag genomen.
• De hoverattachment is nu geschreven mbv bubbling, wat de responsiviteit zeer ten goede komt en waardoor flicker verwijderd is in IE.
• onDOMReady is nu herschreven zoals het hoort voor verbeterde stabiliteit (ten koste van bytes, naar aanleiding van caoimhins sporadische js errors).
• Afgeronde objecten zijn nu in alle browsers dynamisch vergrootbaar (noot: als er afgeronde borders te pas bij komen zal het echter nog steeds niet mogelijk zijn in IE).
• Kans op andere inter-script problemen verkleind door minimaliseren van toegevoegde props aan afgeronde objecten.
• Nog een aantal kleine bugs gefixed.
• De voorgaande verbeteringen waren helaas ten koste van wat bytes, ik heb mijn best gedaan om dit tot een minimum te beperken en heb de uiteindelijke release terug kunnen brengen naar 4.21kB.

Kleine update:

Wat getweaked aan de code en de filesize verder terug kunnen brengen tot 4.19kB. Wie het kleine niet eert ... Het blijft wel onder v1.4 staan, dus als je nu nog een 'oudere' v1.4 gebruikt kan je eventueel upgraden naar deze

UPDATE 15-06

Als je nu nog een oudere versie gebruikt raad ik je sterk aan te upgraden naar v1.5, er zijn enkele grondige aanpassingen gebeurd aan de onDOMReady functie!

v1.5 is nu beschikbaar!

Changelog

• Uit verder onderzoek naar onDOMReady deed blijken dat Opera's ondersteuning voor de "DOMContentLoaded" niet voldeed aan mijn verwachtingen. Daarbij zat er ook nog een bug in de functie waardoor Safari niet altijd laadde. Beide bugs zijn nu gefixt.
• De filesize verder terug kunnen brengen tot 4.09kB.
• Een aantal kleinere stabiliteitsverbeteringen.

oké.

Ik heb een tabelcel met daarin een image. De totale achtergrond is zwart, de cel z'n achtergrond is grijs, en in de cel staat een thumbnail met een nummertje bij (welke foto het is), maar als ik nu die td een class meegeef en hem wil afronden dan is m'n pagina naar de haaien...

doe ik iets fout of is dit een bugje?

edit: de tabelcel had al een class, .Background (echter ook toegpast op andere cellen die niet afgerond moeten worden) nu heb ik een tweede class toegevoegd .Rounded en probeer ik die af te ronden via alphacorners. M'n pagina is nu wel terug (eerst zag ik alleen het grijs van de tabelcel en de laatste afbeelding), maar nu is m'n cel achtergrond precies weg.

edit 2: geprobeerd om een div in m'n cel te steken die afgerond wordt en de achtergrond aan de div te geven ipv de cel. maar vanaf ik dit doe, verdwijnt de achtergrond weer.