Выдвигающиеся менюшки - JavaScript, Ajax

Andr180nag · 01.08.2008, 09:46

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

Код 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>

Помогите плз ! ))

Johnatan · 01.08.2008, 10:38

Во-первых, 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';
}}

Я не проверял работоспособность кода, но надеюсь смысл ты понял.

Andr180nag · 01.08.2008, 13:00

Смысл элемениарный )) не совсем ясно, но работает :

Код 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."айдишник"."куда обращаться" ?

Спасибо огромное, очень помогли, ща немного подправлю, если надо, готовый скрипт потом выложу если ни кто не против ) {если получится конечно}

Johnatan · 01.08.2008, 14:09

Никакого строкового значения. div - это объект. То есть передаётся ссылка на объект. По-другому вы можете получить такую же ссылку через document.getElementByID('айдишник') .
document.all не работает во всех броузерах. А скоро и совсем исчезнет. Так что пользоваться нужно getElementByID.
http://www.w3schools.com/HTMLDOM/met...lementbyid.asp

Andr180nag · 01.08.2008, 14:17

Переписал ( в коментах проблемма очередная не могу понять почему так. Не, ну делают всплывающие менюшки же как-то и по 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>

заранее спасибо..

komex · 03.08.2008, 02:42

Не знаю, то тебе надо было или не то. Вот, набросал на скорую руку. При наводке мышки на желтый прямоугольник, красный ползет влево. Это конечно примитивно и не оптимизировано...

Код 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>

Andr180nag · 07.08.2008, 11:03

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

komex · 07.08.2008, 17:02

Ну вот что-то вроде этого:

Код 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), второй параметр - это в какую точку по горизонтали нужно сместить.

Andr180nag · 08.08.2008, 09:12

точно ! )) спасибо большое !

Andr180nag · 08.08.2008, 11:45

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

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% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?

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."айдишник"."куда обращаться" ? Спасибо огромное, очень помогли, ща немного подправлю, если надо, готовый скрипт потом выложу если ни кто не против ) {если получится конечно}

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% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?

07.08.2008, 11:03	#7
Andr180nag Пользователь Регистрация: 10.07.2008 Сообщений: 27	Спасибо. Еслии чесно, я запутал и вас и себя. изначальная задача состоит в том, что мне нужна схема, как описать одним скриптом , предположим, 10 менюшек такого плана. Т.е. чтобы цикла было 2-туда цикл и обратно, а менюшек выполняющюю эту функцию, 10, а не 10 циклов туда и 10 назад писать для каждой. если есть возможность, напишите хоть примерно, если вообще это реально сделать на яваскрипте. Последний раз редактировалось Andr180nag; 07.08.2008 в 11:07.

08.08.2008, 11:45	#10
Andr180nag Пользователь Регистрация: 10.07.2008 Сообщений: 27	Вот это номер...... У меня пашет под Мазилой, в IE не работает. Прочитал следующую тему, про создателя чата, у которого возникла аналогичная ситуация с обновлением странички...непонятно..сижу пробую че-нить придумать. Кто-нибудь сталкивался с подобным ? Последний раз редактировалось Andr180nag; 08.08.2008 в 12:17.

08.08.2008, 09:12	#9
Andr180nag Пользователь Регистрация: 10.07.2008 Сообщений: 27	точно ! )) спасибо большое !