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ó

<div rel="tegyelNekemIdeSzepScrollbart">
   itt az en konstans szelessegu divem, amiben a tartalom az mindegy
</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:

<html>
<head>
<style>
a {
cursor:pointer;
}
</style>
<meta http-equiv="Cache-Control" content="no-cache" />
<script>
var tomb = new Array();
var sor_szam = 0;
var sorok_darab = 20-1; //Tömb elemek 0-val kezdődnek
window.onload = function () {
	var szoveg = document.getElementById('show').innerHTML;
	var tartalom = document.getElementById('show');
	var szamlalo = 0;
	var sortores = 50;
	var adat = '';
	tartalom.innerHTML = '';
	for (var i=0;i<=szoveg.length;i++) {
		adat += szoveg.charAt(i);
		if ((szoveg.charAt(i)==" " && adat.length>sortores) || i==szoveg.length) {
			adat += '<br>'
			tomb[szamlalo] = adat;
			szamlalo++;
			adat = '';			
		}
	}
	start();
}
function start() {
	var tartalom  = document.getElementById('tartalom');
	tartalom.style.width = 400 + "px";
	for (var i=0;i<=tomb.length;i++) {
		if (i>sorok_darab) {
			break;
		}
		else {
			tartalom.innerHTML += tomb[i];
			sor_szam ++;
		}
	}	
}
function next() {
	var tartalom  = document.getElementById('tartalom');
	if (tomb.length>sor_szam) {
		tartalom.innerHTML = '';
		for (var i=sor_szam-sorok_darab;i<=sor_szam+1;i++) {
			tartalom.innerHTML += tomb[i];
		}
	sor_szam++;
	}
	t = setTimeout("next()",200);
}
function stop_() {
	clearTimeout(t);
}
function prev() {
	var tartalom  = document.getElementById('tartalom');
	if (sor_szam>sorok_darab+1) {
		tartalom.innerHTML = '';
		for (var i=sor_szam-21;i<=sor_szam-1;i++) {
			tartalom.innerHTML += tomb[i];
		}
	sor_szam--;
	}	
	t = setTimeout("prev()",200);
}
</script>
</head>
<body>
<div>
<a onmousedown="prev()" onMouseUp="stop_()"><<--</a> |||||| <a onmousedown="next()" onMouseUp="stop_()">-->></a>
</div>
<div id="show">
A szöveg jön ide.
</div>
<div id="tartalom" align="justify">
</div>
</body>
</html>