Otzelot: Div Slide In

SELF-Forum

Div Slide In

Otzelot
– Informationen zu den Bewertungsregeln

Hi
ich will in einem Div den Inhalt von Oben in die Website reinsliden lassen
also ähnlich wie bei den ganzen ADs
nach ca. 2 stündigem stöbern kam ich endlich mal zu nem Script was mir einigermaßen vernünftig aussah und ich habe es mal übernommen (der Autor hat es freigestellt)
Nur irgendwie will das ganze nicht funktionieren :/
wäre nett wenn da ma wer drüber gucken könnte, ich bin in Sachen Javascript ein Greenhorn und gerade stark ratlos

Danke schonmal im vorraus
MFG Fabian

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
<!--  
.divcontrol {  
 background-image: url(jpg/inhalt.png);  
 background-repeat: no-repeat;  
 position: absolute;  
 z-index: 1;  
 height:534px;  
 width:635px;  
 left: 341px;  
 top: 152px;  
}  
.divcontrolinhalt {  
 background-image: url(jpg/bg.png);  
 z-index: 2;  
 position: absolute;  
 height: 42px;  
 width: 529px;  
 left: 45px;  
 top: 43px;  
}  
body {  
 margin-left: 0px;  
 margin-top: 0px;  
 margin-right: 0px;  
 margin-bottom: 0px;  
}  
-->  
</style>  
  
</head>  
<body>  
<script language="javascript" type="text/javascript">  
function moveDiv(divcontrol){  
 var div=document.getElementById(divcontrol)  
 var newpos=parseInt(div.style.top)+2+"px"  
 if(newpos<152px){  // Here you put the value it should move to  
  setTimeout("moveDiv("+divcontrol+")",100) // Tweak the time to get a smooth movement.  
 }  
 else{  
   setTimeout("functionToHideDiv()",1000)  
 }  
</script>  
  
<div style="background-image:url(jpg/inhalt.png);background-repeat: no-repeat;position: absolute;z-index: 1;height:534px;width:635px;left:341px;top:-600px;" id="divcontrol">  
  <p>&nbsp;</p>  
  <table width="429" height="388" border="0" align="center">  
    <tr>  
      <td height="34" background="jpg/bg.png">&nbsp;</td>  
    </tr>  
    <tr>  
      <td align="left" valign="top" background="jpg/bg.png"><div align="left"></div></td>  
    </tr>  
  </table>  
  <div align="left"></div>  
</div></div>  
  
<img src="jpg/bg.jpg" width="1024" height="768" />  
  
  
</div>  
  
</body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div Slide In

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Nur irgendwie will das ganze nicht funktionieren :/

    "Funktioniert nicht" funktioniert hier nicht!

    var newpos=parseInt(div.style.top)+2+"px"  
if(newpos<152px){  // Here you put the value it should move to

    Was soll denn 152px sein? Das ist kein gueltiges JavaScript-Statement.
    "152px" waere eins.
    (Aber es waere immer noch nicht also klug, die Einheitenangabe "px" in den Vergleich mit einzubeziehen. Besser waere es, erst mal den Zahlwert zu vergleichen - und die Einheit spaeter anzuhaengen.)

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div Slide In

      Otzelot
      – Informationen zu den Bewertungsregeln

      danke für die schnelle antwort
      also
      es funktioniert hier nicht:

      <script language="javascript" type="text/javascript">  
function moveDiv(divcontrol){  
 var div=document.getElementById(divcontrol)  
 var newpos=parseInt(div.style.top)+2  
 if(newpos<152){  // Here you put the value it should move to  
  setTimeout("moveDiv("+divcontrol+")",100) // Tweak the time to get a smooth movement.  
 }  
 else{  
   setTimeout("functionToHideDiv()",1000)  
 }  
</script>

      Das mit den 152px war nen Denkfehler meinerseits das hab ich jetzt rausgenommen
      genau wie das +"px"

      jetzt stellt sich für mich die Frage wie ich das am besten wieder einführen kann,
      es tut mir leid wenn das ganze wie das Flehen nach nem Tutorial rüberkommt,
      es geht mir eher um das Verständniss

      Also,
      if(newpos<152)
      hier an der Stelle kontrolliert er ob newpos kleiner ist als 152
      solange es kleiner ist macht er weiter und das Div sollte nach unten scrollen
      tut es aber ja nicht weil es sich nicht um px handelt
      wenn ich jedoch erst später z.B. im else teil newpos + "px" einbringe ist der scrolling effekt weg

      wer ne idee wie ich das lösen kann :/?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div Slide In

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        es funktioniert hier nicht:

        <script language="javascript" type="text/javascript">

        function moveDiv(divcontrol){
        var div=document.getElementById(divcontrol)
        var newpos=parseInt(div.style.top)+2
        if(newpos<152){  // Here you put the value it should move to
          setTimeout("moveDiv("+divcontrol+")",100) // Tweak the time to get a smooth movement.
        }
        else{
           setTimeout("functionToHideDiv()",1000)
        }
        </script>

          
Na ja, wenn dem Element die neue Hoehe gar nirgends zugewiesen wird - wie soll's denn da auch "funzen"?  
  

> jetzt stellt sich für mich die Frage wie ich das am besten wieder einführen kann,  
> es tut mir leid wenn das ganze wie das Flehen nach nem Tutorial rüberkommt,  
> es geht mir eher um das Verständniss  
  
Vielleicht schaust du dir erst mal den Artikel [Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts](http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/) an - da werden die Grundlagen gut erklaert.  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Div Slide In

          Otzelot
          – Informationen zu den Bewertungsregeln

          Thx für die Antworten :)
          habs geschaft:

          <script language="javascript1.1" type="text/javascript">  
function moveDiv() {  
 var div = document.getElementById("divcontrol");  
 var newpos = parseInt(divcontrol.style.top);  
 var dida = newpos +20 ;  
  
divcontrol.style.top = dida + "px";  
  
 if(newpos<-162){  
  setTimeout(moveDiv, 1);  
 }  
  
}  
</script>

          Und gleich auch noch ne Folgefrage,
          wer ne idee wie man das langsamer werden lassen kann?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Div Slide In

            molily Homepage des Autors
            – Informationen zu den Bewertungsregeln

            wer ne idee wie man das langsamer werden lassen kann?

            • An der Schrittbreite drehen. 1px-Schritte sind zu winzig, 20px-Schritte führen zu einer eher ruckligen Animation. 5 bis 10 sind realistischer.
            • An der Timeout-Zeit drehen. 1ms ist ohnehin zu klein, die Browser starten üblicherweise bei 10ms (außer Google Chrome, der nimmt deine 1ms-Angabe beim Wort). 100-250ms würden zu maximal 10 bzw. minimal 4 Schritte pro Sekunde führen, das reicht völlig.

            Welche Kombinationen deinen Anforderungen entspricht, musst du einfach durch Testen herausfinden.

            Mathias

            --
            JavaScript-Erweiterung für das SELFHTML-Forum
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Div Slide In

              Cheatah
              – Informationen zu den Bewertungsregeln

              Hi,

              • An der Timeout-Zeit drehen. 1ms ist ohnehin zu klein, die Browser starten üblicherweise bei 10ms

              nach unseren Messungen sind es eher 15ms-Schritte, nur bei Firefox 3 läuft es auf 5ms-Schritte hinaus. Allerdings haben wir ...

              (außer Google Chrome, der nimmt deine 1ms-Angabe beim Wort).

              ... Google Chrome nicht getestet. Das werden wir wohl mal nachholen.

              Welche Kombinationen deinen Anforderungen entspricht, musst du einfach durch Testen herausfinden.

              <cite author="Teal'c"> In der Tat. </cite>

              Vergiss dabei nicht, auf einem langsamen (bzw. stark beschäftigten) Rechner zu testen.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Div Slide In

                Otzelot
                – Informationen zu den Bewertungsregeln

                Da alles bissher geklappt hab, ich mich an eine neue Aufgabe gemacht:
                Ein Div was als Menu funktioniert, welches ein und ausklappbar ist. In diesem Fall von links

                <script language="javascript1.1" type="text/javascript">  
function moveDivleft() {  
 var div2 = document.getElementById("navi2");  
 var newpos2 = parseInt(navi2.style.left);  
 var dida = newpos2 + 5 ;  
  
navi2.style.left = dida + "px";  
  
 if(newpos2<-10){  
  setTimeout(moveDivleft, 15);  
  
 }  
 }  
</script>

                Das Funktioniert auch soweit, ist ja im Grunde das vorhergehende Script nur in Grün

                jetzt will ich die Funktion so erweitern das man das Menu wieder einfahrbar ist
                hierfür hab ich die Position als Bedingung gesetzt, doch irgendwie will ers nicht :/
                Mein Code:

                <script language="javascript1.1" type="text/javascript">  
function moveDivleft() {  
 var div2 = document.getElementById("navi2");  
  var newpos2 = parseInt(navi2.style.left);  
if(newpos2<-10){  
 var dida = newpos2 + 5 ;  
navi2.style.left = dida + "px";  
  
 if(newpos2<-10){  
  setTimeout(moveDivleft, 15);  
  
 }  
 }  
 else{  
 var dida = newpos2 - 5 ;  
navi2.style.left = dida + "px";  
  
 if(newpos2<-178){  
  setTimeout(moveDivleft, 15);  
 }  
 }  
</script>

                Was er tut: Nichts
                ich denke dass das Problem an der Stelle
                if(newpos2<-10){
                liegt, nur weis ich nicht was ich falsch mache (Ich habe Selfhtml zu rate gezogen, Javascript verbietet keine Verschachtelten Bedingung und die Form sollte eig auch stimmen)

                Gude
                Fabian

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

      2. Div Slide In

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        solange es kleiner ist macht er weiter und das Div sollte nach unten scrollen
        tut es aber ja nicht weil es sich nicht um px handelt
        wenn ich jedoch erst später z.B. im else teil newpos + "px" einbringe ist der scrolling effekt weg

        An welcher Stelle wird die neu berechnete Position denn dem Element zugewiesen? Die Zuweisung an div.style.top = newpos + "px"; fehlt deinem Script offenbar. Und genau dort solltest du dem Zahlenwert auch die Einheit px verpassen.

        Mathias

        --
        JavaScript-Erweiterung für das SELFHTML-Forum
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Div Slide In

      molily Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Was soll denn 152px sein? Das ist kein gueltiges JavaScript-Statement.
      "152px" waere eins.

      Nein. ;)
      Ich glaube, du verwechselst Statements mit Expressions.

      Mathias

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div Slide In

        Timo "God's Boss" Reitz Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Nein. ;)
        Ich glaube, du verwechselst Statements mit Expressions.

        Er hat auf die automatic semicolon insertion gebaut. ;-)

        --
        Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
        Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Div Slide In

    Otzelot
    – Informationen zu den Bewertungsregeln

    Danke für die tolle Hilfe :)
    jetzt klappts =D

    Der Endgültige Code:

    <script language="javascript1.1" type="text/javascript">  
function moveDiv() {  
 var div = document.getElementById("divcontrol");  
 var newpos = parseInt(divcontrol.style.top);  
  
  newpos++;  
divcontrol.style.top = newpos + "px";  
  
 if(newpos<152){  
  setTimeout(moveDiv, 1);  
 }  
}  
</script>

    am ende hat ein "}" gefehlt und ich musste einiges ändern,
    im grunde ist es jetzt nen 1 zu 1 nachbau von diesesm Tutorial

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Div Slide In

    Otzelot
    – Informationen zu den Bewertungsregeln

    Da alles bissher geklappt hab, ich mich an eine neue Aufgabe gemacht:
    Ein Div was als Menu funktioniert, welches ein und ausklappbar ist. In diesem Fall von links

    <script language="javascript1.1" type="text/javascript">  
function moveDivleft() {  
 var div2 = document.getElementById("navi2");  
 var newpos2 = parseInt(navi2.style.left);  
 var dida = newpos2 + 5 ;  
  
navi2.style.left = dida + "px";  
  
 if(newpos2<-10){  
  setTimeout(moveDivleft, 15);  
  
 }  
 }  
</script>

    Das Funktioniert auch soweit, ist ja im Grunde das vorhergehende Script nur in Grün

    jetz will ich die Funktion so erweitern das man das Menu wieder einfahrbar ist
    hierführ hab ich die Position als Bedingung gesetzt, doch irgendwie will ers nicht :/
    Mein Code:

    <script language="javascript1.1" type="text/javascript">  
function moveDivleft() {  
 var div2 = document.getElementById("navi2");  
  var newpos2 = parseInt(navi2.style.left);  
if(newpos2<-10){  
 var dida = newpos2 + 5 ;  
navi2.style.left = dida + "px";  
  
 if(newpos2<-10){  
  setTimeout(moveDivleft, 15);  
  
 }  
 }  
 else{  
 var dida = newpos2 - 5 ;  
navi2.style.left = dida + "px";  
  
 if(newpos2<-178){  
  setTimeout(moveDivleft, 15);  
 }  
 }  
</script>

    Was er tut: Nichts
    ich denke dass das Problem an der Stelle
    if(newpos2<-10){
    liegt, nur weis ich nicht was ich falsch mache (Ich habe Selfhtml zu rate gezogen, Javascript verbietet keine Verschachtelten Bedingung und die Form sollte eig auch stimmen)

    Gude
    Fabian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln