Her får du hjelp til å lage hjemmeside med video. Alle verktøy og programmer vi bruker til å lage webside er gratis.
JavaScript div popup med HTML og CSS
tor, 01/21/2010 - 17:33
Jeg driver og skal lage nesten som at du hopper rundt på siden bare at isteden for at det kommer rundt på siden kommer det opp en liten tekst bok som teksten står i. Jeg så det på en nett side en gang så lurte litt på hvordan man lager det. Husker ikke hvilken side det var fo og tenkte ikke på og se på kilde kodene for og se hvordan det var laget.
Håper der kan hjelpe meg her.
- Vendetta / Ola
tor, 01/21/2010 - 17:42
#1
Par spørsmål ang. designønske
Hmmm, par spørsmål angående hva du ønsker
- Mener du at teksten på websiden skal komme opp i ei bok (som i bøker)?
- Kan du forklare hva du legger i å "hoppe rundt på siden"?
tor, 01/21/2010 - 18:20
#3
Anbefalinger
Først vil jeg si et par ting, og dette er ikke for å ta fra deg motivasjonen, men for å rettlede deg. Det smarteste du kan gjøre for deg selv, er å lære om semantisk korrekt markup (HTML), og hvilke muligheter du har ved å kombinere CSS med HTML.
Da vil du få mye penere markup (HTML), og websidene dine vil bli langt enklere å vedlikeholde. I tillegg blir de mindre, slik at de raskere vil lastes av dem som besøker hjemmesiden din. Antar at du bruker en slags kodeeditor, og at det er denne som har laget mye av markupen din.
Uansett, du burde sjekke ut kodekurset i HTML og CSS. Der vil du lære et par nyttige teknikker, f.eks. hvordan man sentrerer tekst ved hjelp av CSS, fremfor å bruke "center"-taggen. Hvordan man kan sette margins og padding på elementer for å skape mer "luft", og dermed unngå bruk av "br"-taggen og så videre.
Med det sagt: Jeg var en notorisk diddlebass da jeg begynte å kode, men jeg er glad for at jeg tok meg bryet med å skille markup (struktur) i HTML og design i CSS. Det kan kanskje fremstå som mer tungvindt i begynnelsen, men desto mer man lærer, jo bedre forstår man at det er.
Spørsmålet ditt om hoppende popup
La meg være helt sikker på hva du vil. Du vil ha en webside med linker til undersider. Når man klikker på undersidene, så skal det poppe opp en boks med innholdet i?
Du er mao ute etter at en popup (nytt lite nettleservindu) skal åpne seg når man klikker på linken?
tor, 01/21/2010 - 18:38
#4
Det med css'n
jeg bare slengte inn litt css det men all css'n jeg har bli lagt inn i egen fil.
Men tilbake igjen til saken. Det skal ikke være et nytt nettleser vidu som åpner seg. Men bare en liten popup nesten som i en javascript eller noe sånn. vet ikke helt hvordan jeg skal forklare det. JEg vet hvordan det skal være i hode men da jeg prøver og få det ned på tastaturet så blir det bare tull 
MEn kan godt si da at det er en slaks "java script" Popup som kommer opp. skal se over litt og se om jeg finner den siden så kan jeg ta ss (scren shot) av det og vise deg hvordan jeg har tenkt det
tor, 01/21/2010 - 18:51
#5
facebox
KAn hende det heter facebox? Vis det er noe da
tor, 01/21/2010 - 20:22
#6
fant siden
sånn hadde jeg tenkt det skulle bli
tor, 01/21/2010 - 21:49
#7
HTML, CSS og JavaScript
Kan hende det heter facebox? Hvis det er noe da
Det aner jeg dessverre ikke, men jeg skal sjekke litt rundt etterhvert. Det finnes garantert en enklere måte å gjøre dette på, enn ved å lage det fra bunnen selv. Men det kan jo være greit å se litt hvordan man kan gjøre det selv óg.
Bruk av HTML, CSS og JavaScript
Aha, da skjønner jeg bedre. Vel, til dette trenger man JavaScript, og det er forskjellige måter å gjøre det på. Her er én måte for å illustrere.
Eksempel
Du kan definere alt innholdet i HTML, for så å endre classen på elementene via JavaScript. Classene er igjen stylet i CSS.
Klikk på linkene nedenfor for å se hemmelige beskjeder! :)
Tittentei sier fallerallerei!
Sjonkel Rolf spiller golf!
Forklaring av eksempel
Dette eksemplet består av tre komponenter.
- HTML
- CSS
- JavaScript
HTML
I HTML definerer man selvsagt de forskjellige taggene og innholdet av dem. I sin reneste form ser HTMLen slik ut:
<div id="beskjed">
<p id="titten-tei" class="hidden">Tittentei sier fallerallerei!</p>
<p id="sjonkel-rolf" class="hidden">Sjonkel Rolf spiller golf!</p>
</div>
<ol>
<li><a onclick="changeClass('titten-tei')">Titten Tei</a></li>
<li><a onclick="changeClass('sjonkel-rolf')">Sjonkel Rolf</a></li>
</ol>Legg merke til at jeg bruker attributten onclick til å calle JavaScript-funksjonen changeClass. Videre inneholder funksjonen changeClass id'en til p-taggen den skal vise frem.
I JavaScriptet nedenfor, vil du se hvordan man bruker id'en til p-tagger inne i divisjonselementet med id beskjed
for å sette classen på dem.
CSS
Videre lager man en class i CSS. Denne classen skal skjule de elementene som er gitt den.
p.hidden {
display: none;
}JavaScript
Til slutt har man litt JavaScript. JavaScriptet calles når man klikker på linkene. Man caller da en funksjon som gjør to ting.
function changeClass(id) {
// Setter hidden på alle "p" i div med id "beskjed"
var p=document.getElementById("beskjed").getElementsByTagName("p");
for ( var i=0, len=p.length; i<len; ++i) {
p[i].setAttribute("class", "hidden");
}
// Fjerner hidden class på valgte element
document.getElementById(id).setAttribute("class", "");
return true;
}- Setter classen
hidden
på allep-taggene nøstet i<div id="beskjed"> - Setter tom class attributt på den
p-taggen som calles viaidfra linken
Og vips, tilsammen utgjør disse tre funksjonaliteten man ser ovenfor.
Digresjoner
Du bør selvsagt lage stylene langt penere, i tillegg er det lurt å skille HTML, CSS og JavaScript i hver sine filer.
Implementer JavaScript-filen øverst i HTML-dokumentet etter du har henvist til CSS-dokumentet, da vil websiden laste fortere.
Videre kan du selvsagt lage en egen lukk
-knapp, og måten du styler popupen
på, vil bestemme hvor på skjermen den vises. Man kan f.eks. plassere en div midt på skjermen ved hjelp av CSS.
tor, 01/21/2010 - 23:54
#8
css
Jeg er ikke så veldig flink i css men takk får det du viste meg her. Men hvordan skal jeg gjøre det vis jeg skal sette det som kommer opp når du trykker på de forskjelige inn i en boks? Og hvordan skal jeg lage den "lukke" Knappen?
Men tusen takk for all hjelp :)
fre, 01/22/2010 - 17:41
#9
JavaScript skjule og vise div
For å sette det inn i en boks, lager du bare en div rundt, deretter bruker du CSS for å style div'en. Det eneste du gjør, er altså å si "Når jeg klikker her, vis diven". Hvordan diven ser ut, og hvor på skjermen den kommer, avhenger av hvordan du styler den med CSS.
Lukkeknappen kan du lage ved å skrive en JS-funksjon som skjuler div'en igjen. Skal skrive et lite eksempel til deg her:
fre, 01/22/2010 - 17:59
#10
JavaScript, CSS og HTML div popup
Eksempel på javascript popup
med div
Stygg, men fungerende kildekode
<p>Klikk på linkene nedenfor for å se hemmelige beskjeder! :)</p>
<style type="text/css">
ol#select a {
cursor: pointer;
}
div.hidden {
display: none;
}
div#beskjed2 div {
border: 5px solid #000;
width: 200px;
padding: 20px;
position: relative;
top: 20;
background: #ebebeb;
}
</style>
<script type="text/javascript">
function hideDiv() {
// Setter hidden på alle "div" i div med id "beskjed"
var div=document.getElementById("beskjed2").getElementsByTagName("div");
for ( var i=0, len=div.length; i<len; ++i) {
div[i].setAttribute("class", "hidden");
}
}
function changeClass2(id) {
hideDiv();
// Fjerner hidden class på valgte element
document.getElementById(id).setAttribute("class", "");
return true;
}
</script>
<div id="beskjed2">
<div id="titten-tei2" class="hidden">
Tittentei sier fallerallerei!
<p><a onclick="hideDiv()">lukk</a></p>
</div>
<div id="sjonkel-rolf2" class="hidden">
Sjonkel Rolf spiller golf!
<p><a onclick="hideDiv()">lukk</a></p>
</div>
</div>
<ol id="ol-select">
<li>
<a onclick="changeClass2('titten-tei2')">Titten Tei</a>
</li>
<li>
<a onclick="changeClass2('sjonkel-rolf2')">Sjonkel Rolf</a>
</li>
</ol>
fre, 01/22/2010 - 19:22
#11
Tusen takk :)
Tusen takk med al hjelpen jeg har fått :)
Menj eg prøvde og legge inn en liste igjen i en av de "popupene" som kom opp men deg gjikk ikke så bra. Får lista ble vist på alle de andre også.
Vet du hvordan jeg kunne ha fåt fiksa det brukte <ul><li>tekst</li><li>tekst></ul>
fre, 01/22/2010 - 19:27
#12
Sjekk innom om én times tid,
Sjekk innom om én times tid, skal skrible opp et skript du kan laste ned. :)
fre, 01/22/2010 - 19:55
#13
Takk
Tusen takk :) det er kjempe snilt av deg :)
fre, 01/22/2010 - 20:57
#14
Div popup med JavaScript, HTML og CSS
Beklager en liten forsinkelse, fikk uventet besøk her. Du kan hente scriptet som viser div popup med JavaScript, HTML og CSS her.
fre, 01/22/2010 - 21:24
#15
Tusen takk :)
hehe du hadde ikke trengt og stressa med det da :) her hele helga på meg og drive med dette jeg så det :)
Men tusen takk for al hjelp jeg har fått av deg :) kommer nok en ny tråd om ikke så lenge, Da har jeg sikkert problemer med noe annet.
Men vil si at er veldig glad at noen tar seg så mye tid som det du har tatt deg til og hjelpe andre, Har anbefalt siden til venner som har spurt meg om jeg kan hjelpe dem med og lære html og litt div :)
Men du og dere andre får ha en super kveld videre :)
fre, 01/22/2010 - 21:29
#16
Bare hyggelig
Hehe, er bare artig å hjelpe :)
Blir veldig glad når at folk anbefaler siden til venner og linker til den i forum de er på. :)
Du får ha en fin kveld videre du også, her er det webprosjektering for fullt pågang :)
fre, 01/22/2010 - 21:38
#17
Prosjekt
Har ett litte prosjekt på gang jeg også :P men det tar nok lang tid før jeg er ferdig med det :P men jeg blir nok aldri helt 100% ferdig med det for det kommer til og være et prosjekt jeg kommer til og utvikle mere og mere. og vær gang jeg lærer meg noe nytt som jeg kan bruke på den siden kommer jeg til og legge det inn :)
MEn får bare håpe at jeg lærer meg nok til og få prosjekte sikelig i gang. Har en god venn av meg som jeg synes er veldig flink i php som hjelper meg også. Og denne siden her har vert til stor hjelp. og som jeg sa i posten jeg posta i sta så er jeg evig taknemlig for al den hjelpen du har gjit meg så langt.
Er litt vansklig og forklare men kan vise det lett med kode.
<center><h2>Eksempel</h2></center><br><br>Innholdsfortegnelse:<br><br>
<table class='tbl1'>
<tr width='40%' style='background-color:#555;'>
<td width='20%'><a href='#side1'>Side1</a></td>
<td width='20%'><a href='#side2'>side2</a></td>
</tr>
<tr width='40%' style='background-color:#777;'>
<td width='20%'><a href='#side3'>side3</a></td>
<td width='20%'><a href='#side4'>side4</a></td>
</tr>
</table>
<div id='side1'><b>Side1.</b></div><br>
Tekst her.<br>
<br><hr><br>
<div id='side2'><b>side2.</b></div><br>
tekst her.<br>
<br><hr><br>
<div id='side3'><b>side3.</b></div><br>
Tekst her.<br>
<br><hr><br>
<div id='side4'><b>side4</b></div><br>
Tekst her.<br>
<br><hr><br>
Men når du trykker på "side4" så "hopper" den ned til side 4 men i steden for sku det ha åpnet en ny liten tekst boks som teksten på "side4" so inni den tekst bokse.
Ola @ Gangs Of Norway