Benutzer:J*/Labor/Archiv/Datumswähler.js: Unterschied zwischen den Versionen

aus Kamelopedia, der wüsten Enzyklopädie
Zur Navigation springen Zur Suche springen
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 12: Zeile 12:
 
     init: function () {
 
     init: function () {
 
         s.info = $("sliderinfo");
 
         s.info = $("sliderinfo");
 +
        s.info2 = $("sliderinfo2");
 
         s.case = $("slidercase");
 
         s.case = $("slidercase");
 +
        s.back = $("sliderback");
 
         s.slider = $("slider");
 
         s.slider = $("slider");
 
         s.slider2 = $("slider2");
 
         s.slider2 = $("slider2");
Zeile 24: Zeile 26:
 
             y > s.top  && y < s.top  + s.case.offsetHeight )
 
             y > s.top  && y < s.top  + s.case.offsetHeight )
 
         {
 
         {
             var dx = x - s.left - 1 ;
+
             s.dx = x - s.left - 1 ;
             var px = dx / ( s.case.offsetWidth - 2 );
+
             s.px = s.dx / ( s.case.offsetWidth - 2 );
             var date = s.calcTime(px);
+
             s.date = s.calcTime(s.px);
             var dateInfo = "";
+
             s.dateInfo = "";
             dateInfo += date.getDate() + ". ";
+
             s.dateInfo += s.date.getDate() + ". ";
             dateInfo += ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"][date.getMonth()] + " ";
+
             s.dateInfo += ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"][s.date.getMonth()] + " ";
             dateInfo += date.getFullYear();
+
             s.dateInfo += s.date.getFullYear();
             s.info.innerHTML = dateInfo;
+
             s.info.innerHTML = s.dateInfo;
             s.slider.style.left = (dx - 1 ) + "px";
+
             s.slider.style.left = (s.dx - 1 ) + "px";
 
             s.slider.style.display = "block";
 
             s.slider.style.display = "block";
 
              
 
              
Zeile 44: Zeile 46:
 
     calcTime: function (p) {
 
     calcTime: function (p) {
 
         return new Date( ( (s.today - s.birth) * p + s.birth ) * 1000 );
 
         return new Date( ( (s.today - s.birth) * p + s.birth ) * 1000 );
 +
    },
 +
    click: function (e) {
 +
        s.move(e);
 +
        s.info2.innerHTML = s.dateInfo;
 +
        s.slider2.style.left = (s.dx - 2 ) + "px";
 
     }
 
     }
 
}
 
}
  
s.init();
+
 
  
 
function initSlider()
 
function initSlider()
 
{
 
{
 +
    s.init();
 
     window.onmousemove = s.move;
 
     window.onmousemove = s.move;
 
+
    s.case.onclick = s.click;
 
     s.birth = parseInt( $("t_birth").innerHTML );
 
     s.birth = parseInt( $("t_birth").innerHTML );
 
     s.today = parseInt( $("t_today").innerHTML );
 
     s.today = parseInt( $("t_today").innerHTML );
 +
    var b = new Date ( s.birth * 1000 );
 +
    var t = new Date ( s.today * 1000 );
 +
    s.back.innerHTML="";
 +
    for (var x=b.getFullYear(); x<t.getFullYear(); x++)
 +
    {
 +
        var e = document.createElement("DIV");
 +
        e.style.position = "absolute";
 +
        e.style.height = "100%";
 +
        e.style.width = "100%";
 +
        e.innerHTML = x+1;
 +
        e.style.margin = "0px";
 +
        e.style.padding = "0px";
 +
        e.style.borderLeft = "1px darkblue solid";
 +
        e.style.color = "darkblue";
 +
        e.style.top = "0px";
 +
        e.style.width = "5em";
 +
        e.style.left = ( (new Date(x+1,0,1) - b) / ( t - b ) * (s.case.offsetWidth - 2) ) + "px";
 +
        s.back.appendChild(e);
 +
    }
 
}
 
}
  
 
// später mit onLoadHook
 
// später mit onLoadHook
 
initSlider()
 
initSlider()

Aktuelle Version vom 3. Juni 2009, 16:35 Uhr

function getTotalOffset( element, offsetType, sum )
{
    if ( element.offsetParent != null )
        sum += getTotalOffset( element.offsetParent, offsetType, sum );
    return sum + element[offsetType];
}

Node.prototype.getTotalOffsetTop = function () { return getTotalOffset( this, "offsetTop", 0 ); };
Node.prototype.getTotalOffsetLeft = function () { return getTotalOffset( this, "offsetLeft", 0 ); };

var s = {
    init: function () {
        s.info = $("sliderinfo");
        s.info2 = $("sliderinfo2");
        s.case = $("slidercase");
        s.back = $("sliderback");
        s.slider = $("slider");
        s.slider2 = $("slider2");
        s.top = s.case.getTotalOffsetTop();
        s.left = s.case.getTotalOffsetLeft();
    },
    move: function (e) {
        var x = document.all ? window.event.clientX : e.pageX;
        var y = document.all ? window.event.clientY : e.pageY;
        if ( x > s.left && x < s.left + s.case.offsetWidth &&
             y > s.top  && y < s.top  + s.case.offsetHeight )
        {
            s.dx = x - s.left - 1 ;
            s.px = s.dx / ( s.case.offsetWidth - 2 );
            s.date = s.calcTime(s.px);
            s.dateInfo = "";
            s.dateInfo += s.date.getDate() + ". ";
            s.dateInfo += ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"][s.date.getMonth()] + " ";
            s.dateInfo += s.date.getFullYear();
            s.info.innerHTML = s.dateInfo;
            s.slider.style.left = (s.dx - 1 ) + "px";
            s.slider.style.display = "block";
            
        }
        else
        {
            s.info.innerHTML = "Kein Datum ausgewählt.";
            s.slider.style.display = "none";
        }
    },
    calcTime: function (p) {
        return new Date( ( (s.today - s.birth) * p + s.birth ) * 1000 );
    },
    click: function (e) {
        s.move(e);
        s.info2.innerHTML = s.dateInfo;
        s.slider2.style.left = (s.dx - 2 ) + "px";
    }
}



function initSlider()
{
    s.init();
    window.onmousemove = s.move;
    s.case.onclick = s.click;
    s.birth = parseInt( $("t_birth").innerHTML );
    s.today = parseInt( $("t_today").innerHTML );
    var b = new Date ( s.birth * 1000 );
    var t = new Date ( s.today * 1000 );
    s.back.innerHTML="";
    for (var x=b.getFullYear(); x<t.getFullYear(); x++)
    {
        var e = document.createElement("DIV");
        e.style.position = "absolute";
        e.style.height = "100%";
        e.style.width = "100%";
        e.innerHTML = x+1;
        e.style.margin = "0px";
        e.style.padding = "0px";
        e.style.borderLeft = "1px darkblue solid";
        e.style.color = "darkblue";
        e.style.top = "0px";
        e.style.width = "5em";
        e.style.left = ( (new Date(x+1,0,1) - b) / ( t - b ) * (s.case.offsetWidth - 2) ) + "px";
        s.back.appendChild(e);
    }
}

// später mit onLoadHook
initSlider()