Code umstellen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

15:25, 19.12.2009

Hi
ich habe nach langer Suche einen Code gefunden der mir ein Div ausfährt. Wie kann ich das aber ändern dass es nicht von oben sondern von links ausgefahren wird?? ich hatte mal einfach alle heights durch whidths getauscht aber dann lief garnix mehr...

Weiss einer was ich da machen muss??
Am bestern wäre auch eine andere Lösung weil das schon recht kompliziert ist :)

also das ist mein Code:

<html>
  <head>
    <title></title>
    <style type="text/css">
      #dyn {
        position:relative;
        width:300px;
        height:10px;
        overflow:hidden;
        background-color:black;
      }
      #dyn_inner {
        position:absolute;        
        width:300px;
      }
    </style>
    <script type="text/javascript">
      function slide(outer, inner, nDuration)
      {
        var nStartTime;
        var nFrom, nTo;
        var bMoving = false;
        var hdlSlide = null;
        nDuration = nDuration || 1000;
        
        function Transition(nPercent)
        {
          return Math.pow(nPercent, 2);
        }
        function formel(nPercent)
        {
          return (nPercent <= .5) ? Transition(2 * nPercent) / 2 : (2 - Transition(2 * (1 - nPercent))) / 2;
        }
        function doWork()
        {
          var nTime = new Date().getTime();
          if (nTime < nStartTime + nDuration)
          {
            var nDelta = formel((nTime - nStartTime) / nDuration);
            var objOuter = document.getElementById(outer);
            objOuter.style.height = Math.round((nTo - nFrom) * nDelta + nFrom) + "px";
          }    
          else
          {
            bMoving = false;
            window.clearInterval(hdlSlide);
          }
        }
        this.slide = function(dir)
        {
          if(!bMoving)
          {
            bMoving = true;
            nStartTime = new Date().getTime();
            var objOuter = document.getElementById(outer);
            var objInner = document.getElementById(inner);
            nFrom = objOuter ? objOuter.offsetHeight : 0;
            nTo = dir ? objInner && objOuter.offsetHeight < objInner.offsetHeight ? objInner.offsetHeight : 0 : 0;
            hdlSlide = window.setInterval(doWork, 10);
          }
        }

      }
      var xxx = new slide("dyn", "dyn_inner");
    </script>
  </head>
  <body>
    <a href="#" onclick="xxx.slide(true); return false;">Starten</a>
    <a href="#" onclick="xxx.slide(false); return false;">Zurueck</a>
    <div id="dyn" onmouseover="xxx.slide(true); return false;" onmouseout="xxx.slide(false); return false;">
      <div id="dyn_inner">
        dsakcxjhwebintfuzcnsa
        <br />
        lfskdhjrsdgc
        <br />
        lkasjfghcirsdzgicsuzgjieudthgd
        <br />
        <br />
        aslkdjfcsiolzgucoelskjzgmxo
        <br />
        lösdjakjigfjciotrgfdjotrsugdjo
        <br />
        isduczhfiesrzugxhdiuxsezhgj8fdjz
        <br />
        skdjzfhgcifxsnug
        <br />
        
        <br />
        aksdjfhnchsdayjiomsufdxm
      </div>
    </div>
    noch mehr Text
  </body>
</html>

Hoffe ihr könnt mir helfen!

MFG

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
qap2

qap2 hat kostenlosen Webspace.

16:02, 19.12.2009
Eine andere, viel einfachere, bessere Lösung:
jQuery.
JQuery ist eine Javascript-Libary, mit eigenem Syntax, recht schnell zu lernen.
Da sind so Geschichten wie ausfahren von Div's mit einem Befehl erledigt.
http://jquery.com
Crossbrowser-tauglich.
Grüße,
dex (qap2-Team)
Autor dieses Themas
programtools

programtools hat kostenlosen Webspace.

7:22, 21.12.2009
aber da gibts nix zum seitlich ausfahren.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

Code umstellen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!