skaplignende funksjon til text

Unlimited · 11. desember 2006

Hei,

EKSEMPEL:

jeg vil ha 5 linjer med text på en side, men vil ikke at de 5 linjene skal vises når brukeren kommer inn på sida! De skal nemlig klikke på "les videre" og deretter vil jeg at resten av texten skal dukke opp. ikke i et popup vindu, men under de 2 linjene som var synlig på sida fra før!

håper dere skjønte meg! en skap lignende funksjon :ph34r:

Haraldson · 11. desember 2006

Øh, en liten digresjon; kan du utdype hvordan du syns denne funksjonen ligner på skap i en hvilken som helst form?

Veien å gå er forresten via et serverside-språk, slik som PHP, ASP, Django osv. Men, tror kanskje du kan hoppe rett på et passende publiseringssystem. Det finnes en ny tråd om det her i WDS, spør der om det er det du vil ha.

Jonhoo · 11. desember 2006

Neida, dette er ikke noe problem

Her er en sak jeg satte sammen paa 10 min, vet ikke om den noedvendigvis er helt standard, men den fungerer

<html>
<head>
<title>Yessir!</title>
</head>
<body>
<div class="desc" id="desc1">Her legger du inn teksten din via PHP. Den kan vaere saa lang du bare vil, brukeren vil faa opp [...] hvis teksten er lengre enn du vil ha den</div>
<div class="desc" id="desc2">Du kan som du ser legge inn flere DIVs, bare legg til til med class="desc" og id="desc" fulgt av et tall... :)</div>
<div class="desc" id="desc3">Her er det en kort en, den vil ikke bli croppet</div>
<script type="text/javascript">

var cropvedantallbokstaver = 50;

function getElementsByClassName (className) {
var all = document.all ? document.all :
  document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++)
  if (all[e].className == className)
    elements[elements.length] = all[e];
return elements;
}

var fullcont = new Array;
for (var i = 0; i < getElementsByClassName("desc").length; i++)
{
  var element = document.getElementById("desc"+(i+1));
  fullcont[i] = element.innerHTML;
  element.innerHTML = fullcont[i].substr(0,cropvedantallbokstaver)+(fullcont[i] == fullcont[i].substr(0,cropvedantallbokstaver) ? '' : '<a href="" id="more"> [Les mer]</a>');
  element.lastChild.onclick = showtext;
}

function showtext()
{
  var element = this.parentNode;
  var fullcontent = fullcont[parseInt(element.id.substr(4))-1];
  element.innerHTML = fullcontent+'<a href="" id="less"> [Minimer]</a>';
  element.lastChild.onclick = hidetext;
  return false;
}

function hidetext()
{
  var element = this.parentNode;
  var fullcontent = fullcont[parseInt(element.id.substr(4))-1];
  element.innerHTML = fullcontent.substr(0,cropvedantallbokstaver)+'<a href="" id="more"> [Les mer]</a>';
  element.lastChild.onclick = showtext;
  return false;
}
</script>
</body>
</html>

Endret 11. desember 2006 av Jonhoo

Equerm · 11. desember 2006

Jonhoo: Synst du dette er en bra metode?

Mye enklere å gjøre det med PHP og en MySQL database

Jonhoo · 11. desember 2006

Dette er en mye bedre metode fordi den ikke baserer seg paa at du maa ha flere spoerringer til MySQL via PHP. Dataene maa selvfoelgelig hentes ut fra PHP og legges inn i DIVene ved hjelp av PHP, men Javascript burde faa ordne med cropping av teksten da det gjoer det hele mye raskere for brukeren

Preview er forresten her:

http://jonhoo.web.surftown.nu/Share/mm.html

PS: Koden over har blitt en smule oppdatert

Endret 11. desember 2006 av Jonhoo

Equerm · 11. desember 2006

Etter å ha sett preview så endret jeg litt mening

Så ganske greit ut egentlig, kanskje Tasty Text Trimmer også kunne fungert i dette tilfellet?

Jonhoo · 11. desember 2006

Saa fint

Tasty Text Trimmer saa jo fin ut den ogsaa, men den er kanskje ikke saa "funksjonell" paa en faktisk side?

Equerm · 11. desember 2006

Nei, jeg har fremdeles igjen å finne en plass det faktisk kunne vert nyttig

backup · 11. desember 2006

Kunne dette være noe?

<html>

<head>

.hideDisplayStyle {

visibility: hidden;

</style>

function display(element) {

if (document.layers && document.layers[element] != null)

document.layers[element].visibility = 'visible';

else if (document.all)

document.all[element].style.visibility = 'visible';

}

function hide(element) {

if (document.layers && document.layers[element] != null)

document.layers[element].visibility = 'hidden';

else if (document.all)

document.all[element].style.visibility = 'hidden';

}

</script>

</head>

<body>

<b>Det er tydelig</b> at han ikke har vært i Syden på en stund, sier et vitne om

naken-syklisten i Grimstad. <a href ="#" onclick = "display('toggleText')">"

Les videre ...</a>

I flere minusgrader syklet den atletiske mannen gjennom Grimstad i helgen.

<b>72 minutter</b> var spilt da Henrik Larsson ordnet 2-2 mot Brann i søndagens

Royal League-kamp. Henke kom mutters alene med Johan Thorbjørnsen og satte

ballen enkelt i mål. Mons Ivar Mjelde mente det så ut som offside, men kampens

danske dommer godkjente målet.

</body>

</html>

nree · 11. desember 2006

Legg til dette mellom <head> taggen:

<script type="text/javascript">function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;style2.display = style2.display? "":"none";}
else if (document.all)
{
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"none";
}
else if (document.layers)
{
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"none";
}
}</script>

Og dette i mellom <body>

<a href="javascript:toggleLayer('skjult');" title="Skjult tekst">Vis/skjul innhold!</a>
<div id="skjult" style="display: none;">Skjult tekst!</div>

Forhåndsvisning: http://nilsree.com/script/vis-skjul.php

Kode til forhåndsvisning:

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
 <title>Vis / skjul tekst forhåndsvisning!</title>

 <!-- Javascript som styrer om en div skal ha style display="none" eller ikke -->
 <script type="text/javascript">function toggleLayer(whichLayer)
  {
  if (document.getElementById)
  {
  var style2 = document.getElementById(whichLayer).style;style2.display = style2.display? "":"none";}
  else if (document.all)
  {
  var style2 = document.all[whichLayer].style;
  style2.display = style2.display? "":"none";
  }
  else if (document.layers)
  {
  var style2 = document.layers[whichLayer].style;
  style2.display = style2.display? "":"none";
  }
  }
 </script>
 <!-- Slutt på javascript! -->
</head>
<body>

 <p>
  <a href="javascript:toggleLayer('skjult');" title="Skjult tekst">
   Vis/skjul innhold!
  </a>
 </p>
 <div id="skjult" style="display: none;">
  Skjult tekst!
 </div>
</body>
</html>

EDIT: Endret litt på koden og la til forhåndsvisning

Endret 11. desember 2006 av goggen90

Jonhoo · 11. desember 2006

Men han skal ikke ha skjult tekst, han skal bare skjule deler av den og ha en "Les mer" link

Unlimited · 11. desember 2006

Jonhoo og goggen90, hjertelig takk... nå er det fixa

Endret 11. desember 2006 av Unlimited

Frigg33 · 16. desember 2006

Legg til dette mellom <head> taggen:

<script type="text/javascript">function toggleLayer(whichLayer)
{
if (document.getElementById)
{
var style2 = document.getElementById(whichLayer).style;style2.display = style2.display? "":"none";}
else if (document.all)
{
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"none";
}
else if (document.layers)
{
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"none";
}
}</script>

Og dette i mellom <body>

<a href="javascript:toggleLayer('skjult');" title="Skjult tekst">Vis/skjul innhold!</a>
<div id="skjult" style="display: none;">Skjult tekst!</div>

Forhåndsvisning: http://nilsree.com/script/vis-skjul.php

Kode til forhåndsvisning:

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
  <title>Vis / skjul tekst forhåndsvisning!</title>
  
  <!-- Javascript som styrer om en div skal ha style display="none" eller ikke -->
  <script type="text/javascript">function toggleLayer(whichLayer)
   {
   if (document.getElementById)
   {
   var style2 = document.getElementById(whichLayer).style;style2.display = style2.display? "":"none";}
   else if (document.all)
   {
   var style2 = document.all[whichLayer].style;
   style2.display = style2.display? "":"none";
   }
   else if (document.layers)
   {
   var style2 = document.layers[whichLayer].style;
   style2.display = style2.display? "":"none";
   }
   }
  </script>
  <!-- Slutt på javascript! -->
</head>
<body>

  <p>
   <a href="javascript:toggleLayer('skjult');" title="Skjult tekst">
    Vis/skjul innhold!
   </a>
  </p>
  <div id="skjult" style="display: none;">
   Skjult tekst!
  </div>
</body>
</html>

EDIT: Endret litt på koden og la til forhåndsvisning

7476753[/snapback]

Jeg fikk til dette så langt... men begge to kommer under samm skjul/vis... atpåtil så kommer skjul/vis nummer 2 inn under skjul/vis nummer 1... og når jeg trykker på nummer 2 så skjuler nummer 1 seg... ergo... nummer 2 åpner seg ikke.. hvis dere skjønner... hvordan fikser jeg dette?

nree · 17. desember 2006

Men han skal ikke ha skjult tekst, han skal bare skjule deler av den og ha en "Les mer" link

7477496[/snapback]

Hehe, akkuratt det man kan gjøre med det scriptet

Jeg fikk til dette så langt... men begge to kommer under samm skjul/vis... atpåtil så kommer skjul/vis nummer 2 inn under skjul/vis nummer 1... og når jeg trykker på nummer 2 så skjuler nummer 1 seg... ergo... nummer 2 åpner seg ikke.. hvis dere skjønner... hvordan fikser jeg dette?

7518226[/snapback]

Hmm du må endre på:

<a href="javascript:toggleLayer('skjult');" title="Skjult tekst">Vis/skjul innhold!</a>
<div id="skjult" style="display: none;">Skjult tekst!</div>

Du kan f.eks ha:

<a href="javascript:toggleLayer('skjult1');" title="Skjult tekst">Vis/skjul innhold!</a>
<div id="skjult1" style="display: none;">Skjult tekst!</div>

<a href="javascript:toggleLayer('skjult2');" title="Skjult tekst">Vis/skjul innhold!</a>
<div id="skjult2" style="display: none;">Skjult tekst!</div>

Bare du endrer navnet i linken og i div taggen så skal det funke..

Frigg33 · 19. desember 2006

ok..takk skal du ha

skaplignende funksjon til text

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer