Wat vind je van deze keuze-melding ?
Prima toch!
=======
Wat zal het volgende zijn !? 
Ik weet wel iets.
=======
1. Het volgende
Dat is deze: bij een "Wis" worden nog niet de vinkjes gereset op alle twee blanco. De regeltjes:
[JS]...
document.getElementById('BovensteGekozen').style.display="none";
document.getElementById('OndersteGekozen').style.display="none";[/JS]
... moeten nog opgenomen worden in de
changeBG_SelectColor_EigenTekst_TEST.js
=======
2. En de volgende 
Vinkjes...
Valt me opeens in: als mensen van die vierkante
lege aanvink-hokjes zien
, willen ze die ook aanklikken.
Maar de twee lege vakjes bij de boventeksten reageren daar niet op - je kunt ze ook niet op die manier wisselen...
De bediening gaat alleen via de radio-buttons daar vrij ver vandaan.
Dan is mijn suggestie: geen lege vakjes tonen, alleen het vakje dat aangevinkt is via de radio-button. Dat is alvast de helft van de verwarring minder (de andere helft is als mensen het vinkje willen uitklikken, maar bij gebrek aan een tweede vakje zal dat niet zo'n vaart lopen).
Wat je verder nog kunt doen: de vierkante border uit de styles vandaan halen, en er een image met een rond kadertje van maken; dan lijkt het minder op een bedienbaar aankruisvakje.
Realisatie:
In de html de verpakkingsdiv's
#BovensteKiesVak en
#OndersteKiesVak verwijderd, dan kan het scriptje
Eigen_Tekst_NoYes.js hetzelfde blijven, en is er minder html nodig:
HTML:
<div id="Bord_EigenTekst">
<div id="BackColor">
<div id="TextColor"><span></span></div>
<div id="BovensteGekozen"></div>
</div>
<div id="BackColor2">
<div id="TextColor2"><span></span></div>
<div id="OndersteGekozen"></div>
</div>
</div><!-- einde div Bord_EigenTekst -->
In de css kunnen de styles van de oude verpakking overgeheveld worden, als het img er als background-image in gezet wordt:
Code:
#BovensteGekozen,
#OndersteGekozen {
width: 23px;
height: 23px;
position: absolute;
left: 3px;
bottom: 3px;
background: url(http://bliksekaters.nl/tests/images/geselecteerd.png);
display: none;
}
=======
3. En de volgende :d
Plakwerk...
Als iemand met een rechtsklik van de muis een gekopieerde tekst inplakt, dan komt er niets in de twee bovenvakken te staan. Ook als je daarna op een kleurselector of iets anders klikt blijft de hele
live tekst bovenin weg: geen letters, geen lettertype, geen kleur, niks...
Eigenlijk hetzelfde als eerder met de aantallen inplakken, maar mensen zullen eerder gekopieerde tekst dan een gekopieerd getal inplakken.
Nu reageert een onchange jammer genoeg niet op inplakken, maar je kan wel een "focus-verklikker" inbouwen:
- In het begin is er niets: var textFieldFocus=0.
- Bij inplakken van een tekst zal men moeten beginnen met een klik in het tekst-vakje: textFieldFocus=1.
- Tegelijkertijd laat je de invulcontrole plaatsvinden (als er "Typ hier je tekst" staat, moet het vakje leeg worden).
- Dat is de eerste helft van de nieuwe functie checkTextFilling(), die in plaats komt van de functie clearText(this).
- Nu zet je bij de onblur="..." niet alleen de invulcontrole, maar je zet eerst de in het vakje ingegeven tekst in de twee voorbeeldstroken bovenaan: addText(this.value); addText2(this.value); .
- Daarna wordt de focus-verklikker aangezet: var textFieldFocus=0, en de checkTextFilling() kan dan opgeroepen worden om in de tweede helft te controleren of misschien via rechtermuisknop de hele tekst weggeknipt is. In dat geval komt er weer "Typ hier je tekst" te staan.
- Zodra je dus na inplakken van een tekst ergens anders op klikt (je zal wel moeten), komt de ingevoerde tekst bovenin te staan.
- De onkeyup blijft onveranderd: dan hoeft alleen de nieuwe tekst geplaatst te worden. De onblur zorgt dan dat als alles via toetsenbord gewist is, er daarna ook weer "Typ hier je tekst" komt te staan.
Dat was dus even puzzelen.
[JS] var textFieldFocus=0;
function checkTextFilling(){
var field=document.getElementById('stickersBE_1_EigenTekst_Add');
if (textFieldFocus==1) { // als focus = dwz bezig met invullen
if (field.value=='Typ hier je tekst') { // dit is het geval bij start of wissen of reset
field.value = ''; // dan bij focus: standaardtekst invoerveld wissen
}
}
if (textFieldFocus==0) { // want niets doen als focus (dan bezig met invullen en mag niets veranderen)!
if (field.value=='' || field.value=='Typ hier je tekst') { // als niets gedaan is of leeg gelaten of gewist
field.value = 'Typ hier je tekst';
addText(''); addText2(''); // ook eventuele boventeksten wissen
}
}
}[/JS]
In de html wordt het:
HTML:
<!-- deze: -->
<input name="stickersBE_1_EigenTekst_Add" type="text" class="textfieldEiTekst" id="stickersBE_1_EigenTekst_Add"
onfocus="textFieldFocus=1; checkTextFilling();"
onblur="addText(this.value); addText2(this.value); textFieldFocus=0; checkTextFilling(); "
onkeyup="addText(this.value); addText2(this.value);"
value="Typ hier je tekst" size="48" maxlength="40" />
=======
4. En de volgende :d
De kleuren van het tekst-invulvakje...
Het oranje "Typ hier je tekst" op de donkere achtergrond is voor mij slecht leesbaar. Hetzelfde geldt bij het invullen: dan is het oranje op de lichte achtergrond slecht leesbaar. Het oranje van de eigen tekst kan verder verwarrend werken: dat is alleen maar voor de mooi van de pagina-opmaak, en heeft niets te maken met de gekozen kleur van de sticker!
Na invulling van mijn eigen tekst, als ik iets anders ga doen op de pagina, wisselt de oranje tekst op lichte achtergrond weer in oranje op donkere achtergrond. Dat leidt m'n aandacht af van wat ik aan het doen ben; deze kleurwisseling heeft geen betekenis voor de stickerkleur, en heeft verder ook geen functie: als ik eenmaal iets heb ingevuld en dat wil veranderen, hoef ik geen verandering bij focus/blur op het vakje (dan zie ik aan de knipperende cursor wel dat ik in het invulvakje beland ben).
Eigenlijk is het opvallende contrast alleen maar nodig is het begin, als er "Typ hier je tekst" staat.
Suggesties:
- Het oranje opmaak-accent op die plaats behouden door een oranje kadertje.
- De zware donkere achtergrondbalk wat tintelender maken door bv. een verloop-achtergrond er in.
- De tekst "Typ hier je tekst" in het wit zetten.
Voor de focus bij het invullen:
- Intikbare tekst gewoon in zwart zetten.
- Oranje kadertje kan eventueel een andere kleur worden. (Sommige browsers maken het randje bij focus uit zichzelf al anders, die zetten er nog een border omheen.)
- Als de focus verloren gaat, de opmaak met ingetikte tekst handhaven.
- Alleen als alle tekst gewist wordt of als er gereset wordt, de kleurwisseling naar "Typ hier je tekst" laten plaatsvinden.
Hiervoor nodig:
- Aanpassing van de controle-functie met de kleuren: eigenTekst-nw6.js
- In de html niets veranderd t.o.v. sticker-eigentekst5.html.
[edit]Toch wel: [/edit] bij het rijtje reset-functies van de Wis-knop nog een functie-aanroep opnieuw(); erbij gezet.
- In de css worden de kleuren van het invulvakje gekoppeld aan de id van de stickersBE_1_EigenTekst_Add ipv aan de gelijknamige class, dan zijn die bij wisseling van wel/niet ingevulde tekst makkelijk via het script te bedienen:
Code:
/* kan weggelaten worden; hier gereset: */
.stickersBE_1_EigenTekst_Add:focus {
background-color: transparent;
color: transparent;
border-color: transparent;
}
/* toevoegen: */
#stickersBE_1_EigenTekst_Add {
background: transparent url(http://bliksekaters.nl/tests/images/stickers-textarea-bg.png) 50% 50%;
color: white;
border-color: #F77B00; /* oranje */
}
#stickersBE_1_EigenTekst_Add:focus { /* toevoegen: */
background-color: #EFEFEF; /* lichtgrijs */
color: black;
border-color: #8BC53F; /* kikker-groen */
}
Dat leidt tot dit:
- Resultaat in deze: tests/sticker-eigentekst6.html.
- Met dus bijbehorende eigenTekst-nw6.js.
- De aangepaste css zit bij mij in de html-pagina.
- Integrale versie: in deze versie zijn de veranderingen van sticker-eigentekst4.html en sticker-eigentekst5.html ook opgenomen.
=======
5. En de volgende :d
Wisknop...
Opeens zag ik dat bij een reset met de Wis-knop ook het
formaat en het
aantal wordt gereset. Zou minstens toegevoegd moeten worden aan de waarschuwings-popup!
De reset van formaat en aantal valt visueel namelijk nauwelijks op: je blik wordt gevangen door de verdwijnende grote teksten en de verdwijnende kleuren. De "kleine lettertjes"-veranderingen heb je niet in de gaten.
Als het een formulier was waarin op die plek dan ook lege vakjes kwamen, zou je het veel eerder opmerken (maar hier worden formaat en aantal niet leeg maar met andere inhoud gevuld).
- Bij het woord "Wis" denk ik ook meer aan het wissen van tekst dan aan het wissen van formaat of aantal.
Maar het lijkt me niet de bedoeling dat als mensen andere teksten/kleuren gaan invullen, ze opeens ook formaat en aantal kwijtrijken bij een klik op de winkelwagen (daarna kan je het natuurlijk wel in het winkelwagen-overzicht zien, maar dat is op een volgende pagina en dan moet je cancelen en weer terug).
Suggesties:
Toch het woord "Wis" vervangen? Bv. "Reset" of "Opnieuw" lijkt me duidelijker.
=======
6. En de volgende :d
Popup-styling...
De popup "Weet u het zeker" komt nu tevoorschijn in de vrij nietszeggende standaard confirm-opmaak van de browser die gebruikt wordt (de kale platte vormgeving van de laatste Firefox-versie vind ik ronduit smakeloos).
En ze doen het allemaal anders.
Firefox - Chrome - Opera
Safari - Internet Explorer 7
Suggestie:
Hier zou je een mooie in kikker-style opgemaakte css-popup van kunnen maken, al dan niet met wat animatie; en gebruikersvriendelijk in de buurt van de Reset-knop ipv plompverloren midden in de pagina.
=======
7. En de volgende :d
Opera-opmaak...
O, in het voorbijgaan zag ik dat de Wis-knop bij Opera niet op de juist plaats staat, maar verdwaald is.
=======
8. En de volgenden :d
Ik weet er nog een paar:
- Spaties...
Men kan nu in de ingetikte tekst geen extra spaties opgeven als men woorden wat verder van elkaar af wil laten staan. Leuke examen-opdracht om daar een mooi javascript voor te verzinnen.
- Speedy scripts...
Alle scripts optimaliseren (zoveel mogelijk samenvoegen, evt. dubbelingen er uit halen, enz.) geeft de pagina meer snelheid.
- Speedy images...
Alle images optimaliseren (zoveel mogelijk kleintjes samenvoegen in css-sprites, waar mogelijk semi-transarante png's vervangen door full-color's incl. background, enz.) geeft de pagina meer snelheid.
- Speedy css...
Alle tabellen uit de html verwijderen en de opmaak met css regelen geeft de pagina meer snelheid (en tegelijkertijd ben je van "dansende opmaak" af als de pagina wordt ingeladen). (- Die hadden we al eens gehad)
- Kleurselectie kleuren ...
Bij alle kleurselectie-uitrolvakjes is het zo, dat uitgerekend de kleur die je via de hover wilt hebben, niet zichtbaar is: die verdwijnt bij hover en selectie en wordt vervangen door de selectie-background van de browser (doorgaans blauw) en de selectie-textcolor van de browser (doorgaans witte tekst).
Dat is niet met css aan te passen, omdat het in de browser-controls zelf zit, waar je niet bij kunt komen. Een redelijk vaak voorkomende vraag op diverse forums, van bedrijven die hun klanten ook kleuren via een uitrolvakje willen laten kiezen. Maar al die vragen lopen dood op hetzelfde: het kan gewoon niet met een uitrolvakje.
Er is een alternatief: het mechaniek van een uitrolvakje compleet nabouwen met javascript (en hidden input-velden)...
- Deze is dus voor als je eens erg ruim in je vrije tijd mocht zitten.
Genoeg?
Met vriendelijke groet,
CSShunter
_______________
PS:
Raadsel: één sticker kan je momenteel niet bestellen. Welke?
