Jump to content
  • 0

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

iluha

Asked by iluha,

 Share

Question

iluha Explorer

iluha

Posted
Posted

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

На странице есть 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>

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
iluha Explorer

iluha

Posted
  • Author
Posted

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

Вот его суть:

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

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

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

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

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

Link to comment
Share on other sites
  • 0
iluha Explorer

iluha

Posted
  • Author
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
iluha Explorer

iluha

Posted
  • Author
Posted

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept