ugrás a tartalomhoz

scrollozhato div

zestart · 2009. Jún. 4. (Cs), 13.02
Helo Kedves olvaso.

Az alabbi problemat szeretnem megoldani:
van egy div-em, abban van tartalom. A div szelessege konstans, viszont ha kerulne meg bele tartalom, az nem ferne el. ezert scollozhatova szeretnem tenni valami fele modon, de nem scoll bar-ral, az gagyi. legjobb lenne mouseX mozgasra, de ha balra/jobbra nyil mouseover-re megy az sem gond. Erre tudna valaki nekem otletet mondani? free source kod, vagy ilyesmi?
lehetoseg szerint valami ilyesmi egyszeru problemamegoldast keresek:

<div id=""> <!-- egy nyito es zaro div tag-es megoldast szeretnek, +js,css akarmi -->
<div>
itt az en konstans szelessegu divem, amiben a tartalom az mindegy
</div>
</div>

A valaszotokat elore is koszonom.
‹ Javascript - SELECT elem tartalmának megjegyzése checkbox állapotától függő css class IE ›
 ■
1

div - position:absolute;

szabo.b.gabor · 2009. Jún. 4. (Cs), 14.09
én ezt úgy szoktam megoldani, hogy 'megjelenítem' a scrollbart, de föléteszek egy div-et, ami eltakarja. így egérrel úgyanúgy görgethető a téma.

a div-be ami eltakarja (vagy akárhova máshova) pedig teszek akármiket amik javascript-tel valósítják meg a görgetést.

némi javascript témával ebből kiindulva is megcsinálható
  1. <div rel="tegyelNekemIdeSzepScrollbart">  
  2.    itt az en konstans szelessegu divem, amiben a tartalom az mindegy  
  3. </div>  
2

jScrollPane

hosszu.kalman · 2009. Jún. 4. (Cs), 15.32
Van egy jScrollPane nevű jQuery plugin, amit nagyon egyszerű beállítani és elég jól testre szabható.

Én ha scrollozást kell csinálni ezt szoktam használni.
3

egérgörgő nélkül

gex · 2009. Jún. 4. (Cs), 15.33
hogy fogok görgetni? nem véletlenül van az a scrollbar. diszkrét js-sel cseréld le valami dizájnosra.
4

Én így oldottam

mgergo90 · 2009. Jún. 4. (Cs), 15.41
Én így oldottam meg:
  1. <html>  
  2. <head>  
  3. <style>  
  4. a {  
  5. cursor:pointer;  
  6. }  
  7. </style>  
  8. <meta http-equiv="Cache-Control" content="no-cache" />  
  9. <script>  
  10. var tomb = new Array();  
  11. var sor_szam = 0;  
  12. var sorok_darab = 20-1; //Tömb elemek 0-val kezdődnek  
  13. window.onload = function () {  
  14.     var szoveg = document.getElementById('show').innerHTML;  
  15.     var tartalom = document.getElementById('show');  
  16.     var szamlalo = 0;  
  17.     var sortores = 50;  
  18.     var adat = '';  
  19.     tartalom.innerHTML = '';  
  20.     for (var i=0;i<=szoveg.length;i++) {  
  21.         adat += szoveg.charAt(i);  
  22.         if ((szoveg.charAt(i)==" " && adat.length>sortores) || i==szoveg.length) {  
  23.             adat += '<br>'  
  24.             tomb[szamlalo] = adat;  
  25.             szamlalo++;  
  26.             adat = '';            
  27.         }  
  28.     }  
  29.     start();  
  30. }  
  31. function start() {  
  32.     var tartalom  = document.getElementById('tartalom');  
  33.     tartalom.style.width = 400 + "px";  
  34.     for (var i=0;i<=tomb.length;i++) {  
  35.         if (i>sorok_darab) {  
  36.             break;  
  37.         }  
  38.         else {  
  39.             tartalom.innerHTML += tomb[i];  
  40.             sor_szam ++;  
  41.         }  
  42.     }     
  43. }  
  44. function next() {  
  45.     var tartalom  = document.getElementById('tartalom');  
  46.     if (tomb.length>sor_szam) {  
  47.         tartalom.innerHTML = '';  
  48.         for (var i=sor_szam-sorok_darab;i<=sor_szam+1;i++) {  
  49.             tartalom.innerHTML += tomb[i];  
  50.         }  
  51.     sor_szam++;  
  52.     }  
  53.     t = setTimeout("next()",200);  
  54. }  
  55. function stop_() {  
  56.     clearTimeout(t);  
  57. }  
  58. function prev() {  
  59.     var tartalom  = document.getElementById('tartalom');  
  60.     if (sor_szam>sorok_darab+1) {  
  61.         tartalom.innerHTML = '';  
  62.         for (var i=sor_szam-21;i<=sor_szam-1;i++) {  
  63.             tartalom.innerHTML += tomb[i];  
  64.         }  
  65.     sor_szam--;  
  66.     }     
  67.     t = setTimeout("prev()",200);  
  68. }  
  69. </script>  
  70. </head>  
  71. <body>  
  72. <div>  
  73. <a onmousedown="prev()" onMouseUp="stop_()"><<--</a> |||||| <a onmousedown="next()" onMouseUp="stop_()">-->></a>  
  74. </div>  
  75. <div id="show">  
  76. A szöveg jön ide.  
  77. </div>  
  78. <div id="tartalom" align="justify">  
  79. </div>  
  80. </body>  
  81. </html>