• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slider mit Javascript und HTML selfmade

M

Motero

Neues Mitglied
Hallo ich sitze gerade an einer minimalen Version von einem Slider.

Allerdigns kann ich den Silder-Balken nur einmal verändern. Warum, diese Frage stelle ich mir gerade

Hier mein code:

<style type="text/css">

.clBack{position:absolute;top:50px;right:90px;
background-image: url(images/back.jpg);
width:496px;height:32px;}

.clFront{position:absolute;top:59px;right:560px;
background-image: url(images/front.jpg);
width:24px;height:12px;}
</style>

<script language=JavaScript>

var x_koo;
var y_koo;
var _x;
var _y;
var element;



var Regler;
var erg;
var Offset_x = 560;
var Min_x = 560;
var Max_x = 90;

var active = false;


var isIE = document.all?true:false;
function start()
{
document.onmousemove = getMousePosition;
document.onmouseup = drop;
Regler = document.getElementById("F");
}

function druecken() {
active = true;
x_koo=_x;
y_koo=_y;
//alert("X-position:&nbsp;"+x_koo+";&nbsp;Y-position:&nbsp;"+y_koo+".");
return true;
}

function drop() {
if(active === true)
{
Offset_x = Regler.style.right;
}
active = false;
return true;
}



function getMousePosition(e) {
var erg;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}
if(active === true)
{
erg = Regler.style.right;
erg = Offset_x + x_koo - _x;
if(erg < Max_x)
{
erg = Max_x;
}
else if(erg > Min_x)
{
erg = Min_x;
}
else{}
Regler.style.right = erg;
}
return true;
}
</script>

HTML:

<div id="B" class="clBack"></div>
<div id="F" class="clFront" onmousedown="druecken()" onmouseup="drop()"></div>

Kann mir da jemand eine Antwort geben?
 
"Sliderbalken"? "Einmal ändern?" Zeig mal einen Link zu der betreffenden Seite damit man es sich vorstellen kann was Du meinst.
 
Hi,

teste das gerade nur lokal auf einem Abyss Websever.

Aber du kannst dir die Sachen herrunterladen und angucken
Download Silder.zip from Sendspace.com - send big files the easy way

Ich hoffe du siehst nun die beiden Grafiken.
Wenn ich den roten kasten anklicken und ziehe verändert er seine position.
Lasse ich nun die Maus-Taste wieder los, bleibt auch der rote kasten an der stelle.

Wenn ich nun wieder den roten Kasten anklicke...passiert nichts.
hast du da eine Idee?

Danke für deine Hilfe.
 
Danke für den Tipp.

Somit ist das erste Problem gelöst.

Bleibt leider noch ein zweites.
Habs mit suchen nicht gefunden!

Das erste mal Position ändern funktionert gut.
Nachdem ich dann die Maustaste wieder losgelassen habe und erneut auf das Rote Rechteck klicke und versuche es zu verschieben, habe ich das Image quasie in der Hand (sehe dann zwei rote Rechtecke).
Wenn ich dann die maustaste wieder loslasse kann verschiebt sich das Rechteck....so solls nicht sein.

Kann mir da noch jemand einen Tipp geben?
 
Zuletzt bearbeitet:
Nein leider nicht...glaube auch nicht das es sich um einen Fehler handelt...eher um eine falsche configuration.

Im Fehlerfall wird das Rechteck wie ein normales Image auf der Webseite behandelt.

Ich hoffe dir ist klar was ich meine.

Ansonsten: Wenn auf einer Webseite ein Bild ist dann kann man mit der maus draufklicken, gedrückt lassen und das Bild verschieben...wo hin auch immer. Diesen Effekt sehe ich bei meinem Slider auch...diesen Effekt will ich verschwinden lassen. Dafür benötige ich eine Lösung oder einen Ansatz
 
Das klingt eher danach, als ob dein Skript nicht ausgeführt wird. Aber das ist reine Spekulation, ich kenne deinen Code nicht.
 
Dadran soll es nicht fehlen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style type="text/css">

.clBack{position:absolute;top:50px;right:90px;
background-image: url(back.jpg);
width:496px;height:32px;}

.clFront{position:absolute;top:59px;right:560px;
background-image: url(front.jpg);
width:24px;height:12px;}
</style>

<script type="text/Javascript">
var x_koo;
var y_koo;
var _x;
var _y;
var element;



var Regler;
var erg;
var Offset_x = 560;
var Min_x = 560;
var Max_x = 90;

var active = false;


var isIE = document.all?true:false;
function start()
{
document.onmousemove = getMousePosition;
document.onmouseup = drop;
Regler = document.getElementById("F");
}

function druecken() {
active = true;
x_koo=_x;
y_koo=_y;
//alert("X-position:&nbsp;"+x_koo+";&nbsp;Y-position:&nbsp;"+y_koo+".");
return true;
}

function drop() {
var string, value;
if(active === true)
{
string = Regler.style.right.split("px");
value = parseInt(string[0]);
Offset_x = value;

}
active = false;
return true;
}



function getMousePosition(e) {
var erg;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}
if(active === true)
{
erg = Offset_x + x_koo - _x;
if(erg < Max_x)
{
erg = Max_x;
}
else if(erg > Min_x)
{
erg = Min_x;
}
else{}
Regler.style.right = erg;
}
return true;
}
</script>

</head>
<body onload="start()">
<div id="B" class="clBack"></div>
<div id="F" class="clFront" onmousedown="druecken()" onmouseup="drop()"></div>
</body>
</html>
 
Die Zeile in der Funktion drop ist die Lösung

document.getElementById("B").focus();

Danke für eure Hife
 
Ich hätte eher die Defaulthandler für die Events verhindert. Ein return false bewirkt oft Wunder.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben