maximaal antaal regels van DIV

[ick in noot]

hoi, ik wil dat een div niet meer als 8 regels mag hebben.. is dit mogelijk? geen php wand dan moet er refresh komen. ik probeerde zelf al iets met join en split maar dat werkte niet:

function sendding()
{

split=document.getElementById("Ding").innerHTML.split("<br>");
if(!split[10]==""){split[2]="";}
if(!split[9]==""){split[1]="";}
if(!split[8]==""){split[0]="";}
document.getElementById("Ding").innerHTML=split.join("<br>");
}

hij controleert enkel of er 3 regels teveel staan in de div omdat het in mijn totale script niet mogelijk is om er meer bij te krijgen

vriendelijke groet en alvast bedankt Jesse Degger akka ick-in-noot

 

[Egel]

Dit beperkt het aantal regels tot 8:

[boven de div]
<div id="ding">
 regel 01<br>
 regel 02<br>
 regel 03<br>
 regel 04<br>
 regel 05<br>
 regel 06<br>
 regel 07<br>
 regel 08<br>
 regel 09<br>
 regel 10<br>
 regel 11<br>
 regel 12<br>
</div>
[onder de div]

<script type="text/javascript">
 function sendding() {
  var split = document.getElementById('ding').innerHTML.split(/<br>/i);
  split.splice(8,split.length);
  document.getElementById('ding').innerHTML = split.join('<br>');
  };

 sendding();
</script>

Ik heb /<br>/i in de split gebruikt omdat IE bij innerHTML de tags in hoofdletters weergeeft en Fx niet, zo worden <BR> en <br> beide gebruikt.


Vr.Gr. Egel.

 

[ick in noot]

khoop dat het werkt

even proberen in ieder geval voor de moeite

-edit- het werkt

maar ik weet niet of het mogelijk is maar zou hij ook afgebroken regels kunnen meetellen? bijv. ik gebrijk nu geen <br> maar de regel gaat wel naar onder teo snap je?

 

[Egel]

Dan kun je denk ik beter css gebruiken:

<div style="background: #eee; width: 240px; height: 160px; overflow: hidden;">
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
</div>

In dit voorbeeld worden ongeveer de eerste 6 1/2 regels weergegeven.

Voor overflow kun je visible, hidden, scroll en auto gebruiken. visible maakt de div groter, met hidden valt de tekst weg, scroll geeft scollbars, auto ook maar alleen als het nodig is.


Vr.Gr. Egel.

 

[ick in noot]

had ik al maar dan zakt te regel weg onderin het scherm ipv dat de 1e regel weggat

 

[Egel]

Met css én script:

<div id="ding" style="background: #eee; width: 240px; height: 160px; overflow: auto;">
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
</div>

<script type="text/javascript">
 function shortDing() {
  var ding = document.getElementById('ding');
  ding.scrollTop = 999;
  if (ding.scrollTop > 0) {
   var split = ding.innerHTML.split(' ');
   while (ding.scrollTop > 0) {
    split.splice(split.length -1,split.length);
    ding.innerHTML = split.join(' ');
    };
   ding.innerHTML += ' (...)';
   };
  };

 shortDing();
</script>

Met overflow: auto; krijg je een scrollbalk als de inhoud te groot is, dat wordt gemeten met .scrollTop. Als dat gebeurt wordt de inhoud op spaties gesplit en telkens een woord aan het eind verwijdert totdat de scrollbalk weg is, daarna wordt er nog (...) aan de tekst toegevoegd.


Vr.Gr. Egel.

 

[ick in noot]

ik ga het morgen testen heel erg bedankt voor de moeite

 

[ick in noot]

ehh,, ik heb niet het idee dat het wat doet ?

 

[Egel]

Zie je nog steeds een scrollbalk bij het div-vakje dan?

Probeer het anders eens hiermee:

<div id="ding" style="background: #eee; width: 240px; height: 160px; overflow: auto;">
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
 een twee drie vier vijf zes zeven acht negen tien
</div>

<script type="text/javascript">
 function shortDing() {
  var ding = document.getElementById('ding');
  ding.scrollTop = 999;
  if (ding.scrollTop > 0) {
   var split = ding.innerHTML.split(' ');
   while (ding.scrollTop > 0) {
    split.splice(split.length -1,split.length);
    ding.innerHTML = split.join(' ');
    };
   ding.innerHTML += ' (...)';
   };
  };

 window.onload = shortDing;
</script>

Dat start de functie pas na het laden van de pagina.


V.Gr. Egel.

 

[ick in noot]

hij geeft geen error, hj doet voor em gevoel alleen niks

 

[Egel]

Als het allemaal in de div past doet 't script inderdaad niks. Anders werkt dit misschien beter:

<script type="text/javascript">
 var ding;

 function startDing() {
  ding = document.getElementById('ding');
  setTimeout('checkDing()',250);
  };

 function checkDing() {
  ding.scrollTop = 999;
  if (ding.scrollTop > 0) {
   var split = ding.innerHTML.split(' ');
   while (ding.scrollTop > 0) {
    split.splice(split.length -1,split.length);
    ding.innerHTML = split.join(' ');
    };
   ding.innerHTML += ' (...)';
   };
  };

 window.onload = startDing;
</script>

<style>
 body { margin 8px; font: 13px Verdana;}
</style>

<div id="ding" style="background: #eee; width: 240px; height: 160px; overflow: auto;">
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
</div>

Dat wacht even nadat de pagina geladen is.

Wat je zou moeten zien is dit:

Vr.Gr. Egel.

 

[ick in noot]

kzal het even proberen igg bedankt voor de inzet

 

[ick in noot]

ehh,, hij gaat nu als het teveel wordt naar een (...) maar dat moet <br> worden

 

[Egel]

hij gaat nu als het teveel wordt naar een (...) maar dat moet <br> worden

Dat gebeurt met deze regel:

   ding.innerHTML += ' (...)';

Om aan te geven dat er tekst verwijdert is. Maar als je daar

   ding.innerHTML += '<br>';

van maakt dan krijg je toch weer een scrollbalk terug?


Vr.Gr. Egel.

 

[ick in noot]

mijn vraag wordt verkeerd begrepen, ik vroeg om een maximaal aantal regels zeg maar heh? dat is verholpen maar dat ding rekent regels die worden afgebroken om zegmaar die niet in de div kwa breedte passen. die telt hij niet mee;

voorbeeld:

regel 1. de vis gaat naar de dokter
regel 2. de vis gaat naar de dokter

nouw dat is zegmaar gewoon oed.. maar er zijn ook regels bij zoals;

regel 1. de vis gaat naar de dokter en de dokter zecht ag ik zie het al uit de kom.........allalala moet dit even een stuk vol typen of niet dan?abcdefghijklmnopqrstuvwxyzdan?abcdefghijklmnopqrstuvwxyz
regel 2. de vis gaat naar de dokter

je ziet dat regel 2 pas word mee gerekent vanaf dat ik <br> heb gedaan en niet wneer hij automatisch afbreekt

 

[Egel]

Regels die automatisch worden afgebroken werden wel meegeteld hoor.

Maar ik haalde tekst aan het einde weg om het passend te maken en zo te zien wou je tekst aan het begin weghalen. Dit script doet dat:

<script type="text/javascript">
 // Egel 071103 ;)
 function startDing() {
  setTimeout('checkDing()',250);
  };

 function checkDing() {
  var ding = document.getElementById('ding'), split = ding.innerHTML.split(' '), height = parseInt(ding.style.height);
  while (ding.scrollHeight > height) {
   split.shift();
   ding.innerHTML = split.join(' ');
   };
  };

 window.onload = startDing;
</script>


<div id="ding" style="background: #eee; width: 240px; height: 128px; font: 13/16px Verdana; overflow: hidden;">
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
 Een twee drie vier vijf zes zeven acht negen tien.
</div>

Het aantal regels wordt bepaald door de style in de div:
height: 128px; font: 13/16px Verdana;
In dit geval 8 regels (128:16).


Vr.Gr. Egel.