Prijsaanpassing bij meerdere stuks.
- Onderwerp starter yammaski
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Daar zou ik me niet erg druk om maken: het werkt! En ik denk niet dat je veel klachten hierover zult krijgen van de sticker-bestellers.
Binnenkant/buitenkant?
Ik kom steeds in verwarring bij de wel/niet spiegelbeeld-instelling: ik moet telkens bij de I nalezen wat ook alweer bedoeld wordt. Mijn verwarring komt door de woorden binnenkant/buitenkant.
Met "binnenkant kleven" wordt niet bedoeld dat de stickers aan de binnenkant kleven (aan de achterkant als je het plaatje voor je ziet), maar juist omgekeerd: dat de binnenkant van het (doorzichtig) opplak-oppervlak beplakt kan worden.
En de "buitenkant" is niet de buitenkant van de sticker (wat ik logisch vind / en de voorkant noem), maar juist de buitenkant waar de sticker opgeplakt moet worden:
Nee (buitenkant kleven) = op buitenkant kleven
Ja (binnenkant kleven) = op binnenkant kleven
Ja (binnenkant kleven) = op binnenkant kleven
Alles dus precies omgekeerd!
Na een paar keer klikken weet ik ook niet meer wat "Ja" en "Nee" betekenen.
- Extra verwarrend: sommige oppervlakken zijn niet doorzichtig (een autodeur bv.), en daar is geen binnenkant om te bekleven... :shocked:
Ik zou de volgende termen hanteren (dat sluit ook perfect aan bij de 4 voorbeelden in het I-venstertje):
Gewoon (achterkant kleven)
Spiegelb. (voorkant kleven)
Spiegelb. (voorkant kleven)
Dan krijg je deze aanblik:
Op deze manier moet nog even een id toegevoegd worden:
HTML:
<select class="textfieldColor" name="stickersBE_1_MirrorImage_Add" id="spiegelBeeld">
<option selected="selected" value="Nee">Gewoon (achterkant kleven)</option>
<option value="Ja">Spiegelb. (voorkant kleven)</option>
</select>
Code:
#spiegelBeeld {
font-family: arial, helvetica, sans-serif;
}Met een kleine aanpassing in het I-venstertje om dat ook helemaal synchroon te laten lopen
:
HTML:
<p>Standaard is dat de stickers aan de achterkant van wat je voor je ziet hun kleeflaag hebben,
maar ze zijn ook in spiegelbeeld leverbaar.<br />
<br />
Als je een sticker/tekst aan de binnenkant van een ruit wil kleven en deze moet buiten leesbaar zijn,
selecteer dan "Spiegelb. (voorkant kleven)".<br />
<br />
En als je bvb. de vlammen ... enz.</p>Gegroet,
CSShunter
TS
TS
yammaski
Gebruiker
- Lid geworden
- 9 mrt 2005
- Berichten
- 284
Binnenkant/buitenkant? ... goed punt ! :thumb:
Je hebt gelijk wat betreft de verwarring hierrond, elke bezoeker/klant interpreteert dit anders heb ik al ondervonden.
Voor de minste verwarring laat ik de bijkomende tekst weg, dus gewoon NEE of JA, zonder meer.
De uitleg bij I is helder genoeg vind ik.
Je hebt gelijk wat betreft de verwarring hierrond, elke bezoeker/klant interpreteert dit anders heb ik al ondervonden.
Voor de minste verwarring laat ik de bijkomende tekst weg, dus gewoon NEE of JA, zonder meer.
De uitleg bij I is helder genoeg vind ik.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoe eenvoudiger, hoe beter!
Toch zou ik "Gewoon" en "Spiegelbeeld" gebruiken ipv "Nee" en "Ja", want de duidelijke voorbeelden in de I hebben ook die beschrijving.
Maar nu valt me opeens in, dat het ook zonder zo'n uitrolvakje kan, maar met een checkbox die men kan aanvinken als Spiegelbeeld gewenst is:
Dit is nog eenvoudiger: de klant hoeft dan niet te klikken op het uitrolvakje om te zien wat er nog meer mogelijk is (er zijn hier toch maar twee mogelijkheden, bij een uitrolvakje verwacht je er meer), maar ziet meteen wat de bedoeling is.
Standaard staat het vakje niet aangevinkt, dus bij een gewone bestelling hoeft men niets te doen.
Misschien wel zo makkelijk?
Voor de dappere webbouwer wel weer wat extra werk.
CSShunter
Toch zou ik "Gewoon" en "Spiegelbeeld" gebruiken ipv "Nee" en "Ja", want de duidelijke voorbeelden in de I hebben ook die beschrijving.
Maar nu valt me opeens in, dat het ook zonder zo'n uitrolvakje kan, maar met een checkbox die men kan aanvinken als Spiegelbeeld gewenst is:
- Hierbij is het handig om het klikgebied uit te breiden, zodat ook klikken op het woord "Spiegelbeeld" mogelijk is, en niet uitsluitend op het kleine checkbox-oppervlakje gemuis-mikt moet worden (ik vind dat altijd veel stuurmanskunst vragen).
- Desgewenst zou je ook een aangepast checkbox-image kunnen gebruiken: dan wordt het geen checkbox, maar een pseudo-link met onclick-mogelijkheid en een aan/uit mechaniekje.
Dit is nog eenvoudiger: de klant hoeft dan niet te klikken op het uitrolvakje om te zien wat er nog meer mogelijk is (er zijn hier toch maar twee mogelijkheden, bij een uitrolvakje verwacht je er meer), maar ziet meteen wat de bedoeling is.
Standaard staat het vakje niet aangevinkt, dus bij een gewone bestelling hoeft men niets te doen.
Misschien wel zo makkelijk?
Voor de dappere webbouwer wel weer wat extra werk.
CSShunter
TS
TS
yammaski
Gebruiker
- Lid geworden
- 9 mrt 2005
- Berichten
- 284
jah jah jah ... toch nog iets dat niet klopt 
Als de standaardprijs geen rond getal is (bvb : 4,50), dan rondt blijkbaar het script dit zelf af naar beneden : 4,00. Kan dit ? ( Script is hernoemd naar "Bereken_Kortingen_150mm.js")
Zie deze testpagina. De prijs is standaard 4,50 euro. In het winkelwagentje staat wel de juiste prijs.
Als de standaardprijs geen rond getal is (bvb : 4,50), dan rondt blijkbaar het script dit zelf af naar beneden : 4,00. Kan dit ? ( Script is hernoemd naar "Bereken_Kortingen_150mm.js")
Zie deze testpagina. De prijs is standaard 4,50 euro. In het winkelwagentje staat wel de juiste prijs.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi Yammaski,
Gevangen!
Ik was even bang dat ik ergens een knoepert van een fout had gemaakt, maar dat is gelukkig niet het geval.
Wat er gebeurt, is dat de value van de standaardprijs via de database binnenkomt met een komma in het getal.
Als deze string "4,5" met parseFloat wordt omgezet in een getal, dan houdt de omzetting op wanneer een karakter in de string wordt tegengekomen dat geen getal of punt is.
Er moet dus een omvormertje tussen van komma naar punt:
[JS]function berekenAlles(){
var standaardprijs=document.getElementById('prijsZonderKorting').value; // string
standaardprijs=standaardprijs.replace(',','.'); // van komma naar punt
standaardprijs=parseFloat(standaardprijs); // van string naar getal
... enz.[/JS]
(als er al een punt stond, blijft het ook goed gaan)
Met vriendelijke groet,
CSShunter
Gevangen!
Ik was even bang dat ik ergens een knoepert van een fout had gemaakt, maar dat is gelukkig niet het geval.
Wat er gebeurt, is dat de value van de standaardprijs via de database binnenkomt met een komma in het getal.
HTML:
<input id="prijsZonderKorting" name="prijsZonderKorting" type="hidden" value="4,5" />- Kijk: blob-test1.htm
- Ipv 4,50 genomen: 4,53 om te kijken hoe het met 2 cijfers achter de komma gaat.
- Dit wordt dus: 4.
- Gevolg is dat de hele rest van de berekening (aantallen, kortingen, totaal) ook de mist in gaat.
- Dat het in het winkelwagentje wel goed gaat, zal zijn omdat daar de berekening nog eens dunnetjes wordt overgedaan via een ander tracé.
Er moet dus een omvormertje tussen van komma naar punt:
[JS]function berekenAlles(){
var standaardprijs=document.getElementById('prijsZonderKorting').value; // string
standaardprijs=standaardprijs.replace(',','.'); // van komma naar punt
standaardprijs=parseFloat(standaardprijs); // van string naar getal
... enz.[/JS]
(als er al een punt stond, blijft het ook goed gaan)
- Kijk: blob-test2.htm
- Hiermee komt alles op zijn pootjes terecht, ook de vervolg-berekeningen.
- En met value="4,5" als invoer en zonder de alerts: blob-test3.htm
Met vriendelijke groet,
CSShunter
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Nog een klein schoonheidspuntje.
Als de korting-spong gemaakt wordt en de stuksprijs even oplicht, verschuift deze ook tijdens het oplichten.
Dat komt door het vet in combinatie met de centrering van die tabelcel: dan wordt de breedte iets anders en komt ook het midden een paar px te verschuiven.
Hier kan je af komen door de centrering te laten vervallen, de #perStukBox geen breedte van 400px te geven maar 100% van de celbreedte (door 'm niet te vermelden), en dan een margin-left te nemen waarmee hij ook in het midden komt:
Aan de rechterkant is dan altijd voldoende speling om het vet op te vangen.
Met vriendelijke groet,
CSShunter
Als de korting-spong gemaakt wordt en de stuksprijs even oplicht, verschuift deze ook tijdens het oplichten.
Dat komt door het vet in combinatie met de centrering van die tabelcel: dan wordt de breedte iets anders en komt ook het midden een paar px te verschuiven.
Hier kan je af komen door de centrering te laten vervallen, de #perStukBox geen breedte van 400px te geven maar 100% van de celbreedte (door 'm niet te vermelden), en dan een margin-left te nemen waarmee hij ook in het midden komt:
Code:
#perStukBox {
text-align: left;
margin-left: 65px;
}Met vriendelijke groet,
CSShunter
TS
TS
yammaski
Gebruiker
- Lid geworden
- 9 mrt 2005
- Berichten
- 284
Misschien toch nog een kleine aanpassing ...
Zou het niet interessant zijn voor de klant dat hij de standaardprijs (aangepast aan grootte vd sticker) ziet zonder de korting ? Deze wordt dan getoond vanaf 2 stuks, anders heb je 2x dezelfde vermelding. Of wordt dit teveel ?
Zie testpagina, maar ik krijg weer NaN (scriptregel 71-82).
Zou het niet interessant zijn voor de klant dat hij de standaardprijs (aangepast aan grootte vd sticker) ziet zonder de korting ? Deze wordt dan getoond vanaf 2 stuks, anders heb je 2x dezelfde vermelding. Of wordt dit teveel ?
Zie testpagina, maar ik krijg weer NaN (scriptregel 71-82).
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Dat kan best lijkt me, als maar duidelijk is wat wat is.
Aha, je bent in de testpagina aan het terugrekenen gegaan; maar halverwege heb je een deling totaalGeenKorting/aantal, terwijl de totaalGeenKorting op dat moment net een string geworden is > Not a Number!
Nu hoef je niet terug te rekenen, want de variabele voor de stuksprijs zonder korting is er al: dat is de stuksprijs van regel 22 (daar zit de formaattoeslag al in). Die hoeft alleen omgezet te worden in een string met 2 cijfers achter de punt, en dan van punt naar komma:
[JS]var stuksprijs=standaardprijs+formaattoeslag; // getal
var standaardPrijsStuk=parseFloat(Math.round(stuksprijs * 100) / 100).toFixed(2); // string met 2 cijfers achter de punt
standaardPrijsStuk=standaardPrijsStuk.replace('.',','); // van punt naar komma
standaardPrijsStukBox.innerHTML='standaardprijs: € '+standaardPrijsStuk+' / stuk'; // invullen in de pagina
... enz.[/JS]
Verder is de prijs achter het Euro-labeltje de prijs met korting, dat zou ik er dan bij zetten.
Om het dubbel-op te vermijden, zou ik bij 1 ex. de standaardprijs in zicht houden en de kortingsprijs niet tonen (dus net omgekeerd).
Tenslotte lijkt het me wel aardig om het Euro-labeltje, dat bij de kortingsprijs hoort, ook even oranje te laten opgloeien bij een kortingsprong.
Daarvoor moet dan:
Aldus wordt het resultaat (met Bereken_Kortingen_150mm-test4.js): bad-test1.htm
Wie sprak ook alweer de gevleugelde woorden: "Een website is nooit af" ?
Groetjes,
CSShunter
Aha, je bent in de testpagina aan het terugrekenen gegaan; maar halverwege heb je een deling totaalGeenKorting/aantal, terwijl de totaalGeenKorting op dat moment net een string geworden is > Not a Number!
Nu hoef je niet terug te rekenen, want de variabele voor de stuksprijs zonder korting is er al: dat is de stuksprijs van regel 22 (daar zit de formaattoeslag al in). Die hoeft alleen omgezet te worden in een string met 2 cijfers achter de punt, en dan van punt naar komma:
[JS]var stuksprijs=standaardprijs+formaattoeslag; // getal
var standaardPrijsStuk=parseFloat(Math.round(stuksprijs * 100) / 100).toFixed(2); // string met 2 cijfers achter de punt
standaardPrijsStuk=standaardPrijsStuk.replace('.',','); // van punt naar komma
standaardPrijsStukBox.innerHTML='standaardprijs: € '+standaardPrijsStuk+' / stuk'; // invullen in de pagina
... enz.[/JS]
Verder is de prijs achter het Euro-labeltje de prijs met korting, dat zou ik er dan bij zetten.
Om het dubbel-op te vermijden, zou ik bij 1 ex. de standaardprijs in zicht houden en de kortingsprijs niet tonen (dus net omgekeerd).
Tenslotte lijkt het me wel aardig om het Euro-labeltje, dat bij de kortingsprijs hoort, ook even oranje te laten opgloeien bij een kortingsprong.
Daarvoor moet dan:
- het labeltje gepromoveerd wordcn tot background-img met hover-variant (deze),
- het labeltje uit de html verdwijnen (d.w.z. uit het script, dat 'm er als voorgrond-img in zet),
- het labeltje in de <span> van de kortingsprijs opgenomen worden als background-img:
Code:#perStukBox { margin-left: 30px; } #perStukBox span { display: inline-block; line-height: 25px; padding-left: 55px; background: url(images/stickers-euro-label.png) no-repeat 0 50%; } - wijziging van de background-position opgenomen worden in de functie ColorPrice(),
- en in het script de voorwaarde if (aantal>1){...} komen om de kortingsprijs bij 1ex. achterwege te laten.
Aldus wordt het resultaat (met Bereken_Kortingen_150mm-test4.js): bad-test1.htm
Wie sprak ook alweer de gevleugelde woorden: "Een website is nooit af" ?
Groetjes,
CSShunter
TS
TS
yammaski
Gebruiker
- Lid geworden
- 9 mrt 2005
- Berichten
- 284
Ik zou het liever hebben zoals dit voorbeeld.
De standaardprijs verschijnt vanaf 2 stuks.
Maar het werkt niet in omgekeerde richting, van 2 terug naar 1 stuk ... dan blijft de standaardprijs staan terwijl deze terug zou moeten verdwijnen.
Het prijskaartje dat van kleur verandert is leuk, dat verander ik later nog.
De standaardprijs verschijnt vanaf 2 stuks.
Maar het werkt niet in omgekeerde richting, van 2 terug naar 1 stuk ... dan blijft de standaardprijs staan terwijl deze terug zou moeten verdwijnen.
Het prijskaartje dat van kleur verandert is leuk, dat verander ik later nog.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
"Ik zou het liever hebben zoals dit voorbeeld." > Ook niet gek.
Het lijkt er op dat bij de 1 een deel van de berekenAlles() functie niet meer werkt.
- Ga es even koekeloeren.
Inderdaad, da's vreemd. Bovendien werkt na terugkomst op de 1 ex. de formaattoeslag niet meer door in de standaardprijs (wel op het totaal en op het prijskaartje; in de bad-test1.htm ging het wel goed).
Het lijkt er op dat bij de 1 een deel van de berekenAlles() functie niet meer werkt.
- Ga es even koekeloeren.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Juist. Het heeft met het omwisselen van wat er getoond wordt te maken. Er staat nu:
[JS]...
var standaardPrijsStuk=parseFloat(Math.round(stuksprijs * 100) / 100).toFixed(2); // string met 2 cijfers achter de punt
standaardPrijsStuk=standaardPrijsStuk.replace('.',','); // van punt naar komma
if (aantal > 1 ) {
standaardPrijsStukBox.innerHTML='standaardprijs : € '+standaardPrijsStuk; // invullen in de pagina
}
...[/JS]
In het begin is het aantal op 1 ingesteld, dan komt er dus niets in de standaardPrijsStukBox te staan.
Als daarna bij de berekening het aantal géén 1 is, wordt de standaardPrijsStuk getoond in de standaardPrijsStukBox.
So far, so good.
Als later het aantal weer terug op 1 gezet wordt, dan vindt herberekening plaats, maar dan is niet (aantal > 1).
Dus blijft de innerHTML van de standaardPrijsStukBox staan waar deze op stond bij de vorige ronde.
Wat er moet gebeuren: de standaardPrijsStukBox moet geleegd worden als het aantal op 1 wordt gezet. Vandaar een else toe te voegen (= voor als het aantal wel 1 is):
[JS]...
if (aantal > 1 ) {
standaardPrijsStukBox.innerHTML='standaardprijs : € '+standaardPrijsStuk; // invullen in de pagina
}
else {
standaardPrijsStukBox.innerHTML=''; // bij 1 ex. weer leegmaken
}
...[/JS]
Weer in het gareel! :d
[JS]...
var standaardPrijsStuk=parseFloat(Math.round(stuksprijs * 100) / 100).toFixed(2); // string met 2 cijfers achter de punt
standaardPrijsStuk=standaardPrijsStuk.replace('.',','); // van punt naar komma
if (aantal > 1 ) {
standaardPrijsStukBox.innerHTML='standaardprijs : € '+standaardPrijsStuk; // invullen in de pagina
}
...[/JS]
In het begin is het aantal op 1 ingesteld, dan komt er dus niets in de standaardPrijsStukBox te staan.
Als daarna bij de berekening het aantal géén 1 is, wordt de standaardPrijsStuk getoond in de standaardPrijsStukBox.
So far, so good.
Als later het aantal weer terug op 1 gezet wordt, dan vindt herberekening plaats, maar dan is niet (aantal > 1).
Dus blijft de innerHTML van de standaardPrijsStukBox staan waar deze op stond bij de vorige ronde.
- En als daarna het formaat wordt aangepast en het aantal nog steeds op 1 staat, wordt weer alles herberekend, maar blijft de standaardPrijsStuk óók staan op het bedrag van de vorige ronde.
Wat er moet gebeuren: de standaardPrijsStukBox moet geleegd worden als het aantal op 1 wordt gezet. Vandaar een else toe te voegen (= voor als het aantal wel 1 is):
[JS]...
if (aantal > 1 ) {
standaardPrijsStukBox.innerHTML='standaardprijs : € '+standaardPrijsStuk; // invullen in de pagina
}
else {
standaardPrijsStukBox.innerHTML=''; // bij 1 ex. weer leegmaken
}
...[/JS]
- Test: bad-test2.htm (met Bereken_Kortingen_150mm_test5.js)
Weer in het gareel! :d
Laatst bewerkt:
TS
TS
yammaski
Gebruiker
- Lid geworden
- 9 mrt 2005
- Berichten
- 284
ivm #29
[JS] var imgSrc=document.getElementById('Image').src; // transparant img onthouden
function changeBG(){
var colorSelectie=document.getElementById('stickersBE_1_Color_Add');
var colorname=colorSelectie.options[colorSelectie.selectedIndex].value; // string
var options=colorSelectie.getElementsByTagName('option'); // alle opties
for (i=0; i<options.length; i++){ // langslopen en signaleren welke gekozen is
if (options.value==colorname){ // zo ja, dan inputvakje op juiste kleuren brengen
colorSelectie.style.color=options.style.color;
colorSelectie.style.backgroundColor=options.style.backgroundColor;
document.getElementById('Image').style.backgroundColor=options.style.backgroundColor;
if (colorname=="Light Grey"){
var lightgreyImgSrc=imgSrc.replace('.gif','');
lightgreyImgSrc=lightgreyImgSrc+"-lightgrey.gif";
document.getElementById('Image').src=lightgreyImgSrc; // lichtgrijs img plaatsen
}
else {
document.getElementById('Image').src=imgSrc; // transp. img terugzetten na lichtgrijs
}
colorSelectie.blur(); // deselecteren (voor IE)
}
}
}
changeBG();[/JS]
Ik heb paginas waarvan de (back)kleur verandert en waar de kleur niet verandert, wel te verstaan op dezelfde detail-pagina. Ik heb de code iets aangepast (regeltje verwisseld van plaats en geen rekening gehouden met "light grey") omdat de "blur" bij de kleurenselector niet werkte met images zonder (back)kleur.
[JS] var imgSrc=document.getElementById('Image').src; // transparant img onthouden
function changeBG(){
var colorSelectie=document.getElementById('stickersBE_1_Color_Add');
var colorname=colorSelectie.options[colorSelectie.selectedIndex].value; // string
var options=colorSelectie.getElementsByTagName('option'); // alle opties
for (i=0; i<options.length; i++){ // langslopen en signaleren welke gekozen is
if (options.value==colorname){ // zo ja, dan inputvakje op juiste kleuren brengen
colorSelectie.style.color=options.style.color;
colorSelectie.style.backgroundColor=options.style.backgroundColor;
colorSelectie.blur(); // deselecteren (voor IE)
document.getElementById('Image').style.backgroundColor=options.style.backgroundColor;
}
}
}
changeBG();[/JS]
Is dit ok zo ? Of kan dit weer ergens anders een fout teweeg brengen ?
Toch (weer) nog een foutje ...
Nu blijft bij FF en Chrome de kleurselector ongekleurd als de pagina laadt (zie vb) :
.
Verwijder ik de bovenste regel dan lukt het wel.[JS]var imgSrc=document.getElementById('Image').src; // transparant img onthouden[/JS] MAg je deze regel zomaar weglaten ?
In de code : "changeBG" verandert de kleur van de selector èn de (back)kleur van de image.
[JS] var imgSrc=document.getElementById('Image').src; // transparant img onthouden
function changeBG(){
var colorSelectie=document.getElementById('stickersBE_1_Color_Add');
var colorname=colorSelectie.options[colorSelectie.selectedIndex].value; // string
var options=colorSelectie.getElementsByTagName('option'); // alle opties
for (i=0; i<options.length; i++){ // langslopen en signaleren welke gekozen is
if (options.value==colorname){ // zo ja, dan inputvakje op juiste kleuren brengen
colorSelectie.style.color=options.style.color;
colorSelectie.style.backgroundColor=options.style.backgroundColor;
document.getElementById('Image').style.backgroundColor=options.style.backgroundColor;
if (colorname=="Light Grey"){
var lightgreyImgSrc=imgSrc.replace('.gif','');
lightgreyImgSrc=lightgreyImgSrc+"-lightgrey.gif";
document.getElementById('Image').src=lightgreyImgSrc; // lichtgrijs img plaatsen
}
else {
document.getElementById('Image').src=imgSrc; // transp. img terugzetten na lichtgrijs
}
colorSelectie.blur(); // deselecteren (voor IE)
}
}
}
changeBG();[/JS]
Ik heb paginas waarvan de (back)kleur verandert en waar de kleur niet verandert, wel te verstaan op dezelfde detail-pagina. Ik heb de code iets aangepast (regeltje verwisseld van plaats en geen rekening gehouden met "light grey") omdat de "blur" bij de kleurenselector niet werkte met images zonder (back)kleur.
[JS] var imgSrc=document.getElementById('Image').src; // transparant img onthouden
function changeBG(){
var colorSelectie=document.getElementById('stickersBE_1_Color_Add');
var colorname=colorSelectie.options[colorSelectie.selectedIndex].value; // string
var options=colorSelectie.getElementsByTagName('option'); // alle opties
for (i=0; i<options.length; i++){ // langslopen en signaleren welke gekozen is
if (options.value==colorname){ // zo ja, dan inputvakje op juiste kleuren brengen
colorSelectie.style.color=options.style.color;
colorSelectie.style.backgroundColor=options.style.backgroundColor;
colorSelectie.blur(); // deselecteren (voor IE)
document.getElementById('Image').style.backgroundColor=options.style.backgroundColor;
}
}
}
changeBG();[/JS]
Is dit ok zo ? Of kan dit weer ergens anders een fout teweeg brengen ?
Toch (weer) nog een foutje ...
Nu blijft bij FF en Chrome de kleurselector ongekleurd als de pagina laadt (zie vb) :
.Verwijder ik de bovenste regel dan lukt het wel.[JS]var imgSrc=document.getElementById('Image').src; // transparant img onthouden[/JS] MAg je deze regel zomaar weglaten ?
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Snap-niet 1
Heb je een voorbeeld van z'n pagina?
=======
Snap-niet 2
En "images zonder (back)kleur", bestaan die dan?
=======
Snap-niet 3
Dwz. dan snap ik niet waarom het weghalen van de var imgSrc bij FF en Chrome invloed kan hebben.
=======
Nadeel zonder wissel-img
batman - Light Grey
Oorzaak is dat de images negatief zijn (plaatje is transparant), om de gekozen kleur er als background-color doorheen te kunnen laten komen. Voor het niet negatieve deel is een ogenschijnlijke background-kleur opgenomen (maar in het image is het de voorgrondkleur!): het lichtgrijs eromheen, nodig voor het contrast bij de "gekleurde kleuren".
met contrastlijntje ingetekend
Maar ja, dat is ook niet ideaal, want kan bij de klant verwarring wekken: "Wordt het andere grijs dan ook meegeleverd?"
Kortom, bij 1 sticker-afbeelding zal het behelpen zijn.
- En alle nu getekende stickers zouden van contrast-randjes voorzien moeten worden, wat net zoveel werk is (lees: veel meer werk is!) dan om van elke sticker een extra niet-transparante versie te maken...
Alternatief!
Een alternatief s, om bij het LightGrey niet de "echte Light Grey" op scherm te tonen, maar een iets donkerder grijs (hier: #D1D1D1 ipv #EBEBEB), vergezeld van een waarschuwing:
Batman nep-LightGrey
Zo kan het toch met 1 image. Pffff!
Met vriendelijke groet,
CSShunter
O ... dat betekent dat het kleurenkies-vakje niet verandert bij een optiekeuze voor een bepaalde kleur, maar het plaatje zelf (via z'n background-color) wel. En dan snap ik niet waarom ze qua (bg)kleur niet gelijk op mogen lopen.
Heb je een voorbeeld van z'n pagina?
=======
Snap-niet 2
Die snap ik ook niet, want de "blur" is er alleen maar voor om de focus van de geklikte optie af te halen en heeft niets met de bg-color van de images te maken. Dwz. alleen als er ook geen bg-color van het keuzevakje zou zijn, maar die is er altijd.
En "images zonder (back)kleur", bestaan die dan?
- Dat zouden dan niet-transparante images moeten zijn, maar in dat geval kan een standaard (back)kleur erachter geen kwaad - tenzij ernaast nog ruimte over is die door die standaard (back)kleur wordt ingevuld; en dan zou er een andere, niet-standaard, bg-color aan gekoppeld kunnen worden.
=======
Snap-niet 3
In de functie changeBG() wordt deze variabele in jouw formule niet meer gebruikt, dus die zou weggelaten kunnen worden. Maar als een javascrtipt-variabele benoemd wordt en verder niet gebruikt wordt, kan het geen kwaad als de variabele er als loze kreet in blijft staan.
Dwz. dan snap ik niet waarom het weghalen van de var imgSrc bij FF en Chrome invloed kan hebben.
- Dat kan dan alleen als er een fout in de definitie zit: bv. als er geen id="Image" meer in de html staat.
=======
Nadeel zonder wissel-img
Eh, voor het script is het wel ok, maar op deze manier verschijnt er dus geen wissel-image als de optie Light Grey wordt gekozen. Dan komt de sticker er zo uit te zien:
batman - Light Grey
Oorzaak is dat de images negatief zijn (plaatje is transparant), om de gekozen kleur er als background-color doorheen te kunnen laten komen. Voor het niet negatieve deel is een ogenschijnlijke background-kleur opgenomen (maar in het image is het de voorgrondkleur!): het lichtgrijs eromheen, nodig voor het contrast bij de "gekleurde kleuren".
- Nu zou je deze lichtgrijze omgevings-kleur kunnen veranderen in bv. wit: dan komt het Light Grey beter zichtbaar tevoorschijn.
- Maar ... dan gaat het fout als iemand de kleur-optie "White" kiest, dan wordt het wit-op-wit = niks. Dan zou daarvoor een wissel-image gemaakt moeten worden, dus dat is lood om oud ijzer.
- Ik kan geen contrastkleur bedenken die het goed doet bij alle kleuren uit de kleurenwaaier > bij 1 kleur zal het altijd mis gaan, en daar is dan een wissel-image voor nodig met een andere omgevingskleur die de transparante background goed doet uitkomen.
met contrastlijntje ingetekend
- In real life: kwantumkorting-totaaltest-nw-4.htm
Maar ja, dat is ook niet ideaal, want kan bij de klant verwarring wekken: "Wordt het andere grijs dan ook meegeleverd?"
- Dat zou dan weer (met javascript) opgevangen kunnen worden door bij LightGrey een waarschuwing af te geven, in een zinnetje onderaan in de voorbeeld-box: "Attentie: de sticker is lichtgrijs, het donkerder grijs in de afbeelding is in werkelijkheid transparant!".
Kortom, bij 1 sticker-afbeelding zal het behelpen zijn.
- En alle nu getekende stickers zouden van contrast-randjes voorzien moeten worden, wat net zoveel werk is (lees: veel meer werk is!) dan om van elke sticker een extra niet-transparante versie te maken...
Alternatief!
Een alternatief s, om bij het LightGrey niet de "echte Light Grey" op scherm te tonen, maar een iets donkerder grijs (hier: #D1D1D1 ipv #EBEBEB), vergezeld van een waarschuwing:
Batman nep-LightGrey
Zo kan het toch met 1 image. Pffff!
Met vriendelijke groet,
CSShunter
- Status
