iframe mit Grafik extern scrollen

[pipeline]

Also ich habe eine Seite, in der Seite ist noch ne Seite (iframe ).
Ich möchte mit Hilfe von 2 Grafiken auf der Hauptseite den content aus dem iframe scrollen können. Ich hab schon gesucht und alles, aber nur alternativvorschläge gefunden, so langsam bezweifel ichd as es überhaupt möglic ist. thx für Hilfe und Antworten.

 

[Fabian H]

Hier erfährst du, wie man auf IFrames zugreift:
http://www.quirksmode.org/js/iframe.html
http://www.selfhtml.net/javascript/objekte/frames.htm

Hier, wie man ein Fenster scrollt:
http://www.selfhtml.net/javascript/objekte/window.htm#scroll_by

Die Referenzen zur setTimeout Methode:
http://www.selfhtml.net/javascript/objekte/window.htm#set_timeout
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/window.html#1203758

onmousedown und onmouseup Event Handler:
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/handlers.html#1120635
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/handlers.html#1120892
http://www.selfhtml.net/javascript/sprache/eventhandler.htm#onmousedown
http://www.selfhtml.net/javascript/sprache/eventhandler.htm#onmouseup

 

[RyoSaeba]

Hallo Fabian,

ich bin gerade über Google hierher gelangt. Ich habe mir die von dir verlinkten Seiten von SELFHTML alle durchgelesen, und habe nun folgendes Problem: Wenn ich settimeout verwende, scrollen die Browser (ich habe getestet, jeweils die neueste Version: IE, Netscape, Mozilla und Opera) die Seite im iframe immer komplett - also auch wenn ich die Maustaste nicht mehr gedrückt halte, sondern loslasse, wird weiter gescrollt bis nach ganz unten (ober oben, je nach dem). Eigentlich dürfte das doch bei onmousedown / onmouseup nicht der Fall sein, oder? Wie macht man es richtig?

Vielen Dank für deine Hilfe,
Andreas

 

[Fabian H]

Ohne deinen Code kann ich dir leider nicht helfen.

Aber du brauchst auf jeden Fall eine Abbruchbedingung fuer deine
Schleife mit dem setTimeout.

 

[RyoSaeba]

Ich habe meinen Code nicht gepostet, weil ich mich nicht zu sehr blamieren wollte. Ich kenne mich wirklich nicht gut mit JavaScript aus, und richtig funktioniert hat das Ganze eigentlich auch nur, als ich noch keine Abbruchbedingung definiert hatte. Jetzt löst es nur noch Fehlermeldungen aus. Gedacht habe ich es mir so:

function scollerunten(i)
{
while (i == 1)
 {
 parent.testiframe.scrollBy(0,1);
 setTimeout("scollerunten(1)",1);
 if (i == 2) break;
 }
}

function scolleroben(i)
{
while (i == 1)
 {
 parent.testiframe.scrollBy(0,-1);
 setTimeout("scolleroben(1)",1);
 if (i == 2) break;
 }
}

Und weiter unten dann:

<img height="25" onMouseDown="scrolleroben(1);" onMouseUp="scrolleroben(2);" src="oben.png" width="25">

<img height="25" onMouseDown="scrollerunten(1);" onMouseUp="scrollerunten(2);" src="unten.png" width="25">

Ich vermute, ich habe meine Idee falsch umgesetzt mit diesen "Zahlen", oder?

 

[RyoSaeba]

Kann mir niemand helfen?

 

[Fabian H]

Eine while-Schleife ist nicht das Gleiche wie eine for-Schleife.

Du kannst also nicht einfach

while (i == 'irgendwas') {
    /* Mach etwas, ohne i zu veraendern */
}

benutzen.

Wenn du eine Schleife mit einem setTimeout-Aufruf erzeugen willst, musst du die
Bedingungen direkt in der Funktion unterbringen, ein for-Konstrukt brauchst du dazu
gar nicht.

Ausserdem brauchst du die aktuelle "Scroll Position", also der Abstand des Teiles, den
man gerade sieht zum Seitenanfang in Pixeln.

Wo dieser Wert steht, weiss ich nicht auswendig, es ist aber browserabhaengig.
Am Besten ist, du suchst mal hier im Forum, da gab's das schon oefters.

Hier noch ein Beispielcode (mit setInterval statt setTimeout):

var iInterval;
var iScrollPos;

function scrollerOben()
{
    if (iScrollPos > 0) {
        iScrollPos -= 20;
        window.scrollTo(0, iScrollPos);
    } else {
        window.clearInterval(iInterval);
    }
}

/* .... */

<img onmouseover="iScrollPos = 'Scroll Position'; iInterval = window.setInterval('scrollerOben();', 300);"
     onmouseout="clearInterval(iInterval);" />

Noch ein Link: SelfHTML ist eine sehr gute HTML, CSS und JavaScript Referenz.

 

[dennis84]

Hallo,
habe ein ähnliches Problem, welches vielleicht hier rein passt.
Hab auf der Seite ein Iframe erstellt mit Bildern, soweit so gut.
In dem Iframe hab ich den Scrollbalken deaktiviert, da das fenster sowohl bei großen als auch bei kleinen auflösungen nicht scrollbar sein muss.

Ich möchte nur über die "Hauptseite" scrollen, dies geht auch, jedoch beim IE (6) funktioniert dies nur wenn der Mauszeiger nicht auf dem Iframe steht, also nur links und rechts davon.. Ist etwas ungewohnt.
Beim Firefox dagegen klappt das ohne Probleme....

Hat jemand eine Idee?

 

[Tribalman]

zeig doch mal die seite ...

Ich habe übrigens auch ein iframe-scroll-problem :suspekt:

Ich habe einen Iframe mit einer horizontalen Bilderleiste. Der Inhalt ist breiter als
das iframe. Den Scrollbalken habe ich deaktiviert und scrolle den Inhalt stattdessen
über zwei Grafiken. Das klappt auch auf dem PC im Interner Explorer, Firefox und
Opera, aber auf dem MAC geht´s nur im Firefox.

Hier ist der Code

  <script type="text/javascript"> 
  doloop = false; 
  
  function start_left() { 
  doloop = true; 
  scroll_left(); 
  } 

  function scroll_left() { 
  window.bilder.scrollBy(-3, 0);
  if(!doloop) return; 
  setTimeout("scroll_left()",1); 
  } 

  function start_right() { 
  doloop = true; 
  scroll_right(); 
  } 

  function scroll_right() { 
  window.bilder.scrollBy(3, 0);
  if(!doloop) return; 
  setTimeout("scroll_right()",1); 
  } 

  function stop() { 
  doloop = false; 
  } 
  </script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<table width="720" height="180" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <iframe name="bilder" src="projektbilder_1.html" width="720" height="180" scrolling="no" frameborder="0"></iframe>
  </td>
</tr>
</table>

<table width="720" height="40" border="0" cellpadding="0" cellspacing="0">
<tr class="mittig">
  <td width="20"><br></td>
  <td width="20" align="left"><img src="bilder/left.gif" onMouseOver="start_left()" onMouseOut="stop()" width="15" height="15" border="0"></td>
  <td width="640"><br></td>
  <td width="20" align="right"><img src="bilder/right.gif" onMouseOver="start_right()" onMouseOut="stop()" width="15" height="15" border="0"></td>
  <td width="20"><br></td>
</table>

Wieso klappt das nicht auf dem MAC ?