tommy: stufenweises layer-clipping

hi forum!

ich möchte bei einem layer schrittweise das clipping ändern. mit dem script unten sollte es funktionieren, und das script läuft auch ab, aber leider schert das den layer überhaupt nicht. was mache ich falsch?

danke im vorraus, tommy

<head>
<script language="JavaScript">

clipTop = 0;
clipRight = 100;
clipLeft = 0;
clipBottom = 200;
timer = null;

function setClip() {

clipLayer = document.getElementById('clipLay').style;
 clipLayer.clip.top = clipTop;
 clipLayer.clip.right = clipRight;
 clipLayer.clip.left = clipLeft;
 clipLayer.clip.bottom = clipBottom;

if(clipRight < 300) {
  clipTop = 0;
  clipRight += 10;
  clipLeft = clipLeft;
  clipBottom = 0;
  clipLayer.clip = 'rect(' +clipTop+ ',' +clipRight+',' +clipBottom+ ',' +clipLeft+ ')';
  setTimeout('setClip()', 400);
  document.form.field1.value='rect(' +clipTop+ ',' +clipRight+',' +clipBottom+ ',' +clipLeft+ ')';
 }
}
</script>

<style>
#clipLay {height=200;width=400;background-color:#c0c0c0;}
</style>

</head>

<body onload="setClip();">

<div id="clipLay">
blablabla<p>
blablabla<p>
blablabla<p>
blablabla<p>
blablabla<p>
</div>

<form name="form">
<input type=text name=field1><br>
<input type=text name=field2>
</form>

  1. Hi,

    clipTop = 0;
    clipRight = 100;
    clipLeft = 0;
    clipBottom = 200;
      clipLayer.clip = 'rect(' +clipTop+ ',' +clipRight+',' +clipBottom+ ',' +clipLeft+ ')';

    Du übergibst an clip:rect() 4 Zahlen.

    clip:rect() erwartet aber 4 Längenangaben (Zahl gefolgt von Längeneinheit).

    #clipLay {height=200;width=400;background-color:#c0c0c0;}

    Trenner zwischen Eigenschaft und Wert ist der Doppelpunkt, nicht das Gleichheitszeichen.
    height und width verlangen eine Längenangabe (oder auto, inherit oder Prozentangabe), keine Zahl.

    <form name="form">

    Es ist ungünstig, Elementnamen als Werte von name-Attributen zu verwenden, das kann zu Problemen führen.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.mud-guard.de/
    1. hi, danke für´s lesen d. codes!

      habe die verbesserungen vorgenommen, hilft aber leider nix ;-(
      dachte ich mir fast, denn der IE6 (auf dem ich das ganze probehalber mache) ist doch recht gnädig mit ungenauen css-angaben.

      var str= 'px';
      clipLayer.clip = 'rect(' +clipTop+ '' +str+ ',' +clipRight+'' +str+ ',' +clipBottom+ '' +str+ ',' +clipLeft+ '' +str+ ')';

      was könnte sonst noch sein???

      danke

      1. hi,

        habe die verbesserungen vorgenommen, hilft aber leider nix ;-(

        var str= 'px';
        clipLayer.clip = 'rect(' +clipTop+ '' +str+ ',' +clipRight+'' +str+ ',' +clipBottom+ '' +str+ ',' +clipLeft+ '' +str+ ')';

        das verketten von leerstrings kannst du dir sparen, also statt
        clipTop+ '' +str
        kannst du direkt
        clipTop + str
        schreiben.

        was könnte sonst noch sein???

        zum beispiel die kommata zwischen den werten könnten den browser noch ein wenig ärgern. lies dir http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#clip noch mal durch, um zu sehen, wie der wert für die CSS-eigenschaft clip auszusehen hat.
        und lasse dir deinen zusammengesetzten wert erst einmal zur kontrolle mit alert() ausgeben, um zu sehen, ob da jetzt auch wirklich das drin steht, was du erwartest (das ist übrigens einer der elementarsten schritte beim debuggen solcher javascripte ...).

        und wenn es dann immer noch nicht "funktioniert", achte mal auf eventuelle JS-fehlermeldungen deines browsers.
        die meldungen vom IE sind allerdings eher mist, also verwende lieber einen browser wie den mozilla zum testen. wenn du bei dem javascript: in die adresszeile eingibst, erhältst du sehr viel detailiertere informationen als vom IE ...

        gruss,
        wahsaga

        1. hi!

          wisst ihr, was es war? das clipping lässt sich nur ändern, wenn der layer absolut positioniert ist!!! das hatte ich in meinen css-angaben nicht gemacht und somit auch kein clipping!

          danke, tommy