Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Смена бэкграунда отдельной области (https://javascript.ru/forum/events/36179-smena-behkgraunda-otdelnojj-oblasti.html)

MSos0506 06.03.2013 15:24
Смена бэкграунда отдельной области
 
Многоуважаемые Гуру!
Взываю о помощи, весь моск сломал со своими поверхностными знаниями Явы, подскажите, плз, где собака порылась...

Цель: сделать область разделенную на 4 под-области, с возможностью выбора цвета бэкграунда для каждой из под-областей...
Бьюсь весь день, цвет фона не меняется...

Сокращенный (для одной области) исходник:

HTML:
Код:
<div class='ColorArea'>
        <div ID='Area1' class='ColorArea1'>
                <select ID='Color1' class='ColorList1' onChange='SelectColor()'>
                        <option value='#fadf00'>Process Yellow
                        <option value='#d7006c'>Process Magenta
                        <option value='#009dd9'>Process Cyan
                        <option value='#191919'>Process Black
                </select>
        </div>
        <div class='ColorArea2'>
                ...
        </div>
        <div class='ColorArea3'>
                ...
        </div>
        <div class='ColorArea4'>
                ...
        </div>
</div>
CSS:
Код:
.ColorArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.ColorArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.ColorList1 {position:absolute;top:220px;left:40px;}
Java:
Код:
function SelectColor() {
        Area1.backgroundColor = Color1.value;
}

Казалось бы, что может быть проще, ан нет... :-E
Хелп, плиииииззззз...

Заранее, мэни сенкс...

ksa 06.03.2013 15:30
Цитата:
Сообщение от MSos0506
поверхностными знаниями Явы
Тут не форум по Яве... :nono:

Цитата:
Сообщение от MSos0506
Хелп, плиииииззззз...
Делай полный тестовый пример...

MSos0506 06.03.2013 15:47
Цитата:
Сообщение от ksa (Сообщение 239134)
Тут не форум по Яве... :nono:


Делай полный тестовый пример...
Извините что потревожил, но хде-же спросить о проблеме с яваскриптом, как не на яваскрипт дот ру..:-?

По поводу "полный" - сократил код для читабельности...
Остальные три области все с полностью таким-же "селектом", отличающиеся лишь номером области и ее расположением...
Весь остальной код - "интерьерная" часть...

Понимаю что дело в каком-то пустяке, не понимаю в каком...
Хелп иф поссибл...

MSos0506 06.03.2013 16:14
Цитата:
Сообщение от ksa (Сообщение 239134)
Делай полный тестовый пример...
К примеру вот такой полный тестовый пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<style type='text/css'>
		.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
		.PantoneArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea2 {position:absolute;top:0px;left:250px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea3 {position:absolute;top:250px;left:250px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneArea4 {position:absolute;top:250px;left:0px;width:250px;height:250px;padding:0;margin:0;}
		.PantoneList1 {position:absolute;top:220px;left:40px;}
		.PantoneList2 {position:absolute;top:220px;left:40px;}
		.PantoneList3 {position:absolute;top:10px;left:40px;}
		.PantoneList4 {position:absolute;top:10px;left:40px;}
	</style>
</head>

<body>
	<script language="JavaScript" type='text/javascript'>
		function SelectPantone() {
			Area1.backgroundColor = Pantone1.value;
			Area2.backgroundColor = Pantone2.value;
			Area3.backgroundColor = Pantone3.value;
			Area4.backgroundColor = Pantone4.value;
		}
	</script>

	<div ID='ColorArea' class='PantoneArea'>
		<div ID='Area1' class='PantoneArea1'>
			<select ID='Pantone1' class='PantoneList1' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area2' class='PantoneArea2'>
			<select ID='Pantone2' class='PantoneList2' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area3' class='PantoneArea3'>
			<select ID='Pantone3' class='PantoneList3' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
		<div ID='Area4' class='PantoneArea4'>
			<select ID='Pantone4' class='PantoneList4' onChange='SelectPantone()'>
				<option value='#fadf00'>Process Yellow
				<option value='#d7006c'>Process Magenta
				<option value='#009dd9'>Process Cyan
				<option value='#191919'>Process Black
			</select>
		</div>
	</div>
</body>
</html>

danik.js 06.03.2013 16:25
ksa, а ты следующий раз посылай на javatalks.ru
Чтобы человек сам осознал свой промах.

Area1.style.backgroundColor

MSos0506 06.03.2013 16:35
Цитата:
Сообщение от danik.js (Сообщение 239150)
ksa, а ты следующий раз посылай на javatalks.ru
Чтобы человек сам осознал свой промах.

Area1.style.backgroundColor
danik.js, спасибо!!!
И за "направление движения" тоже (искренне), теперь буду знать куда ходить с глупыми вопросами...

Благодарю премного, изините за то чито отвлек...

Deff 06.03.2013 19:00
MSos0506,
Удобнее сделать div wraper, c position:relative; в него засунуть таблицу
position:absolute;width:100%;height:100%; с нужным числом ячеек и строк
следом суем наш <div ID='ColorArea' class='PantoneArea'>
Далее каждой ячейке присваиваем id= Row+'-'+SPAN
Далее в функции селектов <div ID='ColorArea' прописываем аргументом id управляемой ячейки

ksa 06.03.2013 21:08
Цитата:
Сообщение от MSos0506
К примеру вот такой полный тестовый пример:
Уже лучше!

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.PantoneArea1 {position:absolute;top:0px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea2 {position:absolute;top:0px;left:250px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea3 {position:absolute;top:250px;left:250px;width:250px;height:250px;padding:0;margin:0;}
.PantoneArea4 {position:absolute;top:250px;left:0px;width:250px;height:250px;padding:0;margin:0;}
.PantoneList1 {position:absolute;top:220px;left:40px;}
.PantoneList2 {position:absolute;top:220px;left:40px;}
.PantoneList3 {position:absolute;top:10px;left:40px;}
.PantoneList4 {position:absolute;top:10px;left:40px;}
</style>
<script type="text/javascript">
function clr(Obj){
	Obj.parentNode.style.backgroundColor=Obj.value;
};
</script>
</head>
<body>
<div ID='ColorArea' class='PantoneArea'>
	<div ID='Area1' class='PantoneArea1'>
		<select ID='Pantone1' class='PantoneList1' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area2' class='PantoneArea2'>
		<select ID='Pantone2' class='PantoneList2' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area3' class='PantoneArea3'>
		<select ID='Pantone3' class='PantoneList3' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area4' class='PantoneArea4'>
		<select ID='Pantone4' class='PantoneList4' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
</div>
</body>
</html>

Deff 06.03.2013 21:43
Поправил стиль, понравились шахматы
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.PantoneArea {width:500px;height:500px;padding:0px;margin:0 10px 5px 0;float:left;position:relative;}
.Pantone{position:absolute;width:250px;height:250px;padding:0;margin:0;border:red solid 1px;}
.Pantone.Area2 {top:0px;left:250px;}
.Pantone.Area3 {top:250px;left:250px;}
.Pantone.Area4 {top:250px;left:0px;}
.Plist{position:absolute;}
.Plist.List1 {top:220px;left:40px;}
.Plist.List2 {top:220px;left:40px;}
.Plist.List3 {top:10px;left:40px;}
.Plist.List4 {top:10px;left:40px;}
</style>
<script type="text/javascript">
function clr(Obj){
	Obj.parentNode.style.backgroundColor=Obj.value;
};
window.onload = function (){
   var elements = document.querySelectorAll('#ColorArea >div > .Plist ');
   for(var i=0;i<elements.length;i++){
      clr(elements[i])
   }
}
</script>
</head>
<body>
<div ID='ColorArea' class='PantoneArea'>
	<div ID='Area1' class='Pantone Area1'>
		<select ID='Pantone 1' class='Plist List1' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c' selected>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area2' class='Pantone Area2'>
		<select ID='Pantone 2' class='Plist List2' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9' selected>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area3' class='Pantone Area3'>
		<select ID='Pantone 3' class='Plist List3' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c' selected>Process Magenta
			<option value='#009dd9'>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
	<div ID='Area4' class='Pantone Area4'>
		<select ID='Pantone 4' class='Plist List4' onChange='clr(this);'>
			<option value='#fadf00'>Process Yellow
			<option value='#d7006c'>Process Magenta
			<option value='#009dd9' selected>Process Cyan
			<option value='#191919'>Process Black
		</select>
	</div>
</div>
</body>
</html>

danik.js 07.03.2013 03:48
Цитата:
Сообщение от Deff
   for(var i in elements){
      clr(elements[i])
   }
Интересно, как твой скрипт будет менять цвет "объектов" elements.length и elements.item ?

MSos0506 07.03.2013 18:31
Спасибо всем откликнувшимся...
Прописывать таблицу нет смысла - на самом деле она формируется посредством php из sql-базы и в ней будут более тысячи записей... Приводил весьма сокращенный код...

Так что сделал примитивно, как меня поправил danik.js
ksa и Deff тоже спасибо, но увы и ах, мои познания весьма поверхностны... Пишу не профессионально, а любительски, только для своей компании, просто решил сайту очередной upgrade устроить и придумал фенечку которую очень хотелось воплотить в жисть... а поскольку программерское прошлое откладывает отпечаток, то фсе пишу сам рУками, от ваяния дизайна в шопе, до ручной верстки и продвижения... тупо, коряво, но сам-пля, без ансам-пля...

Воплотил фенечку... С вашей помощью...
Кому интересно, "сырой" вариант тут: http://www.showprint.ru/pantone-solid-coated.php

Исчо раз ВСЕМ спасибо!!!


Часовой пояс GMT +3, время: 15:08.