Jump to content
  • 0

Как сделать элемент на всю ширину страницы с прокруткой

clavin

Asked by clavin,

 Share

Question

clavin Explorer

clavin

Posted
Posted

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

Хотел бы выяснить один вопрос, стоящий на грани разметки и javascript.

Есть такой эффект на javascript, называемый lightbox, и служащий для того, чтобы при щелчке на миниатюру изображения открывалось изображение в реальном размере. Пример такого эффекта можно посмотреть, например, на этой странице http://rostovstrojtorg.tiu.ru/p176712-gips...agostojkij.html (кликните на изображение)

или же скачайте данный архив http://ifolder.ru/17079448, распакуйте все файлы и откройте страницу index.html

Эффект работает нормально, но есть одна некрасивость. Когда эффект запущен и в центре появилось изображение, то если уменьшить размеры окна до появление горизонтальных полос прокрутки, а потом прокрутить бегунок направо, мы увидим, что эта область осталась незатемнённой. Это не очень красиво.

Вот как делается затемнение страницы:

Где-то внизу перед закрывающим тегом </body> размещается элемент div, служащий тёмным экраном, который после запуска эффекта делается видимым, а его высота задаётся высоте всей страницы вместе с прокруткой. В html это выглядит примерно так

<body>
	<div id="content">
	<!-- здесь находится весь контент и разметка страницы-->
	</div>
	<div id="mbOverlay" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;" />
</body>

После щелчка по ссылке и открытия большой картинки код выглядит примерно так

<body>
	<div id="content">
	<!-- здесь находится весь контент и разметка страницы-->
	</div>
<div id="mbOverlay" style="overflow: hidden; visibility: visible; opacity: 0.7; height: 3541px; top: 0px;" />
</body>

Элемент mbOverlay имеет более сложную таблицу стилей, которая задаётся из javascript.

Тут возникает вопрос по разметке на html. Хотелось бы, чтобы тёмный экран корректно распространялся на всю ширину при любой разметке: и дивами и таблицами. Наверное вопрос решается только с помощью javascript. Т.е. для ширины элемента mbOverlay необходимо будет указать значение в пикселях при ресайзе окна. Размер окна меняется, на javascript подсчитывается нужная ширина и подставляется как ширина для элемента mbOverlay.

Кстати, всю высоту страницы вместе с прокруткой можно определить таким образом: document.body.scrollHeight. А вот с шириной у меня ничего не получается.

Может кто знает как решается данная задача? Самый оптимальный вариант будет, если при ресайзе окна не надо применять javascript и ширина затемнённого блока mbOverlay будет подгоняется автоматически html-разметкой.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
clavin Explorer

clavin

Posted
  • Author
Posted
Надо модернизировать скрипт, чтобы он отслеживал как нибудь изменение окна. HTML/CSS тут ни при чем.

Так я о том и спрашиваю. Каким образом определить ширину этого затемнённого фона на Javascript. Второй вопрос: можно ли это сделать без javascript, сделав такую хитрую разметку и задав такие свойства для mbOverlay, чтобы тёмный фон был на всю ширину страницы с прокруткой.

Считаю, что данная тема стоит на стыке и разметки и javascript

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted
Напишите какой вы используете браузер

Ржунимагу

Тестирую в IE6, FF, Opera. Chrome, Safari

По ссылке на страницу, которую я дал, наверное, удачная реализация, не заметил, что этот лайтбокс работает и в FF и IE8. Но в Chrome не работает.

Ищу универсальное решение, которое работало бы во всех браузерах.

Вообще реализаций лайтбокса очень много, возможно какой-то из них полностью кроссбраузерный. Хочется самостоятельно узнать эту фичу %)

Возможно этой теме место в разделе про Javascript

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
×
×
  • 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