Javascript div von rechts einscrollen

bensky

bensky

Erfahrenes Mitglied
Hallo Leute,
ich weiß es ist Montagm aber ich habe da ein kleines Problem.
Ich möchte ein Feedbackformular von rechts einscrollen lassen, was am anfang nur halb zu sehen ist und nach dem klick von rechts ein ein wenig einscrollst, so 400px.

Ich habe das untenstehende JS soweit fertig, nur funktioniert es nicht richtig, ich denke ich habe da einen kleinen Denkfehler drin...;( und finde diesen leider nicht.
Vielleicht hat ja einer von euch eine Idee wie ich das lösen kann.

Danke schon mal im Voraus.
Gruß Sven

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ich will ein feedbackformular werden</title></head>
<body>

<div id="box" style="position:absolute;right:-50px;">Kommentar  
<br> 
<a href="#" onClick="setze('-50')" > Einblenden </a> 
<br> 
<a href="#" onClick="setze('50')" > Ausblenden </a></div>

<br>
<br>

<script language="javascript">
var pos = screen.width;
var intervall
var neux

function setze(wert)
{
neux = wert + screen.width
if(neux > pos){intervall=window.setInterval('nachrechts(neux)',10)}
if(neux < pos){intervall=window.setInterval('nachlinks(neux)',10)}
}

function nachrechts(nach)
{
document.getElementById("box").style.right=pos+"px"
pos++
if(pos==nach) {window.clearInterval(intervall)}
}

function nachlinks(nach)
{
document.getElementById("box").style.right=pos+"px"
pos--
if(pos==nach) {window.clearInterval(intervall)}
}
</script>
</body>
</html>
 
Moin Sven,

ist wirklich nur ein kleines Problem :)
du hast bei Aufruf von setzte() die Parameter in Anführungszeichen gesetzt, dann werden sie als String angesehen.

Bei
Code: 
neux = wert + screen.width

wird dann bspw. bei setze('-50') und meiner Auflösung aus neux -501280 :-)

Lösung: entferne die Anführungszeichen.
Ansonsten: du arbeitest da mit screen.width....das liefert die x-Auflösung des Monitors, es wäre besser, wenn du da mit der Breite des <body> arbeitest :)
 
hehe, jau stimmt....super danke.
Aber auch mit dieser Verbesserung bekomme ich das script nicht ans laufen.
Es will einfach nicht von rechts nach links aussliden...;(
Das komische ist, mal gehts, mal nicht...außerdem sieht man immer den scrollframe am unten am Browser. Hast du noch so ein Anhaltspunkt wo ich den Fehler mache?
Gruß und dank
Sven

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Slide</title></head>
<body>

<div id="box" style="position:absolute; right:-50px;">LaLa  <br> 

<a href="#" onClick="setze(-200)" > Kommentar </a> <br> 
<a href="#" onClick="setze(200)" > Doch nicht </a></div>
<br>
<br>


<script language="javascript">
var pos = screen.width;
var intervall
var neux

function setze(wert)
{
neux = wert + screen.width
if(neux > pos){intervall=window.setInterval('nachrechts(neux)',10)}
if(neux < pos){intervall=window.setInterval('nachlinks(neux)',10)}
}

function nachrechts(nach)
{
document.getElementById("box").style.left=pos+"px"
pos++
if(pos==nach) {window.clearInterval(intervall)}
}

function nachlinks(nach)
{
document.getElementById("box").style.left=pos+"px"
pos--
if(pos==nach) {window.clearInterval(intervall)}
}
</script>
</body>
</html>
 
Naja...bei mir ist das Dingens rechts, läuft von dort nach links herein, und auch bei Bedarf wieder zurück.
Was die Scvrollbars betrifft, das ist doch normal...wenn die Box herausläuft, dann vergrössert sich die nötige Anzeigebreite für den Body, da sich die Box ja aus dem sichtbaren Teil herausbewegt.
 
Hi Ihr Svens :-P

bensky ( nur um klar zu machen, wen ich meine :) ), ich würde dir ebenfalls Mootools
an's Herz legen.
Nicht nur, dass Du damit Dir dieses ganze - zugegeben - lässtige frickeln&anpassen an die Browser etc ersparst, sondern Du hast natürlich dann auch das X-Fache an mehr möglichkeiten - und das alles in wenigen Sekunden eingelesen/abgeguckt auf deren Website.

Der Code würde dann wie folgt aussehen und funktioniert auf den gängigen Browser(soweit ich das einschätzen kann):
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Slide</title>
    <script type="text/javascript" src="mootools-1.2.1-core.js"></script>
  </head>
  <body>
    <div id="box" style="position:absolute; left:0px; top: 0px; bottom:0px; right: 50px; background-color: #ddd;">
      LaLa<br >
      <a href="#" onClick="$('box').tween('right', '200');" > Kommentar </a><br>
      <a href="#" onClick="$('box').tween('right', '50')" > Doch nicht </a>
    </div>
  </body>
</html>

Wie Du vorzugehen hast:
1. Besuche http://mootools.net/core
2. Wähle Dort "Fx.Tween" aus - die Abhängigkeiten werden automatisch ausgefüllt.
3. Klick download und lade das 38k File runter.
4. Passe den Link von dem Mootools javascript-file an und schon läuft's.

Vielleicht hilft Dir das.

Grüße,
MArc
 
Hmm ja, sieht auf jeden fall nicht schlecht aus, habs mir gerade mal runtergeladen und so installiert wie du gesagt hast, nur irgendwie, macht das mootools genau das Gehenteil von dem was ich will ;) Das macht ein div über die ganze Seite und dann "toggelt" nur der rechte Balken weg..:( Ich versuchs mal weiter...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück