Inahlt von Div vor Auto-Slide laden?

[Entwickler-Ian]

Moin,
ich bräuchte mal eure Hilfe

Es geht um einen Div den ich verschieben möchte

<div id="anzeige-box" style="width: 300px; height: 100px; overflow: hidden;">
  <div id="div-zum-schieben" style="width: 900px; height: 100px;">
    <span id="anzeigebox-1" sytle="width: 300px; height: 100px; float: left;">foo</span>
    <span id="anzeigebox-1" sytle="width: 300px; height: 100px; float: left;">bar</span>
    <span id="anzeigebox-1" sytle="width: 300px; height: 100px; float: left;">nöö</span>
  </div>
</div>

Mittels margin-left schiebe ich den div (div-zum-schieben) entsprechend nach links oder rechts. Soweit klappt auch alles wunderbar der Div bewegt sich um 300px in die entsprechende Richtung.

Allerdings und nun kommt das große Aber, zeigt er den Inhalt erst nach erreichen der Position an, obwohl dieser bereits von Anfang an in die Spans geladen wurde.

Mir ist absolut nicht klar warum er dies tut, vlt hat ja hier einer eine Idee

Gruß Ian

 

[Jan-Frederik Stieler]

Hi,
wie wäre es den mit ein wenig JS. Damit wir sehen was du geschrieben hast?

Grüße

 

[Entwickler-Ian]

Edit:
Wie ich sehe, liegt es wohl nicht am js code... Wenn ich overflow: hidden rausnehme, schmeißt er den Inhalt aus dem schiebe div raus und packt ihn unten drunter...
Gehe daher fasst von einem Problem auf welches sich beim floaten einbringt und somit beim css-script zu finden ist.

Edit 2:
Jap meine Vermutung hat sich bestätigt, JS läuft doch weitesgehend ohne Probleme^^
Die breite meine Div-zum schieben hat sich an denen der anzeigeboxen orientiert, und so hat er immer alles unten drunter gefloatet, konnte es dementsprechend auch erst anzeigen, als wirklich die komplette Fläsche wieder frei war

Trotzdem Danke
Ian

 

[hela]

Hallo,

offensichtlich falsches Forum. Bei mir funktioniert folgendes prima:

<div id="anzeige-box">
  <div id="container">
    <div class="innerContainer">Container1</div>
    <div class="innerContainer">Container2</div>
    <div class="innerContainer">Container3</div>
  </div>
</div>

... mit dieser Formatierung:

#anzeige-box {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: auto;       /* mit JS auf Wert "hidden" setzen */
  padding-bottom: 17px; /* Platz für Scrollbalken, mit JS auf Null setzen */
}
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px; /* = Breite für 3 innerContainer */
}
.innerContainer {
  float: left;
  width: 300px;
  height: 100px;
}

In deinem oben geposteten HTML-Fragment gibt es "sytle"-Attribute. Welche HTML-Version ist das?

Außerdem sollte ein ID-Attribut mit bestimmtem Namen nur einmal im HTML-Dokument auftauchen. In deinem kurzen HTML-Fragment gibt es das ID-Attribut mit dem Namen "anzeigebox-1" mehrmals.

 

[Entwickler-Ian]

Moin,
da bin ich wieder^^

@hela: Ja wie gesagt, war ein reines css Problem, welches durch das floaten entstanden ist

Allerdings habe ich nun ein neues Problem und bringe mal den code mit

acs_css.e_load = function(){

   acs_css.e_slidedown = function(){
      if((acs_css.count) === 22){
         if(acs_css.timer){
            clearInterval(acs_css.timer);
         }
         acs_css.timer = null;                                                                                                                 //
      }
      else{
         acs_css.e_topto('acs_display', (50 + acs_css.count * 25));
      }
      acs_css.count++;                                                                                                                  //
   };

   acs_css.e_slideup = function(){
      if((acs_css.count+1) === 1){
         if(acs_css.timer){
            clearInterval(acs_css.timer1);
         }
         acs_css.timer = null;                                                                                                                //
      }
      else{
         acs_css.e_topto('acs_display', (600 - acs_css.count * 25));
      }
      acs_css.count--;
   };

   if(acs_css.timer){
      clearInterval(acs_css.timer);
   }

   acs_css.timer = setInterval(acs_css.e_slidedown, 20);

   acs_css.timer = setInterval(acs_css.e_slideup, 20);

};

Wenn ich am ende nur das erste setInterval ausführen lasse slidet er problemlos nach unten, doch wenn ich den das zweite setInterval noch dazunehme, springt er plötzlich nach unten, also ohne slide und weigert sich wieder nach oben zu fahren

Gibt es bei der Interval funktion eine besonderheit die ich beachten muss?
Wie ist der Ablauf, wenn er zum ersten setInterval kommt? Dann führt er doch die slidedown funktion solange aus bis er gestoppt wird? Läuft er dabei bis zum ende der Hauptfunktion weiter durch oder wartet er?