✔ settimeout problem

Johanni · 18. August 2010

man man Harrz!
die obere Frage bitte ignorieren!
Z ist nateurlich des Raetsels Loesung!

1000 Dank!

Super Support wie immer!

Johanni · 18. August 2010

spry slide funktion problem

Hallo,
ich habe dank der Hilfe einiger Forenmitglieder folgenden Script gebastelt in dem nach dem Laden der Website 3 Boxen ein"faden" bzw "sliden". nun versuche ich diese diese durch Klicken im Menu wieder zurueck sliden zu lassen. d.h. wenn ich auf Kontakt klicke, soll slide_photobox und slide_textbox wieder zurueck sliden= verschwinden. Ich stelle mir vor, dass man das machen kann in dem man eine Bedingung schreibt, allerdings weiss ich nicht wie. Grob also: onclick check if slide_photobox = 100%, then do function slide photobox von 100% to 0% ... oder so..

Oder geht es vielleicht auch einfacher?
onclick.reverse function slide_photobox?

Danke vielmals

Code:

<html>
<head>
<title>Titel</title>
<style type="text/css">
.norm {font-family:verdana; color:#000000;font-size:10pt;text-decoration:none}
.grau {font-family:verdana; color:#626262;font-size:8pt;text-decoration:none}
.link {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:visited {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:active {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:hover {font-family:verdana; color:#626262;font-size:8pt;text-decoration:none}
#menu li {
  list-style-type:none;
  margin:0 0 0.25em 0; /* ADDED */
  }
#menu a, #menu a:visited {
  display:block;
  width:9em;
  font-family:verdana, sans-serif;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  color:#ffffff;
  padding:0.25em; /* ADDED */
  }
#menu a:hover {
  background:#94141b;
  color:#929292;
  }
#text {
  display:block;
  width:350px;
  margin-left:25px;
  margin-top:20px;
  font-family:verdana, sans-serif;
  
  font-size:12px;
  text-align:justify;
  text-decoration:none;
  color:#626262;
  padding:0.25em; /* ADDED */
}
#text_head {
  display:block;
  width:350px;
  margin-top:50px;
  font-family:verdana, sans-serif;
  font-size:14px;
  font-weight: bold;
  text-align:center;
  text-decoration:none;
  color:#000000;
  padding:0.25em; /* ADDED */
} 
#wrapper{
    position: relative;
}
#slide_photobox, #slide_textbox, #fade_menu{
    position: absolute;
    display: none;
    top:50px;
}
#fade_menu{
    z-index: 3;
}
#slide_textbox{
    z-index: 2;
}
#slide_photobox,{
    z-index: 1;
} 
div.menubox
 {
  width:271px;
  height:550px;
  margin:0px;
  background-color:#94141b;
  }
div.textbox
  {
  width:400px;
  height:550px;
  margin:0px 271px;
  background-color:#ffffff;
  filter:alpha(opacity=80);
  opacity:0.8;
  }
div.photobox
  {
  width:1250px;
  height:550px;
  margin:0px 271px;
  }
</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', {duration:1250, 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();
  }, 750);
  setTimeout(function(){
    slide_horiz.start();
  }, 500);
};
</script>
<link rel="stylesheet" href="layout.css" >
</head>
 <body bgcolor="#333333" style="overflow-y:hidden;overflow-x:hidden">
<div class="wrapper">
    <div id="fade_menu">
    <div class="menubox">
     <img src="name.jpg" width="270">
        <ul id="menu">
         <li><a href="#nogo">Kontakt</a></li>
         </ul>
         <br>
         <br>
        <img src="haus.jpg" width="270">
    </div>
  </div>
<div id="slide_textbox">
    <div class="textbox">
        <font id="text_head">
Kontakt
</font>
<font id="text">
        </font>
    </div>
  </div>
<div id="slide_photobox">
    <div class="photobox">
        <img src="test3.jpg">
    </div>
  </div>
  <div class="push"></div>
</div>
<div class="footer" align="center" >
  <font class="grau">beispiel</font><br />
  <a href="impressum.html" class="grau">Impressum</a>
</div>
</body>
</html>

SpiceLab · 18. August 2010

Wieso hast du die Frage nicht in deinem vorherigen Thema settimeout problem gestellt, wo das Script auch herstammt?

Johanni · 18. August 2010

Hatte ich ueberlegt, allerdings dachte ich, der Titel wuerde nicht passen und zudem habe ich es abgeschlossen und ging davon aus, dass es weniger ansehen wuerden!? Sorry!

Quaese · 18. August 2010

Hi,

ohne mich weiter in die Materie eingearbeitet zu haben, würde ich aufgrund dessen, dass die toggle-Eigenschaft auf true gesetzt ist, darauf schliessen, dass ein erneuter Aufruf der start-Methode ein Sliden in die entgegengesetzte Richtung nach sich zieht.

Ich hab die beiden Themen zusammengeführt.

Ciao
Quaese

Johanni · 19. August 2010

Hallo Quaese,
vielen Dank mal wieder fuer den Tip-hast recht! das Problem, dass sie wieder zurueck sliden sollen habe ich also so geloest:

Code:

         <li><a href="#nogo" onClick="setTimeout(function(){slide_horizphoto.start();},250);slide_horiz.start();">Speisen & Weine</a></li>

soweit so gut.
Allerdings moechte ich gerne noch ein js if schleife schreiben, die diejenigen boxen verschiebt, die auch gerade offen sind. Mein Website hat also diverse boxen fuer die verschiedenen Rubriken und wenn man nun sich z.B. Kontakt angesehen hat und man auf Specials klickt, dass dann die boxen slide_kontakt und slide_kontaktphoto (namen als idee, bis jetzt habe ich ja nur slide_horiz und slide_horizphoto) schliessen und dann erste slide_special bzw slide_specialphoto oeffnen.

Die Schleife um zu erkennen muesste doch so aussehen:

Code:

function collaps_all(){
if slide_horiz.width = 100%;
slide_horiz.start();
};

und wuerde dann in dem oben geposteten onclick aktiviert werden.

Leider klappt meine Schleife nicht, hast du ne Idee wie sie richtig lauten muesste, bzw ob man sich auf die 100% beziehen kann?

Danke sehr!

Johanni · 19. August 2010

Habe es mal so probiert, aber die Funktion scheint nicht zu stimmen.

Code:

<script type="text/javascript">
function collaps_all(){
if slide_horiz = (slide_horiz.width == "100%");
slide_horiz.start();
};
</script>

Johanni · 19. August 2010

Habe noch etwas herumgebastelt allerings laed jetzt alles neu, d.h. das Fade Menu,Slide_horiz und slide_horizphoto.

Code:

<script type="text/javascript">
function collaps_all(){
if slide_horiz = (slide_horiz.to == '100%');
slide_horiz.start();
}
</script>

aufgerufen durch

Code:

<li><a href="" onClick="collaps_all();">Speisen & Weine</a></li>

Was ist der Fehler?

Danke & Gruss

Johanni · 19. August 2010

So wie hier, allerings horizontal.
http://labs.adobe.com/technologies/spry/samples/effects/multiple_slides_sample.html

Quaese · 19. August 2010

Hi,

wenn ich den Quellcode von SPRY-Effects richtig gelesen habe, ist die Eigenschaft direction für die Zustände geöffnet (=1) und nicht geöffnet (ungleich 1) verantwortlich.

Ich würde wie folgt vorgehen:

die "Slide-Variablen" werden in einem Array gespeichert
wird die Navigation betätigt, wird eine Funktion mit der zugehörigen "Slide-Variable" als Argument aufgerufen
die Funktion durchläuft das Array, prüft, ob der Inhalt geöffnet ist (direction==1) UND dass es sich nicht um die aktuelle "Slide-Variable handelt". Sind beide Bedigungen wahr, wird der Slider geschlossen.
am Ende der Funktion wird der übergebene Slider noch getoggelt

Beispiel:

Code:

<html>
<head>
<title>Titel</title>
<style type="text/css">
.norm {font-family:verdana; color:#000000;font-size:10pt;text-decoration:none}
.grau {font-family:verdana; color:#626262;font-size:8pt;text-decoration:none}
.link {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:visited {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:active {font-family:verdana; color:#626262;font-size:8pt; text-decoration:none}
a:hover {font-family:verdana; color:#626262;font-size:8pt;text-decoration:none}
#menu li {
  list-style-type:none;
  margin:0 0 0.25em 0; /* ADDED */
  }
#menu a, #menu a:visited {
  display:block;
  width:9em;
  font-family:verdana, sans-serif;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  color:#ffffff;
  padding:0.25em; /* ADDED */
  }
#menu a:hover {
  background:#94141b;
  color:#929292;
  }
#text {
  display:block;
  width:350px;
  margin-left:25px;
  margin-top:20px;
  font-family:verdana, sans-serif;

  font-size:12px;
  text-align:justify;
  text-decoration:none;
  color:#626262;
  padding:0.25em; /* ADDED */
}
#text_head {
  display:block;
  width:350px;
  margin-top:50px;
  font-family:verdana, sans-serif;
  font-size:14px;
  font-weight: bold;
  text-align:center;
  text-decoration:none;
  color:#000000;
  padding:0.25em; /* ADDED */
}
#wrapper{
    position: relative;
}
#slide_photobox, #slide_textbox, #fade_menu, #slide_next{
    position: absolute;
    display: none;
    top:50px;
}
#fade_menu{
    z-index: 3;
}
#slide_textbox{
    z-index: 2;
}
#slide_photobox,{
    z-index: 1;
}
div.menubox
 {
  width:271px;
  height:550px;
  margin:0px;
  background-color:#94141b;
  }
div.textbox
  {
  width:400px;
  height:550px;
  margin:0px 271px;
  background-color:#ffffff;
  filter:alpha(opacity=80);
  opacity:0.8;
  }
div.photobox
  {
  width:1250px;
  height:550px;
  margin:0px 271px;
  }
</style>
<script src="include/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
  slide_horizphoto = new Spry.Effect.Slide('slide_photobox', {duration:1250, horizontal: true, from:'0%', to:'100%', toggle: true});
  slide_horiz = new Spry.Effect.Slide('slide_textbox', {horizontal: true, from:'0%', to:'100%', toggle: true});
  slide_next = new Spry.Effect.Slide('slide_next', {horizontal: true, from:'0%', to:'100%', toggle: true});
  fadeElement = new Spry.Effect.Fade("fade_menu", {duration:500, from:'0%', to:'100%',  toggle:true});

  // Array mit "Slide-Variablen"
  arrSlides = [
    slide_horizphoto,
    slide_horiz,
    slide_next
  ];

  fadeElement.start();
  setTimeout(function(){
    slide_horizphoto.start();
  }, 750);
  setTimeout(function(){
    slide_horiz.start();
  }, 500);
};

// Funktion zum Kontrollieren der Slider
function slideCtrl(objActive){
  // Array mit "Slide-Variablen" durchlaufen
  for(var i=0; i<arrSlides.length; i++){
    // Falls es sich nicht um die aktuelle Variable handelt und der Slider geöffnet ist
    if((arrSlides[i]!=objActive) && (arrSlides[i].direction == 1)){
      // Slider schliessen
      arrSlides[i].start();
    }
  }
  // Aktuell übergebenen Slider toggeln
  objActive.start();
}
</script>
<link rel="stylesheet" href="layout.css" >
</head>
 <body bgcolor="#333333" style="overflow-y:hidden; overflow-x:hidden">
<div class="wrapper">
    <div id="fade_menu">
    <div class="menubox">
     <img src="bild.jpg" width="270">
        <ul id="menu">
         <li><a href="#nogo" onclick="slideCtrl(slide_horiz);">Kontakt</a></li>
         <li><a href="#nogo" onclick="slideCtrl(slide_next);">Next</a></li>
         </ul>
         <br>
         <br>
        <img src="bild.jpg" width="270">
    </div>
  </div>
<div id="slide_textbox">
    <div class="textbox">
        <font id="text_head">
Kontakt
</font>
<font id="text">
        </font>
    </div>
  </div>
<div id="slide_photobox">
    <div class="photobox">
        SLIDE_PHOTOBOX
    </div>
  </div>
  <div class="push"></div>
</div>
<div id="slide_next">
    <div class="photobox">
        NEXT
    </div>
  </div>
  <div class="push"></div>
</div>
<div class="footer" align="center" >
  <font class="grau">beispiel</font><br />
  <a href="../bilder/zahnrad_140x120.jpg" class="grau">Impressum</a>
</div>
</body>
</html>

Ciao
Quaese

✔ settimeout problem

Johanni

Mitglied

Johanni

Mitglied

SpiceLab

ZENmechanic

Johanni

Mitglied

Quaese

Moderator

Johanni

Mitglied

Johanni

Mitglied

Johanni

Mitglied

Johanni

Mitglied

Quaese

Moderator

Neue Beiträge