"Forrige" og "neste" div funksjon? ^^

[htmlBendik]

Litt vanskelig og forklare men skal prøve..

Jeg lurer på om det er mulig å få til sånn slags google greier med diver..

 

Hvis jeg for eksempel har tre diver:

<div id="1">Dette er div 1</div>
<div id="2">Dette er div 2</div>
<div id="3">Dette er div 3</div>

Så vil jeg at når siden har lastet vises kun (div1).

Og over står det sånn: Forrige 1 - 2 - 3 Neste.

Og når man trykker på et tall kommer den diven.

Takker for svar som hjelper

SKal forresten ha radio'er og checkboxer i divene som lagrer informasjonen selv om man velger ny div..

Endret 12. august 2007 av htmlBendik

[dabear]

Heisann. Og du lurer på hva? Er vel ikke meninga at vi skal gjøre det for deg vel?

 

om du har alle divene rundt en wrapper, feks en annen div, skal ikke dette være noe vanskelig. om du har var wrapper = document.getElementById('the_wrapper')

 

vil du kunne lese antall diver med

 

var children = wrapper.childNodes.length;
var numDivs = children.length

eller

var children = wrapper.getElementsByTagName('div');
var numDivs = children.length

 

Sett alle divene til wrapperen til display:none i css, og lag deg en css-klasse som overstyrer denne og setter display:block.

 

Når du aktiverer en tab, setter du theTabObject.className ='cssKlassen'.

 

Du kan enkelt iterere over elementer ved en for loop

for(var i=0; i < numDivs; i++) {

   var currentDiv = children[i];

}

 

Om det var noe mer du lurte på, så vær litt mer spesifikk, men husk at dette ikke er en ønskes-seksjon hvor vi skal gi deg hele svaret

Lykke til!

[eiden84]

Noe sånt?

<script type="text/javascript">

var nav = function(elem){
this.elem = document.getElementById(elem);
this.pages = this.elem.getElementsByTagName("div");
this.lastIdx = -1;
this.goto(0);
}

nav.prototype = {
next: function(){
 if(this.lastIdx == -1){
 	this.goto(0)
 }else{
 	var nextIdx = (this.lastIdx >= this.pages.length - 1) ? 0 : this.lastIdx + 1;
 	this.goto(nextIdx);
 }
},
prev: function(){
 if(this.lastIdx == -1){
 	this.goto(this.pages.length - 1)
 }else{
 	var prevIdx = (this.lastIdx == 0) ? this.pages.length - 1 : this.lastIdx - 1;
 	this.goto(prevIdx);
 }
},
goto: function(idx){
 if(idx == this.lastIdx){
 	return;
 }

 if(idx >= this.pages.length){
 	return;
 }

 if(this.lastIdx != -1){
 	this.pages[this.lastIdx].style.display = "none";
 }

 this.pages[idx].style.display = "block";
 this.lastIdx = idx;
}
};
</script>

<div id="pages">
<div style="display:none">Dette er div 1</div>
<div style="display:none">Dette er div 2</div>
<div style="display:none">Dette er div 3</div>
</div>

<script type="text/javascript">
var n = new nav("pages");

//n.next();
//n.prev();
//n.goto(2);
</script>

[eiden84]

Husk at childNodes.length også teller med whitespace-noder i Firefox.

[htmlBendik]

Takker for svarene.

Svar til Dabear:

Takk, men d var ikke d som var hoved spørsmålet, d var egentli hvordan man får forrige og neste linker..

Var vel litt dårlig forklart ja, menmen

 

Svar til Eiden84:

Hvordan får jeg fram forrige og neste linkene?

[eiden84]

Jeg kan ikke lage alt for deg

 

Les koden og forsøk å lag det selv. Hvis du står fast, spør om hjelp.

 

I den første funksjonen (var nav = function(elem){...), kan du finne hvor mange "sider" (diver) du har. Ut i fra det kan du generere lenker (1-2-3 osv).

 

Funksjonen goto blir kallet hver gang en side skiftes.

 

Lykke til.

[htmlBendik]

Ok, takk!

[b-real]

Emnetittelen i denne tråden er lite beskrivende for trådens innhold og det er derfor ingen god emnetittel. Jo bedre og mer beskrivende emnetittelen er, jo lettere er det for andre å skjønne trådens innhold og det vil være lettere å treffe den riktige forumbrukeren med det rette svaret. Ber deg derfor om å endre emnetittel slik at du unngår at en moderator stenger tråden. Vennligst forsøk å ha dette i tankene neste gang du starter en tråd, og orienter deg om hva vår nettikette sier om dårlig bruk av emnetitler.

 

Bruk -knappen i første post for å endre emnetittelen.

 

(Dette innlegget vil bli fjernet ved endring av emnetittel. Ikke kommenter dette innlegget, men gjerne dette innlegget når tittelen er endret, så vil det bli fjernet..)

[htmlBendik]

Jaok