Her får du hjelp til å lage hjemmeside med video. Alle verktøy og programmer vi bruker til å lage webside er gratis.
Tabel / Popup
man, 01/25/2010 - 04:06
God Kveld. Jeg har da sitti her i natt og drivd med lit javascript og tulla litt med det.
Men jeg sku ha fiksa slikk at jeg hadde fått tabelen på venstre side av nettlesern eller popupen i center. Men samma hva jeg prøver så går det ikke. Så håper indelig noen kan hjelpe meg :)
Her er link til nett siden: div-test.99k.org/div-popup-javascript-html-css/index.html
Takk for all hjelp.
man, 01/25/2010 - 04:13
#1
Stilig med JavaScript og knapper! :D
Se her er han i full gang med JavaScript, stilig :D
Sjekk HTML-koden din for tabellen, ser du hva som skaper problemer her?
<table align="center" id="menu" class="kid">PS: Trykket på knappen pudding
, fikk opp følgende beskjed:
Bare så du vet det så synes jeg du er en puding :P men er glad i deg :)
STFU, GID oxo XD, lol
man, 01/25/2010 - 04:45
#3
Dummytekst
Hehe, kjenner til det. Skriver mye rart når jeg tester ting og ikke bruker dummytekst fra lorem ipsum.
Hva det du skrev sier om måten du tenker på, er en helt annen sak. På ett eller annet vis dukket jo de rare ordene der opp i hodet ditt, haha. :)
Du får style knappene dine litt med CSS også vett, da blir det enda tøffere. :)
man, 01/25/2010 - 04:49
#4
style knappene
Hmm ja hadde planer om det. men vet ikke helt hvordan jeg skal gå fra. har du noen forslg om hvordan letteste måten og gjøre det på?
Ja jeg hater da jeg ikke vet hva jeg skal skrive da jeg driver og tester ting og da finner jeg på de rareste tinga. men det får da gå bra det. er da bare tester :P
man, 01/25/2010 - 04:58
#5
classer og ider for styling av HTML-knapper
Jada, det kan jeg vet du. Men nå må du ikke miste all nattesøvnen og sitte som en trett slask på skolen fordi du vil holde på med scripting da, hehe. :)
Styling av HTML-knapper med CSS
Dette er koden for puddingknappen din.
<input type="button" value="Puding" onclick="openDiv('puding')"/>Hvis du vil style alle knappene likt, så kan du gi dem en class, og så style classen du ga dem i CSS, f.eks. slik:
HTML
<input type="button" class="knapper" ... />CSS
.knapper {
background: #fff;
}Bakgrunnsfargen på knappen vil nå bli hvit. Hvis du skal style knappene individuelt, så kan du gi hver knapp en id istedenfor en class. Man setter id ved å bruke id-attributten på samme måte som class-attributten.
I CSS må man så style ved hjelp av nummertegnet #, slik:
#id-navn {
background: #fff;
}Og husk at én id kun skal forekomme én gang. Classer kan du bruke flere ganger på samme webside.
man, 01/25/2010 - 05:03
#6
Skal prøve
Skal prøve ut litt vettu.
Nattsøvnen er det ikke så viktig med. Har bare program fag i morgen så da gjør vi litt som vi vil så kan sutte på sveise verkstede og halv sove uten om at folk bryr seg :P Og er alikevel bare 2t med søvn jeg får vis jeg legger meg nå :P og da kommer jeg jo værtfal ikke opp :P
man, 01/25/2010 - 05:21
#7
Mouseover på knappene?
Går det an og bruke MouseOver efekter på knappene?
Eks:
Når musen ikke er over så er teksten i knappen i orange. Men da musen kommer over så bir den hvit. Går det an eller?
Håper egentlig at det går for tror det egentlig hadde blit ganske kult.
man, 01/25/2010 - 05:30
#8
Hover effekt på HTML-knapper med CSS
Ja, det går, det beste er å bruke JavaScript til det formålet på alt annet enn linker, fordi de fleste gamle nettleserne ikke støtter hover-effekt på andre elementer enn linker.
Men, siden du bare skal teste, kan du bruke CSS.
.knapper:hover {
background: orange;
}Eksempel på knapp med hover effekt i CSS
Kildekode for denne knappen:
CSS
.knapp {
background: white;
color: red;
font-weight: bold;
font-size: 2em;
padding: 1em;
}
.knapp:hover {
background: red;
color: white;
}HTML
<input type="button" class="knapp" value="PANIC BUTTON" />
man, 01/25/2010 - 05:34
#9
Hvordan gjør jeg det i JavaScript da?
Hvordan skal jeg gjøre det i JavaScript da?
man, 01/25/2010 - 05:41
#10
Skifte class på elementer med JS
Du kan f.eks. gjøre det ved å opprette to vanlige classer i HTML, og definere knappene med "normal state (1)".
- Classe for standard knapp (når musa ikke er over)
- Classe for hover knapp
Videre må du skrive en funksjon i JS som skrifter class på knappen når man tar musa over den, og setter tilbake den andre classen når musa forsvinner fra knappen igjen.
I tillegg kan du bruke eksemplet jeg viste ovenfor. Hvis du bruker begge to, så vil både brukere med nye nettlesere som støtter :hover i CSS, men ikke har JS aktivert, og brukere som har gamle nettlesere med støtte for :hover i CSS, men JS aktivert, se effekten.
man, 01/25/2010 - 05:48
#11
hmm
Hmm vet ikke helt om jeg får det til men skal da prøve.
Men går det an og fikkse slikk at det kommer om en "bekreftelse popup når jeg prøver og gå inn på de forskjelige knappene? Og vis det går an hvordan skal jeg gjøre det? og kunne du vist det i et eksempel? prøvde en gang men det gjik ikke.
man, 01/25/2010 - 06:05
#14
Knappelapp
Ok, da prøver vi på det.
Knapp med confirm, alert og endring av class
Du må kun trykke på knappen i absolutte nødstilfeller!
Du har nå skutt en atombombe mot Kina!
CSS kilde
.knapp {
margin-top: 1em;
background: white;
color: red;
font-weight: bold;
font-size: 2em;
padding: 1em;
}
.knapp:hover {
background: red;
color: white;
}
.nuke {
color: red;
background: white;
font-weight: bold;
font-size: 2em;
border: 2px dotted red;
padding: 1em;
margin: 0.5em;
}
.hidden {
display: none;
}JavaScript kilde
function panic_nuke() {
var msg = 'Sikker på at du vil fullføre oppgaven?';
var rsp = confirm(msg);
if(rsp) {
var msgOk = 'Nå har du gjort det!';
alert(msgOk);
document.getElementById("foo").setAttribute("class", "nuke");
} else {
var msgCancel = 'Phew!';
alert(msgCancel);
}
}HTML kilde
<input type="button" class="knapp" value="PANIC BUTTON" onclick="panic_nuke();" />
<div id="foo" class="hidden">
<p>Du har nå sendt en atombombe i retning Kina.</p>
</div>
man, 01/25/2010 - 06:24
#15
Comfirm Box og hover
Da er Comfirm Box og mousOver efekt på plass :)
Comfirm Box er bare på "hmm" knappen enda da. skal se etter noen andre god biter på de andre.
Har du no forslag / eksempler på hva jeg kan bruke? eller er det ikke så mye jeg får brukt der?
man, 01/25/2010 - 06:37
#16
Forslag
Nei, jeg vet ikke jeg. Nå har du jo fått endel eksempler, så nå burde du jo prøve deg litt frem selv. :) Du kan jo prøve å få bakgrunnen på websiden til å skifte farge med en ny knapp?
Hvis du lærer deg CSS litt mer inngående, så kan du jo lage forskjellige klasser og bruke JS til å sette klasser på elementer når forskjellige ting skjer (f.eks. når man klikker på en knapp). :)
PS: Kommer til å stykke opp denne tråden litt etterhvert, men er for trett til å gjøre det nå.
man, 01/25/2010 - 06:43
#17
Tusen takk
Vil takke for al den strålende hjelpen jeg har fått av deg her :)
Men tror jeg egentlig ikke kommer til og gjøre mere i natt. er jo bare 30min til jeg skal "stå opp" så tror jeg heller tar og prøver litt mere på dagen når jeg er litt mere våken.
Men jeg vil si tusen takk for al hjep enda en gang :) Jeg får en ekstra piff og mere glød da du hjelper meg videre med ting og tang.
Men jeg tror jeg skrur av pc'n for kvelden jeg så jeg vertfal får slappet av før jeg skal på skolen :)
Men du får ha en fin natt videre :) og sove godt når du finner senga.
Der ver den jæval ja :P
Haha ja jeg viste faen ikke hva jeg sku skrive så bare ble noe xD
Men ja synes det ble litt tøft med knapper og litt sånn :) driver og fikser litt farger og sånn. så skal jeg se litt mere på W3dchools når jeg kommer tilbake i fra skolen i morra :P vis jeg ikke tar det etter på da xD
Men takk for hjelpen :)
Ola @ Gangs Of Norway