JavaScript div popup med HTML og CSS

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009

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

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Par spørsmål ang. designønske

Hmmm, par spørsmål angående hva du ønsker

  1. Mener du at teksten på websiden skal komme opp i ei bok (som i bøker)?
  2. Kan du forklare hva du legger i å "hoppe rundt på siden"?
Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
Kodeeksempel

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.

 
 

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

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

 
 

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
facebox

KAn hende det heter facebox? Vis det er noe da

 
 

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
fant siden

Boks med HTML, CSS vises via JavaScript

sånn hadde jeg tenkt det skulle bli

 
 

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

  1. Titten Tei
  2. Sjonkel Rolf

Forklaring av eksempel

Dette eksemplet består av tre komponenter.

  1. HTML
  2. CSS
  3. 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;
}
  1. Setter classen hidden på alle p-taggene nøstet i <div id="beskjed">
  2. Setter tom class attributt på den p-taggen som calles via id fra 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.

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

 
 

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

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
JavaScript, CSS og HTML div popup

Eksempel på javascript popup med div

  1. Titten Tei
  2. Sjonkel Rolf

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

 
 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Sjekk innom om én times tid,

Sjekk innom om én times tid, skal skrible opp et skript du kan laste ned. :)

Vendetta
Vendettas bilde
Avlogget
Ble med: 25.12.2009
Takk

Tusen takk :) det er kjempe snilt av deg :)

 
 

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

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

 
 

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

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

 
 

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.