Как отключить слайдер Coda для разрешений экрана мобильного телефона? - PullRequest
Новая
       30

Как отключить слайдер Coda для разрешений экрана мобильного телефона?

1 голос
/ 03 января 2012

Я пытаюсь реализовать адаптивный дизайн на моем веб-сайте , и я немного застреваю на слайдере рекомендуемого контента.

Я использую Coda Slider для своих слайдов с рекомендуемым содержанием, и что я хотел бы сделать для небольших экранов, это отменить функцию jQuery для слайдера и удалить встроенные стили для слайд-функции, так что он просто отображает блок.

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

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

   // Coda slider via http://www.ndoherty.biz/demos/coda-slider/2.0/

   $('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false,
        autoSlide: true,
        autoSlideInterval: 4000,
        slideEaseDuration: 500,
        autoSlideStopWhenClicked: true,
   });

На данный момент я просто использую две таблицы стилей, реализованные с медиазапросами, как показано в главе: 

<link rel="stylesheet" href="/css/2011/fullwidth-responsive.css" media="only screen and (min-width : 480px)" />
<link rel="stylesheet" href="/css/2011/mobile.css" media="only screen and (min-width : 320px) and (max-width : 480px)" />

Так что я бы хотел, чтобы прерывание JS соответствовало включенной мобильной таблице стилей, и, по сути, я буду представлять контент исключительно с помощью CSS, а не использовать какие-либо презентационные анимации JS и т. Д., Как это делает слайдер для полный сайт.

1 Ответ

3 голосов
/ 03 января 2012

Есть несколько способов сделать это, хотя всегда будет какая-то разница (если только вы не внедрили действительно продвинутую настройку обнаружения, которая реагирует на изменения окна в реальном времени).Медиа-запросы будут реагировать на любые изменения размера (в любое время), и наш код здесь будет выполняться только один раз (непосредственно перед инициализацией ползунка Coda):

1. Определение ширины с помощьюнебольшая проверка доступной ширины экрана: 

if ( screen.availWidth > 480 ) {
  // .. initialize Coda here ..
}

2. Определение определенного стиля, который вы применили с помощью таблицы стилей для вашего мобильного телефона:

Например, скажем, #header получаетВысота 50px в вашем mobile.css.Вы можете определить, активен ли этот лист, проверив эту высоту: 

if ( $( "#header" ).width() != 50 ) {
  // .. initialize Coda here ..
}

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

Примечание. Может также потребоваться оператор «else», который удаляет / добавляет классы, которые могут вам понадобиться для вашего мобильного макета.

...