scrollby im IE

[Julianlalelu]

hallo..

bin wiedermal schwer am verzweifeln. der IE macht schwerste probleme, und ich bin mir schon nicht mehr sicher ob ich mich nicht an einer anderen lösung orientieren sollte. vielleicht kann mir ja hier jemand einen anstoss geben...

es geht darum...in einem iframe, in dem die scrollbalken unterdrückt sind soll mit grafiken (szsg. "eigenen" scrollbalken) trotzdem horizontal (!) gescrollt werden. ich habe folgendes script geschrieben(im head teil):

<script type="text/javascript">

var begin=1;
  var down=3;
  var up=2;

function scroll_right()
  {
    x = setInterval("window.scrollBy(2,0)",10);
  }

function scroll_left()
  {
    x = setInterval("window.scrollBy(-2,0)",10);
  }

function stop_scrolling()
  {
    clearInterval(x);
  }
</script>

im body teil werden dann folgende links aufgerufen: <a href="#" onMouseOver="scroll_left()" onMouseOut="stop_scrolling()">bild</a>

das funktioniert im firefox, im netscape, in safari, einfach überall außer im IE. wieso? muss ich die framebezeichnung hinzufügen? hab ich ansich gemacht, bringt aber auch nichts. Interessanterweise funktioniert das script, wenn es im elterndokument (indem der iframe eingebettet ist) steht und mit "window.frames.xxx" den iframe identifiziert. ich brauche es aber dringend innerhalb des iframes. weiß jemand von euch hilfe, mehr als euphorischsten dank kann ich nicht bieten...

[Felix Riesterer]

Liebe(r) Julianlalelu,

es geht darum...in einem iframe, in dem die scrollbalken unterdrückt sind soll mit grafiken (szsg. "eigenen" scrollbalken) trotzdem horizontal (!) gescrollt werden.

ich meine hier im Forum höchst kritische Stimmen zu solchen Vorhaben gelesen zu haben. Es mag Dir vielleicht jetzt nicht helfen, aber mit einer solchen Design-Lösung (die auch nur bei aktiviertem Javascript reagiert) programmierst Du GUI-Elemente des Browsers nach. Der Benutzer hat sich aber an die (meist Betriebssystem-gebundenen) Schaltflächen und Bedienelemente gewöhnt, sodass diese Design-"Spielerei" eher stört, als von echtem Nutzen ist. Im Archiv findest Du sicherlich den ein oder anderen Thread dazu.

var begin=1;
  var down=3;
  var up=2;

Wozu dienen diese (globalen) Variablen? Warum wird hier "x" nicht auch definiert? Dabei fällt mir ein, vielleicht stört sich der IE am Variablennamen "x"... warum wüsste ich jetzt auch nicht sicher zu sagen.

function scroll_right()
  {
    x = setInterval("window.scrollBy(2,0)",10);
  }

Wie prüfst Du, ob das Ende noch nicht erreicht wurde?

function scroll_left()
  {
    x = setInterval("window.scrollBy(-2,0)",10);
  }

Ende überprüft?

Kennst Du das entsprechende SelfKapitel zu window.scrollBy()?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Julianlalelu]

Liebe(r) Julianlalelu,

es geht darum...in einem iframe, in dem die scrollbalken unterdrückt sind soll mit grafiken (szsg. "eigenen" scrollbalken) trotzdem horizontal (!) gescrollt werden.
ich meine hier im Forum höchst kritische Stimmen zu solchen Vorhaben gelesen zu haben. Es mag Dir vielleicht jetzt nicht helfen, aber mit einer solchen Design-Lösung (die auch nur bei aktiviertem Javascript reagiert) programmierst Du GUI-Elemente des Browsers nach. Der Benutzer hat sich aber an die (meist Betriebssystem-gebundenen) Schaltflächen und Bedienelemente gewöhnt, sodass diese Design-"Spielerei" eher stört, als von echtem Nutzen ist. Im Archiv findest Du sicherlich den ein oder anderen Thread dazu.

gut. mir war klar das etwas in die stossrichtung kommt. ich danke für das, sich in dem satz "Es mag Dir vielleicht jetzt nicht helfen", ausdrückende Verständnis für meine lage.;-) Bei meinem Kunden handelt es sich um eine Kreativfirma, deren webauftritt nicht primär massen an informationen massen an leuten zukommen lassen soll. ihrem image kommt ein etwas ungewöhnlicheres design nur entgegen. ich bin mir der problematik von nachbildungen von gui elementen voll bewusst, habe das mit dem kunden auch besprochen, und wir haben uns zusammen für eine lösung -wie ich sie derzeit versuche umzusetzen- entschieden.

noch ein part, zwecks theoriekatalyse: ...Alles was während der letzten 10 jahre zu Usabilty gesagt wurde -so wichtig es war und geblieben ist- hat immer auch den etwas öden Beigeschmack von Konservierung. Ich traue mich zu sagen, dass ein großteil der designtechnischen webentwicklung von randgruppen vorangetrieben wurde, die den Wert ihrer Arbeit weniger am "Nutzen" (der in den Meisten Usabiltiy-theorien, die in Form von Guru-ähnlichen Theoremen im Netz herumgeistern, immer als Hitmaximierung in Verbindung mit Userbindung definiert war) als an Innovation und Kreativität gemessen haben.

var begin=1;
  var down=3;
  var up=2;
Wozu dienen diese (globalen) Variablen? Warum wird hier "x" nicht auch definiert? Dabei fällt mir ein, vielleicht stört sich der IE am Variablennamen "x"... warum wüsste ich jetzt auch nicht sicher zu sagen.

die variablen (die der IE bestens erkennt) sollen geschwindigkeit angeben.

function scroll_right()
  {
    x = setInterval("window.scrollBy(2,0)",10);
  }
Wie prüfst Du, ob das Ende noch nicht erreicht wurde?

versteh nicht ganz was du meinst? das ende? wann er zum scrollen aufhören soll? ich glaub nicht, dass das nötig ist...

function scroll_left()
  {
    x = setInterval("window.scrollBy(-2,0)",10);
  }
Ende überprüft?

Kennst Du das entsprechende SelfKapitel zu window.scrollBy()?

ja kenn ich, war meine lieblingslektüre während der letzten stunden, konnte mir aber auch nicht weiterhelfen...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe(r) Julianlalelu,

ich habe da mal etwas gebastelt. Es hat bei mir im IE, im FF und im Opera 8.53 funktioniert. Andere Browser testest Du selbst.

Dokument, das den iFrame enthält:

<html>  
    <head>  
        <title>Scroller</title>  
        <script type="text/javascript">  
var Scroller = {  
    target : "window.frames[0]",  
    begin : 1,  
    down : 3,  
    up : 2,  
    IE : (document.compatMode && document.compatMode == 'CSS1Compat') ? document.documentElement : document.body || null,  
    x : null,  
  
    start : function (direction)  
    {  
        var delta = (direction == 'left') ? -2 : 2;  
        Scroller.x = setInterval(Scroller.target + '.scrollBy(' + delta + ', 0)',10);  
    },  
  
    stop : function (direction)  
    {  
        clearInterval(Scroller.x);  
    }  
}  
        </script>  
    </head>  
    <body>  
        <h1>Test-Seite zum iFrame-Scrolling</h1>  
        <p><a href="#" onMouseOver="Scroller.start('left')" onMouseOut="Scroller.stop()">&laquo; links</a> | <a href="#" onMouseOver="Scroller.start('right')" onMouseOut="Scroller.stop()">rechts &raquo;</a></p>  
        <iframe src="frame.html" width="200" height="200" />  
    </body>  
</html>

Frame-Seite, die in die obige Datei geladen wird:

<html>  
    <head>  
        <title>Frame</title>  
    </head>  
    <body>  
    <h1>Frame</h1>  
    <table width="900" height="100">  
        <tr>  
            <th bgcolor="#0000ff">Row1</th><th bgcolor="#00ff00">Row2</th><th bgcolor="#ff0000">Row3</th>  
        </tr>  
    </table>  
    </body>  
</html>

Möge es Dir von Nutzen sein. Ich habe jedenfalls wieder etwas dazugelernt.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Julianlalelu]

...hehe erstmal vielen vielen dank für die große mühe, ich bin immer wieder begeistert wie hilfsbereit ihr lieben Leute hier seid. danke liebr felix ;-) ...vielleicht habe ich mich aber etwas falsch ausgedrückt: es geht darum, dass sie scrolllinks selbst auch im iframe sind (dort werden sie mittels einem position:fixed bzw. einem conditional comment für den IE fixiert) das script, das du geschrieben hast funktioniert blendend, läuft aber auf das selbe problem hinaus, dass ich auch hatte: -> das target "window.frames[0]" kann nicht mehr stimmen, keine ahnung, durch was es sich ersetzen lässt, damit es im IE   funktioniert. nur "window" funktioniert nicht. "parent.frames[iframename]" auch nicht... "self" auch nicht...hilfe... ;-)

[Felix Riesterer]

Liebe(r) Julianlalelu,

das script, das du geschrieben hast funktioniert blendend, läuft aber auf das selbe problem hinaus

nicht ganz! ;-)

Probiere in der Frame-Datei folgendes:

<html>  
    <head>  
        <title>Frame</title>  
    </head>  
    <body>  
    <h1>Frame</h1>  
    <p>Links im Frame: <a href="#" onMouseOver="parent.Scroller.start('left')" onMouseOut="parent.Scroller.stop()">&laquo; links</a> | <a href="#" onMouseOver="parent.Scroller.start('right')" onMouseOut="parent.Scroller.stop()">rechts &raquo;</a></p>  
    <table width="900" height="100">  
        <tr>  
            <th bgcolor="#0000ff">Row1</th><th bgcolor="#00ff00">Row2</th><th bgcolor="#ff0000">Row3</th>  
        </tr>  
    </table>  
    </body>  
</html>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Julianlalelu]

so...langsam wird es peinlich: nachdem ich es bei mir versucht habe und es tatsächlich schon wieder nicht funktioniert hat, hab ich das problem mittlerweile zumindest lokalisiert: es liegt anscheinend an meinen conditional comments. wobei mir auch hier nicht ganz klar ist woran das javascript dann scheitert.

meine cond.comm.: (damit versuche ich ein position:fixed für den IE zu simulieren, das brauche ich schließlich um die scrolllinks auf der  selben stelle halten zu können)

<!--[if lt IE 7]>
<style type="text/css">

html, body {
      height: 100%; overflow: hidden;
    }
    #notfixedIE {
      height: 100%; width: 100%; overflow: hidden;
    }
    #notfixed {
      position: static;
   margin-top:0px;
    }

</style>
<![endif]-->

...verstehst Du inwiefern die dem (deinem) javascript widersprechen?

grüße und natürlich nochmal vielenvielen dank ...

[Julianlalelu]

...soweit hab ich mittlerweile geklärt, dass die im conditional comment angegebene "position: static;" das javascript lahmlegt. die frage ist nur wie man das umgehen kann, es riecht nämlich für mich hier sehr sehr stark nach unmöglichkeit, weil man den "fixed" befehl im ie eigentlich nur über conditional comments simulieren kann, die immer (!) ein position:static benötigen...

[Julianlalelu]

naja, ausführliches codebsp kann ich leider nicht geben aber nochmal den code im iframe...anscheinend widersprechen sich einige css angaben...

------------------------------------------------------------------

1. eine eingebundene externe css datei, ihr inhalt:

#fixed {
    position: relative;
 margin-top: 0px;
 padding-top: 0px;
    top: 0px;
 left: 26px;
 line-height: 7pt;
  }
  html>body #fixed {
    position: fixed;
  }

#notfixed {
 margin-top:19px;
  }

------------------------------------------------------------------

------------------------------------------------------------------
2) für den IE gibt es im dokument selbst noch folgendes conditional comment:

<!--[if lt IE 7]>
<style type="text/css">

html, body {
      height: 100%; overflow: hidden;
    }
    #notfixedIE {
      height: 100%; width: 100%; overflow: hidden;
    }
    #notfixed {
      position: static;
   margin-top:0px;
    }

</style>
<![endif]-->

------------------------------------------------------------------

------------------------------------------------------------------
3) die Links sind wie folgt im iframe eingebunden:

<div id="fixed">
<table border="0" cellpadding="0" cellspacing="1" style="position:relative;top:2px;left:470px">
 <tr>
 <td><a href="#" onMouseOver="parent.Scroller.start('left')" onMouseOut="parent.Scroller.stop()">&laquo;</a></td>
 <td><a href="#" onMouseOver="parent.Scroller.start('right')" onMouseOut="parent.Scroller.stop()">&raquo;</a></td>
 </tr>
 </table>
</div>
------------------------------------------------------------------

wenn ich die angabe "position:static" aus dem conditional comment herausnehme funktioniert das script bis auf weiteres, nur scrollen dann eben auch die links mit der seite mit...was nicht sinn der sache ist...

[Felix Riesterer]

Liebe(r) Julianlalelu,

<!--[if lt IE 7]>
<style type="text/css">

html, body {
      height: 100%; overflow: hidden;
    }
    #notfixedIE {
      height: 100%; width: 100%; overflow: hidden;
    }
    #notfixed {
      position: static;
   margin-top:0px;
    }

</style>
<![endif]-->

spätestens jetzt wäre ein umfangreicheres Code-Beispiel (am Besten per URL im Netz zu finden) sehr hilfreich!

Aber ich muss Dir Recht geben, es sollte (und darf!) an diesen Conditional Comments nicht liegen. Die Ursache muss also woanders zu finden sein!

Du hast nicht zufällig versucht, im Frame-Dokument auf Javascript-Funktionen zuzugreifen, die in diesem nicht existieren (da der Code im Elternfenster steckt)?

Liebe Grüße aus Ellwangen,

Felix Riesterer.