# Zeit und Differenz Zeit berechnen



## Guri (21. September 2014)

Hallo, ich Grüße euch,

ich will ein Projekt realiesieren seit einige Zeit, habe versucht durch Foren und Googlen zu realiesieren, kam nicht viel weiter, und hier Scuhe die Hilfe, aber bitte keine Antwort "Wie wers mit Suchen", ich bedanke mich im Voraus,

und jetzt zum meinen Projekt, sicht einfach und ich dachte auch das wird einfach, aber habe mich geirrt,
ich will berechnen lasen morgenszeit bis mittagzeit, 
und dann die vergangenezeit von morgens bis jetzt, 
und die verbliebenezeit bis mittags, 
und wenn jetzigezeit ist zwischen morgenszeit und mittagszeit sollte ein meldung ausgeben "Jetzt ist Vormittag" wenn nicht dann "Jetzt ist Anderezeit" usw. usf. ...

1. Zum ersten Punket will ich Folgenes:

```
morgens = "07:00:00";
mittags = "12:00:00";
heute = "2014/08/31 "
differenz = new Date(new Date(heute+mittags) - new Date(heute+morgens)).toGMTString().split(" ")[4];
alert( "Differenz: "+differenz );
```

- a. Wie berechne ich ohne die variable "heute", bessergesagt wie berechne morgens bis mittags ohne datum?
- b. Warum man beim variable "heute", ein leeres zeichen sein muss, um sowas zu funzionieren?
- c. Wie bekomme die heutige datum automatisch in die schreibweise form wie variable "heute"?

Ich bedanke mich im voraus für jede Hilfe, viele Grüße Guri.


----------



## Sempervivum (21. September 2014)

AFAIK kann man Date-Objekte nicht einfach subtrahieren sondern muss den Weg über getTime() gehen. Ich würde es so machen:

```
var jetzt = new Date();
var morgens = jetzt;
morgens.setHours(7);
morgens.setMinutes(0):
morgens.setMilliseconds(0);
var mittags = morgens;
mittags.setHours(12);
jetzt = jetzt.getTime();
morgens = morgens.getTime();
mittags = mittags.getTime()
differenz = mittags - morgens; // Differenz in Millisekunden
var vergangen = jetzt - morgens; // in Millisekunden
var verblieben = mittags - jetzt; // in Millisekunden
if (jetzt > morgens && jetzt < mittags) alert ("es ist Vormittag");

var jetzt = new Date();
var monat = jetzt.getMonth() + 1;
var tag = jetzt.getDate();
if (monat < 10) monat = "0" + monat;
if (tag < 10) tag = "0" + tag;
heuteStr = jetzt.getFullYear() + "/" + monat + "/" + tag;
```
Jetzt musst Du nur noch berücksichtigen, dass das Ergebnis bei vergangen und verblieben negativ sein kann.


----------



## alxy (21. September 2014)

Schau dir das mal an... http://momentjs.com/


----------



## Guri (22. September 2014)

Hallo und vielen Dank für die Hilfe,​
also dise script passt und klappt für heutige Datum.


Sempervivum hat gesagt.:


> ```
> var jetzt = new Date();
> var monat = jetzt.getMonth() + 1;
> var tag = jetzt.getDate();
> ...



Aber dise script unter enhält ein fehler irgend wo bestimmt ein kleiner fehler,
aber es ist ein sehr gute weg, es sollte irgenwie in dise richtun klappen, ich arbeite daran, 



Sempervivum hat gesagt.:


> ```
> var jetzt = new Date();
> var morgens = jetzt;
> morgens.setHours(7);
> ...



als ausgabe bei differenz, vergangen und verbliebene zeit bekomme 0,
weil die 3 werten morgens, mittags und jetzt haben das selbe zahl (ergebnis),
wo daran liege habe keine ahnung,

noch mal vielen Dank für die Hilfe und vile Grüße Guri.​


----------



## Sempervivum (22. September 2014)

Ahja, interessantes Problem. Der Grund ist, dass Javascript bei Zuweisungen mit Objekten nur die Referenz kopiert und nicht den Inhalt. Außerdem hatte ich die Sekunden vergessen. So ist es richtig:

```
var help = new Date();
var jetzt = help.getTime();
help.setHours(7);
help.setMinutes(0);
help.setSeconds(0);
help.setMilliseconds(0);
var morgens = help.getTime();
help.setHours(12);
var mittags = help.getTime()
var differenz = mittags - morgens; // Differenz in Millisekunden
var vergangen = jetzt - morgens; // in Millisekunden
var verblieben = mittags - jetzt; // in Millisekunden
```
Nichts ist so einfach, dass es nicht getestet werden müsste ;-)


----------



## ComFreek (22. September 2014)

Ich möchte nur kurz anmerken, dass bei euren Beispielen die Zeitzone vollkommen außer Acht gelassen wird.


----------



## Guri (22. September 2014)

Hallo und vielen vielen Dank,​jetzt ist Perfekt, es funktioniert, bis jetzt ist alles OK, 
ich versuche den nechte Schritt vom alleine zu realiezieren, 
wenn ich nicht kann, dann melde ich mich wieder, 
noch mal vielen viele Dank Sempervivum, viele Grüße Guri.​


----------



## Guri (2. Oktober 2014)

Hallo ich Grüße euch, brauch ich wieder hilfe,​
ich habe gegooglet und fand ein script die es funktioniert in kombination mit oberen script, vieleicht gibt noch bessere, aber ich fand disem einfacher hier:


```
var zieldatum = new Date(2014, 11, 31); // Monat-1
var ziel = zieldatum.getTime() / 86400000;
function zeitberechnen() {
var jetzt = new Date(); // aktuelles Datum
var heute = jetzt.getTime() / 86400000;
var tage = ziel - heute;
var stunden = (tage - Math.floor(tage)) * 24;
var minuten = (stunden - Math.floor(stunden)) * 60;
var sekunden = (minuten - Math.floor(minuten)) * 60;
var timer = setTimeout("zeitberechnen();", 1000);

document.getElementById("ausgabe").innerHTML = Math.floor(tage)+" Tage "+Math.floor(stunden)+":"+Math.floor(minuten)+":"+Math.floor(sekunden);

}
zeitberechnen();
```
aber habe ein problem, die ich von alleine nicht lösen könnte, sieht ein kleines problem aus aber ich fand kein lösung,

ich will in ausgabe wenn stunden, minuten oder sekunden unter 10 sind, ein 0 vor hinzufügen, habe versucht bei sekunden mit dise code:


```
var zieldatum = new Date(2014, 11, 31); // Monat-1
var ziel = zieldatum.getTime() / 86400000;
function zeitberechnen() {
var jetzt = new Date(); // aktuelles Datum
var heute = jetzt.getTime() / 86400000;
var tage = ziel - heute;
var stunden = (tage - Math.floor(tage)) * 24;
var minuten = (stunden - Math.floor(stunden)) * 60;
var sekunden = (minuten - Math.floor(minuten)) * 60;
var timer = setTimeout("zeitberechnen();", 1000);

if (Math.floor(sekunden) < 10) {sekunden = "0" + sekunden};

document.getElementById("ausgabe").innerHTML = Math.floor(tage)+" Tage "+Math.floor(stunden)+":"+Math.floor(minuten)+":"+Math.floor(sekunden);

}
zeitberechnen();
```


```
if (Math.floor(sekunden) < 10) {sekunden = "0" + sekunden};
```

Also mit dise code wenn man ein 0 hinzufugen will sieht man keine veränderung, aber wenn man will ein Zahl von 1 bis 9 es funktioniert,

mine Frage ist, wie löse es oder genau gesagt wie füge ich eine 0 davor wenn ein Zahl ist unter 10,

ich bedanke mich im Voraus für jede Hilfe, viele Grüße Guri.​


----------



## Sempervivum (2. Oktober 2014)

Du wendest Math.floor() auf den erweiterten Sekundenwert an. Dabei wird der String implizit in einen Float-Wert umgewandelt und die führende Null geht verloren. Ich würde gleich am Anfang die Werte in Int umwandeln:

```
var stunden = (tage - Math.floor(tage)) * 24);
var minuten = (stunden - Math.floor(stunden)) * 60;
var sekunden = (minuten - Math.floor(minuten)) * 60;
var timer = setTimeout("zeitberechnen();", 1000);
stunden = Math.floor(stunden);
minuten = Math.floor(minuten);
sekunden = Math.floor(sekunden);
if (sekunden < 10) {sekunden = "0" + sekunden};

document.getElementById("ausgabe").innerHTML = Math.floor(tage)+" Tage "+stunden+":"+minuten+":"+sekunden;
```


----------



## Guri (2. Oktober 2014)

Hallo, und vielen vielen Dank für die schnelle Hilfe, es funktioniert perfekt, Danke und viele Grüße Guri.


----------



## Guri (5. Oktober 2014)

Hallo, bin wieder da, komme nicht weiter von alleine,

ist folgenes, ich will die zehler in cirles form ausgeben lassen, vileicht gibt noch ein bessere und optiemirtes script, aber habe ich ein script gefunden, hier:

```
(function() {

  var requestAnimFrame = window.requestAnimationFrame  ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame  ||
      window.oRequestAnimationFrame  ||
      window.msRequestAnimationFrame  ||
      function (callback) {
        setTimeout(callback, 1000 / 60);
      },

  Circles = window.Circles = function(options) {
  var elId = options.id;
  this._el = document.getElementById(elId);

  if (this._el === null) return;

  this._radius  = options.radius || 10;
  this._duration  = options.duration === undefined ? 500 : options.duration;

  this._value  = 0;
     this._maxValue  = options.maxValue || 100;

  this._text  = options.text === undefined ? function(value){return this.htmlifyNumber(value);} : options.text;
  this._strokeWidth  = options.width  || 10;
  this._colors  = options.colors || ['#EEE', '#F00'];
     this._svg  = null;
     this._movingPath  = null;
     this._wrapContainer  = null;
  this._textContainer  = null;

     this._wrpClass  = options.wrpClass || 'circles-wrp';
     this._textClass  = options.textClass || 'circles-text';

  var endAngleRad  = Math.PI / 180 * 270;
  this._start  = -Math.PI / 180 * 90;
  this._startPrecise  = this._precise(this._start);
  this._circ  = endAngleRad - this._start;

  this._generate().update(options.value || 0);
  };

  Circles.prototype = {
  VERSION: '0.0.5',

  _generate: function() {

  this._svgSize  = this._radius * 2;
  this._radiusAdjusted = this._radius - (this._strokeWidth / 2);

      this._generateSvg()._generateText()._generateWrapper();

      this._el.innerHTML = '';
  this._el.appendChild(this._wrapContainer);

      return this;
  },

  _setPercentage: function(percentage) {
       this._movingPath.setAttribute('d', this._calculatePath(percentage, true));
       this._textContainer.innerHTML   =   this._getText(this.getValueFromPercent(percentage));
  },

  _generateWrapper: function() {
     this._wrapContainer   =   document.createElement('div');
       this._wrapContainer.className = this._wrpClass;
       this._wrapContainer.style.position   =   'relative';
       this._wrapContainer.style.display   =   'inline-block';

       this._wrapContainer.appendChild(this._svg);
       this._wrapContainer.appendChild(this._textContainer);

       return this;
  },

  _generateText: function() {

       this._textContainer = document.createElement('div');
       this._textContainer.className = this._textClass;

       var style   =   {
         position:  'absolute',
         top:  0,
         left:  0,
         textAlign:  'center',
         width:  '100%',
         fontSize:  (this._radius * .7) + 'px',
         height:  this._svgSize + 'px',
         lineHeight: this._svgSize + 'px'
       };

       for(var prop in style) {
         this._textContainer.style[prop]   =   style[prop];
  }

      this._textContainer.innerHTML   =   this._getText(0);
      return this;
  },

     _getText: function(value) {
       if (!this._text) return '';

       if (value === undefined) value = this._value;

       value = parseFloat(value.toFixed(2));

       return typeof this._text === 'function' ? this._text.call(this, value) : this._text;
     },

  _generateSvg: function() {

      this._svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      this._svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      this._svg.setAttribute('width', this._svgSize);
      this._svg.setAttribute('height', this._svgSize);

      this._generatePath(100, false, this._colors[0])._generatePath(1, true, this._colors[1]);

      this._movingPath = this._svg.getElementsByTagName('path')[1];

      return this;
  },

  _generatePath: function(percentage, open, color) {
     var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       path.setAttribute('fill', 'transparent');
       path.setAttribute('stroke', color);
       path.setAttribute('stroke-width', this._strokeWidth);
       path.setAttribute('d',  this._calculatePath(percentage, open));

       this._svg.appendChild(path);

       return this;
  },

  _calculatePath: function(percentage, open) {
  var end  = this._start + ((percentage / 100) * this._circ),
  endPrecise = this._precise(end);
  return this._arc(endPrecise, open);
  },

  _arc: function(end, open) {
  var endAdjusted = end - 0.001,
  longArc  = end - this._startPrecise < Math.PI ? 0 : 1;

  return [
  'M',
  this._radius + this._radiusAdjusted * Math.cos(this._startPrecise),
  this._radius + this._radiusAdjusted * Math.sin(this._startPrecise),
  'A', // arcTo
  this._radiusAdjusted, // x radius
  this._radiusAdjusted, // y radius
  0, // slanting
  longArc, // long or short arc
  1, // clockwise
  this._radius + this._radiusAdjusted * Math.cos(endAdjusted),
  this._radius + this._radiusAdjusted * Math.sin(endAdjusted),
  open ? '' : 'Z' // close
  ].join(' ');
  },

  _precise: function(value) {
  return Math.round(value * 1000) / 1000;
  },

     /*== Public methods ==*/

     htmlifyNumber: function(number, integerPartClass, decimalPartClass) {

       integerPartClass = integerPartClass || 'circles-integer';
       decimalPartClass = decimalPartClass || 'circles-decimals';

       var parts = (number + '').split('.'),
        html  = '<span class="' + integerPartClass + '">' + parts[0]+'</span>';

       if (parts.length > 1) {
  html += '.<span class="' + decimalPartClass + '">' + parts[1].substring(0, 2) + '</span>';
  }
       return html;
     },

     updateRadius: function(radius) {
      this._radius = radius;

       return this._generate().update(true);
     },

  updateWidth: function(width) {
      this._strokeWidth = width;

      return this._generate().update(true);
  },

  updateColors: function(colors) {
       this._colors = colors;

       var paths = this._svg.getElementsByTagName('path');

       paths[0].setAttribute('stroke', colors[0]);
       paths[1].setAttribute('stroke', colors[1]);

    return this;
  },

     getPercent: function() {
    return (this._value * 100) / this._maxValue;
     },

     getValueFromPercent: function(percentage) {
    return (this._maxValue * percentage) / 100;
     },

  getValue: function()
  {
     return this._value;
  },

   getMaxValue: function()
   {
    return this._maxValue;
   },

     update: function(value, duration) {
      if (value === true) {//Force update with current value
        this._setPercentage(this.getPercent());
        return this;
      }

      if (this._value == value || isNaN(value)) return this;
  if (duration === undefined) duration = this._duration;

      var self  = this,
        oldPercentage = self.getPercent(),
        delta  = 1,
        newPercentage, isGreater, steps, stepDuration;

      this._value = Math.min(this._maxValue, Math.max(0, value));

      if (!duration) {//No duration, we can't skip the animation
        this._setPercentage(this.getPercent());
        return this;
      }

      newPercentage  = self.getPercent();
      isGreater  = newPercentage > oldPercentage;

      delta  += newPercentage % 1; //If new percentage is not an integer, we add the decimal part to the delta
      steps  = Math.floor(Math.abs(newPercentage - oldPercentage) / delta);
      stepDuration  = duration / steps;


      (function animate(lastFrame) {
    if (isGreater)
        oldPercentage += delta;
    else
        oldPercentage -= delta;

    if ((isGreater && oldPercentage >= newPercentage) || (!isGreater && oldPercentage <= newPercentage))
    {
         requestAnimFrame(function(){ self._setPercentage(newPercentage); });
         return;
        }

        requestAnimFrame(function() { self._setPercentage(oldPercentage); });

        var now  = Date.now(),
          deltaTime = now - lastFrame;

        if (deltaTime >= stepDuration) {
          animate(now);
  } else {
          setTimeout(function() {
          animate(Date.now());
          }, stepDuration - deltaTime);
        }

      })(Date.now());

      return this;
     }
  };

  Circles.create = function(options) {
  return new Circles(options);
  };
})();
```

functioniert wunderbar mit obigen scripten, nur die 0 geht verloren, zeigt jede belibige zahl aber keine 0 vor dem zahl, hier:

```
var myCircle = Circles.create({
     id:  'circles',
     radius:  60,
     value:  00,
     maxValue:  60,
     width:  10,
     text:  function(value){return value + 's.';},
     colors:  ['#D3B6C6', '#4B253A'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })
```

bei *value* zeigt die ausgabe, und immer die *0* vor 0 oder eine andere zahl *0* verloren geht, könnte von alleine nicht lösen, daswegen ich bitte um eure hilfe, ich bedanke mich im voraus für jede hilfe, viele grüße Guri.


----------



## Sempervivum (5. Oktober 2014)

Ganz einfach: In der Callback-Funktion kannst Du den Wert beliebig modifizieren:

```
var myCircle = Circles.create({
   id: 'circles',
   radius: 60,
   value: 00,
   maxValue: 60,
   width: 10,
   text: function (value) { if (value < 10) value = '0' + value;
                                        return value + 's.'; },
   colors: ['#D3B6C6', '#4B253A'],
   duration: 0,
   wrpClass: 'circles-wrp',
   textClass: 'circles-text'
});
```


----------



## Guri (5. Oktober 2014)

Es war einfach, vielen vielen Dank Sempervivum.​
Jetz will ich zum nechten schritt, ich habe sogar geschaft, aber geht bestimmt einfach, so ist meine lösung:

```
var myCircle = Circles.create({
     id:  'circles1',
     radius:  25,
     value:  stunden,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 's.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

var myCircle = Circles.create({
     id:  'circles2',
     radius:  25,
     value:  minuten,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 'm.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })

var myCircle = Circles.create({
     id:  'circles3',
     radius:  25,
     value:  sekunden,
     maxValue:  60,
     width:  5,
     text:  function (value) { if (value < 10) value = '0' + value; return value + 's.'; },
     colors:  ['#FF0', '#F00'],
     duration:  0,
     wrpClass:  'circles-wrp',
     textClass:  'circles-text'
   })
```

Es funktioniert, aber mit disem code brauche ich 3x ID in html, so:

```
<div id="circles1"></div>
<div id="circles2"></div>
<div id="circles3"></div>
```

Aber ich will in ein ID, und viele eingeschaften sind gleich kann man sparen, irgendnwie kann man deffiniern und optiemieren,

3x brauche die value 1x für stunden 1x für minuten und 1x für sekunden
und 2 mal maxValue 2x für sekunden und minuten und 1x für stunden,
sonst bleibt alles gleich,

wie optimiere alles und wie bringe alle 3 in ein ID, so:

```
<div id="circles"></div>
```

und als ausgabe in ID, so:

```
document.getElementById("circles").innerHTML = stunden + minuten + sekunden;
```

ich bedanke mich im Voraus für die Hilfe, viele Grüße Guri.​


----------



## Sempervivum (5. Oktober 2014)

Wenn Du drei Kreise haben willst, wirst Du wohl nicht daran vorbei kommen, drei Divs anzulegen und dreimal die Funktion aufzurufen. Oder Du legst die Parameter in einem Array ab und rufst die Funktion in einer Schleife auf. Aber ich finde, bei drei Aufrufen lohnt sich das noch nicht.
Oder Du schreibst eine Wrapper-Funktion nur mit den veränderlichen Parametern ID, Wert, Maximalwert und Einheit und rufst diese dann dreimal auf.
Oder willst Du nur einen Kreis haben mit der ganzen Uhrzeit?
BTW: Ich meine, bei den Stunden muss der Maximalwert 24 betragen.


----------



## Guri (5. Oktober 2014)

Ja ich will 3 kreise haben so wie hir in beispiel bild:







das stimmt bei stunden habe ich mich vertan sollte 24 und nicht 60 sein,
und mit Array, Schleifen, Parameter usw. kenne ich mich nicht aus, habe ich keine iden.


----------



## Sempervivum (5. Oktober 2014)

Dann zeige ich dir mal die Lösung mit der Wrapperfunktion:

```
function wrapCircles (idc, val, maxVal, dim) {
    var myCircle = Circles.create({
         id:  idc,
         radius:  25,
         value:  val,
         maxValue: maxVal,
         width:  5,
         text:  function (value) { if (value < 10) value = '0' + value; return value + dim; },
         colors:  ['#FF0', '#F00'],
         duration:  0,
         wrpClass:  'circles-wrp',
         textClass:  'circles-text'
       });
       return myCircle;
    }
var myCircleStd = wrapCircles ('circles1', stunden, 24, 'std.');
var myCircleMin = wrapCircles ('circles2', minuten, 60, 'min.');
var myCircleSek = wrapCircles ('circles3', sekunden, 60, 'sek.');
```
Ist schon viel kompakter, nicht wahr?
Wenn Du dich so intensiv mit Skripts beschäftigst, würde ich dir allerdings empfehlen, Javascript zu lernen.


----------



## Guri (5. Oktober 2014)

Vielen Dank, es funktioeniert mit 3 DIVs Perfekt, 

in bezug zu lernen JS habe es versucht, hat nicht geklapt, habe sogar DVDs gekauft von V2B hat trozdem nicht geklapt, 
ich wollte Web-Programmierer und Web-Gestalter werden hat leider nicht funtioniert, schade, 
und was brauche ich für mich selber so kleinigeiten suche mich hilfe in internet oder in foren und meistens finde ich es, 

aber interesiert mich trozdem, wie realiesirt man mit ein DIV, vermute ich mit array, for schleife, length und function, 

es könnte so sein:

```
myArray = [ irgendwas hier kommt ]
for (var i = 0; i <= circles.length;  i++) {
irgendwas hier kommt bestimmt
}
function ( ) {
irgendwas hier kommt auch
}
document.getElementById("circles").innerHTML = stunden + minuten + sekunden;
```

es wurde das Projekt alles raliesiert wie habe mich gewünscht, natürlich mit deine hilefe, ich sage noch mal vieln Dank und Respekt, viele Grüße Guri.


----------



## Sempervivum (5. Oktober 2014)

Schade, dass deine Versuche, JS zu lernen, nicht erfolgreich waren. Vielleicht waren DVDs nur die falschen Medien. Ich persönlich komme am besten mit Online-Anleitungen zurecht.
Das ganze Skript mit dem Kreis basiert darauf, dass es *ein* Kontainer ist. Es wäre sehr aufwändig, es umzustellen und dann nicht mehr flexibel. IMO ist es aber kein Problem mit mehreren DIVs  und Instanzen des Skripts zu arbeiten.
Dein Ansatz mit dem Array ist aber gar nicht verkehrt. Man müsste die variablen Parameter hineinschreiben und dann in einer Schleife das Skript aufrufen:

```
myArray = [{idc: 'circle1', val: stunden, maxVal: 24, dim: 'std.'}, // usw.
var myCircles = [];
for (var i = 0; i <= myArray.length;  i++) {   
    myCircles[i] = Circles.create({
         id:  myArray[i].idc,
         radius:  25,
         value: myArray[i].val,
         maxValue: myArray[i].maxVal,
         width:  5,
         text:  function (value) { if (value < 10) value = '0' + value; return value + myArray[i].dim; },
         colors:  ['#FF0', '#F00'],
         duration:  0,
         wrpClass:  'circles-wrp',
         textClass:  'circles-text'
       });
}
```
Aber, wie gesagt, ich finde, bei drei Instanzen lohnt sich das noch nicht richtig. Man könnte auch die Divs mit Javascript erzeugen:

```
var currentDiv[i] = document.createElement("div");
currentDiv[i].id = "circle" + i;
currentDiv[i].height = 120;
currentDiv[i].width = 120;
document.body.appendChild(currentDiv);
```
Siehe hier:
http://www.html-seminar.de/javascript-dom-eingreifen.htm
Der Eintrag idc im Array kann dann entfallen. Geht analog auch in der Wrapper-Funktion.
Du siehst, beim Programmieren gibt es fast immer mehrere Wege, die zum Ziel führen, hier das Array und die Wrapperfunktion.


----------



## Guri (5. Oktober 2014)

Vielen vielen Danke ist alles in Ordnung, ich werde mit 3 DIVs erledigen,
jetzt sind untereinandre, ich werde alle 3 in ein Kontainer packen und floten lassen per CSS, und dann werden die 3 nebeneinandere, und ist die ganze sache erledigt,
noch mal vielen vielen Dank und viele Grüße Guri.


----------



## Sempervivum (5. Oktober 2014)

Nachdem wir uns so intensiv damit beschäftigt haben, würde es mich interessieren, was das für ein Projekt ist, an dem Du arbeitest. Würdest Du vielleicht mal die URl posten, wenn es fertig ist?


----------



## Guri (6. Oktober 2014)

Sempervivum hat gesagt.:


> Nachdem wir uns so intensiv damit beschäftigt haben, würde es mich interessieren, was das für ein Projekt ist, an dem Du arbeitest. Würdest Du vielleicht mal die URl posten, wenn es fertig ist?



Hallo,​ja gerne ich stelle ein *link zu disen projekt*, ist nicht ganz fertig, fehlt noch stylen und noch klenikeiten,
*habe trozdem auf server geladen nur als test*, aber kommen noch mehrere sachen dazu, momental die seite ist blank, muss ich noch gestalten (erstellen),
aber daurt einige zeit, vielleicht bis ende des Jahres werde ich fertig,
bestimmt brauche ich noch hilfe um *responsive* zu machen (css-xml-php-html-js),
habe gelesen direkt mit php ist nicht möglich, und möglich ist mit hilfe von javascript und dann habe dises script gefunden in internet, aber habe noch nicht richtig getestet:


```
if (window.matchMedia("(max-width:320px)").matches) {
    alert("mobile");
    self.location='mobile.php';
}
else if (window.matchMedia("(max-width:768px)").matches) {
    alert("tablets");
    self.location='tablets.php';
}
else if (window.matchMedia("(min-width:769px)").matches) {
    alert("desktop");
    self.location='desktop.php';
}
else {
    alert("unbekant");
}
var myMobile = window.matchMedia("(min-width:320px)");
var myTablets = window.matchMedia("(max-width:768px)");
var myDesktop = window.matchMedia("(min-width:769px)");
```

Danke noch mal für die Hilfe, viele Grüß Guri.​


----------



## ComFreek (6. Oktober 2014)

Guri hat gesagt.:


> habe gelesen direkt mit php ist nicht möglich


Du meinst wahrscheinlich, dass die Erkennung der Bildschirmgröße via PHP nicht möglich ist. Das stimmt, da der Browser bei der Serveranfrage solch eine Information nicht sendet.

Responsive bedeutet für mich (so wie es auch tausend Mal als Schlagwort benutzt wird), dass sich die Seite automatisch, d. h. ohne Weiterleitung, nur mit purem CSS und vielleicht etwas JS, der Bildschirmgröße anpasst.
Schau dir mal Bootstrap an: http://getbootstrap.com/
Vielleicht ist das was für dich und du kannst es als Grundlage deiner Seite benutzen.


----------



## Guri (6. Oktober 2014)

Hallo, nach maine info were nicht mglich, nach meine wünschen, nur mit css oder php,
mit bootstrap, less, sass oder so was habe mal gelesen aber für mich ist komplieziert,
ich werde 3x layot erstellen, und jede layot sieht anderes aus, 1x für moblie 1x für tablets und 1x für desktop,

und nur mit css so:

```
@media only screen and
(max-width:320px){ mobile-css-code }
@media only screen and
(min-width:321px) and
(max-width:768px){ tablets-css-code }
@media only screen and
(min-width:769px) { desktop-css-code }
```
so könnte es klappen aber nicht wie ich es möchte,

möglich ist auch durch importieren, beispel: wenn browser ist 320px oder kleine importiere mobile.php, oder wie in obigen beispiel,
moglich ist auch das man alle drei layots laden lässt und durch javascript einblend und ausblenden je nach browser größe,

aber wie mit css oder javascript kann php nicht umgehen, nach meine info, vielleicht doch,
und diese tema gehört wo anderes und nicht hier, sonst wird All in One,

grüß Guri.


----------

