✔ settimeout problem

J

Johanni

Mitglied
hallo!
ich habe folgenden code mit dem ich erste eine box links einfaden lasse und anschliesen noch zwei felder von links einfliegen lasse. soweit so gut, allerdings schaffe ich es nciht mit settimeout eine verzoegerung hinzubekommen.
kann mir jemand helfen? wo muss ich die function hinschreiben?

Code: 
<head>
<title>website</title>
<style type="text/css">
.norm {font-family:zapfino; color:#ffffff;font-size:12pt;}
.norm {font-family:verdana; color:#ffffff;font-size:8pt;}
.grau {font-family:verdana; color:#626262;font-size:8pt;}
.link {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFFFFF; text-decoration:none}
div.menubox
 {
  width:300px;
  height:600px;
  margin:0px;
  background-color:#94141b;
  position:absolute;
  top:100px
  }
div.textbox
  {
  width:400px;
  height:600px;
  margin:0px 300px;
  background-color:#ffffff;
  filter:alpha(opacity=60);
  opacity:0.6;
  position:absolute;
  top:100px;
  }
div.photobox
  {
  width:1000px;
  height:600px;
  margin:0px 300px;
  position:absolute;
  top:100px;
  }

</style>
<script src="includes/SpryEffects.js" type="text/javascript">
</script>
<link rel="stylesheet" href="layout.css" ... />
</head>

<body bgcolor="#333333" onload="slide_horiz.start();slide_horizphoto.start();fadeElement.start();" style="overflow-x:hidden">
<div class="wrapper">

<div id="slide_photobox">
	 <div class="photobox"> 
       <img src="test.jpg">
     </div>
    </div>
   <script type="text/javascript">
   setTimeout(function(){
     slide_horizphoto();
     }, 6000);
    var slide_horizphoto = new Spry.Effect.Slide('slide_photobox', {horizontal: true, from:'0%', to:'100%', toggle: true});
   </script>    

<div id="slide_textbox">
	 <div class="textbox"> 
        <font class="norm">Beispieltext</font>
     </div>
    </div>
   <script type="text/javascript">
setTimeout(function(){
     slide_horizphoto();
     }, 3000);
    var slide_horiz = new Spry.Effect.Slide('slide_textbox', {horizontal: true, from:'0%', to:'100%', toggle: true});
   </script> 

<div id="fade_menu">
	 <div class="menubox"> 
        <font class="head">menuleiste</font>
     </div>
    </div>
   <script type="text/javascript">
    var fadeElement = new Spry.Effect.Fade("fade_menu", {duration:500, from:'0%', to:'100%',  toggle:true});
   </script>

<div class="push"></div>
</div>
<div class="footer">
</div>
</body>
</html>
 
Javascript: 
setTimeout(function(){
     slide_horizphoto();
     }, 6000);
Müsste es nicht eigentlich so aussehen?
Javascript: 
setTimeout(function(){
     slide_horizphoto.start();
     }, 6000);

Gibt es eigentlich einen Grund dafür so ein "unbekanntes" Framework zu verwenden? Noch dazu eins von adobe *schauder*.
Und warum verteilst du deine scripts überall im Quellcode? Großer Ostern Fan? ;)
 
hallo rd4eva!
super 1000 dank! es startet schon mal mit verzoegerung! allerdings sind die beiden slides schon in der endstellung am anfang und nach der abgelaufenden zeit machen die sie bewegung wie es eigentlich sein soll.

hast du ne idee was noch falsch ist? zudem du sagst mein code ist "unaufgeraeumt"... das stimmt, habe gerade probiert die scripte in den header zu packen, aber dann laeuft es nicht mehr.. ne idee wie ich gut aufraeume?
 
Hi,

bisher startest du die Animationen zunächst im onload-Event und dann nochmals verzögert.

Versuch mal die Aufrufe aus dem onload-Event im body-Element zu nehmen. Stattdessen fügst du im head-Bereich, nach dem Einbinden des externen Scripts, folgendes ein:
Code: 
<script>
window.onload = function(){
  slide_horizphoto = new Spry.Effect.Slide('slide_photobox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  slide_horiz = new Spry.Effect.Slide('slide_textbox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  fadeElement = new Spry.Effect.Fade("fade_menu", {duration:500, from:'0%', to:'100%',  toggle:true});

  setTimeout(function(){
    slide_horizphoto.start();
  }, 6000);
  setTimeout(function(){
    slide_horiz.start();
  }, 3000);
  fadeElement.start();
};
</script>
Die Script-Tags im body sollten dann ebenfalls überflüssig sein.

Alles ungetestet, da ich das SPRY-Framework nicht hier habe.

Ciao
Quaese
 
hallo quaese,
danke fuer den tipp, aber immer wenn ich die scripte versuche in den header auszulagern dann passiert gar ncihts mehr und die boxen bleiben bei den endzustand. zudem sind sie hoeher als eigentlich durch die div container angegeben...
 
Hi,

hast du meinen Vorschlag denn mal probiert?

Die Anweisungen werden im onload-Event ausgeführt, also dann wenn die Elemente verfügbar sein sollten.

Das Ganze könnte so aussehen:
Code: 
<html>
<head>
<title>website</title>
<style type="text/css">
.norm {font-family:zapfino; color:#ffffff;font-size:12pt;}
.norm {font-family:verdana; color:#ffffff;font-size:8pt;}
.grau {font-family:verdana; color:#626262;font-size:8pt;}
.link {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFFFFF; text-decoration:none}
div.menubox
 {
  width:300px;
  height:600px;
  margin:0px;
  background-color:#94141b;
  position:absolute;
  top:100px
  }
div.textbox
  {
  width:400px;
  height:600px;
  margin:0px 300px;
  background-color:#ffffff;
  filter:alpha(opacity=60);
  opacity:0.6;
  position:absolute;
  top:100px;
  }
div.photobox
  {
  width:1000px;
  height:600px;
  margin:0px 300px;
  position:absolute;
  top:100px;
  }
</style>
<script src="includes/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
  slide_horizphoto = new Spry.Effect.Slide('slide_photobox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  slide_horiz = new Spry.Effect.Slide('slide_textbox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  fadeElement = new Spry.Effect.Fade("fade_menu", {duration:500, from:'0%', to:'100%',  toggle:true});

  setTimeout(function(){
    slide_horizphoto.start();
  }, 6000);
  setTimeout(function(){
    slide_horiz.start();
  }, 3000);
  fadeElement.start();
};
</script>
<link rel="stylesheet" href="layout.css" >
</head>

<body bgcolor="#333333" style="overflow-x:hidden">
<div class="wrapper">
  <div id="slide_photobox">
    <div class="photobox">
    	<img src="test.jpg">
    </div>
  </div>
  <div id="slide_textbox">
    <div class="textbox">
    	<font class="norm">Beispieltext</font>
    </div>
  </div>
  <div id="fade_menu">
    <div class="menubox">
    	<font class="head">menuleiste</font>
    </div>
  </div>
  <div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>

Im Übrigen möchte ich dich bitten, dich wie in der Netiquette (Punkt 15) zugestimmt an die Gross- und Kleinschreibung zu halten. Besten Dank im voraus.

Ciao
Quaese
 
Moin Quaese,

habe selbstverstaendlich deinen Rat befolgt. Doch wie gesagt, die beiden "conatiner" befinden sich sofort nach dem "laden" der Seite in ihrer Ausgangsposition. Un der Effekt tritt dann 3 bzw 6 Sekunden spaeter ein.
Kann es sein, dass durch den befehl "window.onload" der container geladen werden und die Verzoegerung nicht direkt greift?
Zudem koennte man sich nicht hier das untere <script type...> sparen da ich davor schon <script src="includes/SpryEffects.js" type="text/javascript"></script> geschrieben habe..


Quaese hat gesagt.:
Code: 
</style>
<script src="includes/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
Zum Vergrößern anklicken....

freu mich auf neue Ideen!
Danke vielmals!
Gruss
 
vielleicht ist das problem ja in dem spry-script, habe es mal angehaengt..
 
Zuletzt bearbeitet von einem Moderator:
Hi,

das Problem liegt nicht am JS, sondern am CSS. Versuch es mal wie folgt:
Code: 
<html>
<head>
<title>website</title>
<style type="text/css">
.norm {font-family:zapfino; color:#ffffff;font-size:12pt;}
.norm {font-family:verdana; color:#ffffff;font-size:8pt;}
.grau {font-family:verdana; color:#626262;font-size:8pt;}
.link {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFFFFF; text-decoration:none}

#wrapper{
	position: relative;
}
#slide_photobox, #slide_textbox, #fade_menu{
	position: absolute;
  display: none;
  top:100px;
}
#fade_menu{
	z-index: 1;
}
#slide_photobox, #slide_textbox{
	z-index: 2;
}

div.menubox
 {
  width:300px;
  height:600px;
  margin:0px;
  background-color:#94141b;
  /*position:absolute;
  top:100px*/
  }
div.textbox
  {
  width:400px;
  height:600px;
  margin:0px 300px;
  background-color:#ffffff;
  filter:alpha(opacity=60);
  opacity:0.6;
  /*position:absolute;
  top:100px;*/
  }
div.photobox
  {
  width:1000px;
  height:600px;
  margin:0px 300px;
  /*position:absolute;
  top:100px;*/
  }
</style>
<script src="includes/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
  slide_horizphoto = new Spry.Effect.Slide('slide_photobox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  slide_horiz = new Spry.Effect.Slide('slide_textbox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  fadeElement = new Spry.Effect.Fade("fade_menu", {duration:500, from:'0%', to:'100%',  toggle:true});

  fadeElement.start();
  setTimeout(function(){
    slide_horizphoto.start();
  }, 3000);
  setTimeout(function(){
    slide_horiz.start();
  }, 1500);
};
</script>
<link rel="stylesheet" href="layout.css" >
</head>

<body bgcolor="#333333" style="overflow-x:hidden">
<div class="wrapper">
  <div id="slide_photobox">
    <div class="photobox">
        <img src="../bilder/trash.png">
    </div>
  </div>
  <div id="slide_textbox">
    <div class="textbox">
        <font class="norm">Beispieltext</font>
    </div>
  </div>
  <div id="fade_menu">
    <div class="menubox">
        <font class="head">menuleiste</font>
    </div>
  </div>
  <div class="push"></div>
</div>
<div class="footer"></div>
</body>
</html>
Ich habe das Script aus dem Anhang deines vorherigen Posts entfernt, da es sonst eventuell zu Problemen mit Adobe kommen kann. Wenn sie wollten, dass das Script frei verfügbar ist, würden sie auf eine Registrierung vor dem Download verzichten.

Ciao
Quaese
 
Sehr sehr stark!
es klappt wie es soll! Koenntest du mir allderings noch sagen wie ich es schaffe, dass die container slide_photobox und slide_textbox quasi "hinter" oder "unter" dem fade_menu hereinfliegen? also wenn man es sich 3 Dimensional vorstellt slide?photbox als Untersten "layer", zweiter layer slide_textbox und dann fade menu als "Obersten".

Vielen Dank fuer deine Muehe!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück