Autor Zpráva
Ine
Profil *
Zdravím. Stáhl jsem si js+css script na "přestylování" <selectu>. Mám s ním ale problém. Je defaultně nastylovaný na šírku "width:190px". Ja bych to potřeboval upravit, tak abych mohl mít třeba 3 rozměry selektu.
Do javascriptu jsem udělal minimální zásah. Spíš jsem se hrabal v CSS. Bohužel to úplně 100% nemůžu rozchodit. Konkrétně pozadí v selectu. Už se v tom hrabu několik dnů a pořád nic.

Prosím tedy o radu jakým způsobem to upravit tak abych tam mohl mít třeba tři selekty o různých rozměrech.

Tady jsou scripty. DÍKY ZA KAŽDOU RADU!

HTML
<script type="text/javascript" src="elementy1.js"></script>
<link rel="stylesheet" href="styl.css" media="screen" />


<p><select name="7" class="styled1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</p>


<p><select name="8" class="styled2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</p>



CSS:
.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(image/checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
.radio {
	background: url(image/radio.png) no-repeat;
}
.select {
	position: absolute;
	width: 158px;
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(image/select1.png) no-repeat;
	overflow: hidden;
}


input.styled { display: none; } 

select.styled1 {
		position: relative; 
		opacity: 0; 
		filter: alpha(opacity=0); 
		z-index: 5; 
		width: 190px;
		}

select.styled2 {
		position: relative;
		opacity: 0; 
		filter: alpha(opacity=0); 
		z-index: 5; 
		width: 100px;
		}

.disabled { opacity: 0.5; filter: alpha(opacity=50); }


Javascript:
var checkboxHeight = "25";
var radioHeight = "25";

var Custom = {
	init: function() {
		var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
		for(a = 0; a < inputs.length; a++) {
			if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
				span[a] = document.createElement("span");
				span[a].className = inputs[a].type;

				if(inputs[a].checked == true) {
					if(inputs[a].type == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span[a].style.backgroundPosition = position;
					}
				}
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				inputs[a].onchange = Custom.clear;
				if(!inputs[a].getAttribute("disabled")) {
					span[a].onmousedown = Custom.pushed;
					span[a].onmouseup = Custom.check;
				} else {
					span[a].className = span[a].className += " disabled";
				}
			}
		}
		inputs = document.getElementsByTagName("select");
		for(a = 0; a < inputs.length; a++) {
			if(inputs[a].className == "styled1" || "styled2") {
				option = inputs[a].getElementsByTagName("option");
				active = option[0].childNodes[0].nodeValue;
				textnode = document.createTextNode(active);
				for(b = 0; b < option.length; b++) {
					if(option[b].selected == true) {
						textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
					}
				}
				span[a] = document.createElement("span");
				span[a].className = "select";
				span[a].id = "select" + inputs[a].name;
				span[a].appendChild(textnode);
				inputs[a].parentNode.insertBefore(span[a], inputs[a]);
				if(!inputs[a].getAttribute("disabled")) {
					inputs[a].onchange = Custom.choose;
				} else {
					inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
				}
			}
		}
		document.onmouseup = Custom.clear;
	},
	pushed: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
		} else if(element.checked == true && element.type == "radio") {
			this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
		} else if(element.checked != true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
		} else {
			this.style.backgroundPosition = "0 -" + radioHeight + "px";
		}
	},
	check: function() {
		element = this.nextSibling;
		if(element.checked == true && element.type == "checkbox") {
			this.style.backgroundPosition = "0 0";
			element.checked = false;
		} else {
			if(element.type == "checkbox") {
				this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else {
				this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
				group = this.nextSibling.name;
				inputs = document.getElementsByTagName("input");
				for(a = 0; a < inputs.length; a++) {
					if(inputs[a].name == group && inputs[a] != this.nextSibling) {
						inputs[a].previousSibling.style.backgroundPosition = "0 0";
					}
				}
			}
			element.checked = true;
		}
	},
	clear: function() {
		inputs = document.getElementsByTagName("input");
		for(var b = 0; b < inputs.length; b++) {
			if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
			} else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			} else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
			} else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
				inputs[b].previousSibling.style.backgroundPosition = "0 0";
			}
		}
	},
	choose: function() {
		option = this.getElementsByTagName("option");
		for(d = 0; d < option.length; d++) {
			if(option[d].selected == true) {
				document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
			}
		}
	}
}
window.onload = Custom.init;
panther
Profil
Ine:
pokud dodáš odkaz na web místo téměř 200 řádků kódu, jistě se tu najde někdo, kdo se problémem bude chtít zabývat. Já se tímto kódem probírat nebudu ani omylem.
Ine
Profil *
Ok. Tady je:)

http://crayfish.cz/select/
Ine
Profil *
Nikdo neví? jsem zoufalý:(( zkusil jsem snad všechno:(
jenikkozak
Profil
Ine:
Ja bych to potřeboval upravit, tak abych mohl mít třeba 3 rozměry selektu
Na to by bylo především nutno přemalovat obrázek image/select1.png, respektive udělat tři různé šířky tohoto obrázku.
Ine
Profil *
Přesně to jsem udělal... ale jak je do toho zakomponuju? Buď tam můžu mít jeden nebo druhý...:( Prosím o radu
joe
Profil
A rozumíš tomu JavaScriptu co dělá?

Tvůj problém je docela triviální, ale to co jsi našel pro náhradu formulářových prvků se mi vůbec nelíbí :-) Tobě třeba ano, takže co a jak udělat.

Řádek 43:
span[a].className = "select";
přepiš na
span[a].className = "select " + inputs[a].className; // za zvyraznenem "select" je mezera


a v CSS už pak rozeznáš o jaký jde "select", takže budeš pak psát:

span.select.styled1 { background: url( ... ); width: ; } /* tady treba ten vetsi obrazek - vetsi sirka */
span.select.styled2 { background: url( ... ); width: ; } /* a tady ten mensi */
Ine
Profil *
Díky. Jsi zlatej. Tak dlouho jsem to řešil....

- Programuju především v php+mysql. Javascript téměř vůbec neovládám.... proto i triviální věci jsou překážkou...:) Snažím se to, ale postupně naučit.
- Proč se ti nelíbí? Jak jsem psal moc js nerozumím proto nedokážu zhodnotit co je dobré a co špatné. "Přestylování" těchto tří prvků v js+css jsem našel několik desítek/stovek. Z toho co jsem zkusil, tak tohle je jediné, které mi funguje IE, Firefox, safari, opera, chrome.... Pak už jen Jquery... to mi ale přišlo extrémě dlouhé a složité.

Moje požadavky byly - jednoduchost a funkčnost v těch 5 prohlížečích co jsem psal.

Nemáš tedy nějaký jiný tip, který je lepší/použitelnější?

Ještě jednou díky a radu..
panther
Profil
Ine:
Moje požadavky byly - jednoduchost a funkčnost v těch 5 prohlížečích co jsem psal.
skutečně to funguje všude?

Ty „selecty“ jsou ve všech IEčkách rozbité - v IE7/8 se jich zobrazí jen část, v IE6 se zobrazí klasický select se snahou ostylovat jeho blízké okolí... Však se můžeš podívat, jak to vypadá :-)
Ine
Profil *
Zkoušel jsem IE 8 a IE 6 - zobrazilo se mi to normalně - bez rozpadu... hodíš sem screen prosím?
panther
Profil
Ine:
http://www.2i.cz/28851c36e5
Ine
Profil *
Aha, já to zkoušel na win 7... můžu začít od začátku....:( Doporučíš mi něco ověřeného? Co opravdu funguje? Díky..
joe
Profil
Třeba moje knihovna, o které jsem psal už i tady na fóru to dokáže celkem spolehlivě (funguje od IE5.5+). Najdeš ji na javascript.webdream.cz pod PrettyForm. Ale šířku tam při nahrazení klasického selectu nedávám, počítá se skoro automaticky (ale neměl by být problém ji změnit na požadovanou). Pro některé prohlížeče to je třeba upravit (viz kód a komentáře).
Ale v této době tam je jen checkbox a selectbox, nic víc. Nemám teď čas na rozžíření a doladění. Ale můj select box funguje nejspolehlivěji, než jakýkoli co jsem našel.
Ine
Profil *
Díval jsem se na to a vypadá to hodně dobře:) Určitě ji použiji na svém webu. Škoda jen, že nemáš čas na to rozšíření. Hodilo by se mi ještě radio a file :)
joe
Profil
Ine:
Tak pro radio můžeš použít to co máš nahoře :) a pro file, ten jsem nikdy nezkoušel přestylovat, uvidíme, třeba až se k tomu dostanu to nějak půjde udělat..

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: