Tabel / Popup

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009

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.

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
Der var jæval

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 :)

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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. :)

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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.

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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

 
 

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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.

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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" />
Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
Hvordan gjør jeg det i JavaScript da?

Hvordan skal jeg gjøre det i JavaScript da?

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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)".

  1. Classe for standard knapp (når musa ikke er over)
  2. 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.

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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.

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Popup når man trykker på knapp

Hva mener du med en bekreftelsespopup? Sånn med "OK" eller "Cancel"?

Skal den komme opp idet man klikker på knappen?

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
ja tenkte på det

Ja tenkte på sånn Comfirm Box som det heter da. 

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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!

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>
Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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?

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
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å.

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
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.

 
 

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.