Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js]Dzielenie tekstu na kolumny
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
sleedz
Witam.
Mam taki problem że mam kolumny ograniczone wysokością i potrzebuję podzielić tekst tak aby nie wystawał na dół. Można to zrobić ograniczając ilość znaków, tylko że różne znaki mają różną szerokość więc nie da się określić stałej ilości.
Nie mam żadnego pomysłu jak to rozwiązać.
by_ikar
Nie musi być js, może być css. A konkretniej: display: hidden; nadaj konkretnej kolumnie, jeżeli tekstu będzie więcej niż się może zmieścić, zostanie zwyczajnie obcięty wink.gif
sleedz
Ale wtedy go po prostu zasłoni a ja chcę żeby go przeniosło do następnej kolumny.
Sephirus
Ok to jest jakiś pomysł ale trzeba go sprawdzić w praktyce... i nie jest idealny...

zobacz
sleedz
Napisałem coś takiego, ale jak mam tekstu na jedną kolumnę to nie działa i nie wiem co zrobić.
Mógłbym mi ktoś pomóc? Z góry dziękuję.


[JAVASCRIPT] pobierz, plaintext
  1. function cols(div_id, ii, col1, col2) {
  2. var $div = $('#'+div_id+'1');
  3. if(ii==2) var $div2 = $('#'+div_id+'2');
  4. var orgWys =
  5. parseInt($div.css('height'));
  6. var next_col = "";
  7. $div.css('height', 'auto');
  8.  
  9. var tekst = new Array();
  10. var a ="";
  11. var j = 0;
  12. var i = 10;
  13. col1 = 0;
  14. col2 = 1;
  15. while(i>0) {
  16. var slowa = $div.html().split(' ');
  17. var ilosc = slowa.length;
  18. if ($div.height() > orgWys) {
  19.  
  20. var indeks = slowa.length;
  21. do {
  22. a = slowa.slice(0, --indeks).join(' ')
  23. $div.html(a);
  24.  
  25. } while ($div.height() > orgWys);
  26.  
  27. }
  28. tekst[j] = $div.html();
  29. next_col = slowa.slice(indeks, ilosc).join(' ');
  30. $div.html(next_col);
  31.  
  32.  
  33. if(tekst[j].length == 0) i = 0;
  34. j++
  35.  
  36.  
  37. }
  38. var l = tekst.length;
  39. $div.css('height', orgWys);
  40. if(l>1) {
  41. if(ii==2) {
  42. var sites = roundUp((l-1)/2)
  43. var li = '';
  44. var site = 1;
  45.  
  46. for(var i=1; i<=sites; i++) {
  47. if(i==site) li += "<li class=\"active\" id=\"s"+i+"\">"+i+"</li>";
  48. else li += "<li id=\"s"+i+"\">"+i+"</li>";
  49. }
  50. $("#page_buttons ul").html(li);
  51.  
  52. for(var k=1; k<=sites; k++) {
  53. $("#s"+k).click(
  54. function() {
  55. var id = this.id.split('');
  56. site = id[1];
  57. var c1 = roundUp((site*2)-2);
  58. var c2 = roundUp((site*2)-1);
  59. $div.html(tekst[c1]);
  60. $div2.html(tekst[c2]);
  61. $("#page_buttons ul").children("li").removeClass();
  62. $(this).addClass("active");
  63. });
  64. }
  65.  
  66. $div.html(tekst[col1]);
  67. $div2.html(tekst[col2]);
  68. }
  69. if(ii==1) {
  70. var sites = roundUp(l-1)
  71. var li = '';
  72. var site = 1;
  73.  
  74. for(var i=1; i<=sites; i++) {
  75. if(i==site) li += "<li class=\"active\" id=\"s"+i+"\">"+i+"</li>";
  76. else li += "<li id=\"s"+i+"\">"+i+"</li>";
  77. }
  78. $("#page_buttons ul").html(li);
  79.  
  80. for(var k=1; k<=sites; k++) {
  81. $("#s"+k).click(
  82. function() {
  83. var id = this.id.split('');
  84. site = id[1];
  85. var c1 = site-1;
  86. $div.html("<div id=\"dc1text\">"+tekst[c1]);
  87. $("#page_buttons ul").children("li").removeClass();
  88. $(this).addClass("active");
  89. });
  90. }
  91.  
  92. $div.html(tekst[col1]);
  93. }
  94. }
  95.  
  96. }
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.