lanvin07
@lanvin07
Нравится html5+js

Почему это демо не работает на мобильном?

Вот тут демо: www.ellipsetours.com/Demos/storage
Тут код: https://github.com/axshon/HTML-5-Ellipse-Tours/tre...
На десктопе работает, а на смартфоне и планшете кнопки не работают.
Как я поняла, все клики там, вроде, обрабатываются в click. Почему работает только половина, не понимаю.
Объясните, пожалуйста.
P.S. Прошу не смеяться - я ещё только учусь :-)
Upd.
Проверяю в Android 4.2.1, Opera 34, Chrome 48: кнопки New, Clear работают, кнопки change color, remove - не работают, но шевелятся). Интернет отключен.
  • Вопрос задан
  • 990 просмотров
Решения вопроса 1
@OVK2015
Решения следующие:
1) Если вам не нужно перетаскивание блоков просто удаляете из index.html подключение
Scripts/jquery.ui.touch-punch.js. Именно он не дает корректно отработать нажатию на кнопки
<button class='change-color'>change color</button><br>"
<button class='remove'>remove</button>"


2) Если хотите оставить полный функционал,- здесь посложнее:
1. Качайте свежие версии jquery и jquery-ui. Я Использовал версии jquery-1.11.2.js и jquery-ui-1.11.4.min.js соответственно. Брал отсюда: https://cdnjs.com/libraries/
2. Качаете обычную(не минимизированную) версию jQuery UI Touch Punch 0.2.3. Брал отсюда: touchpunch.furf.com
3. В файле Scripts/main.js, после строк
var $dialog = $("#dialog")
      .dialog({
        resizable: false
      });

добавляем строку
$('#dialog').parent().css({'z-index': '99999'});
Это для того чтобы окошки "Drag Me" не перекрывали диалога изменения цвета

4. В jquery.ui.touch-punch.js ищем 130 строку. Должны увидеть:
.....
// If the touch interaction did not move, it should trigger a click
    if (!this._touchMoved) {

      // Simulate the click event
      simulateMouseEvent(event, 'click');
    }
....

Здесь нужно закомментировать проверку. Т.е. получается
.....
 // If the touch interaction did not move, it should trigger a click
    // if (!this._touchMoved) {

      // Simulate the click event
      simulateMouseEvent(event, 'click');
    // }

    // Unset the flag to allow other widgets to inherit the touch event
.....


Собственно все. Сохраняем,- проверяем.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@nikfakel
Веб-разработчик
В веб-инспекторе хрома все работает нормально, поэтому попытаюсь включить экстрасенса :)

1. Вы не подключили файл jquery.ui.touch-punch.min.js
2. Кнопки находятся за каким-нибудь слоем. В хроме откройте веб-инспектор, включите мобильное отображение, выберите какой-нибудь маленький экран, нажмите на кнопку правой кнопкой мыши и выберите "Просмотреть код". Если в коде сразу отобразится кнопка - все норм, дело не в этом. Если нет, то смотрите, что ее перекрывает.

Желательно, конечно, посмотреть ваш проект
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы