Für alle, die schon lange eine bessere Farbauswahl wollten...

Dieser Colorpicker erweitert schlicht und einfach die gesamte Farbpalette.
Er ist leicht in die Symbolbar einzubauen, zeigt eine Vorschau der aktuell überfahrenen Farbe an und ermöglicht auch eine Wiederauswahl der zuletzt ausgewählten Farbe.
Falls der Farbcode benötigt wird, steht dieser auch gleich dabei.

Getestet wurde der Quellcode mit der neuen Symbolbar, die seit dem letzten Update eingeführt wurde.
Am besten wird der direkt nach der letzten vorgegebenen Farbe eingebaut.
Das Farbmenü wird auch automatisch nach der Farbauswahl wieder geschlossen.

<br />
<!-- http://www.interclasse.com/scripts/colorpicker.php -->
<table style="background-color:#f6f6f6;border:1px dotted #666;padding:5px;margin:0px auto;">
	<tr>
		<td>
			<script language="Javascript" type="text/javascript">
addColorPicker();
var ns6=document.getElementById&&!document.all;
var ie=document.all;
// http://www.interclasse.com/scripts/colorpicker.php
var artabus='';
function addColorPicker() {
	var total=1657;
	var X=Y=j=R=G=B=0;
	var aR=new Array(total);
	var aG=new Array(total);
	var aB=new Array(total);
	for (var i=0; i<256; i++) {
		aR[i+510]=aR[i+765]=aG[i+1020]=aG[i+5*255]=aB[i]=aB[i+255]=0;
		aR[510-i]=aR[i+1020]=aG[i]=aG[1020-i]=aB[i+510]=aB[1530-i]=i;
		aR[i]=aR[1530-i]=aG[i+255]=aG[i+510]=aB[i+765]=aB[i+1020]=255;
		if (i<255) {aR[i/2+1530]=127;aG[i/2+1530]=127;aB[i/2+1530]=127;}
	}
	var hexbase=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
	var i=0;
	var jl=new Array();
	for (x=0;x<16;x++) for (y=0;y<16;y++) jl[i++]=hexbase[x]+hexbase[y];
	document.write('<'+'table border="0" cellspacing="0" cellpadding="0" onmouseover="showColor(event);" onclick="pickColor();">'); // width="126" height="126"
	var H=W=63;
	for (Y=0; Y<=H; Y++){
		s='<'+'tr height="2">';
		j=Math.round(Y*(510/(H+1))-255);
		for (X=0; X<=W; X++){
			i=Math.round(X*(total/W));
			R=aR[i]-j;if(R<0)R=0;if(R>255||isNaN(R))R=255;
			G=aG[i]-j;if(G<0)G=0;if(G>255||isNaN(G))G=255;
			B=aB[i]-j;if(B<0)B=0;if(B>255||isNaN(B))B=255;
			s=s+'<'+'td width="2" bgcolor=#'+jl[R]+jl[G]+jl[B]+'><'+'/td>';
		}
		document.write(s+'<'+'/tr>');
	}
	document.write('<'+'/table>');
}
function pickColor() {
	var jla=document.getElementById('chosenColor');
	jla.innerHTML=artabus;
	jla.style.backgroundColor=artabus;
	insert('[style=color:'+artabus+']','[/style]');
	document.getElementById('tab_color').style.display='none';
}
function showColor(e){
	source=ie?event.srcElement:e.target;
	if(source.tagName=="TABLE")return;
	while(source.tagName!="TD" && source.tagName!="HTML")source=ns6?source.parentNode:source.parentElement;
	document.getElementById('previewColor').style.backgroundColor=artabus=source.bgColor;
}
function lastColor(choose) {
	if (choose.innerHTML != "") {
		insert('[style=color:'+choose.innerHTML+']','[/style]');
		document.getElementById('tab_color').style.display='none';
	}
}
</script>
		</td>
	    <td id="previewColor" style="width:40px;height:128px;"></td>
	</tr>
	<tr>
		<td colspan="2" id="chosenColor" style="height:24px;" onclick="lastColor(this);"></td>
    </tr>
</table>

P.S.:
In einem Kommentar am Quellcode-Anfang steht die Seite, welche die Grundlage des Colorpickers bereitstellt. (Generieren des Farbfeldes)
Und nicht erschrecken, wenn in der Symbolbar-Vorschau das Farb-Menü etwas vergrößert ausklappt, bei der normalen Benutzung im Forum sollte das Farbfeld kleiner sein.

Hallo Florian,
tolle Erweiterung für die Farbauswahl!

Normalerweise markiert man einen Bereich, der farblich geändert werden soll und wählt dann die Farbe aus.
Der Bereich wird dann in der ausgewählten Farbe angezeigt.
Hier funktioniert es nicht. Es wird der BB-Code immer hintereinander geschrieben ([style=color:#d70d00][/style]).

Kann man das ändern

Gruß
Wolfgang

Hallo Wolfgang!
Das ist ja mal richtig merkwürdig...
Also ich kann bei mir da nichts in der Art feststellen.

Bei den Funktionen pickColor und lastColor steht ja auch jeweils der Insert-Befehl. (leicht unterschiedlich)

insert('[style=color:'+choose.innerHTML+']','[/style]');

Smileys werden ja hingegen nur einfach mit dem returnTag-Befehl eingefügt.
Und bei meinen Tests hier im Forum hat alles super geklappt.


Oh! Gerade hab' ich's nochmal im IE versucht, der fügts wirklich gerade hinter den markierten Text.
Keine Ahnung woran das liegt, der Insert-Befehl habe ich meiner Meinung nach richtig geschrieben.

Wäre gut, wenn du es vielleicht auch mal in anderen Browsern testen könntest und evtl. ein Problem beim Befehl entdeckst, im Gegensatz zu den anderen (die eigentlich gleich angewendet werden).

Hallo Florian,
wie es aussieht, funktioniert es nur im Internet Explorer nicht richtig (mal wieder)!
Es liegt an den Häckchen, die +choose.innerHTML+ umschließen. Sie werden im IE falsch interpretiert!

insert('[style=color:'+choose.innerHTML+']','[/style]');



Gruß
Wolfgang

Hallo Wolfgang,
bist du dir da sicher?

Ich habe die einfachen '-Zeichen durch doppelte "-Zeichen ersetzt.
Allerdings war das Resultat das gleiche.
Der Code ist übrigens nur dafür zuständig, die letzte Farbe einzufügen:

insert("[style=color:"+choose.innerHTML+"]","[/style]");

Um eine angeklickte Farbe aus der Tabelle zu übernehmen, ist diese Zeile da:

insert("[style=color:"+artabus+"]","[/style]");

(Standard: mit '-Zeichen)

Aber so oder so ist es das gleiche Resultat.
Außerdem benutzt HPM selbst beim insert-Befehl die einfachen Anführungszeichen.
(s. weitere Elemente in der SymbolBar)


Desweiteren habe ich es auch versucht, eine statische Farbe einzusetzen:

insert("[style=color:#000]","[/style]");

Aber auch dies hatte nicht die gewünschte Wirkung.

Gleichheits-Zeichen und Doppelpunkt habe ich auch schon vergebens entfernt.
Das verwunderlichste ist einfach, dass der Foren-Code korrekt eingefügt wird, nur nicht an der richtigen Position.
Vielleicht macht da das Skript zum Einfügen von Foren-Variablen von HPM da einen Fehler und der wird durch etwas im Colorpicker ausgelöst?!?


Ich werde aus diesem Browser einfach nicht schlau.
Ich habe im Moment noch ein weiteres Skript, welches den Dienst verweigert.
Sehr frustrierend, wenn ein eigentlich funktionierendes Skript nichts tut.

Hallo Florian,
den Zustand, dass der "Colorpicker" die markierte Schrift umschließt (im IE), bekomme ich jetzt auch nicht mehr hin.
Ich habe wohl zu viel ausprobiert.

Kann man die folgende Zeile nicht umschreiben

insert('[style=color:'+artabus+']','[/style]');

Vielleicht reagiert der IE darauf anders. Vielleicht mit "document.write"

document.write ('<a href="javascript:insert('[xxxx]','[/xxxx]')">')


Bis dann
Wolfgang

Hallo Wolfgang,
mit document.write wird es wohl eher nicht funktionieren.
Wenn die Seite schon geladen wurde, wird durch den Befehl alles andere ersetzt und die Seite lädt ewig.
Man sollte den Befehl nur benutzen, wenn die Seite noch im Aufbau ist.


Um mal ein wenig den Insert-Befehl genauer zu betrachten, habe ich im Quelltext des Forums mal nachgeschaut.
Es sollte unter dieser oder einer ähnlichen URL einsehbar sein: http://xxxxxx.homepagemodules.de/script10.js
Im Quelltext bedankt sich HPM dabei bei SelfHTML.

Dabei kann man sehen, dass das Skript die Cursor-Position berücksichtigt.
Jetzt habe ich das nochmal genauer angeschaut und festgestellt, dass es darauf ankommt, von welcher Seite man den Text markiert.
Zieht man die Maus von links nach rechts, dann wird der Code links eingefügt, zieht man sie von rechts nach link, so wird der Code rechts eingefügt.
Also eigentlich immer da, wo der Cursor angesetzt wurde.

Vielleicht gibt es ja Probleme bei der Markierungs-Auswahl. ( document.selection.createRange() )

Wenn man nur wüsste, worans wirklich liegt...

Also im Standard-Template wird leider die Farben im ColorPicker nicht angezeigt
Ich habe aber auch noch nicht heraus gefunden wieso es so ist aber wen ich was weiß melde ich mich!

Hallo toggodamian,
keine Ahnung, woran das bei dir liegt.
Wie du siehst, verwende ich in meinem Forum nicht das Standard-Template.

Aber evtl. liegt es an weiteren Codeschnipseln, die nicht aus dem Original-Template kommen.
Oftmals sind fehlerhafte Javascripts an gewissen Dingen schuld, das reicht vom langsamen Seiten-Aufbau bis hin zu Fehlfunktionen.

Evtl. liegt es aber auch an deinem Browser/Betriebssystem.
Achte bitte darauf, dass du stets die neueste Browserversionen verwendest. (ist auch sicherer )
Probiere auch mal, es mit einem anderen Browser anzusehen.

Ansonsten setze mal noch testweise einen Doctype im Forum.

Dies nur mal als kleine Denkanstöße zur Problemlösung.
Ich hoffe, dass du den Fehler finden kannst.

Also hier bei euch Funktioniert es wunderbar nur bei mir nicht
Also falls es jemand nicht verstanden hat ich meine diese Flähe wo diese Farben sind die man zur auswahl benutzen kann und bei mir gibt es die nicht nur so ein wißes Feld.
Ansonsten finde ich das eine wunderbare erweiterung!

Also ich habe die Ursache dafür gefunden: Es liegt an denn "Class" die an den vielen Tabellen im Standard-Template angelegt sind wieso das so ist weiß ich jetzt noch nicht und wie man es beheben kann kann ich auch noch nicht sagen.

Bei mir funktioniert es einfach nicht mehr - wohl nach diversen zahlreichen Updates.

Hallo Lady,
das kann ich so nicht ganz bestätigen.
Versuche es vielleicht mal mit einem anderen Browser.

Im neuesten Firefox (v. 3.6.15) funktioniert deine Farbauswahl, wenngleich das Farbfeld zur Auswahl evtl. sehr dünn geworden ist.
Auch im IE kann ich den Forencode einfügen, nur dort umschließt er nicht den markierten Text, sondern wird einfach nur eingefügt.


Bei mir klappen die DropDowns in der Symbolbar komischerweise nach kurzer Zeit wieder zu.
Wahrscheinlich liegt dies an der AutoSave-Funktion, die immer wieder gestartet wird...


P.S.: Habe es in dem Forum getestet, das in deinem Profil steht.
Solltest du ein anderes meinen, habe ich das natürlich nicht getestet.

Im FF geht es bei mir auch, nur wenn ich bei meinen Eltern im Chrome online bin (FF geht bei ihnen nicht, why ever, und stürzt immer ab), dann geht es damit leider nicht :(

Keine Ahnung,
ich seh nach Klick zwar den Forencode, aber er enthält keine Farbe.

JS-Fehler in Googles Chrome kann man mit der JS-Konsole abfangen:
[Schraubenschlüssel-Symbol] -> Tools -> Javascript-Konsole

Es werden zwei Fehler geworfen, auch wenn wohl keiner etwas damit zu tun hat.
Vielleicht kannst du die Scripts aber auch mal vorübergehend deaktivieren, um diese zu 100% auszuschließen.

Also bei mir Funktioniert der Colorpicker seit dem ich das neuste Design bei mir eingebaut habe. Es liegt also wirklich warscheinlich dran das im Standard-Template die Classen in den Tabellen gestört haben müssten mit den Classen da die Farbplatte in der Farbe war in der ein td einer Tabelle gefärbt wurde. Seit im neuen Design die ganze Tabelle gefärbt wurde und nur ein td vielleicht oben eine Leiste darstellt aber der td wo die Iconbar steckt nicht gefärbt ist so wird nun die Farbplatte angezeigt.

Super!

klasse Forian

habe es mir gerade eingebaut

danke

Freut mich, danke!

Hallo Florian,
ich habe es geschafft Deinen coolen Color-Picker jetzt in mein Standard-Template einzubauen. Schwierige Sache, aber einsame Spitze!

Der Einbau ins Business-Template mit seinen Div-Containern hat funktioniert. Es musste nur die Lage der Farbauswahl eingestellt werden.
Im Standard-Template hingegen sah es nach dem ersten Einbau ziemlich chaotisch aus. Das Format ist völlig durcheinander und die Farbauswahlpalette wird nicht überall angezeigt, war mit einem grauen Hintergrund überdeckt. Zusätzlich klappt die Farbauswahl nach dem Anklicken der Farbe wieder ein. Das ist in diesem Fall ungünstig, da hier noch Informationen über den Farb-Code angezeigt werden (wie Im Business-Template).

Ich musste hierzu 5 Einstellungen korrigieren und habe die Farbauswahl noch etwas vergrößert.
Ziemlich umfangreich.

Wer die Änderungen benötigt oder sehen möchte, hier: Neue große Farbauswahl ins Standard-Template einbauen



Nochmal besten Dank für die Idee und das Script!
Wolfgang