display...visa endast en beskrivning i taget.

10 svar · 573 visningar · startad av pelikanen 2 jan. 2006

pelikanenMedlem sedan okt. 200461 inlägg

Frågan2 jan. 2006 11:05#1

Hej!

Jag har ett script där tanken är att man ska kunna trycka på en länk för att få en längre beskrivning av en bok. Det funkar just nu. Problemet är att jag endast vill att man ska kunna se en beskrivning i taget. Det är säkert något lätt, är inte så haj på javascript

tack på förhand. (y)

Pelikanen.

<body>
<SCRIPT>
function visaymer(id){
var elementName='ymer'+id;
var HeaderElement = null;
HeaderElement = document.getElementsByName(elementName);
if(HeaderElement[0].style.display == "none")
HeaderElement[0].style.display = "";
else
HeaderElement[0].style.display="none"
}
</SCRIPT>

  \</DIV\>

<DIV id="ymer2000" style="DISPLAY: none" name="ymer2000">
<p>Detta är Ymer 2000..beskrivning</p>
</DIV>
<DIV id="ymer2001" style="DISPLAY: none" name="ymer2001">
<p>Detta är Ymer 2001..beskrivning</p>
</DIV>
</body>
</html>

plupMedlem sedan sep. 200593 inlägg

2 jan. 2006 11:37#2

function toggleDiv (divid) {
	// börja med att "släcka" alla display-div'ar
	for(i = 0; i < document.getElementsByTagName('div').length; i++) {
		document.getElementsByTagName('div')[i].style.display == "none";
	}

	// tänd sedan den tänkta
	var present = document.getElementById(divid);
	present.style.display = "block";

}

<a onclick="toggleDiv(y1999)" href="javascript:void(0)">visa y1999</a>
<div id="y1999" style="display: none" name="y1999">
<p>Detta är Ymer 1999 beskrivning...</p>
</div>

har inte testat denna så det kanske blir ngt script error, men du hajar nog principen iaf.

/red
nackdelen med ovanstående blir ju att alla <div>'ar påverkas i loopen, men man kan ju slänga in en

if (substr(minns inte) == "ymer") {
document.getElementsByTagName('div')[i].style.display == "none";
}

pelikanenMedlem sedan okt. 200461 inlägg

3 jan. 2006 11:35#3

det funkar inte..

Hej!

Jag fattar principen i stora drag. Men tyvärr är jag för dålig på javascript för att kunna lista ut vad som inte fungerar med skriptexemplet som jag fick.

mvh

Pelikanen.

Peter SMedlem sedan dec. 20025 483 inlägg

4 jan. 2006 14:44#4

function visaymer(id){
  var divs = document.getElementsByTagName("div"),
      len  = divs.length;

  for (var i = 0; i < len; ++i){
    var elm = divs.item(i);

    if (/^ymer(\d+)$/.test(elm.id)){
      if (RegExp.$1 == id){
	elm.style.display = "block";
      } else {
	elm.style.display = "none";
      }
    }
  }
}

pelikanenMedlem sedan okt. 200461 inlägg

7 jan. 2006 12:09#5

Tack så mycket Peter! Nu funkar det! Förresten är det någon som kan tipsa om en bra bok om javascript. Det jag kan är väldigt elementärt. Bra sidor med vettiga tutorials efterlyses också.

mvh

Pelikanen.

Peter SMedlem sedan dec. 20025 483 inlägg

7 jan. 2006 12:52#6

Här kan du se vad jag rekommenderar i bokväg.

Använd gärna funktionen acceptera som slutgiltigt svar (y)

pelikanenMedlem sedan okt. 200461 inlägg

7 jan. 2006 13:05#7

Visade sig att jag ropade hej lite för tidigt. Till varje beskrivning finns även 1 bild mellan varje <div> tag
. Bilden visas inte med nuvarande skript. Väldigt skumt. Texten funkar som den ska men det kommer alltså inte upp någon bild.

nån som kan hjälp. Man blir smått vansinning...

Pelikanen.

Peter SMedlem sedan dec. 20025 483 inlägg

7 jan. 2006 13:21#8

Var ligger bilden menar du? Ligger den enligt nedan skall det inte vara några problem.

<DIV id="ymer1999" style="DISPLAY: none" name="ymer1999">
  <p>Detta är Ymer 1999 beskrivning...</p>
  [b]<img...>[/b]
</DIV>

pelikanenMedlem sedan okt. 200461 inlägg

7 jan. 2006 13:33#9

Ja, det är så jag menar. Fattar inte själv varför det inte funkar. Här är hela koden.

<body>
<SCRIPT>
function visaymer(id){
var divs = document.getElementsByTagName("div");
len = divs.length;

for (var i = 0; i < len; ++i){
var elm = divs.item(i);

if (/^ymer(\\d+)$/.test(elm.id)){
  if (RegExp.$1 == id){
elm.style.display = "block";
  } else {
elm.style.display = "none";
  }
}

}
}

</SCRIPT>

<A onclick='visaymer(1999)' href='javascript:%20void(0)'>visa ymer1999</a>
<A onclick='visaymer(2000)' href='javascript:%20void(0)'>visa ymer2000</a>
<A onclick='visaymer(2001)' href='javascript:%20void(0)'>visa ymer2001</a>
<DIV id="ymer1999" style="DISPLAY: none" name="ymer1999">
<p>Detta är Ymer 1999 beskrivning...</p>
<img src="ymer1999.jpg" width="200" height="285">
</DIV>
<DIV id="ymer2000" style="DISPLAY: none" name="ymer2000">
<p>Detta är Ymer 2000..beskrivning</p>
<img src="ymer2000.jpg" width="200" height="285">
</DIV>
<DIV id="ymer2001" style="DISPLAY: none" name="ymer2001">
<p><img src="ymer2001.jpg" width="200" height="285">Detta
är Ymer 2001..beskrivning</p>

</DIV>
</body>
</html>

Det som händer är att texten åker ner lite där bilden borde visas men man ser ingen bild.

mvh

Pelikanen.

Peter SMedlem sedan dec. 20025 483 inlägg

7 jan. 2006 14:00#10

Jag har nu testat koden i IE 6, FF 1.5 och Opera 8.51; alla med samma goda resultat.

Se exempel på
http://member.webforum.nu/4685/pelikanen.html

pelikanenMedlem sedan okt. 200461 inlägg

7 jan. 2006 14:11#11

Det funkar i Mozilla. I explorer funkar det fortfarande inte. Funderar på om det kan bero på virus. Datorna har betett sig underligt. Det är nog den troligaste anledningen. Kollade versionen. Jag har också IE version 6. Får jag virus nu.

Tack för hjälpen.