• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Scroll-Leiste ohne Scrollbar

B

Biba125

New member
Hallo,
ich eine Frage zum scrollen einer Leiste mit Hovereffekt. Am besten schaut ihr euch das Beispiel gleich an was ich mit javascript erreichen will. Russell James auf dieser Seite ist unten eine Bilderleiste. Wenn man dort den Mauszeiger ans rechte Ende bewegt wird nach rechts gescrollt und andersrum wenn man den Mauszeiger ans linke Ende bewegt nach links. Das alles allerdings auch ohne Scrollbalken.
In dem Beispiel ist das nun alles in Flash realisiert. Meine Frage ist jetzt ob so etwas auch mit Javascript möglich ist, und wenn ja wie :)
 
ja ist es. du nimmst zwei verschachtelte div-elemente. in das innere kommen alle bilder. zusätzlich legst du einen onmousemove handler auf das äußere element, (also die bildlaufleiste). im mousemove prüfst du die vertikale Position des Mauszeigers relativ zum div. für die fälle (pseudocode)
Code: 
if(parseInt(position.left) < 20)
  inneresDiv.left += 10;
if(parseInt(position.left) > parseInt(äußeresDiv.width) - 20)
  inneresDiv.left -= 10;
Damit haste schonmal die generelle verschiebung erreicht. Nun musst du nur darauf achten, was an beiden "enden" passiert. Ich würde das als "einfache Variante" wie folgt lösen. Das innere div existiert min 3x im äußeren div (so oft, dass die breite aller inneren divs so breit ist, wie das äußere div und dann noch 2 extra). Jetzt kannst du nämlich einfach wenn ein inneres div aus dem äußeren gewandert ist (egal welche seite) es an die anderen seite wieder dransetzten und so bekommst du scheinbar einen kreis an bildern.
Selbes System kannst du natürlich auch mit jedem einzelbild machen, aber das brauch mehr performance.

So würde ich es aufbauen, wenn ich es mir selbst programmieren wollte, was du ja scheinbar willst :)

Lg Kasalop
 
In der Hauptseite fügst du im <head> tag dieses script ein:

<script type="text/javascript">

function pageScrolldown() {

parent.frames.iframe.scrollBy(0,+2);
scrolldelay = setTimeout('pageScrolldown()',10);
}

function pageScrollup() {

parent.frames.iframe.scrollBy(0,-2);
scrolldelay = setTimeout('pageScrollup()',10);
}

function stopScroll() {
clearTimeout(scrolldelay);
}
</script>

im <body> tag fügst du irgendwo folgendes ein:

<td width='50%' align='right'>
<a class='hoover' href="#" onmouseover="pageScrolldown()" onmouseout="stopScroll()"><img src='pics/scrolldwn.gif' border='0' align='right' /></a>
</td>



<td width='50%' align='left'>
<a class='hoover' href="#" onmouseover="pageScrollup()" onmouseout="stopScroll()"><img src='pics/scrollup.gif' border='0' align='left' /></a>
</td>


und letztendlich ein <iframe> tag mit der zu scrollende Seite:


<iframe border='0' frameborder='0' scrolling='no' name='iframe' width='550' height='496' align='top' src='scrollme.php'></iframe>

das wars

mfg sm00thb00th
 
Puh - da muss ich mal wieder Codepolizei spielen...

@Kasalop: warum hast du in deinen Pseudocode lauter parseInt eingebaut? Die bräuchte man wahrscheinlich gar nicht im echten Code...

@sm00thb00th: dein Code ist nicht gut:
1. Du verwendest Tabellen für Layoutzwecke... das ist nicht so wirklich up to date, schwer zu warten und auch unnötig.
2. Dein JS setzt eine gewisse Framestruktur voraus (dass die Aufrufende Seite die oberste Lage ist) - dadurch wird der Code unflexibel.
3. window.setTimeout sollte man nicht mit einem String als Parameter aufrufen - eine Funktionsreferenz zu übergeben ist sicherer und auch schneller.
4. <a href="#"> ist jetzt nicht dein Ernst... invalide, unschön, unnötig und hat unerwünschte Nebeneffekte
5. Du solltest dir dringend mal CSS ansehen... damit kann man tolle Sachen machen und gleichzeitig sein HTML aufräumen...
Außerdem solltest du hier im Forum die
Code: 
-Tags verwenden.
 
Hallo danke erstmal für eure Antworten.
ich habe jetzt eine Lösung gefunden die zwar nicht perfekt ist aber funktioniert.
ich habe ganz unten als thumbleiste ein iframe mit einer breite von zb 2500px, also halt so breit wie die jeweiligen thumbnails sind. Dann habe ich alle Scrollbalken ausgeblendet, sowohl die des Iframes scrolling="no" als auch des Browsers mit
HTML: 
<body style="overflow:hidden;">
. Alle anderen Elementen auf der Seite außer dem iframe muss man jetzt allerdings eine fixed postion geben, damit sie nicht mitgescrollt werden.
Jetzt legt man unten rechts und unten links jeweils folgende Divs an:
HTML: 
<div id="rechtsbutton" onmouseover="rechtsscroll()" onmouseout="anhalten()"></div>
<div id="linksbutton" onmouseover="linksscroll()" onmouseout="anhalten()"></div>
Diese dienen dann zum scrollen nach links und rechts wenn man darüber fährt.

Folgender Javascript Code dient dann zum scrollen:
Code: 
<script type="text/javascript">
var anfang = 1;
var speedup = 2;
var speedwn = 2;

function rechtsscroll() {
 scrolltimer = setInterval("parent.scroll(anfang+=speedwn,0)",1);
}

function linksscroll() {
 scrolltimer = setInterval("parent.scroll(anfang-=speedup,0)",1);
}

function anhalten() {
 clearInterval(scrolltimer);
}
</script>

Wenn man jetzt über die Divs fährt sieht es so aus als würde nur die thumbnail leiste scrollen, da die anderen Elemente alle eine fixed postion haben.
Falls ihr noch irgendwelche Anmerkungen oder Verbesserungen habt nehme ich sie gerne entgegen :)
 
kkapsner schrieb:
Puh - da muss ich mal wieder Codepolizei spielen...

@Kasalop: warum hast du in deinen Pseudocode lauter parseInt eingebaut? Die bräuchte man wahrscheinlich gar nicht im echten Code...
Zum Vergrößern anklicken....

Weil ich auch vernünftige Sprachen programmiere und lieber selbst das Typecasting vornehme, anstatt es dem Browser zu überlassen. außerdem ist es in der Regel nötig. da wo -20 gerechnet wird nicht, da der subtraktionsoperator automatisch ein typecast zu float oder int vornimmt, aber dann würde ich immernoch mit einem String vergleich und dort würde es (glaube ich (bei == auf jedenfall)) crashen (da "20px" eben nicht identisch ist mit 20)

Lg Kasalop

@TE: finde ich eine sehr unsaubere Lösung. ein komplett fixes Layout und dann die ganze seite darunter wegscrollen? na ich weiß ja nicht.und nen iFrame? bitte nicht. mit frames arbeitet man heute nicht mehr. das könntest du genau so gut mit einem div-element machen. und durch dein position:fixed kannste nun auch nicht mehr hoch und runter scrollen, wenn dein content mal länger ist als die seite. dafür müsstest du einen fixed container machen, der dnan wieder scrollbar ist. ist aber irgendwie nicht schön.
 
Zuletzt bearbeitet:
@Kasalop: Ich habe nichts gegen gescheites Typecasting (manchmal hätte ich gerne in JS einen Variablentyp, dem man sagen kann: "Hey... du bist ab jetzt ein WAS_AUCH_IMMER und nichts anderes!") aber dein Pseudocode sah so aus, als ob die Eigenschaften schon Zahlen wären... (Mauspositionen sind z.B. immer in Pixel und damit normale Zahlen).
Der automatische Typecast bei Vergleichen ist in JS auch recht kompliziert und wenn man da nicht aufpasst bekommt man sehr schnell komische Ergebnisse.

iFrames sind sogar ziemlich in Mode (viele FB Verbindungen auf anderen Seiten sind über iFrames gelöst) - aber mit normalen Framesets arbeitet man fast nicht mehr.

@Biba125: dein Ansatz ist trotzdem nicht so wirklich schön...

Da ich gerade nicht das machen will, was ich machen sollte:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
kkjs.event.onWindowLoad(function(){
	kkjs.css.$(".scrollable").forEach(function(scrollable){
		scrollTimer = false;
		var content = kkjs.css.$(".content", {node: scrollable})[0];
		function startScroll(dir){
			content.scrollLeft += dir;
			scrollTimer = window.setTimeout(function(){
				startScroll(dir);
			}, 25);
		}
		function endScroll(){
			window.clearTimeout(scrollTimer);
		}
		kkjs.css.$(".scrollLeft", {node: scrollable}).forEach(function(left){
			kkjs.event.add(left, "mouseenter", function(){startScroll(-3)});
			kkjs.event.add(left, "mouseleave", endScroll);
		});
		kkjs.css.$(".scrollRight", {node: scrollable}).forEach(function(right){
			kkjs.event.add(right, "mouseenter", function(){startScroll(3)});
			kkjs.event.add(right, "mouseleave", endScroll);
		});
	});
});
</script>
<style type="text/css">
.scrollable {
	position: relative;
	height: 200px;
	width: 200px;
	border: 1px solid black;
}
.content {
	overflow: hidden;
	width: 100%;
	height: 100%;
	white-space: nowrap;
}
.scroller {
	position: absolute;
	top: 0;
	height: 100%;
	width: 25px;
}
.scroller:hover {
	background-color: lightgray;
}
.scrollLeft {
	left: 0;
}
.scrollRight {
	right: 0;
}
</style>
</head>
<body>
<div class="scrollable">
	<div class="scroller scrollLeft"></div>
	<div class="scroller scrollRight"></div>
	<div class="content"> hier kann alles mögliche stehen... auch HTML... alkdsjf aölkdjf ajnf aj hf lkjahf lkjahf kajhf ahf iauh jfpiaj poianvf apijds fky nepoiaj fpoiyjd fna poiajf poaijojyfd pja proij poijs
	</div>
</div>
</body>
</html>
- mein Framework brauch' ich hier v.A. für die Selektoren... wenn du all deinen Elementen fixe IDs gibst, solltest du mit document.getElementById() da auch glücklich werden - die Events kannst du über .onload, .onmouseover, .onmouseout setzten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben