Notifikationer

Markér alle som læst Log ud

kimlarsen1978 Nybegynder

12. november 2007 - 22:29 Der er 21 kommentarer og
1 løsning

Skift indhold via "tabs" uden reload

Hejsa
Jeg har set noget smart flere steder, som jeg gerne vil høre om nogle kan give mig opskriften/koden på...

Bl.a. andet har jeg set det på http://www.nyhederne.tv2.dk. Prøv at åbne siden og rul ned i bunden, der er der en række tabs: Alle, Indland, Udland, Politik og så videre...

Når man klikker på dem skifter indholdet i boksen nedenunder - vel og mærket uden der hentes en ny side ind. Alt indholdet er, efter hvad jeg kan se, allerede i HTML'en pakket ind i DIV's og klar til at blive vist. Der linkes blot til et bogmærke ved klik på en ny tab - hvordan dælen har de lavet det?

Nogle der ved hvordan og vil give mig et stump kode som kan gøre det samme? 200 points fordi jeg meget gerne også vil have et lille style sheet til at danne layout'et af tabs'ne.

Tak :)

Synes godt om

w13 Novice

12. november 2007 - 22:40 #1

Du kan gøre det sådan her med java script:
-----------------------------------------
<html>
<head>
<script type="text/javascript">
function ShowTab(id){
arrTabs=new Array("nr1","nr2","nr3");
for(i=arrTabs.length-1;i>=0;i--){
document.getElementById(arrTabs[i]).style.display="none"
}
document.getElementById(id).style.display="block"
}
</script>
</head>
<body>

<span onclick="ShowTab('nr1')">Nr. 1</span>
<span onclick="ShowTab('nr2')">Nr. 2</span>
<span onclick="ShowTab('nr3')">Nr. 3</span>

<div id="nr1" style="display:none">Tekst her</div>
<div id="nr2" style="display:none">Tekst her</div>
<div id="nr3" style="display:none">Tekst her</div>

</body>
</html>
-----------------------------------------
Stylesheet'et må du selv lave. Denne kategori er hjælp til selvhjælp, og nu har du fået hele JavaScript-funktionaliteten udleveret. =) Jeg ved jo heller ikke, hvordan du vil designe dine tabs..

Synes godt om

keysersoze Ekspert

12. november 2007 - 22:41 #2

Det er en lidt gammel kode - men idéen i det er god nok; http://activedeveloper.dk/articles/292/

Ellers led efter mere fx ud fra "show hide layer"

Synes godt om

w13 Novice

12. november 2007 - 22:41 #3

Min kode er dog utestet og kunne meget vel _ikke_ virke, men så retter vi den bare til. =) Har jo lavet den så kort, at det nok sku' være til at rette fejl ret let.

Synes godt om

w13 Novice

12. november 2007 - 22:56 #4

Nu er den testet. =)

Synes godt om

kimlarsen1978 Nybegynder

13. november 2007 - 00:15 #5

Tak for input. Jeg kender godt til hide/show med divs, men jeg synes bare det TV2 har gjort ser ret cool ud :)

Men man skal jo heller ikke gøre det unødigt svært for en selv. Jeg kan vel blot style en punktopstilling <li> også ellers bruge din eller tilsvarende funktion...

Synes godt om

roenving Novice

13. november 2007 - 01:08 #6

-- en bedre løsning er at bruge en variabel til at opbevare en gammel åbnet, som så kan lukkes ved visning:

<script type="text/javascript">
var oldTab = oldElm = null;
function ShowTab(id,elm){
if(oldTab)
oldTab.style.display = 'none';
oldTab = document.getElementById(id);
oldTab.style.display = "block";
if(oldElm){
oldElm.style.backgroundColor = "#876987";
}
oldElm = elm;
elm.style.backgroundColor = "";
}
</script>

...
<span onclick="ShowTab('nr1',this)">Nr. 1</span>
...

Synes godt om

kimlarsen1978 Nybegynder

13. november 2007 - 08:47 #7

Tror ikke helt jeg forstår hvordan det virker?

Synes godt om

w13 Novice

13. november 2007 - 13:40 #8

Roenvings kode fungerer på samme måde, han har bare optimeret den. Så HTML-delen er stort set den samme som i mit eksempel, bortset fra at han også har "this" som parameter i ShowTab.

Synes godt om

kimlarsen1978 Nybegynder

13. november 2007 - 23:47 #9

Okay, men jeg forstår faktisk ikke hvordan JS funktionen virker?

Derudover kunne jeg også godt tænke mig en scrool-funktion som den http://www.nyhederne.tv2.dk har til deres "Video tab". Åbn siden og vælg "Video" lige ved siden af "Nyheder", under indholdet til "ruden" er der nogle fine op og ned pile som får indholdet til at scrol'e - kan I hjælpe med at lave noget tilsvarende?

Tak!

Synes godt om

w13 Novice

14. november 2007 - 00:50 #10

Roenvings JS-funktion virker ligesom min ved, at den skjuler den sidst valgte tab og viser den valgte med style-funktionen "display", som enten kan være "none" (usynlig) eller "block" (synlig som block-element).
Hvis der er bestemte dele af den, du ikke forstår, må du fremhæve dem, så skal jeg nok forklare dem nærmere.

Ang. videofunktionen, så kan jeg slet ikke se den. Jeg ser "Video" et sted, men der står, at de er blevet flyttet. Ser ingen scroll. Og en scroll er - med mindre du mener standard scrollbars - ikke bare noget, man lige kan lave. Og slet ikke, så det fungerer cross-browser. Det er naturligvis muligt og ikke ligefrem atomfysik, men du bør nok oprette et helt nyt spørgsmål.

Synes godt om

kimlarsen1978 Nybegynder

14. november 2007 - 10:37 #11

Det var min fejl det er på deres valg side de har den scroll http://nyhederne.tv2.dk/politik/ men det er fortsat under "video"

Synes godt om

w13 Novice

14. november 2007 - 15:25 #12

Ja, det er ikke helt ligetil, så synes, du skal oprette et nyt JavaScript-spørgsmål om det.

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 13:27 #13

Hejsa
Svar på det med scroll findes her: http://www.eksperten.dk/spm/396940

Men jeg har et problem i forbindelse med min tilpasning af scriptet. I denne funk:

***************
function MoveAreaDown(move, parObjContainer){
if(this.y>-this.scrollHeight+objContainer1.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+", parObjContainer)",speed)
}
}
**************
Her har jeg taget det div-objekt som jeg vil scrolle på med ind som parameter (parObjContainer). Det fungerer ved at den gennem setTimeout kalder sig selv og laver scroll til man flytter musen, men...

Hvordan skal

setTimeout(this.obj+".down("+move+", parObjContainer)",speed)

skrives for at parObjContainer korrekt bliver medsendt som objekt når funktionen kalder sig selv?

Jeg har prøvet lidt af hvert men intet vil virke?

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 13:28 #14

Ups:
Funktionen ser sådan he ud:

***************
function MoveAreaDown(move, parObjContainer){
if(this.y>-this.scrollHeight+parObjContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+", parObjContainer)",speed)
}
}
**************

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 14:35 #15

Mit bedste "gæt" er:

function MoveAreaDown(move, parObjContainer){
objContainer = eval(parObjContainer);
if(this.y>-this.scrollHeight+objContainer.clipHeight){
this.MoveArea(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+", '"+objContainer+"')",speed)
}
}

Men jeg får denne fejl:
Error: missing ] after element list
Source File: ../JScript/scroll.js
Line: 56, Column: 8
Source Code:
objContainer = eval(parObjContainer);
[object Object]

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 14:38 #16

Det virker fint når funktionen kaldes, det er når den i loop'et skal kalde sig selv det går galt?

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 15:14 #17

Hmmm, det her virker, men det er jo ikke så pænt...

*****************
function MoveAreaDown(move, containernumber){
switch (containernumber){
case 1:
if(this.y>-this.scrollHeight+objContainer1.clipHeight){
this.MoveArea(0,this.y-move)
if(loop){
setTimeout(this.obj+".down("+move+", 1)",speed)
}
}
break
case 2:
if(this.y>-this.scrollHeight+objContainer2.clipHeight){
this.MoveArea(0,this.y-move)
if(loop){
setTimeout(this.obj+".down("+move+", 2)",speed)
}
}
break
case 3:
if(this.y>-this.scrollHeight+objContainer3.clipHeight){
this.MoveArea(0,this.y-move)
if(loop){
setTimeout(this.obj+".down("+move+", 3)",speed)
}
}
break
}
}
****************

Synes godt om

kimlarsen1978 Nybegynder

17. november 2007 - 15:15 #18

...

Synes godt om

w13 Novice

02. februar 2008 - 13:36 #19

Lukketid?

Synes godt om

kimlarsen1978 Nybegynder

02. februar 2008 - 15:20 #20

Ja, smid et svar...

Synes godt om

w13 Novice

02. februar 2008 - 16:26 #21

Oki

Synes godt om

kimlarsen1978 Nybegynder

03. februar 2008 - 12:16 #22

:-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS