Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2010, 11:42
Аспирант
Отправить личное сообщение для Flashton Посмотреть профиль Найти все сообщения от Flashton
 
Регистрация: 30.01.2010
Сообщений: 30

Указание пути в document.getElementById.
Здравствуйте все. В общем, так: есть файл со сценарием, таблица стилей, html страница, по клику ссылки на странице должен действовать сценарий, который задействует таблицу стилей и выводит окно. Проблема в том, что в строке сценария:

document.getElementById(‘Как тут указать путь к стилю «Shwind_u»?‘).style.clip = rect;

В этом вся суть проблемы, нужно указать пути к стилю, кто знает, исправьте, пожалуйста.
Может эту конструкцию можно как-то упростить? А то у меня ссылок много и для каждой нужно писать свой скрипт?
Код страницы:
<div id="Shwind_u">
	<div class="hrift">1</div>
	<p class="hrift_c">2.<br>
	<button style="clear:both; margin-top:30px;" type="button" onClick="shtrClose_1()">Закрыть!</button></p>
</div>
<a href="javascript:shtrOpen_1()" class="strong">1</a>



Скрипт:
var shtrStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var shtrTimeout = 15;//задержка перед последующей итерацией для эффекта плавности

//текущее количество обрезаемых пикселей слоя слева и справа
var shtrLeft = 300;
var shtrRight = 300;
var shtrWidth = 600;//ширина слоя

function shtrOpen_1()
{
	if (shtrLeft>0)
	{
		shtrRight += shtrStep; //раскрываем область усечения справа на curtainStep пикселей
		shtrLeft -= shtrStep; //раскрываем область усечения слева на curtainStep пикселей
		
		var rect = 'rect(auto, '+ shtrRight +'px, auto, '+ shtrLeft +'px)';
		
		document.getElementById('Shwind_u',"../CSS/Stranichnie_of").style.clip = rect;
		
		setTimeout(shtrOpen,shtrTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
	}
}

function shtrClose_1()
{
	if (shtrLeft<shtrRight)//Пока левая граница области усечения не встретилась с правой
	{
		shtrRight -= shtrStep; //сужаем область усечения справа на curtainStep пикселей
		shtrLeft += shtrStep; //сужаем область усечения слева на curtainStep пикселей
		
		var rect = 'rect(auto, '+ shtrRight +'px, auto, '+ shtrLeft +'px)';
		
		document.getElementById(('Shwind_u'),"../CSS/Stranichnie_of").style.clip = rect;
		
		setTimeout(shtrClose,shtrTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
	}
}

function clipImg_1(on)
{
document.getElementById("clipEx1").style.clip=on?'rect(78px 146px 183px 84px)':'rect(auto,auto,auto,auto)';
}



Таблица стилей:
#Shwind_u
{

/* Настраиваем внешний вид слоя */

	width: 600px; /* шириша слоя диалогового окна */
	height: 400px; /* высота слоя диалогового окна */
	background-color: #FFFFCC; /* цвет слоя диалогового окна */
	border: 1px dotted gray; /* рамка слоя диалогового окна*/

/* Позиционируем слой по центру */

	position: absolute; /* устанавливаем абсолютное позиционирование */
	left: 30%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
	top:  42%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
	margin-top: -150px; /* сдвигаем слой вверх на половину высоты слоя */
	margin-left: -100px; /* сдвигаем слой влево на половину ширины слоя */

/* делаем слой невидимым */

	clip: rect(auto 300px auto 300px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}


-----------------------------------------
С уважением, Антон.
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2010, 12:22
Аватар для Мараторий
Кандидат Javascript-наук
Отправить личное сообщение для Мараторий Посмотреть профиль Найти все сообщения от Мараторий
 
Регистрация: 22.01.2010
Сообщений: 114

И где вы такое чудо откопали?
document.getElementById('Shwind_u',"../CSS/Stranichnie_of")
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2010, 12:35
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,576

Стиль надо заранее подключать. Я бы добавил:
display:none;/*Вот это добавил*/
clip: rect(auto 300px auto 300px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */

Ну и в функции показа слоя:
var rect = 'rect(auto '+ shtrRight +'px auto '+ shtrLeft +'px)';
var obj = document.getElementById('Shwind_u');
if (obj) {
    obj.style.display = 'block';
    obj.style.clip = rect;
}
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2010, 13:24
Аспирант
Отправить личное сообщение для Flashton Посмотреть профиль Найти все сообщения от Flashton
 
Регистрация: 30.01.2010
Сообщений: 30

Спасибо!
TO micscr.
А куда добавить:
var rect = 'rect(auto '+ shtrRight +'px auto '+ shtrLeft +'px)';
var obj = document.getElementById('Shwind_u');
if (obj) {
    obj.style.display = 'block';
    obj.style.clip = rect;
}
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2010, 13:27
Аспирант
Отправить личное сообщение для Flashton Посмотреть профиль Найти все сообщения от Flashton
 
Регистрация: 30.01.2010
Сообщений: 30

Добавьте пожалуйста, а то я не пойму.
Вроде всё собрал воедино, а окно не открывается, не работает, может кто знает, где ошибка.

Последний раз редактировалось Flashton, 30.01.2010 в 13:35.
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2010, 14:51
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,576

Сообщение от Flashton Посмотреть сообщение
Спасибо!
TO micscr.
А куда добавить:
Вместо этого:
var rect = 'rect(auto, '+ shtrRight +'px, auto, '+ shtrLeft +'px)';
document.getElementById(('Shwind_u'),"../CSS/Stranichnie_of").style.clip =rect;

пробуйте это:
var rect = 'rect(auto '+ shtrRight +'px auto '+ shtrLeft +'px)';
var obj = document.getElementById('Shwind_u');
if (obj) {
    obj.style.display = 'block';
    obj.style.clip = rect;
}
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2010, 20:55
Аспирант
Отправить личное сообщение для Flashton Посмотреть профиль Найти все сообщения от Flashton
 
Регистрация: 30.01.2010
Сообщений: 30

Ещё раз спасибо за советы. Вот ссылка, выложил: http://antton120.narod.ru/vrp/pr.html
Там, всё отдельно, таблица стилей, скрипт и сама страница, как то так я и хочу сделать.
Тут вот всё собрано в одну страницу, работает: http://antton120.narod.ru/vrp/pr_s.html
Пытался сделать по всякому, но всё равно не работает, видимо дело в указании пути к стилю, потому что когда таблица стилей, скрипт и ссылка находятся на одной странице, то всё работает. Посмотрите, пожалуйста, если можете, исправьте ошибку.
-------------------------------------
С уважением, Антон.
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2010, 21:13
Аспирант
Отправить личное сообщение для Flashton Посмотреть профиль Найти все сообщения от Flashton
 
Регистрация: 30.01.2010
Сообщений: 30

Перекрытие слоёв?
Заработало! Спасибо всем кто подсказал!
Причина была в неправильном присоединении таблицы стилей.
Результат тут: http://antton120.narod.ru/vrp/pr.html
Только теперь новая проблема, страница на которой всё это установлено, написана div вёрсткой, так вот открывающееся окно оказывается под остальными блоками, и притом происходит это только в IE, версия 7.0, в Mozilla и Opera всё работает как надо.
Пробовал решить проблему, используя z-index, раздвигающемуся слою присваивал 1, а тому, что должно быть под ним 0, не помогло, кто знает, подскажите, как решить эту проблему для Internet Explorer.
-------------------------------------
С уважением, Антон.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передать в функцию указание на элемент, из которой она вызвана AndreyLL Events/DOM/Window 3 30.11.2009 09:55
Поиск кротчайшего пути IVIbILLIb Серверные языки и технологии 6 02.05.2009 17:11