[html, css, js] met font tags :) #27

woensdag 8 augustus 2012 @ 14:23:23 #121

Catch22-

Ben je Blind?!

Less

1
2
3
4
5
6
7
8
9
10
11

.turnAnimation() {
      from { .transform3dAni(rotateY(0deg)); }
      to {
          .transform3dAni(rotateY(180deg));
      }
}

@-webkit-keyframes turnAnimation { .turnAnimation; }
@-moz-keyframes turnAnimation { .turnAnimation; }
@-o-keyframes turnAnimation { .turnAnimation; }
@keyframes turnAnimation { .turnAnimation; }

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

@-webkit-keyframes turnAnimation {
  from {
    -webkit-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    -o-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
  to {
    -webkit-transform: rotatey(180deg);
    -moz-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
  }
}
@-moz-keyframes turnAnimation {
  from {
    -webkit-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    -o-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
  to {
    -webkit-transform: rotatey(180deg);
    -moz-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
  }
}
@-o-keyframes turnAnimation {
  from {
    -webkit-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    -o-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
  to {
    -webkit-transform: rotatey(180deg);
    -moz-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
  }
}
@keyframes turnAnimation {
  from {
    -webkit-transform: rotatey(0deg);
    -moz-transform: rotatey(0deg);
    -o-transform: rotatey(0deg);
    transform: rotatey(0deg);
  }
  to {
    -webkit-transform: rotatey(180deg);
    -moz-transform: rotatey(180deg);
    -o-transform: rotatey(180deg);
    transform: rotatey(180deg);
  }
}

niet helemaal optimaal, maar het wordt wel geminimized door de parser dusja

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 8 augustus 2012 @ 14:24:10 #122

FastFox91

Sluw

quote:
Op woensdag 8 augustus 2012 14:16 schreef Catch22- het volgende:
Less Winless

CSS3 zonder LESS (Of Sass of een andere preprocessor) is gewoon _niet_ te doen

Is LESS zoiets als coffeescript, maar dan voor css en wordt gewoon lokaal (voor de developer) 'geconverteerd' en dan .css naar de client gestuurd of wordt het client-side geconverteerd?

woensdag 8 augustus 2012 @ 14:25:51 #123

Catch22-

Ben je Blind?!

Kan je zelf voor kiezen.

Ik gebruik nu WinLESS, dat is een app die bij elke wijziging de outputcss bijwerkt, maar je hebt ook een versie voor .Net en Java die het parsed. Er is ook een javascript parser. Je kan dus zelf kiezen wat je wil.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 8 augustus 2012 @ 14:34:55 #124

n8n

Pragmatisch

http://prefixmycss.com ultrahandig

laat maar, er was ook een .js dat het in de browser deed zodat je enkel de css niet hoeft te updaten als een browser geen prefix meer nodig heeft

“Specialization is for insects”.—Robert Heinlein

woensdag 8 augustus 2012 @ 14:43:53 #125

Catch22-

Ben je Blind?!

Als je LESS gebruikt kan je mixins schrijven die dit voor je doen. Je hebt bijvoorbeeld 3L (Lots of Love for Less), dat een soort toolbox is met allerlei tools/mixins voor LESS

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 8 augustus 2012 @ 14:57:33 #126

n8n

Pragmatisch

quote:
Op woensdag 8 augustus 2012 14:43 schreef Catch22- het volgende:
Als je LESS gebruikt kan je mixins schrijven die dit voor je doen. Je hebt bijvoorbeeld 3L (Lots of Love for Less), dat een soort toolbox is met allerlei tools/mixins voor LESS

ga er nog een keer naar kijken. probeer mn css nu zo veel mogelijk DRY te schrijven maar dat is soms onmogelijk. bijvoorbeeld als je een kleur ergens zowel als achtergrond en rand wil gebruiken. Komt het er toch op neer dat 2x dezelfde kleurcode in je css staat.

“Specialization is for insects”.—Robert Heinlein

woensdag 8 augustus 2012 @ 14:57:55 #127

Catch22-

Ben je Blind?!

Met LESS kan je variabelen gebruiken

Het principe: http://lesscss.org/
De win compiler: http://winless.org/ (als je niet onder windows draait moet je 1 zoeken voor je OS)
Het "framework/toolbox": http://mateuszkocz.github.com/3l/

als je vragen hebt, geef maar een gil

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 8 augustus 2012 @ 15:01:00 #128

n8n

Pragmatisch

quote:
Op woensdag 8 augustus 2012 14:57 schreef Catch22- het volgende:
Met LESS kan je variabelen gebruiken

Het principe: http://lesscss.org/
De win compiler: http://winless.org/ (als je niet onder windows draait moet je 1 zoeken voor je OS)
Het "framework/toolbox": http://mateuszkocz.github.com/3l/

als je vragen hebt, geef maar een gil

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

dit is wel baas

en bedankt ik onthoud het

“Specialization is for insects”.—Robert Heinlein

woensdag 8 augustus 2012 @ 15:05:26 #129

Catch22-

Ben je Blind?!

of bijvoorbeeld

@nice-blue: #5B83AD;
@light-blue: darken(@nice-blue, 20%);

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 8 augustus 2012 @ 21:38:19 #130

FastFox91

Sluw

Vorige week heb ik even gespeeld met Knockoutjs, maar was uiteindelijk te uitgebreid voor wat ik wilde en kon zelfs iets niet wat ik wel handig vond. Uiteindelijk heb ik zelf dus iets geschreven. JSBind. Probeer de demo en laat weten wat je ervan vindt aub.

Met dit scriptje kan je gemakkelijk in javascript variabelen veranderen en vervolgens worden de gekoppelde html elementen ook netjes geüpdatet en visa versa.

_{(Code is niet erg leesbaar, zal ik verbeteren mocht het gebruikt worden door meerdere mensen.)}

[ Bericht 6% gewijzigd door FastFox91 op 09-08-2012 12:32:54 ]

woensdag 8 augustus 2012 @ 23:40:30 #131

I0_0I

Ik ben een forumtemplate aan het aanpassen maar ik heb te beperkte kennis over dit onderwerp. De kleuren aanpassen wilde nog wel lukken, maar de afmetingen aanpassen lukt mij niet, zonder de rest verkloten. Kan iemand mij hierbij helpen?

Dit is de template:
http://demo.rockettheme.com/phpbb3/index.php?style=59

- Ik heb de header-bg.jpg vervangen, maar mijn versie is breder. Wat moet ik aanpassen om te zorgen dat deze volledig wordt weergeven, zonder dat een deel wegvalt? (Header moet wel gecentreerd blijven en rest van de onderdelen ongewijzigd.)

- Hoe verander ik de positie van het logo, zonder dat de rest van de layout mee verandert?

- Hoe maak ik de kleine ruimte onder en boven de zoekbalk kleiner?
(De bovenkant is gelukt, onderkant niet.)

donderdag 9 augustus 2012 @ 10:57:33 #132

Cue_

Cuecumbergirl

Een klein vraagje weer. Ben nog niet zo heel lang bezig in het onderscheid hmtl/css/js, maar we zijn op weg.. Maar blijf even met iets steken.

Ik heb een formulier:

1
2
3
4
5

<input type="radio" id="rap_driver" name="rap_keuze" value="driver" /> Driver
<input type="text" id="driverr" name="driver" />

<input type="radio" id="rap_cwid" name="rap_keuze" value="cwid_nummer" /> CWID nummer
<input type="text" id="cwid_nr" name="cwid_nr" />

Nu heb ik via Jquery dat wanneer men het textveld aanklikt dat de radiobutton van de betreffende wordt geselecteerd:

1
2
3
4

$('input[name=cwid_nr]').click(function(){
$("input[id=rap_cwid]").attr('checked', 'checked')
});
;

Nu wil ik daaraan toevoegen dat het veld ook required wordt. Dacht dit simpel te kunnen doen door dit toe te voegen in bovenstaande code:

1	$('input[name=cwid_nr]').attr("required", "true");

Dat werkt goed. Maar nu zit ik met het feit dat ik deze required op false wil zetten op het moment dat een ander veld is geselecteerd. Dit werkt echter niet. Hij blijft (in dit geval) op het moment dat je eenmaal die cwid_nr hebt aangeklikt, deze als required zien.

Online kom ik wel tegen dat dit vaker gebeurd, maar echt een gerichte oplossing vind ik wat lastig om eruit te pluizen. Iemand hier suggesties?

donderdag 9 augustus 2012 @ 10:58:55 #133

QM84

Het Orakel

quote:
Op woensdag 8 augustus 2012 15:05 schreef Catch22- het volgende:
of bijvoorbeeld

@nice-blue: #5B83AD;
@light-blue: darken(@nice-blue, 20%);

Het is wel een worst-practice om je variabelen de naam van de kleur mee te geven. Op het moment dat de nice-blue nice-green moet worden, moet je alsnog alles aan gaan passen, omdat je @nice-blue in ene groen is geworden.

dat dus.

donderdag 9 augustus 2012 @ 11:05:11 #134

Tijn

Powered by MS Paint

quote:
Op donderdag 9 augustus 2012 10:57 schreef Cue_ het volgende:

[code]$('input[name=cwid_nr]').attr("required", "true");[/code]

Het is geen true/false kwestie. Zo maak je iets required:

1	$(selector).attr('required', 'required');

Wat je precies als tweede string meegeeft maakt eigenlijk niet uit: als er iets staat bij een attribuut, dan staat het aan.

Om het weer weg te halen doe je dit:

1	$(selector).removeAttr('required');

Het werkt zo met alle attributen van HTML-elementen, zoals ook het attribuut "checked" wat je op je radio-buttons gebruikt. Die zet je met .attr('checked', 'checked') en haal je weer weg met .removeAttr('checked').

Verberg de nieuwsticker

donderdag 9 augustus 2012 @ 11:07:43 #135

Cue_

Cuecumbergirl

Kewl

Tnx! Weer wat geleerd!

donderdag 9 augustus 2012 @ 12:40:04 #136

Catch22-

Ben je Blind?!

quote:
Op donderdag 9 augustus 2012 11:05 schreef Tijn het volgende:

[..]

Het is geen true/false kwestie. Zo maak je iets required:
[ code verwijderd ]

Wat je precies als tweede string meegeeft maakt eigenlijk niet uit: als er iets staat bij een attribuut, dan staat het aan.

Om het weer weg te halen doe je dit:
[ code verwijderd ]

Het werkt zo met alle attributen van HTML-elementen, zoals ook het attribuut "checked" wat je op je radio-buttons gebruikt. Die zet je met .attr('checked', 'checked') en haal je weer weg met .removeAttr('checked').

http://api.jquery.com/prop/

is in de nieuwe jQuery versies de bestpractice

quote:
Op donderdag 9 augustus 2012 10:58 schreef QM84 het volgende:

[..]

Het is wel een worst-practice om je variabelen de naam van de kleur mee te geven. Op het moment dat de nice-blue nice-green moet worden, moet je alsnog alles aan gaan passen, omdat je @nice-blue in ene groen is geworden.

Ja maja, daar hou ik persoonlijk niet zo vaak rekening mee, omdat kleuren niet veranderen zonder dat alles op de schop gaat, in de praktijk.

Ben nu zelf Patience aan het maken met jQuery + LESS

Misschien post ik de source wel als het klaar is.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 9 augustus 2012 @ 12:49:24 #137

Tijn

Powered by MS Paint

quote:
Op donderdag 9 augustus 2012 12:40 schreef Catch22- het volgende:

[..]

http://api.jquery.com/prop/

is in de nieuwe jQuery versies de bestpractice

Ah, beter. Thanks.

Daarmee kun je wel true/false gebruiken, heb je ook die gare remove-functie niet meer nodig.

Verberg de nieuwsticker

donderdag 9 augustus 2012 @ 13:02:05 #138

n8n

Pragmatisch

zo omschrijf je kleuren

Screen%20Shot%202012-08-09%20at%201.03.22%20PM.png

“Specialization is for insects”.—Robert Heinlein

donderdag 9 augustus 2012 @ 13:05:43 #139

Catch22-

Ben je Blind?!

Ja precies, op papier of als je thema's wil bouwen. In de praktijk gebruik ik dat never.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 9 augustus 2012 @ 13:15:59 #140

n8n

Pragmatisch

quote:
Op donderdag 9 augustus 2012 13:05 schreef Catch22- het volgende:
Ja precies, op papier of als je thema's wil bouwen. In de praktijk gebruik ik dat never.

ik wel maar ben dan ook een best practice-geek

“Specialization is for insects”.—Robert Heinlein

donderdag 9 augustus 2012 @ 13:28:19 #141

Catch22-

Ben je Blind?!

Ik ook; maar ik ben wél pragmatisch. Ik ga geen dingen doen die 'mogelijk handiger' zijn, terwijl ik weet dat die situaties niet of nauwelijks voor gaan komen.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 9 augustus 2012 @ 13:51:56 #142

Cue_

Cuecumbergirl

quote:
Op donderdag 9 augustus 2012 12:40 schreef Catch22- het volgende:

http://api.jquery.com/prop/

is in de nieuwe jQuery versies de bestpractice

Vreemd, deze was ik idd ook tegengekomen, maar leek niet te werken. nu wel. Dus zal wel iets verkeerds hebben gedaan.

donderdag 9 augustus 2012 @ 14:06:16 #143

Catch22-

Ben je Blind?!

jQuery versie gematched?

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 9 augustus 2012 @ 14:08:45 #144

Cue_

Cuecumbergirl

quote:
Op donderdag 9 augustus 2012 14:06 schreef Catch22- het volgende:
jQuery versie gematched?

Het werkte gewoon ben ik achter. lag eraan omdat het clickevent op het inputfield lag en niet (ook) op de radiobutton. En als je dan test en je gebruikt ze beiden door elkaar heen.
tja...

donderdag 9 augustus 2012 @ 14:13:47 #145

n8n

Pragmatisch

quote:
Op donderdag 9 augustus 2012 13:28 schreef Catch22- het volgende:
Ik ook; maar ik ben wél pragmatisch. Ik ga geen dingen doen die 'mogelijk handiger' zijn, terwijl ik weet dat die situaties niet of nauwelijks voor gaan komen.

Kijk dan wel naar zaken als doorgroei en of er al dan niet nog door andere ontwikkelaars mee gewerkt dient te worden. Soms is alles documenteren en omschrijven raadzaam en uiteindelijk efficiënter. vaak niet daar heb je gelijk in.

“Specialization is for insects”.—Robert Heinlein

donderdag 9 augustus 2012 @ 14:32:32 #146

Tijn

Powered by MS Paint

quote:
Op donderdag 9 augustus 2012 13:28 schreef Catch22- het volgende:
Ik ook; maar ik ben wél pragmatisch.

Wat is er niet pragmatisch aan het geven van logische namen aan je kleuren?

Als je dat altijd doet en gewend bent, kost het absoluut geen extra moeite om de kleur een logische naam te geven in plaats van de tint proberen te beschrijven.

Verberg de nieuwsticker

donderdag 9 augustus 2012 @ 14:47:23 #147

Catch22-

Ben je Blind?!

quote:
Op donderdag 9 augustus 2012 14:13 schreef n8n het volgende:

[..]

Kijk dan wel naar zaken als doorgroei en of er al dan niet nog door andere ontwikkelaars mee gewerkt dient te worden. Soms is alles documenteren en omschrijven raadzaam en uiteindelijk efficiënter. vaak niet daar heb je gelijk in.

ik schrijf wel efficient, maar de projecten waaraan ik werk zijn grafisch gezien niet superonderheving aan veranderingen. Dus dit is een non-issue.

quote:
Op donderdag 9 augustus 2012 14:32 schreef Tijn het volgende:

[..]

Wat is er niet pragmatisch aan het geven van logische namen aan je kleuren?

Als je dat altijd doet en gewend bent, kost het absoluut geen extra moeite om de kleur een logische naam te geven in plaats van de tint proberen te beschrijven.

ik gebruik geen variabelen voor kleuren eigenlijk... Een kleur veranderen gaat gewoon met find and replace dus.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

donderdag 9 augustus 2012 @ 15:13:25 #148

Tijn

Powered by MS Paint

quote:
Op donderdag 9 augustus 2012 14:47 schreef Catch22- het volgende:

[..]

ik gebruik geen variabelen voor kleuren eigenlijk... Een kleur veranderen gaat gewoon met find and replace dus.

Waarom als je toch LESS gebruikt? Is het hele idee niet juist dat je niet meer steeds hoeft te find & replacen?

Verberg de nieuwsticker

donderdag 9 augustus 2012 @ 15:51:15 #149

Catch22-

Ben je Blind?!

Gebruik less niet altijd... En ik gebruik kleuren eigenlijk niet veel vaker... Als ik die goed in classes indeel dan komen ze niet vaker voor...

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

vrijdag 10 augustus 2012 @ 00:35:34 #150

n8n

Pragmatisch

Volgens mij ben ik een van de weinige die per declaratie een serie selectors neerzet

“Specialization is for insects”.—Robert Heinlein

Forum Opties
Forumhop:
Hop naar:	(afkorting, bv 'KLB')

» digital corner

» development

» digital corner

» development