недоступность div / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / недоступность div

11 сообщений из 11, страница 1 из 1

недоступность div

#35223406

жаваскриптер

Гость

есть код - попытка сделать окна, которые можно перетаскивать по странице. все вроде как работает, но вот проблема.. почемуто доступ (из класса) имеется только для последнего добавленного объекта.
кто что думает?

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.

<html>
<head>
	<script language="javascript">
		function GetElementById(id) {
			var obj = document.getElementById(id);
			return obj;
		}
	</script>
	<style>	
		.block {
			border: 1px solid #a4a4a4;
			background: #f4f4f4;
			padding: 4px;
		}
	</style>
</head>
<body id='blocks'>
	<div id='rectinfo'></div>
	<div id='info'></div>
</body>
</html>

<script language="javascript" >
	// обработка событий
	window.captureEvents(Event.MOUSEMOVE || event.MOUSEDOWN || event.MOUSEUP);
	window.onmousemove = Window_Process;
	window.onmousedown = Window_MouseDown;
	window.onmouseup = Window_MouseUp;
	// ----------------------------------------------------------
	// глобальные параметры
	var g_Windows = new Array(); 	// массив экземпляров окон
	var g_SelectedWindow = null;	// текущий выбранный объект
	var g_mouseX =  0 ;				// координата X
	var g_mouseY =  0 ;				// координата Y
	
	// -----------------------------------------------------------
	// окно
	function Window() {
		var id;						// id окна
		var width;					// длина
		var height;					// высота
		var x;						// позиция X
		var y;						// позиция Y
		var x_offset, y_offset;		// смещения по X,Y
		var isSelected = false;		// выбрано ли окно
		var control =  0 ;			// HTML объект
		
		// проверка на попадание
		this.IsOverlap = function(x,y) {
			xw = parseInt(this.x, 10 ) + parseInt(this.w, 10 );
			yh = parseInt(this.y, 10 ) + parseInt(this.h, 10 );
			
			if (x >= this.x && x <= xw) {
				if (y >= this.y && y <= yh) {
					return true;
				}
			}
			return false;
		}
	
		// начало перетаскивания
		this.DragBegin = function(x,y) {
			this.isSelected = true;
		
			this.x_offset = x-this.x;
			this.y_offset = y-this.y;
			
			this.Update();
		}
		
		// завершение перетаскивания
		this.DragEnd = function() {
			this.isSelected = false;
			this.Update();
		}
		
		// изменения положения
		this.SetPosition = function(x,y) { 
			this.x = x - this.x_offset;
			this.y = y - this.y_offset;
			this.Update(); 
		}
		
		// изменение размера
		this.SetSize = function(w,h) { 
			this.w = w; this.h = h; this.Update() 
		}
				
		// изменение ID
		this.SetId = function(id) { 
			this.id = id; 
		}
		
		// вызывается когда объект изменяется
		this.Update = function() {
			this.control.style.width = this.w;
			this.control.style.height = this.h;
			this.control.style.left = this.x;
			this.control.style.top = this.y;
			
			style_border = ""
			opacity =  1 . 0 ;
			
			if (this.isSelected) {
				style_border = "1px solid #ff0000";
				opacity =  0 . 5 ;
			}
			else style_border = "1px solid #000000";
			
			this.control.style.border = style_border;
			this.control.style.opacity = opacity;
			
			// вывод информации
			this.control.innerHTML = "object: " + this.id + "<br>size: " + this.w + ", " + this.h + "<br>position: " + this.x + ", " + this.y + "<br>state: " + this.isSelected;
		}
		
		// создание нового окна
		this.Create = function() {
			var str_style = "width: " + this.w + "; height: " + this.h + "; left: " + this.x + "; top: " + this.y + "; position: absolute; display: block; ";
			GetElementById("blocks").innerHTML += "<div class='block' id='" + this.id + "' style='" + str_style + "'></div>";
			
			this.control = GetElementById(this.id);
			this.x_offset =  0 ;
			this.y_offset =  0 ;
		}
	}
	
	
	// базовая функция, перетаскивание выделенного окна
	function Window_Process(e) {
		var event = e || window.event;
		g_mouseX = e.clientX;
		g_mouseY = e.clientY;
		
		if (g_SelectedWindow) {
			g_SelectedWindow.SetPosition(g_mouseX,g_mouseY);
		}
	}
	
	
	// нажали кнопку (проверка, какое окно вошло в область мыши)
	function Window_MouseDown(e) {
		for (i= 0 ;i<g_Windows.length;i++) {	
			if (g_Windows[i].IsOverlap(g_mouseX,g_mouseY)) {
				g_SelectedWindow = g_Windows[i];
				
				g_SelectedWindow.DragBegin(
									g_mouseX,
									g_mouseY
								);
				return;
			}
		}
	}
	
	// отпустили кнопку
	function Window_MouseUp(e) {
		if (g_SelectedWindow) {
			g_SelectedWindow.DragEnd();
			g_SelectedWindow = null;
		}
	}
	
	// ----------------------------------------------------------

	// первое окно
	var window1 = new Window();
	window1.SetId('window1');
	window1.Create();
	window1.SetSize( 100 , 100 );
	window1.SetPosition( 300 , 300 );
	
	// второе окно
	var window2 = new Window();
	window2.SetId('window2');
	window2.Create();
	window2.SetSize( 200 , 150 );
	window2.SetPosition( 100 , 100 );
	
	// третье окно
	var window3 = new Window();
	window3.SetId('window3');
	window3.Create();
	window3.SetSize( 320 , 100 );
	window3.SetPosition( 500 , 500 );
	
	
	g_Windows[ 0 ] = window1;
	g_Windows[ 1 ] = window2;
	g_Windows[ 2 ] = window3;
	
</script>

...

Рейтинг:

0 / 0

31.03.2008, 02:08

| Ответить | Цитировать | Написать

недоступность div

#35223635

жаваскриптер

Гость

есть у когонить мысли?

зы. работает только в FF как выяснилось случайно.
для проверки достаточно скопировать код в новый html и все

...

Рейтинг:

0 / 0

31.03.2008, 10:11

| Ответить | Цитировать | Написать

недоступность div

#35224809

LINUXER

Участник

Сообщения: 1 315

Рейтинг: 0 / 0

Где конкретно проблема - не видно, но бросается в глаза, что вы плохо понимаете жизнь переменных.

var id; в Window - это совсем не та же, что и this.id (window.id).
В функции IsOverlap получился страшный микс из переменных разной области видимости. И, конечно, трудно понять, что там на самом деле происходит

...

Рейтинг:

0 / 0

31.03.2008, 15:33

| Ответить | Цитировать | Написать

недоступность div

#35224907

жаваскриптер

Гость

чесно говоря, не совсем понял что имелось ввиду.
в функцию IsOverlap(x,y) экземпляра Window подаются координаты из глобальной функции Window_MouseDown., т.е проверяется, какое окно находится под указателем мыши.

в чем я именно ошибся с переменными? говорить то можно что угодно, а вот помочь...
код рабочий, достаточно проверить его (в firefox).

...

Рейтинг:

0 / 0

31.03.2008, 15:54

| Ответить | Цитировать | Написать

недоступность div

#35224914

LINUXER

Участник

Сообщения: 1 315

Рейтинг: 0 / 0

в Update() выходит, что this.control != document.getElementById(this.id)

Кстати, если появляется скролл, всё неправильно работает

...

Рейтинг:

0 / 0

31.03.2008, 15:57

| Ответить | Цитировать | Написать

недоступность div

#35224952

LINUXER

Участник

Сообщения: 1 315

Рейтинг: 0 / 0

жаваскриптерчесно говоря, не совсем понял что имелось ввиду.

дело в том, что объявляются две переменные: var control = 0 и this.control=[object].
в IsOverlap xw,yh - не объявленны. те глобальны
Суть в том, что если писать не аккуратно, то потом и возникает часто всякая мистика. Как сейчас

...

Рейтинг:

0 / 0

31.03.2008, 16:07

| Ответить | Цитировать | Написать

недоступность div

#35225060

LINUXER

Участник

Сообщения: 1 315

Рейтинг: 0 / 0

LINUXERв Update() выходит, что this.control != document.getElementById(this.id)

понял почему.

Код: plaintext

GetElementById("blocks").innerHTML += "<div class='block' id='" + this.id + "' style='" + str_style + "'></div>";

эквивалентно
GetElementById("blocks").innerHTML = GetElementById("blocks").innerHTML + ...
т е все дивы каждый раз создаются заново. И, соответственно, элементы, полученные по id ранее уже не актуальны

...

Рейтинг:

0 / 0

31.03.2008, 16:28

| Ответить | Цитировать | Написать

недоступность div

#35225112

жаваскриптер

Гость

т.е достаточно заново пройтись по всему массиву окон и получить объекты заново?

...

Рейтинг:

0 / 0

31.03.2008, 16:42

| Ответить | Цитировать | Написать

недоступность div

#35225126

жаваскриптер

Гость

все, разобрался.
LINUXER спасибо :) не знал что при добавлении новых дивов связь теряется.
достаточно потом написать

Код: plaintext

1.
2.
3.
4.

	
for (i= 0 ;g_Windows.length;i++) {
    g_Windows[i].control = GetElementById(g_Windows[i].id);
}

...

Рейтинг:

0 / 0

31.03.2008, 16:45

| Ответить | Цитировать | Написать

недоступность div

#35237260

жаваскриптер

Гость

кстати, а почему этот код работает только в Firefox? Ни в опере, ни в IE он не заработал..
что конкретно там не правильно?

...

Рейтинг:

0 / 0

05.04.2008, 03:28

| Ответить | Цитировать | Написать

недоступность div

#35237277

illion

Участник

Сообщения: 1 288

Рейтинг: 0 / 0

а вы по применяемым функциям документацию читаете или хотя бы в консоль ошибок заглядываете?

Код: plaintext

window.captureEvents(Event.MOUSEMOVE || event.MOUSEDOWN || event.MOUSEUP);

window.captureEvents - это, насколько я помню, функция от netscape и ie с оперой ее не поддерживают. Хотя даже FF в консоли ошибок честно предупреждает - "Предупреждение: Использование captureEvents() больше не поддерживается, см. баг 330494" (FF касательно вашего скрипта вообще много о чем предупреждает). Да и IE говорит, что "Event - определение отсутствует".

...

Рейтинг:

0 / 0

05.04.2008, 05:49

| Ответить | Цитировать | Написать

11 сообщений из 11, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / недоступность div

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=35224952&tid=1456650]:	0ms
get settings:	7ms
get forum list:	16ms
check forum access:	2ms
check topic access:	2ms
track hit:	23ms
get topic data:	7ms
get forum data:	2ms
get page messages:	30ms
get tp. blocked users:	1ms
others:	216ms

total:	306ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы