Avatar billede Slettet bruger
01. april 2012 - 16:03 Der er 20 kommentarer og
1 løsning

Vis <div> efter hvilken månede vi er i, evt php

Jeg har lavet et script hvor man klikker på et link og så vises der en div med #myHeader fra 1 - 12 da der er 12 måneder(en div til hver)

<a id="myHeader1" href="java script:showonlyone('newboxes1');">jan</a>

<div name="newboxes" id="newboxes1">
//Vises når det er januar//
</div>

Jeg kunne godt tænke mig at newboxes1 blev vidst når det var januar
newboxes2 når det var feb osv. helt op til 12 = december.
Jeg har prøvet de løsninger jeg selv kunne tænke mig til men uden held. Håber i kan hjælpe mig?

P's
jeg har lavet et array med månedernes navne, ved ikke om det hjælper.

$months_danish = array("Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December");
Avatar billede claes57 Ekspert
01. april 2012 - 17:02 #1
hvis du har en

<div id="f2" style="display:none;">
her er februars kalender
</div>
osv - id f1 til f12 for at dække hele året.
link til feb er så fx

<a href="#"><span onclick="vis(2);">Februar</span></a>
linknummer i vis(x) køres igennem i de 12 link

og javascript
function vis(mnu) {
var i=0;
for (i=1;i<=12;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+mnu).style.display = "";
}

den vil først skjule alle 12 (der er jo en åben), og så vise den, der er valgt.
du kan evt kalde vis() ved onload i body, så den aktuelle måned vises fra start - du skal lige bruge lidt kode for at finde nummer+1 til den aktuelle måned.
Avatar billede Slettet bruger
01. april 2012 - 17:08 #2
Ja tak. Det jeg faktisk skal bruge er sådan at når man kommer ind på siden så vises den aktuelle måned fra start. Undskyld hvis jeg formulerede mig forkert :-)

De har alle display:none , men den aktuelle månede skal jo så vises. Jeg tror du har fat i noget, men er det så ovenstående(dit script) jeg skal/kan bruge.
Avatar billede claes57 Ekspert
01. april 2012 - 17:43 #3
lav en javascript funktion mere

function aktuel() {
var d = new Date();
var md = 1 + d.getMonth();
vis(md);
}

og den kalder du i
<body onload="aktuel();">

igen - det er baseret på koden fra #1.
Avatar billede Slettet bruger
01. april 2012 - 17:52 #4
Altså jeg er virkelig ikke en haj til js.

Hvis jeg sætter ovenstående funktion ind, virker det så.
Bliver nød til at få det skåret ud i pap. sorry :-)
Avatar billede olsensweb.dk Ekspert
02. april 2012 - 11:45 #5
@claes57 ville det ikke være smartere at sætte en class på måneds div'en og ændre classen istedet
http://www.ezineasp.net/post/Javascript-Change-Style-Class-of-Div-tag.aspx

function vis(mnu) {
    var i=0;
    for (i=1;i<=12;i++) {
        document.getElementById("f"+i).className  = 'hidediv';
    }
    document.getElementById("f"+mnu).className  = 'showdiv';
}


eller kort
function vis(mnu) {
    for (var i=1;i<=12;i++) {
        document.getElementById("f"+i).className  = (mnu==i)? 'showdiv' : 'hidediv';
    }           
}



@Nannamh90
#4 >Hvis jeg sætter ovenstående funktion ind, virker det så.
ja

her er det fulde eks med mine rettelser
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    .hidediv{
        display: none;
    }
    .showdiv{
        display: block;
    }
    </style>
    <script type="text/javascript">
        function vis(mnu) {
            // var i=0;
            for (var i=1;i<=4;i++) { // 12
                document.getElementById("f"+i).className  = (mnu==i)? 'showdiv' : 'hidediv';
            }           
        }
        function aktuel() {
            var d = new Date();
            var md = 1 + d.getMonth();
            vis(md);
        }
    </script>
</head>
<body onload="aktuel();">
<div id="f1" class="hidediv">
her er januars kalender
</div>
<div id="f2" class="hidediv">
her er februars kalender
</div>
<div id="f3" class="hidediv">
her er marts kalender
</div>
<div id="f4" class="hidediv">
her er aprils kalender
</div>
<a href="#"><span onclick="vis(1);">januar</span></a>
<a href="#"><span onclick="vis(2);">Februar</span></a>
<a href="#"><span onclick="vis(3);">marts</span></a>
<a href="#"><span onclick="vis(4);">april</span></a>
</body>
</html>
Avatar billede claes57 Ekspert
02. april 2012 - 11:59 #6
en brugbar demo - jeg har kun sat mdr 1 til 5 ind - så det skal lige forlænges lidt, og taellermax skal så rettes til 12 i javascriptet for at den kan håndtere alle måneder.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {
  font-family:Verdana, sans-serif;
  font-size:12px;
}
div {
  border-style:solid;
  border-width:thin;
  border-color:black;
}
</style>

<script type='text/javascript'>
var taellermin=1;
var taellermax=5;

function vis(mnu) {
var i=0;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("f"+i).style.display = "none";
}
document.getElementById("f"+mnu).style.display = "";
}
function aktuel() {
var d = new Date();
var md = 1 + d.getMonth();
vis(md);
}
</script>

</head>
<body onload="aktuel();">
<hr>
Kalender:
<a href="#"><span onclick="vis(1);">Jan</span></a>
<a href="#"><span onclick="vis(2);">Feb</span></a>
<a href="#"><span onclick="vis(3);">Mar</span></a>
<a href="#"><span onclick="vis(4);">Apr</span></a>
<a href="#"><span onclick="vis(5);">Maj</span></a>
... og så videre ...
<hr>
her er noget tekst før kalenderen
<div id="f1" style="display:none;">
her er januars kalender
</div>
<div id="f2" style="display:none;">
her er februars kalender
</div>
<div id="f3" style="display:none;">
her er marts kalender
</div>
<div id="f4" style="display:none;">
her er aprils kalender
</div>
<div id="f5" style="display:none;">
her er majs kalender
</div>
... og så videre ...

  </body>
</html>
Avatar billede Slettet bruger
02. april 2012 - 14:34 #7
Jeg kan ikke få det til at virke?! :-(
Hvad gør jeg galt?
Har <body onload="aktuel();">

//link til januar
<a id="myHeader1" class="month" href="java script:showonlyone('newboxes1');">jan</a>

// div som skal vises når det er januar       
<div name="newboxes" id="newboxes1" class="event_month"></div>

<script type='text/javascript'>
var taellermin=1;
var taellermax=12;

function vis(mnu) {
var i=0;
for (i=taellermin;i<=taellermax;i++) {
    document.getElementById("newboxes"+i).style.display = "none";
}
document.getElementById("newboxes"+mnu).style.display = "";
}
function aktuel() {
var d = new Date();
var md = 1 + d.getMonth();
vis(md);
}
</script>
Avatar billede claes57 Ekspert
02. april 2012 - 14:50 #8
du har alle <div id="f1"... til f12 oprettet?

link til januar - ret fra
<a id="myHeader1" class="month" href="java script:showonlyone('newboxes1');">jan</a>
til <a id="myHeader1" class="month" href=# onclick="vis(1);">jan</a>
Avatar billede claes57 Ekspert
02. april 2012 - 14:51 #9
der manler et par " i linjen
<a id="myHeader1" class="month" href=# onclick="vis(1);">jan</a>
det skal være
<a id="myHeader1" class="month" href="#" onclick="vis(1);">jan</a>
Avatar billede Slettet bruger
02. april 2012 - 15:03 #10
Det virker stadig ikke og kan ikke bare ændre <a>(linket) da der er en js.fil inkluderet.

Bliver nød til at lave det så det virker på de eksisterende #id eller.class ellers bliver hele scriptet ødelagt :-(
Avatar billede claes57 Ekspert
02. april 2012 - 15:14 #11
du SKAL rette linket hvis du vil have den til at åbne/lukke
a href skal være "#" da det er samme side/sted og der skal kaldes javascriptet vis via onclick, med mindre du åbner js-filen, og retter showonlyone til, så den har indholdet fra vis.

dine <div'er er ok med id som fx "newboxes1" for januar - det har du fået på plads jf #7, så andre rutiner kan skrive/opdatere dem som tidligere.
Avatar billede Slettet bruger
02. april 2012 - 15:19 #12
Jamen det er fordi når jeg retter linket til det du siger så virker linket ikke, så kan man ikke klikke på det. Hmm :-(

Og kan jo ikke ændre i js. filen da jeg er mega skod til js.

// toggle på månederne
    function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}
Avatar billede claes57 Ekspert
02. april 2012 - 15:30 #13
// toggle på månederne
    function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}

rettes til
// toggle på månederne
    function showonlyone(thechosenone) {
      var i=0;
      for (i=1;i<=12;i++) {
        document.getElementById("newboxes"+i).style.display = "none";
      }
      document.getElementById("newboxes"+thechosenone).style.display = "";
}

og du skal stadig kalde med
<a id="myHeader1" class="month" href="#" onclick="showonlyone(1);">jan</a>

men jeg tror, det vil være lettere hvis du gav et link til siden, så jeg kan se hvordan den er opbygget. Ovenstående ændring laver reelt intet nyt. Fejlen må ligge et andet sted i koden.
Avatar billede Slettet bruger
02. april 2012 - 15:41 #14
http://www.afterlife.dk/events.php

Her er linket, prøv et at tag et kig. Jeg er lidt blank på det .js område.
Avatar billede Slettet bruger
02. april 2012 - 16:17 #15
Finder du ud af noget? :-D
Håber virkelig du kan hjælpe.
Avatar billede claes57 Ekspert
02. april 2012 - 16:43 #16
det ser ud til, at du lige har fået problemet løst... FF + Chrome vis da data i apr/maj
Avatar billede claes57 Ekspert
02. april 2012 - 16:49 #17
ved start kommer der dog intet - ret
function aktuel() {
var d = new Date();
var md = 1 + d.getMonth();
vis(md);
}

til
function aktuel() {
var d = new Date();
var md = 1 + d.getMonth();
showonlyone('newboxes' + md);
}
Avatar billede Slettet bruger
02. april 2012 - 16:51 #18
Nej den gør ikke.
Når jeg klikker på EVENTS -> øverst i topmenuen.
Så loader den events.php og der vil jeg gerne have at den aktuelle div fx. april er loadet, så man ikke skal klikke på den først. :-)
Avatar billede claes57 Ekspert
02. april 2012 - 16:56 #19
se #17
Avatar billede Slettet bruger
02. april 2012 - 17:03 #20
Ohøj det virker, mange mange tak, du har virkelig reddet min dag :-D Nu håber jeg bare jeg kan få svar på de andre spørgsmål også så er det perfekt, smid et svar så giver jeg points :D
Avatar billede claes57 Ekspert
02. april 2012 - 17:07 #21
ok... den med htaccess er jeg desværre helt blank på.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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