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
Beiträge von wolf
-
-
Du musst arbeiten, hier arbeitet niemand für dich!
Wenn du fragen hast, kannst du sie hier fragen und bekommst sie erklärt! -
ähm ich sag mal einfach google und javascript bzw ajax
Schaust du hier: Tutorial jQuery AJAX -
Wenn du anfängst responsive zu arbeiten, dann richtig..
Also es gibt keine festen breiten, immer nur %.
Du nimmst am besten media-querys und arbeitest damit ..:)
Tutorial Responsive Webdesign (Grundsätze / Media Queries) -
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 -
Hier noch eine kleine Info zum eigenen Plugin
Tutorial eigene jQuery Funktion/Plugin erstellen -
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 JavaScriptEinleitung
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:
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.JavaScript
Alles anzeigen/** * anonymus function to increase compatibility problems with other frameworks * * @param object $ jQuery framework */ ;(function($){ })(jQuery);
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 FunktionJavaScript
Alles anzeigen/** * plugin AttrSet jQuery plugin to set a specific attribute on click * * @param object options contains specific options for the plugin; if unset or some key unset, defaults are used */ $.fn.AttrSet = function(options){ }
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 ausJavaScript
Alles anzeigen/** * anonymus function to increase compatibility problems with other frameworks * * @param object $ jQuery framework */ ;(function($){ /** * plugin AttrSet jQuery plugin to set a specific attribute on click * * @param object options contains specific options for the plugin; if null or some key unset, defaults are used */ $.fn.AttrSet = function(options){ /** * var object defaults contains the default plugin settings */ var defaults = { /** * string attribute the (complete) attribute what goes set after the click */ attribute: 'data-selected', }; /** * @var object settings contains the active plugin settings * @var object _ contains the active plugin settings * * use one of the both variables to refere to the settings */ var settings = _ = $.extend(defaults, options); } })(jQuery);
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'
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:JavaScript
Alles anzeigen/** * anonymus function to increase compatibility problems with other frameworks * * @param object $ jQuery framework */ ;(function($){ /** * plugin AttrSet jQuery plugin to set a specific attribute on click * * @param object options contains specific options for the plugin; if null or some key unset, defaults are used */ $.fn.AttrSet = function(options){ /** * @var object defaults contains the default plugin settings */ var defaults = { /** * string attribute the (complete) attribute what goes set after the click */ attribute: 'data-selected', /** * function callback got called after the attribute was set * @param object element clicked DOM element * @param object settings current settings */ callback: function(element, settings){} }; /** * @var object settings contains the active plugin settings * @var object _ contains the active plugin settings * * use one of the both variables to refere to the settings */ var settings = _ = $.extend(defaults, options); /** * @var object $this holds the plugins init element */ var $this = $(this); /** * initialize the event handler for the click event */ $this.on('click', function(){ $this = $(this); /** * add the attribute(defined in the settings) to the clicked element * call the callback after doing that */ $this.attr( _.attribute, true ); _.callback( this, _ ); }); } })(jQuery);
zur besseren code-überfliegbarkeithier mal ohne diese ganzen Block-Kommentare
JavaScript
Alles anzeigen;(function($){ $.fn.AttrSet = function(options){ var defaults = { attribute: 'data-selected', callback: function(element, settings){} }, settings = _ = $.extend(defaults, options), $this = $(this); $this.on('click', function(){ $this = $(this); $this.attr( _.attribute, true ); _.callback( this, _ ); }); } })(jQuery);
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.jsAufrufen
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: -
-
Für deine Funktion wäre es allerdings vollkommen okay ein eigenes kleines plugin zu erstellen wenn du Lust hast zu lernen und zu tüfteln
.. dann erklär ich mal -
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
-
Wegen dem unterschied von ID's und Klassen in html ..
Mit jQuery lässt sich Zeug recht einfach realisieren ... ich zeig dir mal was ohne.. und mit ..
http://codepen.io/wolf-w/pen/meJbaZ -
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 falschDynamische 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 -
für den IE kannst du am besten eine Website nach dem Standart von 1850 programmieren
Kompatibilitäten kannst du hier nachschauen: caniuse.com
-
Such doch mal nach jQuery click() ... gerade nutzt du ja jQuery hover()
-
Wenn es funktioniert passt alles
-
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 ..
Also, der CSS selector '+' selektiert das nachfolgende element, dadurch lässt sich ein 'IF' simulieren
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:->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ü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...
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..)