Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 01.08.2008, 09:46   #1
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию Выдвигающиеся менюшки

Проблемма написана в комментах, так мне кажется проще будет, глядя на прогу что-то сказать...
Код HTML:
<html>
<!-- СТИЛИ -->
<style ="text/css">
div{
height:2em;
background-color:red;
position:relative;
top:1em;
border:1px solid black;
}
.static_block {
background-color:blue;
height:2em;
position:absolute;
top:31px;
border:1px solid black;
}
</style> <!-- ЗДЕСЬ РАЗМЕР-->
<body>
<div  onmouseover="move_obj()" onmouseout="move_obj1()" id="test" style="left:200px;width:180px;">  
TEXT hidden text
</div>
<!-- К ЭТОМУ БЛОКУ НАДО ПРИМЕНИТЬ ТЕ ЖЕ СВОЙСТВА ЧТО И К ПЕРВОМУ ?????????????? КАК ?-->  
<div onmouseover="move_obj()"  onmouseout="move_obj1()" id="test_1" style="background-color:yellow;left:200px;width:180px;">  
</div>
<!--статический блок со стилем static_block-->
<div class="static_block" id="test_" style="left:255px;width:14em;">
</div>
</body>
<script>

var raz_=parseInt(document.all.test.style.left)-parseInt(document.all.test_.style.left); //разница расстояний между статическим блоком и динамическим
var koef_=4; // Коэффицент (скорость передвижения)
var len_=parseInt(document.all.test.style.width);// считает длину самого объекта (на сколько выдвигать зависит от этой длины)
var i=parseInt(document.all.test.style.left);// физическая переменная движения 

// Функция Влево
function move_obj(){
if (len_>0-raz_) {
setTimeout('move_obj()',0);
len_=len_-koef_;
i=i-koef_;
document.all.test.style.left=i+'px';
}}

// функция вправо
function move_obj1(){
if (len_<parseInt(document.all.test.style.width)) {
setTimeout('move_obj1()',0);
len_+=koef_;
i=i+koef_;
document.all.test.style.left=i+'px';
}}
// Задача заключается в том, что второй блок называется test_1. document.all.test.style.left=i+'px'; эта смена координат для 'test', 
// как не прописывая по новой эти две функции, применить ее к test_. 
// p.s. window.event.srcElement.id почему-то с ума сходит, видать конфликтуют onmouseover и onmouseout (((
</script>
Помогите плз ! ))
Andr180nag вне форума Ответить с цитированием
Старый 01.08.2008, 10:38   #2
Johnatan
Antimoderаtoris
Участник клуба
 
Регистрация: 08.02.2008
Сообщений: 1,251
По умолчанию

Во-первых, document.all больше не используется.
Во-вторых, структура твоего скрипта не предусматривает второго дива для обработки. Ведь ты создаёшь переменные только для одного дива.

Код:
<div  onmouseover="move_obj(this)" onmouseout="move_obj1(this)" id="test" style="left:200px;width:180px;">  
TEXT hidden text
</div>

<script>
var raz_=parseInt(document.getElementByID['test'].style.left)-parseInt(document.getElementByID['test_'].style.left); 
var koef_=4;

// Функция Влево
function move_obj(div){
var len_=parseInt(div.style.width);
var i=parseInt(div.style.left);

if (len_>0-raz_) {
setTimeout('move_obj()',0);
len_=len_-koef_;
i=i-koef_;
div.test.style.left=i+'px';
}}
Я не проверял работоспособность кода, но надеюсь смысл ты понял.
98% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?
Johnatan вне форума Ответить с цитированием
Старый 01.08.2008, 13:00   #3
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию Спасибо огромное !

Смысл элемениарный )) не совсем ясно, но работает :
Код HTML:
<html>
<div onmouseout="test_1(this)" onmouseover="test_(this)" id="ID_FORM_2" style="color:red">ABCD<br></div>
<div onmouseout="test_1(this)" onmouseover="test_(this)" id="ID_FORM_1" style="color:red">EFGH<br></div>
<script>
function test_(div){
div.style.color="blue";
}
function test_1(div){
div.style.color="red";
}
</script>
onmouseover="test_(this)" и function test_(div){} я только вот этой связи не понял.. если onmouseover, то this говорит, что на этом диве произошло действие, на сколько я понял. но какое строковое значение тогда имеет див ?
зы. Получается что без ID можно обойтись ?
ззы. еще момент. в упор не могу понять функцию document.getElementById("айдишник") , что вы мне предложили вписать (скрипт и сним работает естественно). Читал, примеры смотрел, понял только что она обьект создает. а не проще написать document.all."айдишник"."куда обращаться" ?

Спасибо огромное, очень помогли, ща немного подправлю, если надо, готовый скрипт потом выложу если ни кто не против ) {если получится конечно}
Andr180nag вне форума Ответить с цитированием
Старый 01.08.2008, 14:09   #4
Johnatan
Antimoderаtoris
Участник клуба
 
Регистрация: 08.02.2008
Сообщений: 1,251
По умолчанию

Никакого строкового значения. div - это объект. То есть передаётся ссылка на объект. По-другому вы можете получить такую же ссылку через document.getElementByID('айдишник') .
document.all не работает во всех броузерах. А скоро и совсем исчезнет. Так что пользоваться нужно getElementByID.
http://www.w3schools.com/HTMLDOM/met...lementbyid.asp
98% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?
Johnatan вне форума Ответить с цитированием
Старый 01.08.2008, 14:17   #5
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию

Переписал ( в коментах проблемма очередная не могу понять почему так. Не, ну делают всплывающие менюшки же как-то и по 10 штук .. может вообще как-нить по другому сделать, может тупо подключать везде один .js ?
По-моему уже очень близок к разрешению жалко дель-ентер жать и монитор в окно )
(правда не пробовал таким образом, я недавно занялся явой..)
Хелп плз иф ю кен ))

Код HTML:

<html>
<!-- СТИЛИ -->
<style ="text/css">
div{
height:2em;
background-color:red;
position:relative;
top:1em;
border:1px solid black;
}
.static_block {
background-color:blue;
height:2em;
position:absolute;
top:31px;
border:1px solid black;
}
</style> <!-- ЗДЕСЬ РАЗМЕР-->
<body>
<div  onmouseover="move_obj(this)" onmouseout="move_obj1(this)" id="test" style="left:200px;width:180px;">  
TEXT hidden text
</div>

<div onmouseover="move_obj(this)"  onmouseout="move_obj1(this)" id="test_1" style="background-color:yellow;left:200px;width:180px;">  
</div>
<!--статический блок со стилем static_block-->
<div class="static_block" id="test_" style="left:255px;width:14em;">
</div>
</body>
<script>

var raz_=parseInt(document.getElementById('test').style.left)-parseInt(document.getElementById('test_1').style.left);
 //разница расстояний между статическим блоком и динамическим
var koef_=4; // Коэффицент (скорость передвижения)
// здесь все четко... 
// Функция Влево
function move_obj(div){
// ВЫПОЛНЯЕТ ДВИЖЕНИЕ НА ОДИН ШАГ !!? (получается в начале div.style.left имеет значение, потом нет.. alert-ом проверял)
// , и выдает : style имеет значение null или не является обьектом %| и прерывает выполнение программы ((((((( 
var i=parseInt(div.style.left);
var len_=parseInt(div.style.width);
if (len_>0-raz_) {
setTimeout('move_obj()',0);
len_=len_-koef_;
i=i-koef_;
div.style.left=i+'px';

}}
// функция вправо
function move_obj1(div){
var i=parseInt(div.style.left);// физическая переменная движения 
var len_=parseInt(div.style.width);// считает длину самого объекта (на сколько выдвигать зависит от этой длины)
if (len_<parseInt(div.style.width)) {
setTimeout('move_obj1()',0);
len_+=koef_;
i=i+koef_;
div.style.left=i+'px';

}}

</script>
заранее спасибо..
Andr180nag вне форума Ответить с цитированием
Старый 03.08.2008, 02:42   #6
komex
Пользователь
 
Регистрация: 16.12.2006
Сообщений: 82
По умолчанию

Не знаю, то тебе надо было или не то. Вот, набросал на скорую руку. При наводке мышки на желтый прямоугольник, красный ползет влево. Это конечно примитивно и не оптимизировано...
Код HTML:
<html>
<!-- СТИЛИ -->
<style ="text/css">
div{
height:2em;
background-color:red;
position:relative;
top:1em;
border:1px solid black;
}
.static_block {
background-color:blue;
height:2em;
position:absolute;
top:31px;
border:1px solid black;
}
</style> <!-- ЗДЕСЬ РАЗМЕР-->
<body>
<div id="test" style="left:200px;width:180px;">TEXT hidden text</div>
<div onmouseover="move_left()" onMouseOut="move_right()" id="test2" style="background-color:yellow;left:200px;width:180px;">&nbsp;</div>
<script>
var koef_=1;
var flag1 = false;
var flag2 = true;
function move_left(){
	var div = document.getElementById('test');
	var div2 = document.getElementById('test2');
	if ((parseInt(div.style.left)-parseInt(div2.style.left) < parseInt(div2.style.width)) && flag2) {
		div.style.left = (parseInt(div.style.left)+koef_)+'px';
		setTimeout('move_left()', 0);
		flag1 = false;
	} else flag1 = true;
}

function move_right(){
	var div = document.getElementById('test');
	var div2 = document.getElementById('test2');
	if ((parseInt(div.style.left)-parseInt(div2.style.left) != 0) && flag1) {
		div.style.left = (parseInt(div.style.left)-koef_)+'px';
		setTimeout('move_right()', 0);
		flag2 = false;
	} else flag2=true;
}
</script>
</body>
</html>

Последний раз редактировалось SkyM@n; 04.08.2008 в 12:19.
komex вне форума Ответить с цитированием
Старый 07.08.2008, 11:03   #7
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию

Спасибо. Еслии чесно, я запутал и вас и себя. изначальная задача состоит в том, что мне нужна схема, как описать одним скриптом , предположим, 10 менюшек такого плана. Т.е. чтобы цикла было 2-туда цикл и обратно, а менюшек выполняющюю эту функцию, 10, а не 10 циклов туда и 10 назад писать для каждой. если есть возможность, напишите хоть примерно, если вообще это реально сделать на яваскрипте.

Последний раз редактировалось Andr180nag; 07.08.2008 в 11:07.
Andr180nag вне форума Ответить с цитированием
Старый 07.08.2008, 17:02   #8
komex
Пользователь
 
Регистрация: 16.12.2006
Сообщений: 82
По умолчанию

Ну вот что-то вроде этого:
Код HTML:
<html>
<!-- СТИЛИ -->
<style ="text/css">
div{
height:2em;
background-color:red;
position:relative;
top:1em;
border:1px solid black;
}
.static_block {
background-color:blue;
height:2em;
position:absolute;
top:31px;
border:1px solid black;
}
</style>
<body>

<div onMouseOver="move(this, 380)" onMouseOut="move(this, 200)" style="left:200px;width:180px;">TEXT hidden text</div>
<div style="background-color:yellow;left:200px;width:180px;">&nbsp;</div>
<div onMouseOver="move(this, 380)" onMouseOut="move(this, 200)" style="left:200px;width:180px;">TEXT hidden text</div>

<script>
var koef = 1;
var t;
function move(div, pos) {
	var plus;
	clearInterval(t);
	if (parseInt(div.style.left) > pos) plus = -1; else plus = 1;
	t = setInterval(function() {
		var l = parseInt(div.style.left);
		if (l != pos) {
			div.style.left = (l+koef*plus)+'px';
		} else clearInterval(t);
	}, 0);
}
</script>
</body>
</html>
Запускаешь функцию move, где первый параметр - это сам div (указываешь как this), второй параметр - это в какую точку по горизонтали нужно сместить.
komex вне форума Ответить с цитированием
Старый 08.08.2008, 09:12   #9
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию

точно ! )) спасибо большое !
Andr180nag вне форума Ответить с цитированием
Старый 08.08.2008, 11:45   #10
Andr180nag
Пользователь
 
Регистрация: 10.07.2008
Сообщений: 27
По умолчанию Вот это номер......

У меня пашет под Мазилой, в IE не работает. Прочитал следующую тему, про создателя чата, у которого возникла аналогичная ситуация с обновлением странички...непонятно..сижу пробую че-нить придумать. Кто-нибудь сталкивался с подобным ?

Последний раз редактировалось Andr180nag; 08.08.2008 в 12:17.
Andr180nag вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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