Archief - JS: alphaCorners - dynamisch afgeronde hoeken

L0|2|23 · 17 jul 2007

SveltestSword zei:
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.

HTML:

<td class="Background" align="center"><div class="Rounded"><a><img /></a><br><div class="Minitext">// 1</div></div></td>

Nee dit is geen bug, dat komt omdat je eigenlijk alleen alphaCorners mag toepassen op block-level elementen (en dat zijn tables/cellen niet). Als je toch tabels wil afronden kan je "display: block;" toepassen op je td's of tables's (afhankelijk van wat je wil afronden). Let wel op, dit verandert mogelijk hoe je tabel eruit ziet (daarom dat ik dit deze 'fix' niet automatisch toepas)!

Zie ook een paar replies hierboven, daarin wordt aangehaald dat het o.a. moeilijk is om <img /> en <input />, die ook niet block-level zijn, elementen af te ronden. De enige manier hierrond is dus die "display: block;", of encapsuleren in een blocklevel element zoals een <div> en dan die div afronden (voorbeeldcode boven).

EDIT

Op www.quirksmode.org/css/display.html vind je meer uitleg, ik ben er nu ik toch even aan het zien was een interessante eigenschap "display: inline-block;" tegengekomen - wat me heel sterk deed denken aan de manier waarop o.a. <input />'s gedisplayed worden. Dit is misschien de manier om toch niet-blocklevel elementen af te ronden. Ondersteuning voor meer types elementen gepland voor v1.6 dus

EDIT2

Op http://godlikenerd.com/weblog/2005/03/24/firefox-inline-block-frustration/ heb ik gevonden dat inline-block nog niet voldoende ondersteuning heeft om te kunnen toepassen. Je kan wel een niet blocklevel element encapsuleren in een display: inline-block/-moz-inline-block/-moz-inline-box; element, maar daarna kan je geen blocklevel elementen meer plaatsen in de parent, waardoor alphaCorners er niet op kan toegepast worden. Firefox 3 zou dit op moeten lossen, maar dat zou dan een browserversiespecifieke fix zijn. Dus we zullen het moeten houden bij <input />'s, <img />'s, <table>'s omsluiten met <div>'s of <span>'s en dan die laatste afronden met alphaCorners.

L0|2|23 · 19 jul 2007

Al een kleine preview voor v1.6: afgeronde elementen zijn vanaf deze versie dynamisch vergrootbaar in alle browsers (ook met borders en hoverstyles). Om een voorbeeldje te geven: je rondt je elementen af met alphaCorners, waarna je mootools/jquery/iets dergelijks gebruikt om die elementen resizable te maken met de muis, en als je dat dan doet zal de achtergrond mooi mee resizen. Dit is een feature die ik nog bij geen enkele andere js oplossing heb gezien.

J-Style · 19 jul 2007

Lovely!!

L0|2|23 · 19 jul 2007

v1.6 gaat een grote release worden, met veel bugfixes en snelheidsverbeteringen. Waarschijnlijk morgen af.

EDIT

Releasedatum is vanaf nu onbepaald, ik ga het wat grootser aanpakken.

PiXeL · 21 jul 2007

Knap werk, JavaScriptjes zijn te gek!

Maak je ook requests?

L0|2|23 · 21 jul 2007

PiXeL zei:
Knap werk, JavaScriptjes zijn te gek!

Maak je ook requests?

Shoot

Bram · 24 jul 2007

oké, probleem.
op www.bramme.net/ama/index2.html zou ik m'n submenu's willen afronden. maar ie wil het niet doen. m'n achtergrond van #nav ul li is gewoon een kleurtje, dus deed ik

Code:

alphaCorners.round('#nav li ul',  5, [0,0,1,1], 'hoverclass');

Zou het kunnen dat alphacorners problemen geeft met dit andere js'je

L0|2|23 · 24 jul 2007

SveltestSword zei:
oké, probleem.
op www.bramme.net/ama/index2.html zou ik m'n submenu's willen afronden. maar ie wil het niet doen. m'n achtergrond van #nav ul li is gewoon een kleurtje, dus deed ik

Code:

alphaCorners.round('#nav li ul', 5, [0,0,1,1], 'hoverclass');

Zou het kunnen dat alphacorners problemen geeft met dit andere js'je

Ik heb met v1.6 een aantal niet-render bugs gefixt. Hoewel v1.6 nog niet af is (het ontwikkelen ervan staat even op hold voor een ander project), kan je het al gebruiken in zijn huidige vorm. Incompatibiliteit met andere scriptjes is haast onmogelijk.
Let wel op, alphaCorners kan alleen toegepast worden op block-level elementen, anders verschijnen de afgeronde hoeken zoiezo niet (gebruik desnoods display:block

. Aangezien je een CSS menu aan het maken bent kan ik aanraden om niet de li's, maar de a's daarin af te ronden door de a's display:block;width:100%;height:100%; te geven.

Link naar gecompresste debug versie 1.6: download.
Link naar developers debug versie 1.6: download.

Huidige changelog v1.6:
* Classbased hovering approach, which means half the amount of div's normally required.
* Rounded elements are now dynamically resizable in every browser!
* Fixed background-color not working for hoverstyles.
* Added a cursor

ointer; fix for hoverstyles in IE (when display:block; was set).
* Reincluded the Holly hack for IE (fixes background not displaying in IE6 behind elements with height:auto

.
* Reduced necessary amount of layers for the non-rounded part of the background, which should slightly increase speed.

Smoerf · 24 jul 2007

Persoonlijk vind ik dit ook geen slecht rounded corner script:
http://www.curvycorners.net

Bram · 25 jul 2007

werkt enkel op div's... en niet op andere block elementen. alphacorners wel!

Lorre: thx voor de hint, maar dan moetek classes beginnen toepassen op alle laatste links die ik wil afronden... da's ook maar mottig...

zou het mogelijk zijn om een js te schrijven dat de laatste link selecteert van een reeks links (bv in een <ul>) en die dan een class toewijst, om die dan te laten afronden?

Smoerf · 25 jul 2007

@SveltestSword

This version also adds a new setting called 'validTags' which allows you to specify what HTML elements can have curvyCorners.

U zei?

(dat het een unsupported feature is doet hier niets terzijde trouwens)

L0|2|23 · 25 jul 2007

SveltestSword zei:
werkt enkel op div's... en niet op andere block elementen. alphacorners wel!

Lorre: thx voor de hint, maar dan moetek classes beginnen toepassen op alle laatste links die ik wil afronden... da's ook maar mottig...

zou het mogelijk zijn om een js te schrijven dat de laatste link selecteert van een reeks links (bv in een <ul>) en die dan een class toewijst, om die dan te laten afronden?

Ja dat is al een aantal versies geleden ingebouwd geweest hoor! alphaCorners bevat een (albeit eenvoudige) selector engine.

'ul#menu li a' zou de gewenste elementen opleveren in jouw geval (gebruik spatie om de selector <kind van> te activeren). Strikt gezien zou ook 'ul#menu a' moeten werken omdat de a's onrechtstreeks ook kind zijn van de ul.

@Smoerf

CurvyCorners was de reden dat ik mijn eigen script heb geschreven:
* CC: ~25kB | aC: ~4kB
* CC: relatief veel code om elementen af te ronden (10+) | aC: één regel code.
* CC: ondersteunt niet alle populaire browsers (check browsercam) | aC: wel
* CC: rond de tien hoeken/sec | aC: honderden/sec (zie dev versie voor perf reports door de versies heen).
* CC: niet unobtrusive - verandert je layout | aC: verandert ogenschijnlijk niets buiten de hoeken.
* CC: wordt al een half jaar niet meer aan gewerkt | aC: actief project met ondersteuning
(* CC: niet OO based | aC: wel - dit alleen vanuit een developers perspectief dan.)

Bram · 15 aug 2007

hoe kan dit nu... ik wil hem voor de derde keer gebruiken en voor de derde keer doet ie het niet

ik wil hem gebruiken op een absoluut gepositioneerde div in een relatief gepositioneerde div met als css

Code:

#descr {
	position: absolute;
	bottom: 15px;
	right: 35px;
	width: 221px;
	height: 81px;
	background: #fff;
	padding: 10px;
	filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
}

L0|2|23 · 16 aug 2007

SveltestSword zei:
hoe kan dit nu... ik wil hem voor de derde keer gebruiken en voor de derde keer doet ie het niet

ik wil hem gebruiken op een absoluut gepositioneerde div in een relatief gepositioneerde div met als css

Code:

#descr { position: absolute; bottom: 15px; right: 35px; width: 221px; height: 81px; background: #fff; padding: 10px; filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75; }

Probeer de onlangs geuploade debugversie eens, hopelijk lukt het daarmee wel. Ik heb net een PM gekregen van iemand die ook meldde dat het niet meer werkt na x elementen af te ronden.

Ik ga alphaCorners binnenkort helemaal recoden met meer features en betere compatibiliteit in zo weinig mogelijk kB, maar ik zit nog even onder het werk bedolven dus je zal nog wat geduld moeten hebben.

Bram · 16 aug 2007

even voor de duidelijkheid, de twee <script>'s gaan toch onder de <style> in de head he?

scratch that, ik heb het probleem gevonden waarom het niet werkt:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Deze encoding wordt automatisch gekozen door Dreamweaver bij mij, maar moet dus vervangen worden door iso-8859-1. Eenmaal ik deze verander werkt alles naar behoren.

Ik heb het nu eens gebruikt in http://bramme.net/ama/index2.html op de submenuutjes... Ik vind het wel iets hebben ^^

L0|2|23 · 16 aug 2007

SveltestSword zei:
even voor de duidelijkheid, de twee <script>'s gaan toch onder de <style> in de head he?

scratch that, ik heb het probleem gevonden waarom het niet werkt:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Deze encoding wordt automatisch gekozen door Dreamweaver bij mij, maar moet dus vervangen worden door iso-8859-1. Eenmaal ik deze verander werkt alles naar behoren.

Ik heb het nu eens gebruikt in http://bramme.net/ama/index2.html op de submenuutjes... Ik vind het wel iets hebben ^^

Ben blij dat je het hebt gevonden. Wel zeer vreemd dat de charset het script beïnvloedt. Noted.

Bram · 18 aug 2007

with pleasure. wa wel vervelend is aan diejen iso encoding is da ge bv ook ë enzo in &; moet zetten.

ik ervaar momenteel wat problemen met safari. zou het kunnen da het in combanitie is met deze css?

Code:

	filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;

de achtergrond kleur verdwijnt gewoon...

oplossing gevonden: tis een bug in de nieuwste versie da ge doorgegeven hebt in post #54. dus even melden dat daar de achtergrond verdwijnt in safari.

edit2: nog een bug gevonden: script werkt enkel als er minstens <style></style> (meer niet, geen type of media ofzo nodig) of een <link type="text/css" rel="stylesheet" href="" /> in de <head></head> staan. zijn ze er niet, doet het script niets.
Komt ook enkel voor in de laatste versie.

L0|2|23 · 18 aug 2007

SveltestSword zei:
with pleasure. wa wel vervelend is aan diejen iso encoding is da ge bv ook ë enzo in &; moet zetten.

ik ervaar momenteel wat problemen met safari. zou het kunnen da het in combanitie is met deze css?

Code:

filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;

de achtergrond kleur verdwijnt gewoon...

oplossing gevonden: tis een bug in de nieuwste versie da ge doorgegeven hebt in post #54. dus even melden dat daar de achtergrond verdwijnt in safari.

edit2: nog een bug gevonden: script werkt enkel als er minstens <style></style> (meer niet, geen type of media ofzo nodig) of een <link type="text/css" rel="stylesheet" href="" /> in de <head></head> staan. zijn ze er niet, doet het script niets.
Komt ook enkel voor in de laatste versie.

Je gaat er wel grondig langs, maar ik apprecieer het wel en zal ze zeker oplossen zodra ik aan de recode begin.

Bram · 18 aug 2007

welja, ik zeg het hier maar omdat ik bugs vond in uw vernieuwde code... dedie die nu online staat werkt perfect en blijf ik dus gebruiken.

L0|2|23 · 21 aug 2007

Note to self: reden voor meta encoding bug -> https://sourceforge.net/forum/forum.php?thread_id=1180412&forum_id=379297

Archief - JS: alphaCorners - dynamisch afgeronde hoeken

L0|2|23

Legacy Member

L0|2|23

Legacy Member

J-Style

Legacy Member

L0|2|23

Legacy Member

PiXeL

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

Smoerf

Legacy Member

Bram

Legacy Member

Smoerf

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member

Bram

Legacy Member

L0|2|23

Legacy Member