Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   forum.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 29.02.2012, 13:19   #1
NetBuilding
ПроЭктировщик
 
Аватар для NetBuilding
 
Регистрация: 07.06.2010
Сообщений: 105
Написано 5 полезных сообщений
(для 13 пользователей)
Радость Проблема всех времен и народов

Как убить скрол-бар но оставить прокрутку

Проблема по сути такова: есть сайт, на нем вылазит большое модальное окошко и держится по центру (position: fixed
и все бы то хорошо. но на iPad это окошко не умещается в экран и надо бы проскроллить его содержимое. но вот не задача установив свойство (overflow: auto получаем свой долгожданные скролинг. но также получаем и скролл-бар для этого дива. который вообще в дизайн никак не вписывается.

для Ослика решение есть уникальное
BODY{
scrollbar-face-color: #FFF;
scrollbar-arrow-color: #FFF;
scrollbar-track-color: #FFF;
scrollbar-shadow-color: #FFF;
scrollbar-highlight-color: #FFF;
scrollbar-3dlight-color: #FFF;
scrollbar-darkshadow-Color: #FFF;
}
но на iPad то Ослика нет
__________________

Юзаю Ubuntu, Юзаю Mac
(Offline)
 
Ответить с цитированием
Старый 29.02.2012, 13:38   #2
shybovycha
ПроЭктировщик
 
Аватар для shybovycha
 
Регистрация: 27.05.2007
Сообщений: 110
Написано 40 полезных сообщений
(для 33 пользователей)
Ответ: Проблема всех времен и народов

Добрый день. Наш FED на очередном проекте для подобной задачи использовал JavaScript для определения размеров страницы. По-моему, JavaScript включен практически везде, посему данное решение имеет право на существование.
(Offline)
 
Ответить с цитированием
Старый 29.02.2012, 13:54   #3
NetBuilding
ПроЭктировщик
 
Аватар для NetBuilding
 
Регистрация: 07.06.2010
Сообщений: 105
Написано 5 полезных сообщений
(для 13 пользователей)
Ответ: Проблема всех времен и народов

Какое же javaScript решение посоветуете? сжиматься то она у меня сжимается скриптом а как её скролить причем на iPad-е, без скрол-бара
__________________

Юзаю Ubuntu, Юзаю Mac
(Offline)
 
Ответить с цитированием
Старый 29.02.2012, 14:39   #4
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Проблема всех времен и народов

Поясни вот эти моменты:
Страница никогда не скролится вообще, или там есть скроллинг, но по центру нужно иногда модальное окошко?

Если первое, тогда не используй fixed, а юзай absolute.
Если тебе нужно установить объект по центру экрана, то используй JavaScript, для таких целей jQuery будет очень удобным:
$(window).innerWidth() и $(window).innerHeight() - получают размеры экрана.
Далее имея размеры блока, позиционируешь его как нужно (по центру, простая математика).
При этом позиционируй так, чтобы этот элемент не выходил влево и вверх за пределы окна, т.к. тогда будет обрезаться. Для позиционирования, используй margin или top / left. (я бы юзал top / left, а margin оставил бы, т.к. может пригодиться для дизайна).
Элемент (модальное окошко), должно иметь css аттрибут display:inline-block.
Далее можно играться со скриптом, т.к. там есть евенты: touchstart, touchmove, touchend - их отлавливаешь, и используешь данные из них, для ручного скроллинга блока.
Гугл знает много.

Второй вариант - это без скриптов вообще, а только CSS, но с использованием @media.
Суть такова что в CSS3 есть такая фича, что можно определить разные CSS правила с учётом условия. Например если разрешение окна меньше чем 600 - то применять стили для мелких разрешений, иначе оставить стандартные - для десктоп экрана.
Вот почитай, там и примеры есть: http://coding.smashingmagazine.com/2...-your-website/

Ты затронул тему, которая называется: Responsive Design.

Я советую это дело решать CSS'ом, а не JS'ом, т.к. это шустрее и более стабильно.
(Offline)
 
Ответить с цитированием
Старый 29.02.2012, 15:58   #5
NetBuilding
ПроЭктировщик
 
Аватар для NetBuilding
 
Регистрация: 07.06.2010
Сообщений: 105
Написано 5 полезных сообщений
(для 13 пользователей)
Радость Ответ: Проблема всех времен и народов

сама страница тоже скролится. СПС буду пробовать играться с CSS
__________________

Юзаю Ubuntu, Юзаю Mac
(Offline)
 
Ответить с цитированием
Старый 29.02.2012, 16:51   #6
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Проблема всех времен и народов

Так тебе содержимое блока скроллить нужно, или страницу?
Ты больше инфы дай.
Если содержимое блока, то только JS, используй функции по работе с событиями: touchstart, touchmove, touchend.
(Offline)
 
Ответить с цитированием
Старый 01.03.2012, 10:49   #7
NetBuilding
ПроЭктировщик
 
Аватар для NetBuilding
 
Регистрация: 07.06.2010
Сообщений: 105
Написано 5 полезных сообщений
(для 13 пользователей)
Ответ: Проблема всех времен и народов

на рисунке: то что черное это iPad то что серое это модальное окно.
Модальное окно всегда по центру.
на рисунке показано что оно вылазит за пределы экрана. на самом же деле вылазит за пределы только его содержимое. само окно принимает высоту экрана. и появляется скролл-бар для этого окна. так вот этого сролбара, надо сделать невидимко
Миниатюры
Нажмите на изображение для увеличения
Название: Безымянный.png
Просмотров: 822
Размер:	4.1 Кб
ID:	16244  
__________________

Юзаю Ubuntu, Юзаю Mac
(Offline)
 
Ответить с цитированием
Старый 01.03.2012, 22:21   #8
moka
.
 
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений
(для 6,863 пользователей)
Ответ: Проблема всех времен и народов

В стилях для модального окна выставляешь:
height:100%;
max-height:512px; - это например его постоянный размер.
overflow:hidden; - это сделает так чтобы ни скролл бара не появлялось, ни скроллить нельзя было.

Далее пишешь JS, где отлавливаешь touch евенты, и работаешь с ними.
Гугл полон этого, для примера одна из первых ссылок из гугла: http://forrst.com/posts/jQuery_iPad_...ger_scroll-B30
Тут с использованием jQuery.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
NetBuilding (11.03.2012)
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +4, время: 13:53.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com