Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 22
  1. #1
    xy2er ist offline Grünschnabel
    registriert
    31-10-2006
    Beiträge
    5

    Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Hallo,

    ich habe mir eben moo.fx angesehen und es kann genau das was ich brauche.

    Leider kann das ganze ja nur höhe, breite ect.

    Ich bräuchte etwas wo ich sagen kann:
    -> Slide den x-Wert eines Elementes (div) zu einem bestimmten Wert und beim erneuten aufrufen wieder zurück

    Hat ja jemand eine Ahnung ob es da was fertiges gibt oder wo ich da kucken kann?

    Danke schonmal!

  2. #2
    mixer2 ist offline Mitglied
    registriert
    31-10-2006
    Beiträge
    32

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    sowas?

    oder willst du dass es langsam den wert dorthin verändert?

    Code:
    <html><head><title>Test</title>
    <script type="text/javascript">
    function schieb() {
      document.all.schiebdiv.style.left = "400px";
      document.all.schiebdiv.style.top = "400px";
    }
    function zurueck() {
      document.all.schiebdiv.style.left = "0px";
      document.all.schiebdiv.style.top = "0px";
    }
    </script>
    </head><body>
    <div id="schiebdiv" style="position:absolute;left:0px;top:0px;">Das ist das div</div><br /><br />
    <a href="javascript:schieb()">schieben!</a> 
    <a href="javascript:zurueck()">zurueck</a>
    </body></html>

  3. #3
    xy2er ist offline Grünschnabel
    registriert
    31-10-2006
    Beiträge
    5

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von mixer2 Beitrag anzeigen
    oder willst du dass es langsam den wert dorthin verändert?
    Genau das meinte ich mit sliden

  4. #4
    mixer2 ist offline Mitglied
    registriert
    31-10-2006
    Beiträge
    32

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von xy2er Beitrag anzeigen
    Genau das meinte ich mit sliden
    dazu fällt mir spontan nur folgendes ein, was eigtl sehr böse ist und restliches javascript der seite für die zeit, die es slidet lahm legt ^^
    es funktioniert, is aber böse, sollte man glaube ich nicht nutzen
    enthält btw code von:
    Delay Warten Verzögerung HTML JavaScript Beispiel Download

    Code:
    <html><head><title>Test</title>
    <script type="text/javascript">
    
    function warten(prmSec)
      {
      prmSec *= 10;
      var eDate = null;
      var eMsec = 0;
      var sDate = new Date();
      var sMsec = sDate.getTime();
    
      do {
          eDate = new Date();
          eMsec = eDate.getTime();
    
      } while ((eMsec-sMsec)<prmSec);
    }
    
    
    function schieb() {
      pos = 0;
      while (pos <= 400) {
    	document.all.schiebdiv.style.left = pos+"px";
    	warten(1);
    	pos = pos+1;
    	}
    }
    function zurueck() {
      document.all.schiebdiv.style.left = "0px";
      document.all.schiebdiv.style.top = "0px";
    }
    </script>
    </head><body>
    <div id="schiebdiv" style="position:absolute;left:0px;top:0px;">Das ist das div</div><br /><br />
    <a href="javascript:schieb()">schieben!</a> 
    <a href="javascript:zurueck()">zurueck</a>
    </body></html>

  5. #5
    pit-r Guest

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Moin!
    Zitat Zitat von mixer2
    document.all
    Laß doch bitte solchen nicht standardkonformen Quark. Die 'warten'-Funktion ist zwar niedlich aber ziemlich belastend.

    Ahoi - Pit

  6. #6
    mixer2 ist offline Mitglied
    registriert
    31-10-2006
    Beiträge
    32

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von pit-r Beitrag anzeigen
    Moin!Laß doch bitte solchen nicht standardkonformen Quark. Die 'warten'-Funktion ist zwar niedlich aber ziemlich belastend.

    Ahoi - Pit
    olol, sry, das document.all ist ein überrest aus nem selfhtml cut&paste...
    die verwenden das da gerne in beispielen, obwohl darauf hingewiesen wird, dass mans eigtl nich nutzen soll... naja, aber eigtl is egal, da alle aktuellen browser es unterstützten und es beim thema nicht darauf ankommt.

    ja, die warten funktion ist wie gesagt, denkbar ungünstig... aber allgemein ist javascript, css und html auch für sowas wie sliden nicht gedacht, deshalb gibt's da keine wirklich sauberen lösungen. wenn man sowas machen will, nutzt man eben flash, das ist für sowas gedacht.

  7. #7
    pit-r Guest

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von mixer2
    aber eigtl is egal, da alle aktuellen browser es unterstützten
    Das stimmt nicht. Und bei Browsern, die es 'tolerieren' - wie FF - füllt sich dann ruckizucki die Fehlerkonsole (zwar mit Warnungen und nicht Fehlern, aber es bleibt dennoch Quatsch).
    Zitat Zitat von mixer2
    allgemein ist javascript, css und html auch für sowas wie sliden nicht gedacht
    Hä?

    Mit 'ner sauber gehäkelten, auf setInterval oder setTimeout basierenden Geschichte ist das kein Problem.

  8. #8
    shf10105 ist offline Haudegen
    registriert
    04-05-2006
    Ort
    Duisburg
    Beiträge
    625

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Hi,
    Ich habe mir da gerade mal eine Lösung ausgedacht.
    Ich poste sie gleich mal :
    PHP-Code:
    <html>
        <
    head>
            <
    script type='text/javascript'>
    var 
    g_aContainer    =    new Array();
    function 
    $get(s)
    {
        return 
    g_aContainer[s];
    }
    function 
    $add(o)
    {
        var 
    g_aContainer.length;
        
    g_aContainer[i] = o;
        return 
    i;
    }

    function 
    slider(oTarget)
    {
        
    this.m_iSlide 0;
        
    this.m_iDTime 1000;
        
    this.m_iLTime = new Date().getTime();
        
    this.m_iSID $add(this);
        
    this.m_oTarget oTarget;
        
    this.m_piSource = [oTarget.offsetLeft,oTarget.offsetTop];
        
    this.m_piDest = [oTarget.offsetLeft,oTarget.offsetTop];
        
        
        
    this.slide    =    function()
        {
            var 
    lt    =    new Date().getTime();
            
    this.m_iSlide += (lt-this.m_iLTime)/this.m_iDTime;
            if(
    this.m_iSlide>1)
            {
                
    this.m_iSlide 1;
                
    clearInterval(this.m_iInterval);
            }
            var 
    iLeft    =    this.m_piSource[0]+(this.m_piDest[0]-this.m_piSource[0])*this.m_iSlide;
            var 
    iTop    =    this.m_piSource[1]+(this.m_piDest[1]-this.m_piSource[1])*this.m_iSlide;
            
    this.m_oTarget.style.left    =    iLeft+"px";
            
    this.m_oTarget.style.top    =    iTop+"px";
            
    this.m_iLTime    =    lt;
        }
        
    this.m_iInterval    =    setInterval("$get("+this.m_iSID+").slide();",10);
    }
    function 
    slide(el,dest)
    {
        var 
    = new slider(document.getElementById(el));
        
    o.m_piDest dest;
        
    o.m_iSlide 0;
        return 
    o;
    }
            
    </script>
        </head>
        <body>
            <div style='position:absolute;left:0;top:0;' id='slide'>hvhgvbgffgxvhgvnbvc</div>
            <a href='javascript:void();' onClick="slide('slide',[400,400]);">[to]</a>
            <a href='javascript:void();' onClick="slide('slide',[0,0]);">[back]</a>
        </body>
    </html> 
    Geändert von shf10105 (31-10-2006 um 17:30 Uhr) Grund: Code hinzugefügt
    while(windows.iq < 130) linux.use();
    "Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."

  9. #9
    Avatar von inco
    inco ist offline Haudegen
    registriert
    18-11-2005
    Ort
    Berlin
    Beiträge
    646

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    bin zufällig auf Deine einfallsreiche Funktion gestoßen,
    so macht JS Spaß

    eine Kleinigkeit:

    die Links
    <a href='javascript:void();' onClick="slide('slide',[400,400]);">[to]</a>
    machen Probleme wegen dem Aufruf void()
    (betrifft z.B. IE6 oder Opera8.5)

    ich nutze dagegen drei Alternativen:
    <a href='javascript:void(0);' onClick="slide('slide',[400,400]);">[to]</a>
    <a href='javascript://' onClick="slide('slide',[400,400]);">[to]</a>
    <a href='#' onClick="slide('slide',[400,400]);return false;">[to]</a>
    Gruß
    inco
    ···································································································· ········································································
    Nur der Statistiker glaubt, mit dem Kopf im Ofen und den Füßen im Sektkühler müsste es ihm durchschnittlich gut gehen!

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von inco Beitrag anzeigen
    ich nutze dagegen drei Alternativen:
    ....
    wieso nutzt du nicht das was du machst:
    es gibt doch keinen Grund hier einen Link zu verwenden, wenn man nur auf ein Element klicken will?

    <span onclick="slide('slide',[400,400]);">[to]</span>

  11. #11
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    und die Slidefunktion etwas aufgeräumt, da die Ungarische Notation - Wikipedia seltsam ist - Fliesskommawerte sind als integer gekennzeichnet, Arrays als Pointer - und JS auch nicht unbedingt sinnvoll, dann noch etwas mehr OO, mit privaten Variabeln und das Objekt kann man wiederverwerten.
    Dann ist es möglich auch ohne globale Variabeln die Timerfunktionen mit Objekt zu verwenden, erfodert aber einen kleinen Trick.
    Ansonsten finde ich die Berechnung des Slidegeschwindigkeit in Abhängigkeit der Zeit sehr schön. Bei mir würde das Objekt so aussehen:
    PHP-Code:
    <script type="text/javascript">
    function 
    Slider(oTarget)
    {
        var 
    obj oTarget;
        var 
    start_pos;
        var 
    dPos;
        var 
    faktor 1;
        var 
    dTime 1000;
        var 
    aktTime;
        var 
    interval null;

        
    this.slide = function()
        {
             var 
    lt = new Date().getTime();
             
    faktor += (lt aktTime) / dTime;
             if(
    faktor 1)
             {
                  
    faktor 1;
                  
    clearInterval(interval);
             }
             var 
    iLeft start_pos[0] + dPos[0] * faktor;
             var 
    iTop start_pos[1] + dPos[1] * faktor;
             
    obj.style.left iLeft "px";
             
    obj.style.top iTop "px";
             
    aktTime lt;
        }
        
    this.start = function(dest)
        {
             if(!
    obj) return alert('Kein Objekt');
             if(
    faktor ) return;
             var 
    end_pos dest || start_pos;
             
    start_pos = [obj.offsetLeftobj.offsetTop];
             
    dPos = [ ( end_pos[0] - start_pos[0] ) , ( end_pos[1] - start_pos[1] )  ];

             
    aktTime = new Date().getTime();
             
    faktor 0;

             var 
    this;
             
    interval setInterval(function() { o.slide(); }, 1);
        }
    }
    </script> 
    und der HMTL code z.b. so:
    PHP-Code:
    <div style='position:absolute;left:100px;top:100px;' id='slide'>hvhgvbgffgxvhgvnbvc</div>

    <
    span onclick="o.start([400,400]);">[to]</span>

    <
    span onclick="o.start([100,100]);">[back]</span>

    <
    script type="text/javascript">
    var 
    = new Slider(document.getElementById('slide'));
    </script> 

  12. #12
    Avatar von inco
    inco ist offline Haudegen
    registriert
    18-11-2005
    Ort
    Berlin
    Beiträge
    646

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Zitat Zitat von ein schlauer Beitrag anzeigen
    wieso nutzt du nicht das was du machst:
    es gibt doch keinen Grund hier einen Link zu verwenden, wenn man nur auf ein Element klicken will?

    <span onclick="slide('slide',[400,400]);">[to]</span>
    Gründe, hier eine Link zu verwenden:
    Die CSS-Gestaltung von Anklickbarem zum Beispiel, <u> ist deprecated
    und Texte zum Anklicken dürfen auch als solche erkennbar sein (ebenso ohne CSS). Man hat also zum Beispiel einen Pointer als Cursor, unterstrichenen Text, eine andere Textfarbe etc.

    Es gibt hierzu noch eine vierte Variante ganz ohne eventhandler,
    falls die Funktion slide() nicht unnötigerweise das Objekt zurück gibt:

    <a href="javascript:slide('slide',[0,0]);">[back]</a>
    Gruß
    inco
    ···································································································· ········································································
    Nur der Statistiker glaubt, mit dem Kopf im Ofen und den Füßen im Sektkühler müsste es ihm durchschnittlich gut gehen!

  13. #13
    shf10105 ist offline Haudegen
    registriert
    04-05-2006
    Ort
    Duisburg
    Beiträge
    625

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    @inco
    Danke für den Tipp.
    @ein schlauer
    Danke auch für deine Korrekturen bezüglich der ungarschen Notation. Hab das Script aber nur mal eben so auf die schnelle geschrieben.
    while(windows.iq < 130) linux.use();
    "Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."

  14. #14
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Gründe, hier eine Link zu verwenden:
    Die CSS-Gestaltung von Anklickbarem zum Beispiel, <u> ist deprecated
    und Texte zum Anklicken dürfen auch als solche erkennbar sein (ebenso ohne CSS). Man hat also zum Beispiel einen Pointer als Cursor, unterstrichenen Text, eine andere Textfarbe etc.
    Code:
    style="cursor:pointer;text-decoration:underline;color:blue"
    
    oder als CSS für Browser:
    
    span[onclick]
    {
    cursor:pointer;
    text-decoration:underline;
    color:blue
    }

  15. #15
    shf10105 ist offline Haudegen
    registriert
    04-05-2006
    Ort
    Duisburg
    Beiträge
    625

    Arrow AW: Wie kann ich den Positionswert (x) eines Elementes (div) "sliden"??

    Ich bin ja auch ein Freund dieser Elemente, aber man sollte die Elemente trotzdem nicht missbrauchen.
    Ohne CSS muss die Seite auch funktionieren und die Links erkennbar sein.
    Außerdem funktioniert die zweite Vorschrift meines Wissens nur im FF.
    while(windows.iq < 130) linux.use();
    "Die Tastatur wurde nicht gefunden, bitte drücken sie F1 um fortzufahren."

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Crazy div / table - Verhalten
    Von hugobeck im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-10-2006, 15:53
  2. script das div id ändert ?
    Von darkstar im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 22-08-2006, 13:02
  3. Probleme mit DIV Vordergrund/Hintergrund
    Von ImpCaligula im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 17-08-2006, 11:06
  4. Div Height mit JS modifizieren
    Von baminc im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 19-11-2005, 13:49
  5. DIV durch anderen DIV ersetzen
    Von Reisender im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 22-09-2005, 18:16

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •