Script gezocht (zonder naam)
- Onderwerp starter olaf88
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi olaf,
Ja, er zat een tikfoutje in het script.
De 100%x100% verduister-div was eerst in het javascript gecreëerd als kind van de <html>. Vervolgens werd geprobeerd 'm aan het eind van het script (na de opheldering) te vernietigen als kind van de <body>. Maar daar was het geen kind van, dus bleef de <div> staan: als laag bovenop de rest van de pagina, die dan dus onbereikbaar werd.
Nu heb ik het script (in principe prima-de-luxe, en mooi "unobtrusive") even in een pagina gezet, en er blijken toch ook nog wat andere addertjes onder het gras te zitten.
Logo'tje bij?
Het valt op dat de pagina nog geen logo heeft. Dat zou prima in de <header> opgenomen kunnen worden, en kan meteen dienen als Home-knop (die is er niet). Niet onverstandig lijkt me om onderin ook nog een tekstlink naar de homepage op te nemen (vooral voor de andere pagina's).
Daarbij lijkt het me wel mooi, als het logo wel 100% kristalhelder zichtbaar is bij het openen van de homepage, dan is er niet alleen de schakelaar en een wat sombere vergrijsde rest te zien.
Om allerlei vreselijk ingewikkelde toestanden met z-indexen te vermijden (nodig voor de stapel-volgorde van de verschillende lagen) kan het logo er het makkelijkst dubbel in: één keer opgenomen in de gewone html van de #header-div, en één keer als (deels transparante) combinatie met de schakelaar. Bij het verhelderen neemt het logo dan geruisloos zijn plaats in in de header.
Css uit het script
Als je de verduister-div in het script een ID geeft, kan deze ID gebruikt worden om alle stijl-eigenschappen van de verduisteraar in de css te zetten, zodat het niet meer in het javascript hoeft. Dat maakt het script wat overzichtelijker, en verder maakt het niets uit.
Fisherman's Friend
Het verse javascript
Al met al kan het javascript iets als dit worden:
[JS]<script type="text/javascript">
//<![CDATA[
var duur = 1.1; // periode in seconden die het uitvagen moet duren
var automaat = 3.5; // wachttijd in seconden: voor auto-start als men niet klikt
var div = document.createElement("div"); // maak verse div aan
document.getElementsByTagName("body")[0].appendChild(div); // voeg 'm toe aan de body
div.id="verduisteraar"; // geef 'm een naam
var verduisteraar = document.getElementById('verduisteraar'); // gebruik dezelfde naam als afkorting om 'm vast te pakken
verduisteraar.style.opacity = 1; // beginwaarde: helemaal zichtbaar
verduisteraar.innerHTML='<a href="#" onclick="verdwijn();return false;"><img src="http://bliksekaters.nl/tests/images/L-elektro-schakelaar-logo.png" width="450" height="513" alt="" /></a>';
var interval = (duur*1000) / 20; // bij 20 stappen; interval is in milliseconden.
function verdwijn(){
if(verduisteraar.style.opacity > .07){ // op 't laatst een klein sprongetje
var nieuw = verduisteraar.style.opacity -0.05; // maak wat transparanter (in 20 stappen van 1 naar nul)
// hier browser-specifieke styles:
verduisteraar.style.MsFilter = "progidXImageTransform.Microsoft.Alpha(Opacity:"+nieuw*100+")"; // IE8
verduisteraar.style.filter = "alpha(Opacity:"+nieuw*100+")"; // older IE/Win
verduisteraar.style.KHTMLOpacity = nieuw; // Safari<1.2, Konqueror
verduisteraar.style.MozOpacity = nieuw; // older Mozilla and Firefox
verduisteraar.style.opacity = nieuw; // modern browsers
// en ga even later het volgende stapje maken:
setTimeout(verdwijn, interval);
}
else {
// haal hele verduister-div met inhoud weer weg:
clearTimeout(verdwijn);
document.getElementsByTagName("body")[0].removeChild(verduisteraar);
}
}
setTimeout(verdwijn,automaat*1000); // deze direct na inladen v/d pagina uitvoeren: automatische wachttijd gaat dan in
//]]>
</script>[/JS]
De proef op de som
PS-1:
De html-errors zitten er nog wel in, vanwege het gebruik van achterhaalde tags en eigenschappen: zie hier het hoe, wat en waarom ervan.
PS-2:
De keywords moeten er steeds een komma tussen hebben staan.
Met vriendelijke groet,
CSShunter
Ja, er zat een tikfoutje in het script.
De 100%x100% verduister-div was eerst in het javascript gecreëerd als kind van de <html>. Vervolgens werd geprobeerd 'm aan het eind van het script (na de opheldering) te vernietigen als kind van de <body>. Maar daar was het geen kind van, dus bleef de <div> staan: als laag bovenop de rest van de pagina, die dan dus onbereikbaar werd.
Nu heb ik het script (in principe prima-de-luxe, en mooi "unobtrusive") even in een pagina gezet, en er blijken toch ook nog wat andere addertjes onder het gras te zitten.
- Je kunt het verduister-div'je wel weer weghalen door het als kind van de html te vernietigen, maar dan staat het <div>'je tussen de <head> en de <body>: waar in de html-code helemaal niets hoort te staan.
- De verduister-div kan beter als kind van de <body> aangemaakt worden (en daar later weer uit vernietigd worden).
- Maar dan staat het script op de verkeerde plaats (in de <head>). Want als het script van start gaat met het opzoeken van de <body>tag, is die er nog niet! Die staat pas later in de html-code.
- Daarom moet het javascript naar helemaal onderaan worden verplaatst, vlak voor de </body></html>. Dan zijn alle ingrediënten voor het script aanwezig.
- Dan wordt in het script voor de 20% transparante verduister-achtergrond de css-eigenschap rgba(0, 0, 0, 0.8) gebruikt (dat is de kleurcode voor zwart, met een opacity van 0.8: een dekkingsgraad van 80%). Dit is echter een css-3 eigenschap die niet wordt ondersteund door IE7 en IE8 (bron). Bezoekers met deze browsers zien knalzwart is plaats van de transparantie.
- De oplossing is om een 20% transparant zwart png-plaatje als achtergrond te gebruiken (100*100px, met hor. en vert. herhaling).
- Maar dan kan niet tegelijkertijd de schakelaar-afbeelding als achtergrond-image gebruikt worden!
> De schakelaar moet opgenomen worden als voorgrond-image. - Dan komen we op de opacity-eigenschap. Die wordt niet zonder meer door IE7 en IE8 ondersteund, daar is browser-specifieke extra code voor nodig.
- Tenslotte de div.onclick = verdwijn;. Dat is niet cross-browser: geen enkele Internet Explorer kan daarmee overweg. Dat kan opgelost worden met een cross-browser event-afhandeling (zie bij quirksmode), maar het is wel zo snel om via een innerHTML-opdracht een link met een ingebouwde onclick-functie te maken.
Logo'tje bij?
Het valt op dat de pagina nog geen logo heeft. Dat zou prima in de <header> opgenomen kunnen worden, en kan meteen dienen als Home-knop (die is er niet). Niet onverstandig lijkt me om onderin ook nog een tekstlink naar de homepage op te nemen (vooral voor de andere pagina's).
Daarbij lijkt het me wel mooi, als het logo wel 100% kristalhelder zichtbaar is bij het openen van de homepage, dan is er niet alleen de schakelaar en een wat sombere vergrijsde rest te zien.
Om allerlei vreselijk ingewikkelde toestanden met z-indexen te vermijden (nodig voor de stapel-volgorde van de verschillende lagen) kan het logo er het makkelijkst dubbel in: één keer opgenomen in de gewone html van de #header-div, en één keer als (deels transparante) combinatie met de schakelaar. Bij het verhelderen neemt het logo dan geruisloos zijn plaats in in de header.
Css uit het script
Als je de verduister-div in het script een ID geeft, kan deze ID gebruikt worden om alle stijl-eigenschappen van de verduisteraar in de css te zetten, zodat het niet meer in het javascript hoeft. Dat maakt het script wat overzichtelijker, en verder maakt het niets uit.
Fisherman's Friend
Misschien dat het wat helpt voor een frissere smaak om in het script nog een klein automaatje in te bouwen. Dat kan de schakelaar-functie triggeren als de bezoeker bv. niet meteen begrijpt hoe het werkt, of zo gauw z'n muisklik op de schakelaar niet kan maken. Bij zo'n automaatje kan je instellen na hoeveel seconden wachttijd het ophelderen uit zichzelf moet beginnen.Naarling in nummer #18: "Hm... ik voel me een beetje vies."
Het verse javascript
Al met al kan het javascript iets als dit worden:
[JS]<script type="text/javascript">
//<![CDATA[
var duur = 1.1; // periode in seconden die het uitvagen moet duren
var automaat = 3.5; // wachttijd in seconden: voor auto-start als men niet klikt
var div = document.createElement("div"); // maak verse div aan
document.getElementsByTagName("body")[0].appendChild(div); // voeg 'm toe aan de body
div.id="verduisteraar"; // geef 'm een naam
var verduisteraar = document.getElementById('verduisteraar'); // gebruik dezelfde naam als afkorting om 'm vast te pakken
verduisteraar.style.opacity = 1; // beginwaarde: helemaal zichtbaar
verduisteraar.innerHTML='<a href="#" onclick="verdwijn();return false;"><img src="http://bliksekaters.nl/tests/images/L-elektro-schakelaar-logo.png" width="450" height="513" alt="" /></a>';
var interval = (duur*1000) / 20; // bij 20 stappen; interval is in milliseconden.
function verdwijn(){
if(verduisteraar.style.opacity > .07){ // op 't laatst een klein sprongetje
var nieuw = verduisteraar.style.opacity -0.05; // maak wat transparanter (in 20 stappen van 1 naar nul)
// hier browser-specifieke styles:
verduisteraar.style.MsFilter = "progid
XImageTransform.Microsoft.Alpha(Opacity:"+nieuw*100+")"; // IE8verduisteraar.style.filter = "alpha(Opacity:"+nieuw*100+")"; // older IE/Win
verduisteraar.style.KHTMLOpacity = nieuw; // Safari<1.2, Konqueror
verduisteraar.style.MozOpacity = nieuw; // older Mozilla and Firefox
verduisteraar.style.opacity = nieuw; // modern browsers
// en ga even later het volgende stapje maken:
setTimeout(verdwijn, interval);
}
else {
// haal hele verduister-div met inhoud weer weg:
clearTimeout(verdwijn);
document.getElementsByTagName("body")[0].removeChild(verduisteraar);
}
}
setTimeout(verdwijn,automaat*1000); // deze direct na inladen v/d pagina uitvoeren: automatische wachttijd gaat dan in
//]]>
</script>[/JS]
De proef op de som
- Een testpagina: schakelfader.htm
Zie broncode voor de css en nog wat andere dingetjes. - Draait in ieder geval in Firefox, Chrome, Opera, Safari en IE7. Niet kunnen testen: IE8 en IE9.
PS-1:
De html-errors zitten er nog wel in, vanwege het gebruik van achterhaalde tags en eigenschappen: zie hier het hoe, wat en waarom ervan.
PS-2:
De keywords moeten er steeds een komma tussen hebben staan.
Met vriendelijke groet,
CSShunter
Laatst bewerkt:
Kan inderdaad, en dat is inderdaad netter, maar dan moet je wel weer rekening houden met een mogelijke marge/padding op de body, al is ook daar natuurlijk weer omheen te werken.
Knalzwart? ze horen helemaal geen achtergrondkleur te zien, alleen het plaatje. CSS die browsers niet begrijpen horen ze te negeren.
hm, nooit geweten, ik dacht dat opacity oud genoeg was dat het zonder meer ondersteund zou worden, weer eens buiten IE gerekend dus.
Zoals die quircksmode pagina laat zien werkt .onclick wel degelijk in IE, niet helemaal op een standaard manier maar dat maakt voor dit script niet uit. Zonder werkende opacity maakt dat natuurljk ook weer niet uit.
Het blijft weinig gebruiksvriendelijk vind ik, mensen gaan naar die site om iets te kopen, niet om te wachten tot ze naar binnen mogen.
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
@Naarling:
=======
Anders (rbga-en-ie-test-b.htm) wordt het helemaal geen gezicht en slaat de schakelaar nergens op:
IE7 met fallback -------------------- IE7 zonder fallback
=======
=======
=======
Je kan de automaat ook heel scherp afstellen: hoe scherper, des te gebruiksvriendelijker.
Met vriendelijke groet,
CSShunter
Klopt; css staat voor niets (standaard heb ik er meestal toch al een {margin: 0 auto;} voor de body in zitten).
=======
Klopt ook. Ik bedoelde: als je een fallback erbij doet (rbga-en-ie-test-a.htm) met zonder transparantie ipv 85% dekking:
Code:
#verduisteraar {
...
background: black; /* full-color zonder transparantie: fallback voor IE7/8 */
background: rgba(0, 0, 0, 0.85); /* zwart met 85% dekking = 15% transparantie */
}IE7 met fallback -------------------- IE7 zonder fallback
=======
Dwz voor de publieksversie moet het er wel op een of andere manier bij.
=======
Jaha! :d - Maar als je de opacity in orde maakt, gaat het wel spelen (en bij een fallback ook; of je moet wachten op de automaat).
=======
Ach, altijd nog beter dan 1,5 minuut verplicht flash kijken zonder skip-intro optie (kent u die ook nog?!).
Je kan de automaat ook heel scherp afstellen: hoe scherper, des te gebruiksvriendelijker.
- Aanvullend voor de vriendelijkheid: je kan een cookie plaatsen voor als je al binnen bent en terug wilt naar de homepage (dan heb je het kunstje al gezien). Een alternatieve homepage voor dat geval lijkt me af te raden: duplicaat-pagina's vindt Google niet leuk.
Met vriendelijke groet,
CSShunter
- Status
