Beiträge von wolf

    EIn Ansatz ist, die Seite zu stylen, auf browser größe.. Dann ziehst du dein Fenster kleiner, solange bis irgendwas sche*ße aussieht. Dann schreibst du genau so viel Css wie nötig das es bei der Größe gut aussieht und das Spielchen beginnt von vorn, bis du halt bei 320px angekommen bist :)

    Ja gibt es, am einfachsten wäre alles zu zippen und dann hochzuladen..

    Ja knn dir jemand schreiben oder geben, kostet aber ziemlich sicher zeit, und somit Entlohnung.
    Oder du machst es selber, und wir helfen dir wenn du fragen hast :)
    -> Google nach PHP fileupload .. dann kannst du mit einer foreach alle hochgeladenen Dateien verarbeiten :)

    Häh?
    Klar gibt es genaug plugins, aber wenn er wirklich immer nur die Drei bilder hat und Lust sich damit zu beschäftigen ein eigenes kleines Plugin zu schreiben?
    Der Link ist auch eher für Rantanplan gedacht ;)

    Schwierigkeit/Anforderungen: Fachausdrücke wie Objekt, Parameter oder Framework sollten geläufig sein, außerdem sollte man die Funktionsweise von jQuery Plugins kennen.
    Benötigte Software/Frameworks jQuery Framework
    Verwendete Technik JavaScript

    Einleitung
    Eine eigene jQuery Funktion bzw. ein eigens jQuery Plugin zu erstellen ist oft nach ein wenig Einarbeitung in JS(JavaScript) und JQ(jQuery) ein echtes Ziel.
    Der Vorteil eines JQ Plugins ist die einfache Mehrfachverwendung.. bzw. allgemein eine einfache, schon bekannte Verwendung von JQ Plugins.
    Ein typischer Aufruf eines solchen JQ Plugins:

    JavaScript
    $('selector').plugin({
      option1: 'value'
    });


    Die erste Zeile des Plugins
    Unser Ziel ist es ein Plugin zu erstellen, was beim klicken auf das Element, ein bestimmtes Attribut setzt.
    Zuerst erstellen wir eine anonyme, selbst aufrufende Funktion, in der unsere Funktion dann definiert wird. Dadurch schützen wir unser typisches JQ $ vor Kompatibilitätsproblemen mit anderen Frameworks und haben gleichzeitig einen schönen Wrapper der das Setzten/Ändern globaler Variablen verhindert.


    Funktionsdefinition mit Parameter
    Anschließend definieren wir unsere Funktion mit einem Parameter (options) an den spezifische Einstellungen übergeben werden können.
    'AttrSet' ist der Name der Funktion


    Standartwerte und Optionen
    Wir definieren ein paar Standard werte und ersetzten diese, wenn durch options andere werte gesetzt werden. Das ganze werden dann unsere Einstellungen für das Plugin. Aus Faulheit sind in meinen JS oft benutze variablen unter Abkürzungen zun erreichen, in diesem Fall kann man die Einstellungen über 'settings' oder eben '_' aufrufen, dies hat den Vorteil nicht jedes mal settings schreiben zu müssen, allerdings erschwert es teilweise die Lesbarkeit. Jeder so wie er mag.. :)
    Zusammen sieht das so aus


    Natürlich braucht man kein Objekt wenn darin sowieso nur ein key/value pärchen ist, allerdings werdet ihr nach und nach merken das man doch mehr als einen oder zwei parameter gerne mitgibt..

    Benutzen von this
    Jetzt wollen wir auf den Klick reagieren.
    Um den entsprechenden EventHandler setzten zu können, benötigen wir das HTML-Element, worauf die Funktion initialisiert wurde.
    Dieses steckt immer in 'this', der Performance wegen konvertieren wir dieses einmal zu einem jQuery Objekt/Element und speichern dieses in '$this'

    JavaScript
    /**
     * @var object $this holds the plugins init element
     */
    var $this = $(this);


    Nun können wir den Klick-Handler definieren. Innerhalb des Click-Handlers steckt das geklickte Element wieder in 'this' .. gleiches Spielchen..:

    JavaScript
    /**
     * initialize the event handler for the click event
     */
    $this.on('click', function(){
      $this = $(this);
    }


    Funktionalität hinzufügen & callback Funktion
    Im nächsten schritt sorgen wir dafür, dass das Attribut gesetzt wird und fügen eine Funktion (callback) hinzu, die nach dem setzten das Attributes aufgerufen wird und an die zwei Parameter übergeben werden:


    zur besseren code-überfliegbarkeit ^^ hier mal ohne diese ganzen Block-Kommentare


    Komprimierung
    Wenn man das Plugin life nutzen will, sollte man es vorher mit einem tool wie http://jscompress.com/ komprimieren, um Dateigröße einzusparen.

    JavaScript
    !function(t){t.fn.AttrSet=function(c){var n={attribute:"data-selected",callback:function(){}},a=(_=t.extend(n,c),t(this));a.on("click",function(){a=t(this),a.attr(_.attribute,!0),_.callback(this,_)})}}(jQuery);


    Am besten nennt man es dann nach diesem schema
    <framework>.<plugin>.<art>.[<version>.]js
    Also z.B. jquery.attrset.min.js

    Aufrufen
    Und schon ist das Plugin fertig, wir müssen es nurnoch aufrufen und unsere parameter übergeben.. :)

    JavaScript
    //aufrufen der Funktion ohne Parameter (defaults werden benutzt)
    $('selector').AttrSet();
    
    
    
    
    //aufrufen mit verändertem 'attibut'
    $('selector').AttrSet({
      attribute: 'data-my-own-attribute'
    });



    hier in Action

    Hoffe es ist alles verständlich, ansonsten fragt einfach & korrigiert mich wenn was nicht richtig ist c:

    jap .. ~ kann man auch verwenden, dann ist es egal wo der input sich befindet (davor oder danach), hauptsache auf der selben ebene.. allerdings musst du dann die box genau selektieren und kannst nicht einfach ' :checked+div ' machen :D

    Diese Zeiten sind leider nicht vorbei..
    Bei aktuellen IE bzw edge oder wie der neue sich schreit, hast du recht
    Da aber generell mindestens IE9 (eher IE8 ) supporting angesagt ist, sind die Zeiten leider noch eine ganze Weile so.. :(

    Ne das geht nicht ... außerhalb des wraps vom input ist nichts machbar, nur auf gleicher ebene oder Tiefer im DOM ..
    label + div input:checked + div -> ein div, was nach einem input steht, der in einem div liegt, das nach einem label steht ... das ist falsch :D

    Dynamische genereierung kannst du nur z.B. eine Klasse erreichen die dir die verschiedenen komponenten bereitstellt -> methode zum ausgeben vom label und methode für den input ...
    Irgendwie so ^^

    Es geht bestimmt einfacher, allerdings ist das bisherige script meiner Meinung nach der Sauberste weg den man fahren kann.. :)
    Man muss ja sowieso auf das document.ready warten, befor man anfängt handler zu initalisieren .. von daher... ich denk das passt alles so..
    Wenn du dir das inline-zeug sparen willst, mach es genau so wie du es schon gelöst hast..! :)

    Okay, ich zeig es dir .. :D

    Also, der CSS selector '+' selektiert das nachfolgende element, dadurch lässt sich ein 'IF' simulieren

    HTML
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="b">B</div>
    CSS
    /* Wenn ein Element mit der klasse .b direkt hinter einem Elem. mit der Klasse .a ist ... */
    .a + .b {
      color: red;
    }

    ->Das erste B-DIV wird rot
    Dann wenden wir einen Trick an..: Ein input[type="checkbox"] lässt sich in css via dem pseudoselector :checked auswerten
    Wenn der input gecheckt ist, spricht der Selektor an:

    HTML
    <input type="checkbox">
    <input type="checkbox" checked>
    CSS
    /* wenn der input 'checked' ist .. verschwindet er */
    input:checked {
      display: none;
    }

    ->Der 2. input ist unsichtbar, wenn der 1. markiert wird, verschwindet er auch
    Jetzt testen wir einfach ob der Input gecheckt ist oder nicht, ensprechend zeigen wir das menü

    HTML
    <input id="menuToggle" type="checkbox">
    <div class="menu">Das Menü :0</div>
    CSS
    .menu{
      opacity: .2;
    }
    input#menuToggle:checked + .menu{
      opacity: 1;
    }

    Jetzt kannst du das Menü via der checkbox steuern.
    Da die checkbox eine ID hat kannst du ihr ein oder mehrere labels zuordnen, die die checkbox 'toggeln' und den input einfach verstecken.. :)

    Beispiel kommt gleich... :D:love:
    HIER: ^^
    http://codepen.io/wolf-w/pen/jbEdBW?editors=110

    Also,
    [2. & 3.] wenn du vor hast später mal auch ein Kontaktformular auswerten zu können oder eben ein Login zu bauen, solltest du zuerst PHP lernen.
    Wenn du dann mit einer Datenbank komunizieren möchtest, brauchst du MySQL (wenn die datenbank eine ist die via SQL gesteuert werden kann)(SQL ist einfach eine Sprache um Datenbanken zu steuern die von PHP aus verarbeitet wird .. das merkst du dann schon noch früh genug.. :))

    [1.] (Dannach) kommt JavaScript, dass ist eine Scriptsprache die (hauptsächlich) bei dem Client (im/vom Browser) ausgeführt wird.
    Damit kannst du alles mögliche am HTML machen, theoretisch auch eine Formularauswertung, allerdings ist es nicht sicher, da der Client das script manipulieren kann (was bei PHP nicht geht, da es nur auf dem Server ausgeführt wird..)
    :)