|
|
 | javascript - gøre hjemmeside mørk
Fra : scootergrisen |
Dato : 20-02-11 17:09 |
|
Er der nogen der ved hvordan man gør hele hjemmesiden mørk med javascript ?
Jeg kan godt gøre <body> mørk sådan her :
var theBody = document.body ;
theBody.style.backgroundColor = "black" ;
Men alt det indhold der er på siden ændre ikke farve.
| |
 Anonymous (20-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 20-02-11 17:17 |
|
Den 20-02-2011 17:08, scootergrisen skrev:
> Er der nogen der ved hvordan man gør hele hjemmesiden mørk med javascript ?
>
> Jeg kan godt gøre <body> mørk sådan her :
> var theBody = document.body ;
> theBody.style.backgroundColor = "black" ;
>
> Men alt det indhold der er på siden ændre ikke farve.
Ja. Du lægger en GIF ind over hele siden. Eller en PNG, kan ikke lige
huske, om GIFfer kan bruges.
Du skal så have fat i sidens absolutte 0 selvfølgelig, og placere
billedet absolut. Det, som ligger under billedet kan man se, men ikke
klikke på. Men en z-index kan man lægge noget ovenpå billedet.
PS. du kan måske lade body skifte imellem absolut og static position,
har ikke prøvet.
MVH
Rune Jensen
| |
scootergrisen (20-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 20-02-11 17:30 |
|
Det må kunne gøre uden at bruge et billed.
Jeg skal bare ændre farven.
| |
 Martin Larsen (20-02-2011)
| Kommentar
Fra : Martin Larsen |
Dato : 20-02-11 17:56 |
|
scootergrisen wrote:
> Det må kunne gøre uden at bruge et billed.
> Jeg skal bare ændre farven.
Farven på hvad? Og til hvilken farve? Ønske du at nedtone siden?
Det sidste kan gøres ved at lægge en sort <div> oveni det hele og sætte
transparency til fx 0.5 eller hvad der nu passer. Du behøver ikke noget
billede.
| |
Anonymous (20-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 20-02-11 18:06 |
|
Den 20-02-2011 17:56, Martin Larsen skrev:
> scootergrisen wrote:
>
>> Det må kunne gøre uden at bruge et billed.
>> Jeg skal bare ændre farven.
>
> Farven på hvad? Og til hvilken farve? Ønske du at nedtone siden?
>
> Det sidste kan gøres ved at lægge en sort <div> oveni det hele og sætte
> transparency til fx 0.5 eller hvad der nu passer. Du behøver ikke noget
> billede.
Jeg er skadet. Det er for kompatibilitet med tidligere IEer. Som ikke
forstår opacity.
Man kan bruge opacity i tidligere versioner, men som jeg husker det var
det noget knald at få til at fungere. Noget med 2-3 conditional comments
og CSS i bestemt rækkefølge og IE-specifik kode.
MVH
Rune Jensen
| |
scootergrisen (20-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 20-02-11 18:33 |
|
> Farven på hvad? Og til hvilken farve? Ønske du at nedtone siden?
Hele hjemmesiden og mørk som jeg skrev i sprøgsmålet.
Ja til nedtone.
> Det sidste kan gøres ved at lægge en sort <div> oveni det hele og sætte
> transparency til fx 0.5 eller hvad der nu passer. Du behøver ikke noget
> billede.
Ok hvordan gør jeg det i javascript ?
| |
Martin Larsen (20-02-2011)
| Kommentar
Fra : Martin Larsen |
Dato : 20-02-11 20:57 |
|
scootergrisen wrote:
> Ok hvordan gør jeg det i javascript ?
Som Rune skriver er det noget bøvl med opacity i IE. Her er en simpel
løsning med jQuery, som hjælper dig med at det virker i alle browsere:
Inkludér jQuery:
<script
src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
Dette gør siden mørk:
$("<div>").
appendTo("body").
css({
top:0,
left:0,
position:"absolute",
backgroundColor: "black",
width:"100%",
height:"100%",
zIndex:10000
}).
fadeTo("normal",0.7);
Forklaring: Der tilføjes til body en sort div som sættes til at dække
hele siden, lægges ovenpå med et z-index og fades så til et transparent
niveau på 0.7.
Martin
| |
scootergrisen (20-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 20-02-11 22:15 |
|
Ok.
Nu var det egentligt noget som skulle bruges af andre og derfor helst
skulle være så simpelt så muligt men jeg vil da gerne hører noget om det
jquery som jeg tit støder på i HTML koder men ikke selv bruger.
Hvor skal jeg skriver :
> $("<div>").
> appendTo("body").
> css({
> top:0,
> left:0,
> position:"absolute",
> backgroundColor: "black",
> width:"100%",
> height:"100%",
> zIndex:10000
> }).
> fadeTo("normal",0.7);
?
| |
scootergrisen (20-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 20-02-11 22:41 |
|
Ok fandt ud af det.
| |
Martin Larsen (20-02-2011)
| Kommentar
Fra : Martin Larsen |
Dato : 20-02-11 23:05 |
|
scootergrisen wrote:
> Nu var det egentligt noget som skulle bruges af andre og derfor helst
> skulle være så simpelt så muligt men jeg vil da gerne hører noget om det
> jquery som jeg tit støder på i HTML koder men ikke selv bruger.
jQuery er et JS kodebibliotek som gør især arbejdet med DOM elementer
ufatteligt meget nemmere, ikke mindst når man tænker
browserkompabilitet. Set isoleret som i dette tilfælde med din mørke
baggrund kan man diskutere om det ikke er overkill med et sådant
kodebibliotek, men efterhånden som man udvider sin side med mere og mere
JS bliver man hurtigt virkeligt glad for at man valgte jQuery etc.
Sådan skal du se det hvis der bliver foreslået jQuery - det er en
mulighed til overvejelse, især hvis omfanget og ambitionsniveauet vokser.
Martin
| |
Anonymous (20-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 20-02-11 18:00 |
|
Den 20-02-2011 17:29, scootergrisen skrev:
> Det må kunne gøre uden at bruge et billed.
>
> Jeg skal bare ændre farven.
Vil du løbe igennem alle sidens elementer og så give dem en relativ
farveændring?
Jeg er ikke JS-ekspert, men for mig at se, lyder det som meget
uoptimalt. Du skal jo huske de farver, de havde før skiftet, kan da ikke
tro andet, end at det giver lang kode, og/eller dårlig performance.
Forstår ikke, du ikke vil bruge et billede, det er da nemmere, og så
lader man maskinen om regnearbejdet. Prøv at kigge her:
http://www.cssplay.co.uk/menu/lightbox-click.html
MVH
Rune Jensen
| |
Lasse Reichstein Nie~ (20-02-2011)
| Kommentar
Fra : Lasse Reichstein Nie~ |
Dato : 20-02-11 19:15 |
|
scootergrisen <scootergrisen@NOSPANKYOUgmail.com> writes:
> Er der nogen der ved hvordan man gør hele hjemmesiden mørk med javascript ?
>
> Jeg kan godt gøre <body> mørk sådan her :
> var theBody = document.body ;
> theBody.style.backgroundColor = "black" ;
>
> Men alt det indhold der er på siden ændre ikke farve.
Hvis det er din egen hjemmeside, så lav to farve-skemaer i din CSS,
hvor den mørke virker på elementer der er inden i et element med en eller
anden klasse.
Eks.
<head>
<style>
body {
background-color: white;
color: black;
}
#mydiv {
border: 2px solid blue;
background-color: green;
color: black;
}
body.dark {
background-color: grey;
color: black;
}
body.dark #mydiv {
border-color: darkblue;
background-color: darkgreen;
color: black;
}
</style>
</head>
<body>
<input type="button" value="Skift farve" onclick="
document.body.className = document.body.className == 'dark' ? '' : 'dark';
">
<p>Noget tekst</p>
<div id="mydiv">Noget grimt tekst</div>
</body>
/L
--
Lasse Reichstein Holst Nielsen
DHTML Death Colors: <URL: http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
| |
scootergrisen (21-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 21-02-11 00:49 |
|
Nu har jeg fået lavet det som jeg vil have det.
I kan se det her :
http://scootergrisen.dk/test/test0070.html
Kom gerne med forslag til forbedringer.
PS : Der bruges HTML 5 <video> på siden som understøttes af firefox,
opera, safari, chrome og ie så længe i har den nyeste version af dem så
skulle det virke.
| |
Anonymous (21-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 21-02-11 01:17 |
|
Den 21-02-2011 00:48, scootergrisen skrev:
> Nu har jeg fået lavet det som jeg vil have det.
> I kan se det her :
> http://scootergrisen.dk/test/test0070.html
>
> Kom gerne med forslag til forbedringer.
>
> PS : Der bruges HTML 5 <video> på siden som understøttes af firefox,
> opera, safari, chrome og ie så længe i har den nyeste version af dem så
> skulle det virke.
Det ser ganske godt ud - god idé.
Her er en lille test:
OS: Linux Mint
Mozilla Firefox 3.6.13 - OK, men videoen hakker lidt og stopper omkring
halvvejen.
Opera 11.01 - Videoen vises ikke. Kan ikke helt se, hvorfor ikke. Det
burde virke.
Chromium 8.0.552.237 (70801) - kører videoen fuldstændigt glat.
Konqueror Version 4.4.5 (KDE 4.4.5) - der vises en lille sort boks, men
videon kan man ikke se. Ved ikke, om Konqueror er på vej til at sø, 100
år siden, der blev udviklet på den.
Epiphany (Internetbrowser 2.30.2) - Skidtet gik ned :)
Det, som nok er vigtigst på Linux er Firefox og Chrome. Årsagen til det
ikke helt virker på andre er nok CODECs... og så er der ikke udviklet
længe på de små browsere. Fulde af bugs er de, specielt Konqueror...
Overrasket er jeg dog over, at Firefox ikke kan følge med Chromium, så
glæder mig til 4'eren.
Hvis andre lige kan afprøve siden i Linux, se om de får det samme som
mig, ville jeg være glad.
Jeg er lidt interesseret i, hvor meget af de her nye tags, de forskelige
browsere forstår.
MVH
Rune Jensen
| |
scootergrisen (21-02-2011)
| Kommentar
Fra : scootergrisen |
Dato : 21-02-11 01:41 |
|
Jeg er ved at undersøge det nu det var derfor jeg spørger om det med at
lave en mørk baggrund.
Jeg har siddet og skrevet om <audio> og <video> og <canvas> de sidste
dage og det jo rimelig spændende med de nye muligheder der er der.
Også kommer der hardware acceleration til browserne også skal det nok
blive sjovt... hvis så bare man havde en computer der var god til det.
Men så kan kan køre tingene meget mere glat.
Du kan godt downloade Firefox 4 nu. Altså i en beta men jeg har lige
haft hentet den til windows i hvert fald.
Og du har ret i det med codecs... det prøver jeg også at undersøge og
skrive noget om. Det ret.... besværligt. Altså der er mange muligheder
og en mp4 film er ikke bare en mp4 film fordi der findes mange codecs og
alle browserne understøtte ikke de samme codecs så har man en mp4 film
betyder det ikke at de browsere der understøtter mp4 kan afspille den
fandt jeg ud af.
Men jeg syns godt nok det er spændende også fordi det virker allerede nu
i de 5 "største" browsere.
Ok der er lidt små "problemer" men altså nu har jeg da fået det til at
virke rimelig godt syns jeg.
Jeg skriver en ny tråd når jeg er blevet lidt mere færdig med mine HTML
5 sider så må du meget gerne teste dem i linux for at se hvordan det
køre der.
| |
Anonymous (21-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 21-02-11 01:54 |
|
Den 21-02-2011 01:41, scootergrisen skrev:
> Også kommer der hardware acceleration til browserne også skal det nok
> blive sjovt... hvis så bare man havde en computer der var god til det.
> Men så kan kan køre tingene meget mere glat.
Jeg har mistanke om, at Chromium allerede bruger HWA på Linux (mangler
dog en bekræftelse på det). Jeg synes i hvert fald den film kørte
ualmindeligt glidende ifht. Firefox. Fuldstændigt som om, video allerede
var en fast standard, ingen slinger i valsen.
Tror godt jeg vil sige, Opera fører på CSS3, Chromium fører på HTML5.
MVH
Rune Jensen
| |
Anonymous (21-02-2011)
| Kommentar
Fra : Anonymous |
Dato : 21-02-11 02:07 |
|
Den 21-02-2011 01:41, scootergrisen skrev:
> Jeg skriver en ny tråd når jeg er blevet lidt mere færdig med mine HTML
> 5 sider så må du meget gerne teste dem i linux for at se hvordan det
> køre der.
Det vil jeg meget gerne.
Jeg har selv leget med <audio>. Et ret mærkelig resultat, brugte MP3, og
den eneste browser, som forstod det fuldstændigt var Epiphany. Den
indbyggede browser i Ubuntu/Mint... Den kørte det helt glat. Hverken
Firefox eller Chrome eller Opera kunne køre det ordentligt. Opera har
problemer med cashe og Audio SVJH, ellers kunne jeg få det lidt til at
fungere der.
Anyways, Epiphany er bygget på WebKit, så mon ikke Chrome og de andre
webkit-baserede browsere kommer med. Ville være helt fint, alle browsere
bare som minimum understøtter MP3. Det er sgu ikke til at hive noget
OGG-lyd ned nogen steder :)
MVH
Rune Jensen
| |
|
|