Перейти к публикации

Как сделать скроллинг внутри статической страницы7


Рекомендованные сообщения

Ситуация такая.

Не умещается таблица результатов в окно статической страницы http://wrc-info.ru/european-rally-championship-standings.html

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

Как можно реализовать внутри поля главного блока скроллинг?

Ссылка на сообщение
Поделиться на других сайтах

Почему бы вам не сделать это все дело в popup окне, а на странице сделать кнопку *просмотреть результаты*? Думаю для вас лучшее решение.

Ссылка на сообщение
Поделиться на других сайтах

oveflow-x:auto;

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

Почему бы вам не сделать это все дело в popup окне, а на странице сделать кнопку *просмотреть результаты*? Думаю для вас лучшее решение.

Надо подумать, может быть вы правы. Насколько сложно это реализовать новичку? может есть какой-нибудь пример? Как бы только человек не растерялся не увидев самой таблицы,

Ссылка на сообщение
Поделиться на других сайтах

Почему бы вам не сделать это все дело в popup окне, а на странице сделать кнопку *просмотреть результаты*? Думаю для вас лучшее решение.

Надо подумать, может быть вы правы. Насколько сложно это реализовать новичку? может есть какой-нибудь пример? Как бы только человек не растерялся не увидев самой таблицы,


------HTML-------


<a href="javascript:PopUpShow()">Показать окно</a>


<!--Окно открыто-->

<div class="popup_opened" id="window">

	<div class="popup_inside">

		 Текст (в вашем случае таблица) внутри popup-окна

		<a href="javascript:PopUpHide()">Скрыть окно</a>

	</div>

</div>


------CSS-------

.popup_opened {

	width:100%;

	min-height:100%;

	background-color: rgba(0,0,0,0.5);

	overflow:hidden;

	position:fixed;

	top:0px;

}


.popup_opened .popup_inside {    

	margin: 250px auto 0px auto; // Настройте отступы под себя, значения по часовой - верх, справа, низ, слева

	width:800px; // Задайте необходимую ширину

	height: 100%; // Не изменять

	padding: 10px; // Отступ внутри от краев окна

	background-color: #c5c5c5; // Цвет фона окна	

}


------JS-------

<script>

$(document).ready(function(){

	PopUpHide();

});

function PopUpShow(){

	$("#window").show();

}

function PopUpHide(){

	$("#window").hide();

}

</script>

Дизайн окна можете сделать уже как вам вздумается. Я вам показал реализацию. Но помните, свойства типа border-radius и box-shadow нужно указывать для всех типов браузеров.

Изменено пользователем MMysiv
Ссылка на сообщение
Поделиться на других сайтах

Почему бы вам не сделать это все дело в popup окне, а на странице сделать кнопку *просмотреть результаты*? Думаю для вас лучшее решение.

Надо подумать, может быть вы правы. Насколько сложно это реализовать новичку? может есть какой-нибудь пример? Как бы только человек не растерялся не увидев самой таблицы,


------HTML-------


<a href="javascript:PopUpShow()">Показать окно</a>


<!--Окно открыто-->

<div class="popup_opened" id="window">

	<div class="popup_inside">

		 Текст (в вашем случае таблица) внутри popup-окна

		<a href="javascript:PopUpHide()">Скрыть окно</a>

	</div>

</div>


------CSS-------

.popup_opened {

	width:100%;

	min-height:100%;

	background-color: rgba(0,0,0,0.5);

	overflow:hidden;

	position:fixed;

	top:0px;

}


.popup_opened .popup_inside {	

	margin: 250px auto 0px auto; // Настройте отступы под себя, значения по часовой - верх, справа, низ, слева

	width:800px; // Задайте необходимую ширину

	height: 100%; // Не изменять

	padding: 10px; // Отступ внутри от краев окна

	background-color: #c5c5c5; // Цвет фона окна	

}


------JS-------

<script>

$(document).ready(function(){

	PopUpHide();

});

function PopUpShow(){

	$("#window").show();

}

function PopUpHide(){

	$("#window").hide();

}

</script>

Дизайн окна можете сделать уже как вам вздумается. Я вам показал реализацию. Но помните, свойства типа border-radius и box-shadow нужно указывать для всех типов браузеров.

спасибо) только я не совсем понял. Разве можнов ставлять ява скрипт в текст статической страницы. Просто не хочется вставлять его в шаблон и перегружать остальные страницы лишним кодом.

Ссылка на сообщение
Поделиться на других сайтах

спасибо) только я не совсем понял. Разве можнов ставлять ява скрипт в текст статической страницы. Просто не хочется вставлять его в шаблон и перегружать остальные страницы лишним кодом.

Ява-скрипт нужно тыкать в main.tpl между [head]...[/head] :)

Ссылка на сообщение
Поделиться на других сайтах

спасибо) только я не совсем понял. Разве можнов ставлять ява скрипт в текст статической страницы. Просто не хочется вставлять его в шаблон и перегружать остальные страницы лишним кодом.

Ява-скрипт нужно тыкать в main.tpl между [head]...[/head] :)

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

Но все равно большое вам спасибо, буду думать как лучше поступить)

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...