Archief - JS: alphaCorners - dynamisch afgeronde hoeken

L0|2|23 · 11 mei 2007

Een tijdje geleden deelde ik jullie mijn javascript compressor alphaCompressor mee.

Deze keer is het de beurt aan alphaCorners. Dit script generereert voor elementen die je selecteert automatisch afgeronde hoeken.

Ik ben een aantal maanden geleden aan dit project begonnen omdat de toenmalige mogelijkheden me niet zinden, ofwel te traag, ofwel bloated, ofwel te weinig mogelijkheden. alphaCorners probeert een oplossing te bieden voor al die problemen.

Sinds vandaag is v1.2 af, en heb ik beslist dat het ver genoeg gevordert is om met jullie te delen. Het wordt uitgegeven onder de GNU GPL licentie, dus doe ermee wat je wil zolang je de aangepaste source ook vrij geeft.

Demo pagina

http://laurent.sorber.be/alphacorners/

Update

Leviathan haalt een goed punt aan (zie onder). De volgende versie zal niet-containertype elementen (bv. <img /> en <input />) rechtstreeks afronden. Als je die elementen op dit moment toch wil afronden, lees dan mijn reply post hieronder voor een oplossing.

Features

Klein: slechts 4kB.
Snel: rendert honderden hoeken/sec.
Heel eenvoudig te gebruiken (zie onder).
True anti-aliasing (kan uitgezet worden).
Unobtrusive js - verandert je layout niet!
Degradeert gracieus in oudere browsers.
Ondersteunt Internet Explorer 6+, Firefox 1.5+, Opera 8.5+, Safari 1.2+, Mozilla 1.6+, Camino 1.0+, Netscape 6.2+.

Gebruik

Code:

// Include the alphacorners javascript:
<script type="text/javascript" src="alphacorners.js"></script>

<script type="text/javascript">
	// alphaCorners.antialias = false; // Uncomment deze regel om antialiasing uit te zetten.
	alphaCorners.round('.classname a', 20); // Rond alle anchors af die kind zijn van elementen van de klasse 'classname' met hoeken met een straal van 20px.
	alphaCorners.round('#idname p a',  20, [1,1,1,0], 'hoverclass'); // De zuidwestelijke hoek wordt niet afgerond en de klasse 'hoverclass' wordt toegepast op de geselecteerde elementen tijdens de mouseover event.
</script>

Bram · 12 mei 2007

Maar dat is nu eens een mooie oplossing...

ziet er zeer zeer goed uit, thx a bunch!

L0|2|23 · 12 mei 2007

Thanks, als nog iemand van plan is alphaCorners te gebruiken zou je me een plezier doen door even te replyen waar je hem gebruikt :woohoo:

[AiR] LeViaTHaN · 12 mei 2007

Geweldige oplossing bedankt!!!
Als dit script button corners kan geven dan ben ik tevreden

[edit]
Mis ik nog iets want ik krijg een foutmelding dat alphaCorners niet gevonden kan worden. Het script staat ook vol rare tekens

L0|2|23 · 12 mei 2007

[AiR] LeViaTHaN;8607432 zei:
Geweldige oplossing bedankt!!!
Als dit script button corners kan geven dan ben ik tevreden

[edit]
Mis ik nog iets want ik krijg een foutmelding dat alphaCorners niet gevonden kan worden. Het script staat ook vol rare tekens

Antwoord: het is mogelijk, maar niet rechtstreeks (omdat de manier waarop dit script werkt een geldige container eist en een <input /> is dat dus niet).

Wat je dan moet doen is de input omsluiten met een <div> en dan 'form div' selecteren om af te ronden. Je mag wel niet vergeten de backgroundstyle van inputbuttons te verwijderen met css.

Code:

alphaCorners.round('form div', 20, [1,1,1,1], 'buttonhover');
...
<form>
  ...
  <div><input type="submit" /></div>
</form>

Een naar mijn mening betere oplossing houdt in dat je ipv een input element gewoon een <a> element gebruikt van een bepaalde klasse, die bij een clickevent het form submit (zo heb je een mooi handje als je erover hovert).

Code:

alphaCorners.round('.submit', 20, [1,1,1,1], 'ahover');
...
<form name="myForm">
  ...
  <a class="submit" href="javascript:document.myForm.submit();">Submit!</a>
</form>

alphaCorners ondersteunt in alle gevallen ook borders, je kan je button dus een meer afgelijnde look geven (valt wat meer op).

EDIT:

Ik zal in een volgende versie een uitzondering maken voor noncontainer-elementen, zodat mijn voorgestelde 'hack' niet gebruikt moet worden en het voor je gedaan wordt.

LunchBox · 12 mei 2007

lijkt me interessant, ik zal het zeker eens door ons webteam onder de loep laten nemen en iets laten weten als de feedback positief is.

Xavez · 12 mei 2007

Amai, in vergelijking met vorige rounded corners javascriptjes, is dit inderdaad verschrikkelijk klein en snel! Chapeau

. Ik ga het eens uitvoerig testen

.

dJeez · 12 mei 2007

En nu maar hopen dat CSS3 nog niet voor morgen is - anders heb je al die moeite voor niks gedaan

. Mooi werk btw.

L0|2|23 · 12 mei 2007

dJeez zei:
En nu maar hopen dat CSS3 nog niet voor morgen is - anders heb je al die moeite voor niks gedaan . Mooi werk btw.

Heh, ja had er ook al van gelezen, maar eer dat webdevs ervan uit mogen gaan dat iedereen van een CSS3 compliant browser gebruik maakt, zijn we al wel weer een paar jaar verder (bv IE8 komt pas binnen een jaar of anderhalf, en dan heb je nog een overgangsperiode ntk). Ik vertel je natuurlijk niets dat je nog niet wist, maar dan heb ik het toch gezegd

L0|2|23 · 13 mei 2007

Als iemand geinteresseerd zou zijn om mij te helpen noncontaintertype elementen af te ronden en iets van CSS weet (javascript is niet nodig), lees dan het onderstaande:

Met <span> omsluiten, en daarin de afgeronde achtergrond steken:
Als ik de <input> bv omsluit door een <span>, is de <span> mooi dezelfde grootte als de input, helaas ondersteunt <span> (eigenlijk eender welk inline element) geen margin-top of -bottom, waardoor de paginalayout verandert indien de <input> margins had ingesteld (en layout moet onveranderd blijven).

Met <div> omsluiten, en daarin de afgeronde achtergrond steken:
Als ik de <input> omsluit met een blocklevel element zoals een <div>, kan je natuurlijk wel margins overnemen van de <input>, maar een blocklevel element z'n breedte is altijd gelijk aan de beschikbare breedte, dus de breedte van de parent (meestal <body>). Daarbij komt ook elke nieuwe <div> onder elkaar te staan, terwijl inputs meer inlineachtig zijn.
Een mogelijke oplossing voor het gebruik van divs is ze float:left; meegeven, dat zet ze niet alleen naast elkaar maar maakt ze ook even breed als hun inhoud. Een probleem dat daarbij opduikt is dat volgende inline elementen naast de div terechtkomen (die kan je dan weer clear:left gaan proberen mee te geven, maar dit verandert toch de layout...).

Wat ik nodig heb is een element dat verticale margins toelaat en toch inline is, zoals een <input> eigenlijk, maar dan eentje die container-type is. Of een gelijkwaardig alternatief mbv CSS, iemand?

EDIT

Ik heb reeds een deel van de oplossing gevonden:

Code:

<input type="text" />

->wordt->

<table style="border-collapse: collapse;">
	<tr><td style="padding: 0px;">
		<input type="text" />
	</td></tr>
</table>

Dit heeft als effect dat de <input> mooi omsloten wordt door de <table> en die laat wel degelijk verticale margins toe (het is een rare blocklevel element). Het enige dat hieraan ontbreekt is dat tables niet naast elkaar verschijnen op een regel. Ik denk niet dat float:left; een oplossing biedt want zelfs met clear:left; op het element dat erna komt krijg je opmaak problemen.

Bram · 13 mei 2007

http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

kan misschien handig zijn?

hier pas je een class toe aan een span waarna javascript de tekst in die span in een blockquote zet?
mss kan je je script ook zo maken dat je een input gewoon een class moet meegeven, waarna het javascript dit zo procest en er zelf een <div> of whatever rond zet...

L0|2|23 · 13 mei 2007

SveltestSword zei:
http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

kan misschien handig zijn?

hier pas je een class toe aan een span waarna javascript de tekst in die span in een blockquote zet?
mss kan je je script ook zo maken dat je een input gewoon een class moet meegeven, waarna het javascript dit zo procest en er zelf een <div> of whatever rond zet...

Bedankt

, zal er vanmiddag eens naar zien.

EDIT

Het is niet zozeer de manier waarop waarmee ik problemen heb, maar de verandering van layout die het omsluiten van <input> met een <div> of <span> teweeg brengt - die wil ik namelijk niet. Kheb even getest met blockquotes, maar het zijn dezelfde soort elementen als divs, blocklevel dus. Table is een speciaal geval van een blocklevel element, het neemt niet de beschikbare ruimte in.

Bram · 13 mei 2007

<span> nen display: block; meegeven? of gaat em dan automatisch de volle breedte inpakken? nee toch?

Boddah · 13 mei 2007

ik heb al CSS oplossingen gezien voor afgeronde hoeken. waarom is deze beter? (gewoon een vraag, geen sarcastisch antwoord hoor)

Xavez · 13 mei 2007

Het is kleiner en sneller dan andere scripts

. Ik ken er feitelijk wel maar twee:

* http://www.html.it/articoli/niftycube/index.html
* http://www.curvycorners.net/

/edit: :doh: CSS oplossingen, my mistake. Maar goed, zie post beneden

.

L0|2|23 · 13 mei 2007

Boddah zei:
ik heb al CSS oplossingen gezien voor afgeronde hoeken. waarom is deze beter? (gewoon een vraag, geen sarcastisch antwoord hoor)

Verschillende redenen:

Met CSS divs moet je al je html pagina's aanpassen elke keer je de hoeken van stijl wil veranderen.
Grotere hoeken met CSS maakt je html source en ook je CSS heel cluttered.
Dit werkt ook voor afbeeldingen, en ondersteunt ook borders en hover-styles.
Dit doet ook true anti-aliasing.
Dit doet het voor al je elementen met 1 regeltje code en een verwijzing naar een .js, een heel verschil met zo'n hele hoop divs copypasten en dan nog de CSS.

In kort komt het erop neer dat deze .js hetzelfde doet als CSS rounded corners, alleen genereert alphaCorners de divs en CSS pas als je ze nodig hebt en hoef je je pagina's er dus nooit manueel mee aan te passen. Dynamisch (zie titel) vs. statisch dus.

L0|2|23 · 13 mei 2007

SveltestSword zei:
<span> nen display: block; meegeven? of gaat em dan automatisch de volle breedte inpakken? nee toch?

-> Helaas wel, alle blocklevel elementen (buiten table - speciaal geval) nemen de volledig beschikbare breedte in tenzij anders gespecifieerd in de css.
-> Inline elementen wrappen zich rond hun breedste kind, maar hebben geen margin-top of margin-bottom.

Het probleem is dat een input tegelijk blocklevel en inline is, waardoor je het met geen enkel ander element kan omsluiten zodat de opmaak bewaard blijft. Misschien dat het met table lukt, maar ik zou er alleszins niet op rekenen. De huidige oplossing voegt trouwes 0.5kB toe aan het script, en dat vind ik persoonlijk enorm veel, zeker als je weet dat de gebruiker het eigenlijk zelf manueel kan oplossen met een paar bytes meer html.

Het ziet er dus niet naar uit dat ik noncontainertype elementen ga ondersteunen met alphaCorners (aangezien het manueel mogelijk is met veel minder code), tenzij de vraag naar die feature groot genoeg is.

Smoerf · 13 mei 2007

Heb je script nog niet bekeken, maar hier is d'r nog eentje voor rounded corners:

http://www.schillmania.com/projects/dialog2/

L0|2|23 · 13 mei 2007

Smoerf zei:
Heb je script nog niet bekeken, maar hier is d'r nog eentje voor rounded corners:

http://www.schillmania.com/projects/dialog2/

Dat is dus een goed voorbeeld van een statische CSS oplossing. Ofwel moet je manueel veel divs aanmaken, ofwel vereisen ze - zoals deze - een reeds voorgemaakte afgeronde hoek uit ps. Dit alles probeer ik met alphaCorners te vermijden. Ik heb zelf al duizenden varianten gezien ondertussen en de naar mijn mening beste twee tegenhangers heeft Xavez hierboven al gepost.

L0|2|23 · 17 mei 2007

UPDATE 17-05

v1.3 is nu beschikbaar!

Changelog

Ondersteuning voor 'background-repeat'.
De CSS selector is uitgebreid, je kan nu bij het opgeven van een klasse ook nog eens de tagname specifieren (vb: 'span.testklasse').
Nog steeds niet de magische grens van 4kB overschreden

Onvermelde feature

alphaCorners neemt automatisch adhv je CSS de volgende opmaakstijlen over:
background-color, background-image, background-repeat, border-color, border-width en ook hover styles.

Gevraagde features

Wil je dat alphaCorners nog beter wordt, post dan je gewenste feature(s) hieronder en ik zal zien of ik ze kan implementeren!

Archief - JS: alphaCorners - dynamisch afgeronde hoeken

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

[AiR] LeViaTHaN

Legacy Member

L0|2|23

Legacy Member

LunchBox

Legacy Member

Xavez

Legacy Member

dJeez

Legacy Member

L0|2|23

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

Boddah

Legacy Member

Xavez

Legacy Member

L0|2|23

Legacy Member

L0|2|23

Legacy Member

Smoerf

Legacy Member

L0|2|23

Legacy Member

L0|2|23

Legacy Member