DHTML/JavaScript auf Browser abstimmen?

Martys

Erfahrenes Mitglied
Hallo,

ich habe ein kleines DHTML/JavaScript, was ich alledrings nur im IE zum laufen gebracht habe. Auch nach dem vorschalten einer Browserweiche hat sich im NS und Opera nicht getan.
Vielleicht (besser hoffentlich) kann mir einer von euch sagen, was ich falsch gemacht habe.

Hier mal der Code:

PHP:
<SCRIPT LANGUAGE="JavaScript">

var d=document;
 if (d.all) {
   isIE = true; 
 } else if ((!d.all) && (d.getElementById)) {
   isMoz = true; 
 } else if (d.layers) {
   isNS4 = true; 
 } else {
   isAny = ture; 
 }

if (isIE) {
function scrolli(a,b) {
   document.getElementById("pano_farbe").style.clip="rect(0"+" "+ a+" "+" 165"+" "+ b+")";
   a=a+1;
   b=b+1;

if(a>=800)
  {
     a=100;
     b=0;      
   }
  ende=setTimeout("scrolli("+a+","+b+")",10);
  
}
}
else if (isNS4) {
function scrolli(a,b) {
   document.layers("pano_farbe").style.clip="rect(0"+" "+ a+" "+" 165"+" "+ b+")";
   a=a+1;
   b=b+1;

if(a>=800)
  {
     a=100;
     b=0;      
   }
  ende=setTimeout("scrolli("+a+","+b+")",10);
  
}
}
else if (isAny) {
function scrolli(a,b) {
   document.all("pano_farbe").style.clip="rect(0"+" "+ a+" "+" 165"+" "+ b+")";
   a=a+1;
   b=b+1;

if(a>=800)
  {
     a=100;
     b=0;      
   }
  ende=setTimeout("scrolli("+a+","+b+")",10);
  
}
}
</SCRIPT>

Zur Erklärung:
Dieser Code befindet sich in einer Seite, die ein sw-Panoramabild anzeigt (liegt in einem Layer). Darüber befindet sich noch ein Layer, wo aber nur ein bestimmter Bereich sichtbar ist. Dieser Bereich bewegt sich von links nach rechts und erzeugt ein "Fenster" auf das farbige Panoramabild.

Vielen Dank schon mal,

Martys

P.S.: Lade gegen Abend mal ein Bsp hoch, momentan kein FTP :(
 
Zuletzt bearbeitet:
Sei mir nicht böse, aber dein Stil ist grauenhaft.
Ist jetzt nichts persönliches, aber man könnte das ganze auch in ca. 20 Zeilen
wesentlich kürzer schreiben.

Auch kann ich nicht nachvollziehen, was du vor hast.

Ich hab mal ein Beispiel gemacht, vielleicht ist es ja das.
Code:
<!DOCTYPE hmtl PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>Scrollen</title>

        <script type="text/javascript">
        function scrollRect(a_iRight, a_iBottom)
        {
            window.document.getElementById("Box").style['clip']
                = "rect(0px " + String(a_iRight) + " " + String(a_iBottom)
                   + "px 0px)";
            if ((a_iRight < 135) || (a_iBottom < 270)) {
                setTimeout("scrollRect(" + (a_iRight + 10) + ", "
                            + (a_iBottom + 10) + ");",
                           100);
            }
        }
        </script>
    </head>
    <body onLoad="scrollRect(20, 20);">
        <h1>Scrollen</h1>
        <div style="position:absolute;top:80px;left:50px;clip:rect(0px 20px 20px 0px);border:1px solid;"
             id="Box">
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
            testtext testtext testtext<br>
        </div>
    </body>
</html>
Ps: auf die Browserweiche kannst du verzichten, denn wessen Browser zu alt für
DOM und getElementById ist, kann warscheinlich auch kein CSS 2.
 
Naja, auch ältere Browser können z.T. CSS2 und mit Javascript den Anzeigebereich beschneiden....
Netscape4 und IE4 zumindest sind dazu in der Lage, und andere betrifft das ja ohnehin nicht, weil da kein DHTML läuft:

Das erste ist...dein Skript erzeugt im Zweifelsfall schon mit der Browserweiche einen Fehler....
du musst erstmal alle Browser-Variablen deklarieren und auf "false" setzen... in der Abfrage dann entsprechend auf "true".

Dann musst du die Layer auch richtig ansprechen:
  • isIE=>document.all.pano_farbe
    das funktioniert zwar bei IE5+ so, wie du es hast, derIE4 wird es aber mit einem Fehler quittieren
  • isNS4=>document.layers["pano_farbe"]
    oder
    document.pano_farbe;
Im Netscape 4 funktioniert das dynamische Ändern des Anzeigebereichs auch anders.
Du musst dort mit clip.left,clip.right,clip.bottom,clip.top die Werte einzeln setzen, wobei die Angabe "style" beim Netscape4 prinzipiell nix zu suchen hat,
das "style"-Object kennen nur DOM-Browser.

Wieauchimmer, so läufts auch mit IE4 und NS4: :)
Code:
<html>
<head>
<title>test</title>
<script type="text/javascript">
<!--
d=document;
var isIE=false,isMoz=false,isNS4=false,isNix=false;
if (d.all&&!window.opera) 	{isIE = true;}
else if (d.getElementById)	{isMoz = true;}
else if (d.layers) 		{isNS4 = true;}
else			{isNix = true;}
a=100;
b=0;

function scrolli()
{
if(isNix){return;}
a++;b++;
if(a>=800){a=100;b=0;}
attr="rect(0 "+a+" 165 "+b+")";
if(isIE)
	{
	d.all.pano_farbe.style.clip=attr;
	}
else if(isMoz)
	{
	d.getElementById("pano_farbe").style.clip=attr;
	}
else if(isNS4)
	{
	d.layers["pano_farbe"].clip.left=b;
	d.layers["pano_farbe"].clip.right=a;
	}
setTimeout("scrolli()",10);
}

//-->
</script>
</head>
<body onload="scrolli();">
<div style="position:absolute; top:0px; left:0px;">
  <img src="pano_sw.jpg" width="800"height="165" border="0" >
</div>
<div style="position:absolute; top:0px; left:0px; clip:rect(0px 100px 165px 0px);"id="pano_farbe">
  <img src="pano_farbe.jpg"  width="800"height="165"border="0" >
</div>
</body>
</html>
ist übrigens ne feine Idee von dir :) , besonders schick wirds, wenn man das s/w-Bild noch invertiert
 
Zuletzt bearbeitet:
Erstmal vielen Dank für Eure Hilfe!

@fatalus:

Es läuft im NS 6 aufwärts, leider nicht wie von Dir geschrieben im NS 4. Dort werden die beiden Ebenen mit einem kleinen Versatz angezeigt, die SW über der Bunten. Im Opera 6 wird nur die Bunte angezeigt, in 7 funktioniert es auch, auch der Mozilla stellt es korrekt dar.

Trotzdem nochmals DANKE.

Martys
 
Der Opera 6 scheint "clip" als CSS-Eigenschaft überhaupt nicht zu kennen :mad: ....
beim Netscape4 läuft es bei mir einwandfrei... vielleicht hast du in deinem Seitencode etwas zu stehen, was ihn veranlasst, die Layer nicht direkt übereinander zu legen
 
hm, ich hab nochmal nachgeschaut und nichts auffälliges entdecken können.
Ich habe mal die Dateien als zip angehängt.

Martys
 

Anhänge

Ich kann auch bei deinem ZIP im Netscape4 keine Verschiebung erkennen, sieht genauso aus wie in den anderen Brausern.
Vielleicht liegts an der Version, ich hab 4.75 .
 

Anhänge

  • screen.png
    screen.png
    7,8 KB · Aufrufe: 71
Zuletzt bearbeitet:
hallo,

stimmt, mit dem NS 4.75 funktioniert es wunderbar.
Hatte es vorher mit dem 4.08 und 4.70 versucht und die fehlerhafte Darstellung erhalten (siehe Bild).

netscape_error.gif


So long

Martys
 
Hallo noch mal,

sitze seit etwa zwei Tagen und versuche die fehlerhafte Darstellung (s.o.) zu beheben. Meine Idee war die Browserversion auszulesen und alles unter NS 4.73 zu veranlassen, nur den farbigen Bildstreifen darzustellen.
Leider habe ich dabei so meine Probleme.

Der farbige Bildstreifen wird zwar angezeigt, allerdings wieder mit einem gewissen Versatz, welcher nicht da sein sollte.

Hier der Code.

PHP:
<html>
<head>
<title>Panoramatest</title>
<script type="text/javascript">
<!--
d=document;
bversion=navigator.appVersion;
var isIE=false,isMoz=false,isNS4ok=false,isNN4f=false,isNix=false;
if (d.all&&!window.opera)         {isIE = true;}
else if (d.getElementById)        {isMoz = true;}
else if (d.layers)                {
if (bversion>=4.73)   {isNS4ok = true;}
else                              {isNN4f = true;}
}
else                              {isNix = true;}
a=100;
b=0;

function scrolli()
{
if(isNix){return;}
a++;b++;
if(a>=800){a=100;b=0;}
attr="rect(0 "+a+" 165 "+b+")";
if(isIE) {
d.all.pano_farbe.style.clip=attr;
}
else if(isMoz) {
d.getElementById("pano_farbe").style.clip=attr;
}
else if(isNS4ok) {
d.layers["pano_farbe"].clip.left=b;
d.layers["pano_farbe"].clip.right=a;
}
setTimeout("scrolli()",20);
}

//-->
</script>
</head>
<body onload="scrolli();" bgcolor="#EEEEEE" topmargin="0" leftmargin="0" margin-width="0" margin-height="0">
<script type="text/javascript">

if (isNN4f) {
document.write('<img src="pano_farbe.jpg" width="800" height="165" border="0">');
}
else {
document.write('<div style="position:absolute; top:0px; left:0px;"><img src="pano_sw.jpg" width="800" height="165" border="0"></div><div style="position:absolute; top:0px; left:0px;" id="pano_farbe"><img src="pano_farbe.jpg" width="800" height="165" border="0"></div>');
};
</script>
</body>
</html>

Ich verstehe nicht, was den Streifen dazu veranlaßt, diese Position einzunehmen.

Ich hoffe, jemand von Euch kann mir helfen.

Danke schon mal

Martys
 
Bei "margin-width"und "margin-height" haben die Bindestriche nichts verloren..... er interpretierts daher nicht und lässt einen Rahmen um den <body>.
Wenn das alleine auch nicht weiterhilft, positioniere das farbige Bild auch "absolute" .
 

Neue Beiträge

Zurück