Avatar billede sohl Nybegynder
20. marts 2004 - 13:05 Der er 40 kommentarer og
1 løsning

hide/show som på eksperten.

hey.

er der nogen der har noget kode som kan lave det hide/show som er her på eksperten eks ved "dine data" "nyeste artikler" osv osv.?
Avatar billede skovenborg Nybegynder
20. marts 2004 - 13:34 #1
Prøv med
<style type="text/css">
.overskrift {
    width:150px;
    background-color:#CCE;
    color:#000;
    font-weight:bolder;
}
.data {
    width:150px;
    display:none;
    background-color:#DDE;
    color:#000;
}
</style>
<script type="text/javascript">

var img1 = new Image();
img1.src = "arrow_hojre.png";
var img2 = new Image();
img2.src = "arrow_ned.png";
function showhide(bld) {
      divObj = bld.parentNode.nextSibling;
      if (divObj.nodeType == 3) divObj = divObj.nextSibling;

      if (bld.src == img1.src) {
            divObj.style.display = "block";
            bld.src = img2.src;
      }
      else {
            divObj.style.display = "none";
            bld.src = img1.src;
      }
}
</script>
</head>
<body>
  <div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" onclick="showhide(this);" /> Overskrift</div>
  <div class="data">
  Her kan der stå diverse data
  </div>
</body>
Avatar billede skovenborg Nybegynder
20. marts 2004 - 13:36 #2
for at skifte pile-billederne skal du bare ændre på:
img1.src = "skjult.png" // Det billede du vil vise når data'ene skal være skjult
og
img2.src = "vist.png" // Det billede du vil vise når data'ene er synlige

og til sidst skal du også ændre på
<img src="skjult.png" --- hvor stien til billedet skal være den samme som img1.src
Avatar billede sohl Nybegynder
20. marts 2004 - 14:09 #3
det virker - svarer du?
Avatar billede skovenborg Nybegynder
20. marts 2004 - 14:12 #4
jo jeg kan da prøve ;-)
Avatar billede cronck Nybegynder
07. maj 2004 - 07:34 #5
skovenborg, kan du osse lave den så den åbner et bestemt div med id istedet?
Som for eks. ShowHide(min_div)
som åbner/lukker <div id="min_div">Bla bla</div>
Avatar billede skovenborg Nybegynder
07. maj 2004 - 13:53 #6
når man fører musen over billedet eller hvad?
Avatar billede skovenborg Nybegynder
07. maj 2004 - 14:13 #7
hvis man går ud fra at billedet stadig skal skiftes, vil det være lettest hvis man skrev:
var img1 = new Image();
img1.src = "arrow_hojre.png";
var img2 = new Image();
img2.src = "arrow_ned.png";
function showhide(bld,ID) {
      divObj = document.getElementById(ID);

      if (bld.src == img1.src) {
            divObj.style.display = "block";
            bld.src = img2.src;
      }
      else {
            divObj.style.display = "none";
            bld.src = img1.src;
      }
}

og:
<div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" onclick="showhide(this,'divID');" /> Overskrift</div>
  <div id="divID">HEJSA</div>
Avatar billede cronck Nybegynder
08. maj 2004 - 17:04 #8
Det virker!
Så er der lige én anden ting... Når jeg har skjult en menu, klikker på et link i en anden, er menu'en åbnet igen... :(
Og hvordan kan jeg gøre så en menu starter med at være lukket?

Hvis det er kan jeg godt oprette en anden tråd og give point... ;)
Avatar billede skovenborg Nybegynder
08. maj 2004 - 17:39 #9
hmm, den må du lige forklare igen.

Du skjuler en menu ved at klikke på et billede, hvorefter du går ind på en anden side via et andet link. Er menuen du skjulte før så åbnet før på den anden side? Eller du kører måske med frames?
Avatar billede cronck Nybegynder
08. maj 2004 - 19:39 #10
Når jeg klikker på et link i min menu går jeg ind på en anden asp side, og så er alle menuer åbnet igen....
Avatar billede skovenborg Nybegynder
08. maj 2004 - 19:51 #11
det er vigtigt at du overhovedet har skjult dem fra starten af. Det fremgår ikke så tydeligt ud fra mit seneste script, men man skal definere for dine undermenuer at de skal være skjult (display:none;}

Det letteste vil være at lave en css-klasse der fx hedder undermenu, altså hvor du skriver:
<div id="divID" class="undermenu">HEJSA</div>

Herefter skriver du så i stylesheetet:
.undermenu {display:none;}

Så burde det virke - medmindre du allerede har gjort det ;-)
Avatar billede cronck Nybegynder
08. maj 2004 - 21:22 #12
Så er alle menuer jo lukket når siden åbner 1. gang...
Hvis jeg åbner alle på nær 1 menu, og klikker på et menulink som sender en videre til for eks. lotto.asp så er alle menuer lukket igen....
Hvordan kan jeg få den til at huske om menuen var lukket/åbnet på sidste side?
Avatar billede skovenborg Nybegynder
08. maj 2004 - 23:50 #13
Den var værre.

Det letteste vil helt klart være hvis du brugte frames - men jeg kan udmærket godt forstå hvis du er imod dem.

Derudover kan man overføre "variabler" mellem sider i javascript via selve url'ens search-string - altså fx ?navn=værdi. Det betyder blot bare at du får en lang og kompliceret url, som blot virker misvisende for de besøgende.

Man kunne bruge cookies - men det er en endnu dårlige løsning. For at være ærlig kender jeg ingen holdbar løsning til den slags overførelser mellem sider i javascript. Det hele foregår jo klient-side.

Det bedste du vel kan gøre er at lade den undermenu være foldet ud, som passer til den pågældende side. Folk har generelt heller ikke noget imod at klikke sig igennem en menu to gange ;-)
Avatar billede cronck Nybegynder
09. maj 2004 - 15:05 #14
Cookies ville være fint... Er det ikk også sådan de gør det her på eksperten.dk ?
Avatar billede skovenborg Nybegynder
10. maj 2004 - 20:12 #15
okay - jeg er ikke selv så vild med løsningen, men det er nu mere fordi jeg ikke helt mener "effekten" er nødvendig. Men det var da meget sjovt at få det til at virke.

Først skal showhide functionen laves lidt om:
  var img1 = new Image();
img1.src = "arrow_hojre.png";
var img2 = new Image();
img2.src = "arrow_ned.png";
var showhideIDArr = new Array();
function showhide(bld,ID) {
      divObj = document.getElementById(ID);
      if (divObj.style.display == "none") {
            divObj.style.display = "block";
            showhideIDArr[ID] = true;
            bld.src = img2.src;
      }
      else {
            divObj.style.display = "none";
            showhideIDArr[ID] = false;
            bld.src = img1.src;
      }
}

showhideIDArr bevirker til at scriptet kan finde ud af hvad for nogle undermenuer, som er åbne. Dette array bliver opdateret hver gang showhide funktionen kaldes - altså når en undermenu henholdsvis vises og skjules.

Nu skal scriptet lige gemme disse oplysninger i en cookie:
function exit_showhide() {
      cookieStr = "showhideIDs=";
      for (i in showhideIDArr) {
            if (showhideIDArr[i]) cookieStr += i+",";
      }
      if (cookieStr.charAt(cookieStr.length-1) == ",") cookieStr = cookieStr.substring(0,cookieStr.length-1);
      document.cookie = cookieStr;
}
Cookien udløber først når browseren lukkes - håber det er i orden med dig. Hver ID bliver her gemt i en cookie adskilt af et komma.

På samme side skal cookien også hentes. Dette gøres med en anden funktion:
function init_showhide() {
      if (document.cookie.indexOf("showhideIDs") != -1) {
            var ids = document.cookie.substr(document.cookie.indexOf("=")+1).split(",");
            if (ids.toString().length != 0) {
              for (i=0;i<ids.length;i++) {
                  document.getElementById(ids[i]).style.display = "block";
                  showhideIDArr[ids[i]] = true;
                  for (j=0;j<document.images.length;j++) {
                        if (document.images[j].getAttribute("onclick").indexOf(ids[i]) != -1) document.images[j].src = img2.src;
                  }
              }
            }
      }
}

Denne funktion skal kun bruges hvis du ikke har noget i mod at tilføje en ID på dine billeder:
<img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID1_img" onclick="showhide(this,'divID1');" />
...
<img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID2_img" onclick="showhide(this,'divID2');" />.... osv.
Hvis du gør det på den måde kan funktionen forenkles lidt - og på den måde gøres lidt hurtigere:
function init_showhide() {
      if (document.cookie.indexOf("showhideIDs") != -1) {
            var ids = document.cookie.substr(document.cookie.indexOf("=")+1).split(",");
            if (ids.toString().length != 0) {
              for (i=0;i<ids.length;i++) {
                  document.getElementById(ids[i]).style.display = "block";
                  showhideIDArr[ids[i]] = true;
                  document.getElementById(ids[i]+"_img").src = img2.src;
              }
            }
      }
}

Til sidst skal funktionerne kaldes - hendholdsvis når siden lukkes/opdateres og startes:
window.onload = init_showhide;
window.onunload = exit_showhide;

HTML'en skal herefter se nogenlunde sådan ud:
<div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID1_img" onclick="showhide(this,'divID1');" /> Overskrift</div>
  <div id="divID1" style="display:none;"><a href="#">Link1</a></div>
<div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID2_img" onclick="showhide(this,'divID2');" /> Overskrift</div>
  <div id="divID2" style="display:none;"><a href="400054.php">Link2</a></div>
  <div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID3_img" onclick="showhide(this,'divID3');" /> Overskrift</div>
  <div id="divID3" style="display:none;"><a href="wepo.php">Link3</a></div>

Dette er HTML'en hvis du gerne vil tilføje en ID på billederne. Hvis ikke skal du bare fjerne dem og bruge den først nævnte init_showhide() funktion.
Avatar billede skovenborg Nybegynder
10. maj 2004 - 20:15 #16
Jeg ved godt det var en ordentlig omgang - så her er den fulde kode uden for mange afbrydelser (bruger løsningen med billed-ID'er - du skal bare ændre init_showhide() hvis du vil undgå dem):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
  var img1 = new Image();
img1.src = "arrow_hojre.png";
var img2 = new Image();
img2.src = "arrow_ned.png";
var showhideIDArr = new Array();
function showhide(bld,ID) {
      divObj = document.getElementById(ID);
      if (divObj.style.display == "none") {
            divObj.style.display = "block";
            showhideIDArr[ID] = true;
            bld.src = img2.src;
      }
      else {
            divObj.style.display = "none";
            showhideIDArr[ID] = false;
            bld.src = img1.src;
      }
}
function init_showhide() {
      if (document.cookie.indexOf("showhideIDs") != -1) {
            var ids = document.cookie.substr(document.cookie.indexOf("=")+1).split(",");
            if (ids.toString().length != 0) {
              for (i=0;i<ids.length;i++) {
                  document.getElementById(ids[i]).style.display = "block";
                  showhideIDArr[ids[i]] = true;
                  document.getElementById(ids[i]+"_img").src = img2.src;
              }
            }
      }
}
function exit_showhide() {
      cookieStr = "showhideIDs=";
      /*for (i=0;i<showhideIDArr.length;i++) {
            if (document.getElementById(showhideIDArr[i]).style.display == "block") {cookieStr += showhideIDArr[i]+",";}
      }*/
      for (i in showhideIDArr) {
            if (showhideIDArr[i]) cookieStr += i+",";
      }
      if (cookieStr.charAt(cookieStr.length-1) == ",") cookieStr = cookieStr.substring(0,cookieStr.length-1);
      alert(cookieStr);
      document.cookie = cookieStr;
}
window.onload = init_showhide;
window.onunload = exit_showhide;
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID1_img" onclick="showhide(this,'divID1');" /> Overskrift</div>
  <div id="divID1" style="display:none;"><a href="side1.php">Link1</a></div>
<div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID2_img" onclick="showhide(this,'divID2');" /> Overskrift</div>
  <div id="divID2" style="display:none;"><a href="side2.php">Link2</a></div>
  <div class="overskrift"><img src="arrow_hojre.png" style="width:10px;height:10px;" id="divID3_img" onclick="showhide(this,'divID3');" /> Overskrift</div>
  <div id="divID3" style="display:none;"><a href="side3.php">Link3</a></div>
</body>
</html>
Avatar billede skovenborg Nybegynder
17. maj 2004 - 21:05 #17
hjalp det lidt ?-)
Avatar billede cronck Nybegynder
18. maj 2004 - 10:23 #18
Hov... Havde slet ikke set løsningen... :D
Prøver
Avatar billede cronck Nybegynder
18. maj 2004 - 10:40 #19
Her er min kode:
<html>
<head><title>RuneScapers.com - RuneScape Auctioning!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript">
function validate(field) {
var ok = true;
var pos = field.value.search(/[^\w\?!\(\):\;\n\r\,\.\æ\ø\å\-\ ]/ig);
if (pos != -1) ok = false;
if (!ok) {
alert("You are using invalid characters!");
field.focus();
placeCursor(field,pos);
  }
}
function placeCursor(frmElm,pos) {
    if (document.selection) {
          r = frmElm.createTextRange();
          var endp = -(frmElm.value.length-(pos+1));
          r.moveEnd("character",endp);
          r.moveStart("character",pos);
          r.select();
    }
    if (frmElm.selectionEnd != undefined && pos != undefined) {
        frmElm.setSelectionRange(pos,pos+1);
    }
}
  </script><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('You must accept the rules');
return false;
}else
return true;
}
//  End -->
</script><script type="text/javascript">
  var img1 = new Image();
img1.src = "img/icons/arrow-right.jpg";
var img2 = new Image();
img2.src = "img/icons/arrow-down.jpg";
var showhideIDArr = new Array();
function showhide(bld,ID) {
      divObj = document.getElementById(ID);
      if (divObj.style.display == "none") {
            divObj.style.display = "block";
            showhideIDArr[ID] = true;
            bld.src = img2.src;
      }
      else {
            divObj.style.display = "none";
            showhideIDArr[ID] = false;
            bld.src = img1.src;
      }
}
function init_showhide() {
      if (document.cookie.indexOf("showhideIDs") != -1) {
            var ids = document.cookie.substr(document.cookie.indexOf("=")+1).split(",");
            if (ids.toString().length != 0) {
              for (i=0;i<ids.length;i++) {
                  document.getElementById(ids[i]).style.display = "block";
                  showhideIDArr[ids[i]] = true;
                  document.getElementById(ids[i]+"_img").src = img2.src;
              }
            }
      }
}
function exit_showhide() {
      cookieStr = "showhideIDs=";
      /*for (i=0;i<showhideIDArr.length;i++) {
            if (document.getElementById(showhideIDArr[i]).style.display == "block") {cookieStr += showhideIDArr[i]+",";}
      }*/
      for (i in showhideIDArr) {
            if (showhideIDArr[i]) cookieStr += i+",";
      }
      if (cookieStr.charAt(cookieStr.length-1) == ",") cookieStr = cookieStr.substring(0,cookieStr.length-1);
      alert(cookieStr);
      document.cookie = cookieStr;
}
window.onload = init_showhide;
window.onunload = exit_showhide;
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="main" valign="top" border="1">
<tr><td colspan="3">
<table width="100%"><tr><td>My Banner</td><td align="right"><a href="mailto:danieldrej@yahoo.dk"><img src="img/banner.jpg" border="0"></a></td></tr></table>
</td></tr><tr>
<td width="150px" valign="top">
<div class="menuheader"><span class="arrow">»</span>&nbsp;Navigation<img src="/img/icons/arrow-down.jpg" style="position:relative; left:70px; top:1px;width:10px;height:10px;" id="Menu_Navigation_img" onClick="showhide(this,'Menu_Navigation')"></div>
<div class="menubox" id="Menu_Navigation">   
<a href="default.asp" class="menulink" title="The Main Page">&nbspHome</a>
<a href="monster_list.asp" class="menulink" title="List of monsters">&nbspMonsters DB</a>
<a href="item_list.asp" class="menulink" title="List of items">&nbspItems DB</a>
<a href="quest_list_f2p.asp" class="menulink" title="Freeplay Quests">&nbspQuests Guides (F2P)</a>
<a href="quest_list_p2p.asp" class="menulink" title="Members Quests">&nbspQuests Guides (P2P)</a>
<a href="notfound.asp" class="menulink" title="Open Auctions">&nbspTreasure Hunting</a>
<a href="notfound.asp" class="menulink" title="Open Auctions">&nbspAuctions</a>
<a href="notfound.asp" class="menulink" title="Skill Guides">&nbspSkill Guides</a>
<a href="user_highscore.asp" class="menulink" title="The User Points Highscore">&nbspUser Highscore</a>
<div class="menustopper"></div>
</div><br>

</td>
<td valign="top" class="maincontent">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" align="center" height="20">
    <div class="boxheader">Member Quests</div>
    </td>
  </tr>
  <tr class="tablecolumn">
    <td width="100">Quest</td>
    <td width="100">Difficulty level</td>
  </tr>
 
</table>
</div>
</td>
<td width="150px" valign="top">
<div class="rightboxheader"><span class="arrow">»</span>&nbsp;User<img src="/img/icons/arrow-down.jpg" style="position:relative; left:100px; top:1px;" onClick="showhide(this,'Menu_User')"></div>
<div class="rightbox" id="Menu_User">

  <a href="login.asp" class="menulink">&nbsp;Login</a>
  <a href="user_sign_in.asp" class="menulink">&nbsp;Sign In</a>

<div class="menustopper"></div>
</div>
<br>
Avatar billede cronck Nybegynder
18. maj 2004 - 10:42 #20
Problemet er at når jeg forlader lukker vinduet, skifter side, eller lign. får jeg fejlen: showhideIDs=
Og det er nok osse grunden til at den ikke husker om menuerne er lukket/åbne...
Avatar billede skovenborg Nybegynder
18. maj 2004 - 12:24 #21
hovsa, du har vist fået en lille debug-version af en af funktionerne. exit_showhide() skal se sådan ud:
function exit_showhide() {
      cookieStr = "showhideIDs=";
      for (i in showhideIDArr) {
            if (showhideIDArr[i]) cookieStr += i+",";
      }
      if (cookieStr.charAt(cookieStr.length-1) == ",") cookieStr = cookieStr.substring(0,cookieStr.length-1);
      document.cookie = cookieStr;
}
Avatar billede cronck Nybegynder
18. maj 2004 - 16:33 #22
Kan stadig ikk få det til at virke...
Min debugger siger at fejlen er i:
document.getElementById(ids[i]).style.display = "block";
Avatar billede skovenborg Nybegynder
18. maj 2004 - 19:03 #23
hmm, og du er sikker på dine billeder har hver en unik ID? Du skal være opmærksom på jeg postede to muligheder - en med ID'er og en uden.
Avatar billede cronck Nybegynder
18. maj 2004 - 21:42 #24
Æhh... Næh, for at det ikk skal være løgn, tror jeg faktisk at jeg har flettet dem lidt sammen... :-)
Troede at de var helt ens...

Jeg kan desværre ikke teste igen før Torsdag, da jeg ikke kommer hjem før... Har jo sidste skoledag i morgen... :-D
Avatar billede skovenborg Nybegynder
18. maj 2004 - 22:14 #25
nåmen så ses vi på torsdag vel - og god sidste skoledag. Prøv at læse kommentarene lidt igennem så tror jeg du kan smække noget sammen.
Avatar billede skovenborg Nybegynder
01. juni 2004 - 20:27 #26
har du fundet ud af noget nu så ;-)
Avatar billede cronck Nybegynder
02. juni 2004 - 12:38 #27
Næh.. ;-)
Jeg har ikke rigtig kigget på det endnu...
Måske jeg skulle prøve igen i aften.. :-)
Avatar billede skovenborg Nybegynder
02. juni 2004 - 15:51 #28
k - ville bare se om du stadig var levende ;-)
Avatar billede skovenborg Nybegynder
28. juni 2004 - 23:29 #29
nu har det vist været aften i temmelig lang tid ;-)
Avatar billede cronck Nybegynder
03. juli 2004 - 23:11 #30
Det har du helt ret i... :-)
Er lige vendt hjem efter 1 uges ferie i Frankrig...
Jeg er ked af at sige det, men jeg har alt for tralvt til
at lege med min hjemmeside, da jeg har for travlt for tiden...

Men, du skal helt klart have mange takker!
Hvis du ønsker det, kan du sagtens få 60 velfortjente point... :D
Avatar billede skovenborg Nybegynder
03. juli 2004 - 23:20 #31
nå, det gør ikke så meget - den eneste som jeg skal have point fra her må blive sohl. Men han er nok forlængst blevet træt af vores ævl ;-)
Avatar billede skovenborg Nybegynder
03. juli 2004 - 23:25 #32
men gør nu hvad du vil - det skal vel også virke først ;-)
Avatar billede cronck Nybegynder
04. juli 2004 - 00:50 #33
Tja, han er faktisk lidt tarvelig...

Jeg tænkte på, har du en hjemmeside?
Så kunne du jo lægge sådanne scripts op, som du laver for folk...
Ville nemlig gerne se DIN samling :D
Avatar billede skovenborg Nybegynder
04. juli 2004 - 00:54 #34
det har jeg faktisk gjort (men ikke alle sammen og nogle er bare noget jeg har lavet for sjov)
http://www.skovenborg.1go.dk
Avatar billede skovenborg Nybegynder
04. juli 2004 - 00:56 #35
men det er faktisk kun en backup fra min http://www.skovenborg.frac.dk som ikke lige virker nu. Så designet er der ikke gjort meget ud af
Avatar billede steen_hansen Forsker
04. juli 2004 - 00:59 #36
Kigger med, meget spændende :o)
Avatar billede skovenborg Nybegynder
04. juli 2004 - 01:04 #37
forresten har jeg lige lagt dette spørgsmåls script ud:
http://www.skovenborg.1go.dk/exp/479615.php
der er også nogle andre ting jeg har lavet på eksperten i exp kateloget, selvom de ikke er forklarede eller noget ;-)
Avatar billede sohl Nybegynder
04. juli 2004 - 13:18 #38
hehe boys --be bliver du sku da ved med at snakke hva.
Avatar billede cronck Nybegynder
04. juli 2004 - 14:34 #39
Hehe... Du har jo osse først lige givet point... :D
Avatar billede skovenborg Nybegynder
04. juli 2004 - 15:10 #40
og tak for dem da - troede ellers du ikke fulgte med mere ;-)
Avatar billede sohl Nybegynder
04. juli 2004 - 15:20 #41
min fejl. har været uden eksperten et stykke tid
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