Проявление слоя с правой стороны.

iluha · May 20, 2010

Здравствуйте.

На странице есть DIV, который имеет начальную ширину 1px, высоту - 100 процентов, overflow: hidden; left: 0;

В этом диве находятся объекты, которые не видны из-за того, что DIV имеет ширину 1px;

По событию DIV начинает плавно увеличивать ширину пока не становится на весь экран тем самым показывая скрытые в нем объекты.

По следующему событию DIV также плавно уменьшает ширину и опять же скрывает содержимое.

САМОЕ ГЛАВНОЕ: ПРИ ЭТОМ СОДЕРЖИМОЕ СКРЫТОЕ В ДИВЕ ОСТАЕТСЯ НЕПОДВИЖНЫМ!!!

Ниже привожу собственно полный код отлично работающий.

ВОПРОС: КАК СДЕЛАТЬ ТАК, ЧТОБЫ ЭТОТ СЛОЙ РАЗВОРАЧИВАЛСЯ И СВОРАЧИВАЛСЯ К ПРАВОЙ СТОРОНЕ ЭКРАНА?

Я пробовал ставить начальное положение DIV right:0, но в этом случае скрытое содержимое передвигается вместе с левой границей DIVа.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<title></title>

<STYLE>
DIV.myDiv1 {
	background-color: #ffffff;
	position: absolute;
	overflow: hidden;
	z-index: 999;
	width: 0px;
	height: 100%;
	min-height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
	vertical-align: middle;
}
#myDiv1 {
	background-color: #ffffff;
	position: absolute;
	overflow: hidden;
	z-index: 999;
	width: 0px;
	height: 100%;
	min-height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
	vertical-align: middle;
}

</STYLE>

<script language="JavaScript">

function ShowMyDiv() {
var i = 0;
document.getElementById('myDiv1').style.height = hH;

this.int = setInterval(function() 
	{ 
	i = i + 40; 
	document.getElementById('myDiv1').style.width = i; 
	if (i >= (wW-40)) {
					   this.int = clearInterval(this.int);
					  }
	}, 1);
}

function HideMyDiv() {
var i = wW;
document.getElementById('myDiv1').style.height = hH;

this.int = setInterval(function() 
	{ 
	i = i - 40; 
	document.getElementById('myDiv1').style.width = i; 
	if (i <=40) {
					   this.int = clearInterval(this.int);
					   document.getElementById('myDiv1').style.width = 1; 
					  }
	}, 1);
}

</script>

</head>

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0">

<script language="JavaScript">
A = Array;
DA = document.all;
var wW = document.body.clientWidth;
var hH = document.body.clientHeight;
</script>

<script>
document.write('<table id="maintable" width="' + wW + 'px" height="100%" cellspacing="0" cellpadding="0" border="1" style="width: ' + wW + 'px; border-color: red;"><tr>');
document.write('<td id="maintd" style="width: ' + wW + 'px; height: ' + hH + 'px; vertical-align:middle;" align="center" valign="middle">');
</script>

<a href="java script:ShowMyDiv();">ПОКАЗАТЬ СЛОЙ</a>

</td>
</tr></table>

<div id="myDiv1" class="myDiv1">
		<script>
		document.write('<table width="' + wW + 'px" height="' + hH + 'px" cellspacing="0" cellpadding="0" border="0" style="width: ' + wW + 'px; height: ' + hH + 'px;">');
		document.write('<tr><td width="' + wW + 'px" height="' + hH + 'px" align="center" bgcolor="#00ffff">');
		</script>
		<a href="java script:HideMyDiv();">СПРЯТАТЬ СЛОЙ</a>
		</td></tr></table>
</div>

</body>
</html>

iluha · May 22, 2010

неужели никто не знает? (((

Great Rash · May 23, 2010

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

psywalker · May 23, 2010

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

+1

iluha · May 23, 2010

Да, наверное я слишком сложный вопрос написал.

Вот его суть:

ВОПРОС: КАК СДЕЛАТЬ ТАК, ЧТОБЫ ЭТОТ СЛОЙ РАЗВОРАЧИВАЛСЯ И СВОРАЧИВАЛСЯ К ПРАВОЙ СТОРОНЕ ЭКРАНА?

При этом, сворачивании внутренность слоя должна оставаться на месте.

Вот сделал здесь пример:

http://iluha.org/tests/rollingdiv.htm

Но внутренность слоя приезжает справа, а нужно, чтобы внутренность оставалась на месте и только DIV увеличиался, открывая содержимое.

Searcher · May 24, 2010

Содержимое расположить в диве и задать ему ширину. Все это обернуть в див с overflow:hidden; и изменять размер уже этого дива.

и скрипт у вас в FF не работает

iluha · May 24, 2010

Searcher, спасибо большое за ваш ответ.

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

Может поможете с кодом?

Я кстати сижу в FF так что код этот как раз только в FF проверял.

Great Rash · May 24, 2010

ВОПРОС: КАК СДЕЛАТЬ ТАК, ЧТОБЫ ЭТОТ СЛОЙ РАЗВОРАЧИВАЛСЯ И СВОРАЧИВАЛСЯ К ПРАВОЙ СТОРОНЕ ЭКРАНА?

В ИЕ при клике на ссылку блок едет справа налево, и никуда не сворачивается.

При этом, сворачивании внутренность слоя должна оставаться на месте.

Внутренность какого слоя?

Скрипт работает только в ИЕ и Опере.

Searcher · May 24, 2010

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

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

iluha · May 24, 2010

Есть далекоидущие планы.

Носначала надо решить эту проблему.

И честно говоря, видимо, моих знаний не хватает сделать сделать как раз вот это:

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

Может у кого найдется немного времени написать правильный код??

psywalker · May 24, 2010

Может у кого найдется немного времени написать правильный код??

Конечно-же, пиши тут http://forum.htmlbook.ru/index.php?showforum=21 :blink:

Sign In

Проявление слоя с правой стороны.

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information