• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] anfänger weiß nicht weiter

R

riff

New member
Hallo,

ich habe folgendes Problem:

Der im source angegebene Colorpicker funktioniert an für sich ja prächtig, ist ja auch nicht von mir :). Trotzdem habe ich mit der einbindung ein Problem.

Zuerst einmal ich verwende die 3 Textboxen, also die inputs die auf der Startseite auch schön präsentiert werden. Der wert vom coplorpicker der angezeigt wird wenn man auf ein textfeld klickt wird zwar eingetragen ich kann ihn jedoch nicht auf ein anderes <div> anwenden via. onchange im input.

Um zu verdeutlichen: Sobald ich die farbe änder mit dem picker soll sich die farbe eines <div id> auch ändern und nicht nur der wert im textfeld.


Source: ColorPicker - jQuery plugin
 
Willkommen in diesem Teil des Internets - schön, dass Du Dich für eine Registrierung und Teilnahme begeistern kannst. :)

Grob übersetzt: Nehme Farbe aus "gepicktem Bereich" und kleister das Ziel-DIV damit ein!

Code: 
$(".zielDIV").css('background-color', variableMitGepickterColor);

".zielDIV" - ein Selektor für das DIV, was Du dann mittels Klasse oder ID ansprechen musst, welches sich farblich zu ändern hat
variableMitGepickterColor - das dürfte ein String sein, welcher für gewöhnlich bei Farben so aussieht: #RRGGBB (wobei die Buchstaben Hex-Werte von 00 bis FF beinhalten können)

Mehr ist das eigentlich nicht, oder? Deine URL hab ich mir aber nicht angeschaut ... ;)

Ergo: Gib dem DIV doch einfach die Farbe? :D

Viele Grüße
 
Hi,

vielen Dank. musste nur etwas suchen wo ich den code einfügen muss, logischerweise in der funktion vom picker hehe, aber die .js datei zu finden :D

Folgender code hat bei mir wunderbar funktioniert:

Code: 
$("#test").css('color', '#' + hex);

da ich nun weiß wie ich das verwende, versuche ich die funktion zu bearbeiten wo die farbe direkt beim auswählen noch geändert wird und nicht nur im onSubmit event.
 
Der Picker hat ein "onChange"-Event (bäh... inkonsistente Schreibweise zum DOM...), indem das gemacht werden kann... ist auch im letzten Beispiel auf der von dir verlinkten Seite gemacht.
 
Hi,

ich bin kein JS programmierer, leider nur php und gestaltung durch xhtml und ein wenig css, darum hol ich mir ja eine fertigen picker.

Mit dem onChange event habe ich eh probleme, folgendes funktioniert ohne probleme:

Code: 
		$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
      onChange: function(hsb, hex, rgb, el) {
      	$('#colorpickerField1').val('#' + hex);
        $("#test").css('color', '#' + hex);
        $('#colorpickerField1').css('color', '#' + hex);
      },			
      onSubmit: function(hsb, hex, rgb, el) {
				$(el).val('#' + hex);
        $("#test").css('color', '#' + hex);
        
				$(el).ColorPickerHide();
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
		})
		.bind('keyup', function(){
			$(this).ColorPickerSetColor(this.value);
		});

warum funktioniert denn aber folgendes nicht (um mir wesentlich viel schreibarbeit abzunehmen)?:

Code: 
		$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
      onChange: function(hsb, hex, rgb, el) {
      	$(el).val('#' + hex);
        $("#test").css('color', '#' + hex);
        $(el).css('color', '#' + hex);
      },			
      onSubmit: function(hsb, hex, rgb, el) {
				$(el).val('#' + hex);
        $("#test").css('color', '#' + hex);
        
				$(el).ColorPickerHide();
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
		})
		.bind('keyup', function(){
			$(this).ColorPickerSetColor(this.value);
		});

mir scheint es so als ob die variable "el" nur im onSubmit funktioniert, warum auch immer :(

Gruß.
 
OK - damit solltest du immer auf das aktuelle Elemnet Zugriff haben:
Code: 
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').each(function(i){
	var element = $(this);
	element.ColorPicker({ ...});
});
- ungetestet.

PS: https://api.jquery.com/each/
 
Hallo,

hmh ich habe was besseres gefunden zur lösung.. nämlich in der coplorpicker.js sprich das was ich bislang nicht angerührt hatte...

Ich habe mir den String angeschaut von onSubmit der so aussieht:

cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);

dann habe ich mir den String vom onChange event angeschaut:

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);

Verblüffende ähnlichkeit stelle ich fest...

Nun habe ich nur ein wenig "rumgefuchtelt" bis ich das herausbekommen habe was ich wollte, undzwar mit dieser kleinen änderung:

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);

Nun sind alle Probleme die ich hatte gelöst, mehr als was rauspicken und "onthefly" änderung brauche ich nicht.

JS werde ich irgentwann auch noch können mit der jquery libary :)

Vielen dank für eure hilfen wenn noch etwas sein sollte melde ich mich natürlich nochmal.

Ach ich sollte noch schreiben, dass ich nun el als variable wie ich es auch vorhatte nutzen kann.

Gruß,
riff
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben