Avatar billede phillips Nybegynder
30. oktober 2002 - 18:32 Der er 5 kommentarer og
1 løsning

DHTML: Synliggør tekst ved klik på link

Hej Alle!

Er der nogen, der ved hvordan dette kan laves med DHTML eller javascript?

Det skal være lidt i samme stil som på http://tv.tv2.dk/tv/?Region=1&KanalID=1&Soegeord=&Dato=0&Periode=2&Kategori=0 når man klikker på en programtitel og der kommer en beskrivelse.

- Phillip
Avatar billede kalaharikid Nybegynder
30. oktober 2002 - 19:05 #1
Den var sjov den der : Nå, jeg ved ikke hvorfor hajerne ikke svømmer i aften - Her er det jeg kunne koge den ned til - Godt (lille) script ! har lagt det hele i samme kode (måske kan enkelte styles pilles ud)  :

<html>
<head>

<script>
var boolNS4 = navigator.appVersion.indexOf("Nav") > 0 &&

parseInt(navigator.appVersion) == 4;


function resizeIFrame()
{
  objTable  = GetElement("tblProgrammer");
  objIFrame = GetParentElement("ProgramListning");

  if (document.getElementById)
  {
      // IE5+, Mozilla, Gecko
        objIFrame.height = objTable.offsetHeight + 20;
  }
  else if (!document.getElementById && document.all)
  {
      // IE4
        objIFrame.style.height = (objTable.offsetHeight + 20) + "px";
  }
  else if (document.layers)
  {
    // Netscape 4 - egentlig ligemeget da den ikke understøtter IFrames
      return false;
  }
  else
  {
      return false;
  }
}

function GetElement(strElement)
{
    if (document.getElementById)
    {
        // IE5+, Netscape 6, Mozilla
        return (document.getElementById(strElement));
    }
    else if (document.all)
    {
        // IE4
        return (eval("document.all." + strElement));
    }
    else if (document.layers)
    {
        // Netscape 4
        return (eval("document." + strElement));
    }
    else
    {
        // Crap!
        return (null);
    }
}



function GetParentElement(strElement)
{
    if (document.getElementById)
    {
        // IE5+, Netscape 6, Mozilla
        return (parent.document.getElementById(strElement));
    }
    else if (document.all)
    {
        // IE4
        return (eval("parent.document.all."+strElement));
    }
    else if (boolNS4)
    {
        // Netscape 4
        return (eval("document."+strElement));
    }
    else
    {
        // Crap!
        return (null);
    }
}


function toggleDesc(strProgramID)
{
  if(boolNS4) return false;

  objCurrentShort = GetElement("Desc"+strProgramID+"Short");
  objCurrentShort.style.display = (objCurrentShort.style.display=="none" ?

"block" : "none");

  objCurrentLong = GetElement("Desc"+strProgramID+"Long");
  objCurrentLong.style.display = (objCurrentLong.style.display=="none" ? "block"

: "none");

  resizeIFrame();
}



</script>
<style>
td.midter
  { width: 340px; }

td.skiftDag
  { vertical-align: middle; font-size: 10px; }

span.udsendelse-tid, .udsendelse-titel, div.udsendelse-beskrivelse,

span.udsendelse-symboler, div.udsendelse-ingen,
.udsendelse-er-vist, div.udsendelse-vises-nu, div.udsendelse {
  font-family: verdana, arial, sans-serif;
    font-size: 10px;
}

div.udsendelse-vises-nu {
    background-color: #EAEAEA;
  margin: 5px;
}

.udsendelse-er-vist {
    color: #666666;
    cursor: pointer;
    cursor: hand;
}

div.udsendelse-ingen {
  color: #555555;
  text-align: center;
  margin-top: 10px;
}

span.udsendelse-tid {
  color: #000000;
}

.udsendelse-titel {
  font-weight: bold;
  color: #000000;
    cursor: pointer;
    cursor: hand;
}

div.udsendelse-beskrivelse {
    color: #555555;
    margin-left: 41px;
}

span.udsendelse-symboler {
    color: #555555;
}

li.punkt {
  color: #555555;
  margin: 0px;
  padding: 0px;
  list-style: square inside;
}

div.tvg-dato-adskillelse {
  color: #666699;
  font-size: 12px;
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: center;
  border-bottom: 1px solid gray;
}

span.tvg-kanalnavn {
  font-size: 10px;
}

span.program_ikon, span.program_ikon:visited, span.program_ikon:hover {
  color: #003366;
}

span.program_ikon_inaktiv, span.program_ikon_inaktiv:visted,

span.program_ikon_inaktiv:hover {
  color: #666666;
}
</style>
</head>
<body>
<div class='udsendelse'>
<div><span class='udsendelse-tid'>21:25</span>&nbsp;&nbsp;<span

class='udsendelse-titel' onclick='toggleDesc(10228513);'>Piger med power</span>

<span class='udsendelse-symboler'>(TTV)</span> <span

class='udsendelse-symboler'>(5)</span> <span

class='udsendelse-symboler'>(I)</span></div>
<div class='udsendelse-beskrivelse' style='display: block;'

name='divBeskrivelseKort' id='Desc10228513Short'>Portræt af fotografbossen Pia

Nissen.</div>
<div class='udsendelse-beskrivelse' style='display: none;'

name='divBeskrivelseLang' id='Desc10228513Long'>Portræt af fotografbossen Pia

Nissen.<br><a href='/detsker?id=4006' target='_blank'><img alt='Piger med power'

title='Piger med power' align='left' src='http://tv.tv2.dk/image.php?id=11'

width='80' border='0'></a>Hun var 80'ernes foretrukne nøgenmodel, og mange

opfattede hende som en dum blondine. Håret er stadig platinblondt, men i dag er

Pia Nissen topchef i erhvervslivet med 92 medarbejdere under sig. Husbonden tager

sig af hjemmefronten, men den yngste datter må tage med mor på arbejde - ni dage

gammel.<br><li class='punkt'> Læs mere om <a href='/detsker?id=4006'

target='_blank'>'Piger med power'</a> på TV 2.</i></li><br>  <div align='right'

style='margin-top:2px;'>  <img src='/images/paamind_inaktiv.gif' border='0'

alt='Påmindelse' title='For at benytte påmindelser skal du være medlem af Ping'>

<span title='For at benytte Påmindelser skal du være medlem af Ping'

class='program_ikon_inaktiv'>Påmindelse</span>  <img

src='/images/tvuge_inaktiv.gif' border='0' alt='tv-uge' title='For at benytte

tv-ugen skal du være medlem af Ping'> <span title='For at benytte tv-ugen skal du

være medlem af Ping' class='program_ikon_inaktiv'>tv-uge</span>  </div>
</div>
</body>
</html>
Avatar billede kalaharikid Nybegynder
30. oktober 2002 - 19:07 #2
Nå ja - En slags svar var det vel !
Avatar billede kalaharikid Nybegynder
30. oktober 2002 - 19:25 #3
Her kommer den nogenlunde endelige udgave :

------------------------------- start på kode

<html>
<head>

<script>
var boolNS4 = navigator.appVersion.indexOf("Nav") > 0 &&

parseInt(navigator.appVersion) == 4;


function resizeIFrame()
{
  objTable  = GetElement("tblProgrammer");
  objIFrame = GetParentElement("ProgramListning");

  if (document.getElementById)
  {
      // IE5+, Mozilla, Gecko
      objIFrame.height = objTable.offsetHeight + 20;
  }
  else if (!document.getElementById && document.all)
  {
      // IE4
      objIFrame.style.height = (objTable.offsetHeight + 20) + "px";
  }
  else if (document.layers)
  {
    // Netscape 4 - egentlig ligemeget da den ikke understøtter IFrames
      return false;
  }
  else
  {
      return false;
  }
}

function GetElement(strElement)
{
if (document.getElementById)
{
  // IE5+, Netscape 6, Mozilla
  return (document.getElementById(strElement));
}
else if (document.all)
{
  // IE4
  return (eval("document.all." + strElement));
}
else if (document.layers)
{
  // Netscape 4
  return (eval("document." + strElement));
}
else
{
  // Crap!
  return (null);
}
}



function GetParentElement(strElement)
{
if (document.getElementById)
{
  // IE5+, Netscape 6, Mozilla
  return (parent.document.getElementById(strElement));
}
else if (document.all)
{
  // IE4
  return (eval("parent.document.all."+strElement));
}
else if (boolNS4)
{
  // Netscape 4
  return (eval("document."+strElement));
}
else
{
  // Crap!
  return (null);
}
}


function toggleDesc(strProgramID)
{
  if(boolNS4) return false;

  objCurrentShort = GetElement("Desc"+strProgramID+"Short");
  objCurrentShort.style.display = (objCurrentShort.style.display=="none" ?

"block" : "none");

  objCurrentLong = GetElement("Desc"+strProgramID+"Long");
  objCurrentLong.style.display = (objCurrentLong.style.display=="none" ? "block"

: "none");

  resizeIFrame();
}



</script>
<style>


div.udsendelse-vises-nu {
background-color: #EAEAEA;
  margin: 5px;
}

.udsendelse-er-vist {
color: #666666;
cursor: pointer;
cursor: hand;
}

div.udsendelse-ingen {
  color: #555555;
  text-align: center;
  margin-top: 10px;
}

span.udsendelse-tid {
  color: #000000;
}

.udsendelse-titel {
  font-weight: bold;
  color: #000000;
cursor: pointer;
cursor: hand;
}

div.udsendelse-beskrivelse {
color: #555555;
margin-left: 41px;
}


</style>
</head>
<body>
<div class='udsendelse'>
<div><span class='udsendelse-tid'>21:25</span>&nbsp;&nbsp;<span

class='udsendelse-titel' onclick='toggleDesc(10228513);'>Piger med power</span>

<span class='udsendelse-symboler'>(TTV)</span> <span

class='udsendelse-symboler'>(5)</span> <span

class='udsendelse-symboler'>(I)</span></div>
<div class='udsendelse-beskrivelse' style='display: block;'

name='divBeskrivelseKort' id='Desc10228513Short'>Portræt af fotografbossen Pia

Nissen.</div>
<div class='udsendelse-beskrivelse' style='display: none;'

name='divBeskrivelseLang' id='Desc10228513Long'>Portræt af fotografbossen Pia

Nissen.<br><a href='/detsker?id=4006' target='_blank'><img alt='Piger med power'

title='Piger med power' align='left' src='http://tv.tv2.dk/image.php?id=11'

width='80' border='0'></a>Hun var 80'ernes foretrukne nøgenmodel, og mange

opfattede hende som en dum blondine. Håret er stadig platinblondt, men i dag er

Pia Nissen topchef i erhvervslivet med 92 medarbejdere under sig. Husbonden tager

sig af hjemmefronten, men den yngste datter må tage med mor på arbejde - ni dage

gammel.<br>  </div>
</div>
</body>
</html>

----------------------------------------slut på kode
Avatar billede phillips Nybegynder
04. november 2002 - 16:33 #4
Tak for det - selvom jeg også bare kunne have pillet den ud fra TV2's side... Men er det egentlig helt lovligt? Jeg tænkte mere på om der findes en side med DHTML kildekode på, hvor dette er blandt koderne?
Avatar billede Slettet bruger
04. november 2002 - 16:36 #5
<a href="javscript:document.getElementById('tekst1').style.display = (document.getElementById('tekst1').style.display == 'none') ? 'block' : 'none';return false;">Vis/skjul felter</a>

<div id="tekst1" style="display: none;">
<table align="center" width="100%" cellspacing="0" cellpadding="2" border="0">
<tr><td>Teksten skal så stå her</td></tr>
</table>
</div>

Det er da lidt simplere....
Avatar billede phillips Nybegynder
06. november 2002 - 17:28 #6
Perfekt, barto! Tak for det - lige hvad jeg ledte efter :)
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