Colorpicker

[DeletedUser]

Salü,

Ich habe wieder ein Problem, dass ich durch meine Unfähigkeit nicht lösen kann. :O

Ich habe mir den Colorpicker von Eyecon heruntergeladen.

Jetzt habe ich es implementiert (ich hab' mal testweise die DOMElement Version aus der Live Demo kopiert und ein bisschen abgeändert), jedoch macht es nur Probleme.

Ein Bild sagt mehr als tausend Worte.

Das hier habe ich im Headbereich:

$(function() {
    $('#colorSelector').ColorPicker({
		flat: true,
    	color: '#0000ff',
		OnSubmit: function (colpkr) {
			$(colpkr).fadeOut(500);
			insert('[color=#'+hex+']', '[/color]');
    		return false;
		},
		onShow: function (colpkr) {
    		$(colpkr).fadeIn(500);
    		return false;
    	},
    	onHide: function (colpkr) {
    		$(colpkr).fadeOut(500);
			insert('[color=#'+hex+']', '[/color]');
    		return false;
    	},
    	onChange: function (hsb, hex, rgb) {
    		$('#colorSelector div').css('background-color', '#' + hex);
    	}
    });
});

Das hier ist der HTML-Code:

<span id=\"colorSelector\"><span style=\"background-color: #0000ff\"></span></span>

Und das ist der CSS-Code:

/*
 * Colorpicker
 */
#colorSelector {
	position: relative;
	width: 36px;
	height: 36px;
	background: url(select.png);
}
#colorSelector span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
	background: url(select.png) center;
}

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}

Vielen Dank für die Hilfe. :>

 

[DeletedUser124538]

Wenn ich dem Link folge dann existiert die Seite nicht (Page not found)

 

[TimLim]

Wenn ich dem Link folge dann existiert die Seite nicht (Page not found)

einfach mal aus colorpicke colorpicker machen.... Einfach Augen auf machen.

 

[DeletedUser]

Benutzt man nur den geposteten Code und die originalen JS Dateien von der Seite funktioniert es Muss also an anderem Code auf deiner Seite liegen

Edit:
Das Auswählen der Farbe funktioniert doch nicht, also das Quadrat ändert die Farbe nach dem Schließen nicht. Aber die Anzeige sieht auf jeden Fall richtig aus.