Полосы прокрутки и iframe

Тема в разделе "Веб-дизайн", создана пользователем trooll, 3 май 2011.

Модераторы: zek24
  1. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    Приветствую сообщество.

    Есть некий не мудреный код (HTML, CSS, JS), а именно разметка страницы:

    Ну и сразу ссылка на живой пример:
    Перейти по ссылке

    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>pGuard</title>
    
      <style type="text/css">
    html {
    	height:100%;
    }
    body {
            margin:0;
            padding:0;
            width:100%;
            height:100%;
            position:absolute;
    }
    #block1 {
    	background-color: red;
    	height:100px;
    	width:100%;
    }
    #block2 {
    	position:absolute;
    	top:100px;
    	bottom:0;
    	width:100%;
    }
    #block3 {
    	position:absolute;
    	top:100px;
    	bottom:0;
    	width:100%;
    }
    
    #bt1 {
    	width:49%;
    	height:80px;
    }
    
    #bt2 {
    	width:49%;
    	height:70px;
    }
      </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('#block3').click(function() {
    			alert('ЭТО МЫ ТЫКНУЛИ ПО ТЕСТ СЛОЮ');
    		});
    	});
    </script>
    
    </head>
    <body>
    	<div id="block1">
    		<form>
    			<div align="center">
    				<input id="bt1" type="submit" name="bad" value="В ЧЕРНЫЙ СПИСОК"> <input id="bt2" type="submit" name="good" value="В БЕЛЫЙ СПИСОК">
    			</div>
    		</form>
    	</div>
    
    	<div id="block2">
    			<iframe width="100%" height="100%" frameborder="0" src="http://rambler.ru/"></iframe>
    	</div>
    
    	<div id="block3"></div>
    </body>
    </html>
    

    Так а теперь немного введу в курс дела.

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

    Этот код по сути представляет из себя заглушку для пользователя, в момент когда пользователь ввел пароль на разблокировку страницы, но не был перенаправлен на конкретную страницу, а был перекинут на эту заглушку до выяснения некоторых обстоятельств, а конкретно от пользователя требуется определиться является ли страница ПРАВИЛЬНОЙ или же НЕ ПРАВИЛЬНОЙ.

    Вы глядит заглушка следующим образом. В верху страницы находиться блок высотой в 100 пикселей в котором расположились две кнопки В БЕЛЫЙ СПИСОК и естественно кнопка В ЧЕРНЫЙ СПИСОК.

    Ниже этого блока идет следующий блок растянутый на всю оставшуюся длину страницы, содержащий в себе фрейм подгружающий ту самую заблокированную страницу и растягивающийся по высоте.

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

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


    И вот тут то нарисовалась проблема которую я не могу не как побороть.

    Первая проблема это то что нельзя прокрутить содержимое в фрейме то есть получается что наш 3 хитрый блок не дает этого сделать, но убрать я его не могу. По крайней мере у меня не хватает фантазии как можно сделать так по другому, что бы это работало как сейчас. То есть в двух словах проблема в том что нельзя просмотреть содержимое фрейма при такой постановки событий.

    Второе это 2 полосы прокрутки не понятно (мне по крайней мере), откуда берущиеся. а точнее с полосой прокрутки фрйма все понятно, а вот какого черта появляется полоса прокрутки в самом браузере не ясно, и вообще куда там она собираться прокручиваться если все отступы и т.д сброшены.

    Народ помогите пожалуйста не бросайте криворуких, вот честно уже не хватает фантазии, да и время на реализацию этой разметки убил не мало. В общем ХЕЛП.

    P.S.: jQuery там для дальнейшей обработки, то есть будет aJax запрос делаться. Вот и решил что бы мозг не волновать сразу его прикрутить.

    P.S.S.: Извиняюсь за количество букв, но решил сразу все подробно описать.

    P.S.S.: Если запостил не в правильный раздел прошу пере нести топик. Но вроде посмотрел здесь верстку обсуждают, так что думаю что я по адресу.
     
  2. Bizzaro

    Bizzaro Постоялец

    Регистр.:
    1 фев 2010
    Сообщения:
    82
    Симпатии:
    17
    Поставь блоку 2 свойство z-index: 999; а 3 поменьше. Еще у ифрейм есть свойство scrolling="auto | no | yes" Соответственно авто вывод полос, запрет, разрешение.
    Если я вообще правильно понял что ты хочешь :) Много букв. А ссыль на живой пример есть?
     
  3. trooll

    trooll PHP кодер

    Регистр.:
    22 дек 2008
    Сообщения:
    503
    Симпатии:
    116
    Ссылка на живой пример как и просили:
    Перейти по ссылке

    Вы не правильно поняли.

    Есть фрейм. по верх него лежит див (блок) не видемый, когда пользователь тыкает куда то во фрейме, а по сути по этому не видимому диву, то ему выдается сообщение что его действие не прокатит и надо сделать то то и то то. Но так как этот не видимый блок лежит по верх фрейма то прокрутка во фрейме не работает, а надо что бы работала.

    Второй момент это 2 прокрутки одна в фреме, а вторая прокрутка самого браузера, вот одну бы как то убрать которая в браузере. Но ее вообще по сути не должно быть, так как все обнулено, но она появляется почему то.


    Сейчас подумал может реализация не правильная была изначально. Может не надо делать высоту фрейма по видимой части в браузере, а по содержимому фрейма. только вот опять же вопрос как это реализовать, да и еще кросс браузерно :)
     
  4. vvs777

    vvs777 Создатель

    Регистр.:
    5 авг 2008
    Сообщения:
    22
    Симпатии:
    8
    div width=100% height=500%, с прокруткой будет окно браузера
    в нем фрейм и блок оба 100%х100% одни поверх другого с помощью z-index
    и фиг с тем что в самом низу если страница короткая будет пусто