Beiträge von Basi

Moved.

Code bitte.

Microsoft hat einiges aufzuholen und derzeit sind sie mit enormem Ehrgeiz dabei.

Was in letzter Zeit ans Licht kam wirkt auf mich sehr solide, die neuesten Softwareupdates sind sehr gut was Performance und Benutzerfreundlichkeit betrifft.

Cortana ist derzeit das aktuellste was Microsoft auf den Markt gebracht hat und ist ein extrem gut gelungener Nachbau von z.B. Siri von Apple. Ich persönlich bin von Cortana (bisher leider nicht für Deutschland erhältlich) mehr als überzeugt, ich habe selten eine so gute Sprachsteuerung gesehen die nicht tausende von Euro kostet.

Cortana wird auch in Windows 10 eine tragende Rolle spielen und auch im Spartan Browser präsent sein, von daher bin ich noch mehr der Überzeugung das dieser Browser etwas taugen wird.

Eine aktuelle Render Engine ist bitter nötig. Der IE ist sehr in Verruch geraten, das hat aber auch seinen Grund. Die Engine ist uralt und damals hatte Microsoft einen immensen Marktanteil, viele Großkunden haben auf MS Geräte und Software gesetzt und nutzen diese bis heute, da sind große Veränderungen in der Engine selber nicht so einfach umzusetzen wie bei anderen großen Browsern.

Wer sich mal die Zeit nimmt einige Einstellungen vorzunehmen wird schnell bemerken das die aktuelle IE Version durchaus mithalten kann was Performance und Benutzerfreundlichkeit angeht. Die Sicherheit bleibt diskutabel was aber auch nicht verwunderlich ist da der IE auf jedem MS Gerät installiert ist und somit einen relativ gleichmäßig schwer zu knackenden Zugang zu eben diesen Systemen bietet. Spartan wird voraussichtlich keine Pflicht und könnte somit auch im Punkt Sicherheit ins Schwarze treffen.

Dann bleiben noch die Dinge des Geschmackes. Ich persönlich mag das schlichte MS Design, es ist nicht alles bunt und glitzernd animiert und schwebt von einer Ecke zur anderen. Es gibt eine klare Linie und die wird gehalten, selbst von den meisten (guten) Anbietern von Windows Store Apps. Auch preislich finde ich das MS immer noch punkten kann (bis auf einige Ausnahmen, Office ist zu teuer für Privatpersonen!).

Warum denn eine Vereinfachung? Findest du das kompliziert? Man kann nun mal nicht immer alles mit einer Zeile Code lösen.

Wenn's schön aussehen soll kannst du ja ein Herz draus machen:

var CatSelect =                         /*#######*/
       document.getElementById("cat");         /*######################*/
    /*#################################*/  /*##############################*/
   /*#######################################################################*/
  /*#########################################################################*/
  /*#########################################################################*/
   /*######################################################################*/
     var CatText = CatSelect.options[CatSelect.selectedIndex].text;/*####*/ 
      var SubCatSelect = document.getElementById("subcat");/*##########*/
        var SubCatText = /*##########################################*/
          SubCatSelect.options[SubCatSelect.selectedIndex].text;/*#*/
            var data = form.serialize() + '&CatText='/*##########*/
               + CatText + '&SubCatText='/*####################*/
                  /*##*/ + SubCatText;/*####################*/
                    /*####################################*/
                       /*##############################*/
                         /*#########################*/
                            /*##################*/
                                /*###########*/
                                  /*#######*/
                                    /*###*/
                                     /**/
                                      //                                                                                  Hier ist auch noch Text!

Aber mal Spaß beiseite. Wenn du das Ganze etwas übersichtlicher gestalten möchtest würde ich eine Funktion empfehlen:

function readOption(element) {
        return {
            text: element.options[element.selectedIndex].text,
            value: element.options[element.selectedIndex].value
        };
    }

Jetzt kannst du beliebig viele Select Elemente immer wieder durch readOption() auslesen, so zum Beispiel:

<form name="formular">
        <select name="foo" id="cat">
            <option value="1">Irgendein Text</option>
            <option value="2">Anderer Text</option>
        </select>
        <input type="submit" name="submit">
    </form>

var CatSelect = document.forms.formular.foo;
    var Cat = readOption(CatSelect);




    var data = "&CatText=" + Cat.text +"&CatValue=" + Cat.value;

// Oder in nicht ganz so schön aber auch funktionsfähig:
    var Cat = document.forms.formular.foo;
    var data = "&CatText=" + readOption(Cat).text + "&CatValue=" + readOption(Cat).value;

Es ist nicht nötig seine Scripts kurz zu halten, man muss auch schon mal weiter ausholen (gerade bei JavaScript mit Browserweichen, z.B. ermitteln von Mausbewegung unter Berücksichtigung von Touch-Geräten). Wenn du dem Benutzer am Ende wirklich den Bruchteil einer tausendstel Sekunde sparen willst kannst du vor dem online stellen immer noch Leerzeichen entfernen und deine Funktionen einfach mit Buchstaben benennen:

var a = document.forms.formular.a;
    var b = "&CatText=" + c(a).d + "&CatValue=" + c(a).e;

Zitat von Basiii

HTML

[...]
    <div.... data-min=... data-max=... data-x-position=....>
[...]

Du kannst da alphanummerisch machen was du möchtest. "data-" ist nur ein Prefix.

data-irgendwas
data-irgendwas-anderes
data-brauchst-du-noch-mehr-beispiele

Data? Ein wunderbares Zeug wie ich finde

Weil ich mit der Formatierung des input-range Elementes nicht zufrieden war habe ich so etwas kurzerhand selbst gebastelt, hierzu habe ich sehr gerne auf data zurückgegriffen:

<div id="slideBar">
    <div id="slider" data-min="0" data-max="360" data-x-position="0"></div>
</div>

Hierbei berechnet sich der data-x-position Wert aus der Position des #slider in Relation zur Breite des #slideBar. Ein wunderbarer Zwischenspeicher, nun kann ich jederzeit auf diesen Wert zurückgreifen ohne ihn per JavaScript namespace-übergreifend abzuspeichern, fast schon schummeln.

Viele JavaScript Frameworks und API's bieten den Entwicklern damit auch einfache Möglichkeiten Werte zu übergeben ohne Script-Quellcode zu ändern oder den Code invalide zu machen.

Wenn deine Section keiner Überschrift bedarf ist Section wohl das falsche Element an dieser Stelle. Demnach solltest du keine Überschrift hinein schmuggeln sondern ein passendes Element finden. Um was für einen Bereich handelt es sich denn? Uns fällt sicher etwas ein, Code wäre ganz hilfreich.

Using experimental feature: HTML5 Conformance Checker erhält jeder der seinen Code als HTML5 validiert, dies liegt einfach daran das der Algorithmus für die Validierung von HTML5 noch nicht komplett ausgereift ist, kannst du also bedenkenlos ignorieren.

Nein ganz so einfach ist es nicht, du sagtest ja in deinem Beispiel soll (so wie ich das verstanden habe) der data-x Wert mit 170vh in Pixel umgerechnet bestückt werden, nun schau dir bitte mal den 39 zeiligen Quellcode aus meinem letzten Beitrag genauer an, ich ging vor wie folgt:

170vh entspricht 170% viewport height, also 1,7 mal die Fensterhöhe.

Jetzt können wir mittels JavaScript die aktuelle Höhe des Viewports feststellen (die Funktion von Zeile 27 - 39 erledigt das für uns).

Alles was wir jetzt noch machen müssen ist die Höhe des Viewports zu nehmen und im Dreisatz auf 170% kalkulieren.

z.B.: Die Funktion teilt uns mit die Viewport-Höhe beträgt 980px, wir rechnen diese Zahl nun durch 100 um auf 1% zu kommen, ergibt 9,8, jetzt noch mit den 170% mal nehmen ergibt 1666 Pixel. Wir wissen nun das 170% der Viewporthöhe 1666 Pixel entspricht, also 170vh = 1666px.

Diesen Wert können wir dann in data-x eintragen.

Wieso sollte man seine Schriftgröße nicht wie gewohnt durch font-size definieren und was hat das mit font-face zu tun?

Was genau ist jetzt das Problem? Und wo liegt bei dir der Unterschied zwischen Testdatei und Ernstfall?

Du musst etwas mehr Informationen raus rücken was schief gelaufen ist, es handelt sich ja offenbar auch nicht um den gleichen Quellcode.

Wenn es dir um die Verschiebung im Quellcode geht: Das ist sicher ärgerlich aber völlig egal, zum Zeitpunkt der Ausgabe muss der Quellcode für den Menschen nicht mehr lesbar sein.

Style Informationen aus nicht-inline Styles auslesen kannst du wie folgt:

var element = document.getElementsById("bored");
    var styleWidth = window.getComputedStyle(element).getPropertyValue("width");

In der Rückgabe enthalten sind jedoch auch angaben wie px, vh oder %, daher hier ein Weg wie man die Zahl konvertieren kann:

// Eingabe String (Wie eben gezeigt auslesen)
    var inputString = "300.33px";




    // Ein Array für den neuen String
    var outputString = new Array();




    // var inputString als Array durchlaufen
    for (var i = 0; i < inputString.length; i++) {




        // Prüfen ob aktuelles Element eine Zahl oder ein Punkt ist 
        // (wegen Kommazahlen, z.B. "300.5px")
        if (!isNaN(parseFloat(inputString[i])) || "." == inputString[i]) {




            // Wenn Prüfung erfolgreich schreibe die Zahl in outputString
            outputString.push(inputString[i]);




        }                                
    }




    // outputString zusammenführen und von String zu Float konvertieren
    outputString = parseFloat(outputString.join(""));

Wenn du die Höhe jetzt noch entsprechend der Höhe des Fensters in Relation zur Angabe von z.B. vh setzen möchtest ginge das so:

// Die ausgelesene Höhe
    var elementHeightOriginal = "170vh";




    // Prüfe ob "vh" in Variable vorhanden
    if (elementHeightOriginal.indexOf("vh")) {
        var vhFound = true;
    }




    // Hier wie eben gezeigt die Zahl extrahieren, wegen Übersicht
    // gebe ich sie so an
    var elementHeight = 170;




    // Jetzt prüfen ob Höhe in vh angegeben wurde
    if (vhFound) {




        // Höhe des Viewports ermitteln, die Funktion findet sich ab Zeile 27
        var viewportDimensions = getViewportDimensions();




        // Höhe des Elements in px errechnen, hierzu wird durch
        // 100 geteilt und mit elementHeight multipliziert
        var elementHeightInPx = viewportDimensions.height / 100 * elementHeight;              
    }




    // Diese Funktion prüft auf welche Art die Dimensionen im Browser angegeben
    // werden und gibt ein Objekt zurück das Höhe und Breite enthält,
    // ist keine bekannte Angabe gegeben wird false zurückgegeben
    function getViewportDimensions() {
        var w = window;




        if ('innerWidth' in w) {
                    return { width: w.innerWidth, height: w.innerHeight };
        }
        else if ('clientWidth' in w) {
            return { width: w.clientWidth, height: w.clientHeight };
        }
        else {
            return false;
        }
    }

Das data-x Attribut setzt du einfach mit setAttribute:

var element = document.getElementById("bored");
    var result = 170;




    element.setAttribute("data-x", result);

Ich hoffe damit kannst du schon ein bisschen was anfangen, ansonsten einfach nachfragen.

Ich sehe da kein Problem, alle aktuellen Browser unterstützen calc, Opera Mini nicht, Opera hat einen Marktanteil von 1,9% in Deutschland, Opera Mini einen Bruchteil davon.

Nein du hast Recht, w3c schreibt:

Zitat

Tip: The <!DOCTYPE> declaration is NOT case sensitive.

In diesem Fall scheint vor dem Doctype einfach eine Leerzeile oder so etwas zu sein, irgendwas lief da wohl beim Speichern oder so schief, einfach noch mal alles davor entfernen, eventuell den Doctype neu eingeben und erneut probieren, klappt eigentlich.

In die Irre geführt wurde ich vom Validator da dieser nach dem ändern in Großbuchstaben keine Fehler mehr ausspuckte, offenbar habe ich instinktiv gleichzeitig alles davor entfernt oder das Kopieren hat dies erledigt.

Sollte nicht nur, tut es auch

DOCTYPE statt doctype

<!DOCTYPE html>

Vielleicht nimmst du Kritik auch einfach an wenn du schon danach fragst. Wenn du es sowieso besser weißt dann brauchst du nicht zu fragen.

Durch opacity wird das gesamte Element transparent, das gilt für den Hintergrund, den Text, und andere Kindelemente. Es soll offenbar jedoch nur den Hintergrund betreffen.

Okay, warum?

Opacity und sibling Selektor probiert? jsFiddle solution

Globale Variablen definieren ist jetzt kein Beinbruch.

Dein Script funktioniert einwandfrei, jedoch scheinen deine Pfade und/oder Dateinamen fehlerhaft zu sein.

Bist du mit der Konsole vertraut? Hier findest du unter Punkt 3 eine Anleitung zur JavaScript Konsole für verschiedene Browser. Wenn du die Konsole öffnest und mit der Maus über einen der Buttons fährst solltest du eine Fehlermeldung in der Konsole sehen (etwas in der Art GET pfad/datei.endung net::ERR_FILE_NOT_FOUND).

Sollte die Meldung eine andere sein oder solltest du keine erhalten melde dich bitte noch mal und poste deinen gesamten Code.

Das wäre eine Möglichkeit die mir spontan einfiele.

// read items
    var elementButtons = document.getElementsByClassName("button");




    // alpha values
    valueMouseOver = 1;
    valueMouseOut  = .5;




    // loop items, add events
    for(i = 0; i < elementButtons.length; i++){
        elementButtons[i].addEventListener("mouseover", function(){

            var value = calculateValue(getComputedStyle(this).getPropertyValue("background-color").split(','));




            this.style.backgroundColor = "rgba("+ value[0] +", "+ value[1] +", "+ value[2] +", "+ valueMouseOver +")";




        });

        elementButtons[i].addEventListener("mouseout", function(){




            var value = calculateValue(getComputedStyle(this).getPropertyValue("background-color").split(','));




            this.style.backgroundColor = "rgba("+ value[0] +", "+ value[1] +", "+ value[2] +", "+ valueMouseOut +")";




        });
    }




    // parse splitted rgba value to valid float
    function calculateValue(input){




        return {
            0 : parseFloat(input[0].replace(/[^0-9.]/g, "")),
            1 : parseFloat(input[1]),
            2 : parseFloat(input[2])
        };




    }