CSS. Стиль для Placeholder

При помощи CSS возможно стилизовать атрибут placeholder так как нам нужно. Делается это следующим образом.

::-webkit-input-placeholder {
   color: red;
}
 
:-moz-placeholder { /* Firefox 18- */
   color: red;  
}
 
::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}
 
:-ms-input-placeholder {  
   color: red;  
}

Допустим у нас имеется текстовое поле ввода.

<input type="text" placeholder="Оставьте сообщение здесь">

Создадим для него класс который будет стилизовать placeholder.

title-not-input {
   input[type="text"]::-webkit-input-placeholder {
       color: #D5193B;   }
   input[type="text"]:-moz-placeholder { color: #D5193B; }
   input[type="text"]::-moz-placeholder { color: #D5193B; }
   input[type="text"]:-ms-input-placeholder { color: #D5193B; }
   input[type="text"] { 
      font-family: "Gotham Light";      
      font-size: 26pt;      
      letter-spacing: 1.3pt;   }
}

Изменять можно следующие свойства placeholder

• font (и сопутствующие свойства)
• background (и сопутствующие свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity

Источники

1. https://css-tricks.com/snippets/css/style-placeholder-text/
2. http://html5.by/blog/placeholder/
3. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
4. http://htmlbook.ru/css/-webkit-input-placeholder

jQuery Mobile center popup on show

Для того чтобы разместить POPUP при появлении точно по центру экрана можно обрабатывать событие POPUPAFTEROPEN. В нем считать отступы сверху и слева и задавать их для POPUP.

$('#popupMenu').on('popupafteropen', function () {
    var centerX = ($(document).width() - $('.ui-popup-container').width())/2;
    var centerY = ($(document).height() - $('.ui-popup-container').height())/2;
      $('.ui-popup-container').css({
        top: centerY,
        left: centerX
    });
});

CSS Show div on center

Выровнять DIV по середине экрана возможно различными методами как при помощи CSS так и при помощи jQuery.

При помощи jQuery 

   jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (jQuery(window).height()-this.height())/2+jQuery(window).scrollTop()+"px");
    this.css("left", (jQuery(window).width()-this.width())/2+jQuery(window).scrollLeft()+"px");
    return this;

При помощи CSS

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Чтобы работало на iOS

Для того чтобы работало в iOS устройствах необходимо добавить следующие строчки.

  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

Конечный вариант CSS

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 48%;
  height: 59%;
}

Источники

1. http://stackoverflow.com/questions/27303339/transform-not-working-on-ios

jQuery handle div show/hide

Как обработать перехват появления или скрытия элемента. Для того чтобы показать/скрыть элемент используются методы show/hide. В этот метод можно передать два параметра - второй из них это обработчик (callback/handler) вызова метода. В нем мы можем сделать все необходимое нам при появлении или скрытии элемента. 

JavaScript Version

$('#show').click(function() {
    $('#myDiv').show(0, onDivShow);
});
 
$('#hide').click(function() {
    $('#myDiv').hide(0, onDivHide);
});
 
 
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }

CoffeeScript Version

$('#cancelBtn').on 'click', () =>
    $('#dialogPage1').show(0, () =>
     @onDivShow()
     return
    )
 
onDivShow: () =>
    centerX = ($(document).width() - $('.ui-popup-container').width())/2
    centerY = ($(document).height() - $('.ui-popup-container').height())/2
    $('.ui-popup-container').css
        top: centerY
        left: centerX
    return

jQuery get scroll position - scrollTop()

Для того,  чтобы узнать величину отступа прокрутки от верхней границы необходимо использовать метод scrollTop(). Этим же методом можно и задать значение отступа прокрутки, передав туда параметр - scrollTop(value).
В GWT для использования jQuery нужно писать $wnd.jQuery вместо $.

@Overridepublic void setCurrentScrollPosition() {
    currentScrollPosition = getCurrentScrollPosition();
}
 
private native int getCurrentScrollPosition() /*-{   
    return $wnd.jQuery("#scrollContainer").scrollTop(); }-*/;
 
@Overridepublic void scrollCalendar() {
    if (currentScrollPosition > 0) {
        jQueryScrollCalendar(currentScrollPosition);   
    }
}
 
private native void jQueryScrollCalendar(int position) /*-{   
    $wnd.jQuery("#scrollContainer").animate({scrollTop: position}, 0);}-*/;

Источники

1. https://api.jquery.com/scrollTop/

2. http://ruseller.com/jquery.php?id=58

AngularJS Filter. Фильтрация в AngularJS.

Angular JS предоставляет удобные возможности для фильтрации объектов в зависимости от значения либо самих объектов, либо их полей. В данном примере, мы будем фильтровать объекты по значению поля status. У нас будет checkbox, который будет определять, объекты с каикм значением поля status мы будем показывать. Если галочка стоит то значения -
["STARTED", "NOT_STARTED", "FINISHED"]
если галочка не стоит, то значения
["STARTED", "NOT_STARTED"]

HTML Code

Checkbox показывать объекты со статусом FINISHED.

<div class="col-lg-3 pull-right text-right">
    <input  type="checkbox" id="showFinishedCheckbox"
      ng-model="showFinished" ng-change="showFinishedClicked()">
    <label for="showFinishedCheckbox">Show Finished Clients</label>
</div>

Таблица объектов, в которой используется фильтр.

 <table class="table table-hover">
    <thead>
        <th ng-repeat="item in head" ng-click="changeSorting(item.field)" 
          class="sortable">{{item.title}}
        <span ng-show="displaySorting(item.field, false)">▼</span>
        <span ng-show="displaySorting(item.field, true)">▲</span>
      </th>
    </thead>
    <tbody>
        <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">
     <td><a ng-click="editCampaign(c); $event.stopPropagation()" 
              style="cursor:pointer;">{{c.title}}</a>
     </td>
     <td>{{c.campaignCode}}</td>
     <td>{{c.startDate | date:'mediumDate'}}</td>
     <td>{{c.endDate | date:'mediumDate'}}</td>
     <td>{{getStatus(c.status).name}}</td>
 </tr>
    </tbody>
</table>

Использование фильтра.

 <tr ng-class="{active : selectedCampaign.id == c.id}"
          ng-repeat="c in campaigns | orderBy:sort.column:sort.descending | 
          filter:query | filter:statusFilter" ng-click="selectCampaign(c)">

CoffeScript Code

Изначально показываем объекты у которых поле status имеет значение либо STARTED либо NOT_STARTED

$scope.filteredStatuses = ["STARTED", "NOT_STARTED"]

Изначально не стоит галочка показывать объекты, у которых поле status имеет значение FINISHED

$scope.showFinished = false

Обработчки нажатия на checkbox. Если ставим галочку, то добавляем в массив допустимых статусов статус FINISHED, если убираем галочку, то массив без статуса FINISHED

$scope.showFinishedClicked = () ->
    if $scope.showFinished
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED", "FINISHED"]
    else
      $scope.filteredStatuses = ["STARTED", "NOT_STARTED"]
    return

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

$scope.statusFilter = (campaign) ->
    if $scope.filteredStatuses.length > 0
        if $.inArray(campaign.status, $scope.filteredStatuses) < 0
            return
    return campaign

Источники

https://docs.angularjs.org/api/ng/filter/filter

https://docs.angularjs.org/guide/filter

http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs

https://docs.angularjs.org/guide/filter#creating-custom-filters

http://jsfiddle.net/Xesued/Bw77D/7/

http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments

http://jsfiddle.net/65Pyj/

JQuery. Получить элемент li листа ul

<div id="test">
<ul>
<li>Im index 0</li>
<li>Im index 1</li>
<li>Im index 2</li>
<li>Im index 3</li>
</ul>
</div>

Получить доступ к третьему элементу (индексация начинается с 0)

$('#test ul > li').eq(2).hide();

Можно еще так

$('#test ul > li:eq(2)').hide();

Можно получить доступ к li элементу с помощью nth-child. В таком случае нумерация начинается с 1.

$('#test ul > li:nth-child(3)').hide();

Источники
http://stackoverflow.com/questions/4591754/jquery-test-ul-li-index2-hide-possible

http://stackoverflow.com/questions/3323186/get-id-of-first-li-of-ul-with-jquery

jQuery. Как динамически добавить или удалить атрибут стиля

Задать элементу только один атрибут стиля

$("#container").css("text-align", "center");

Задать элементу сразу несколько атрибутов стиля

$("#container").css({"position":"relative", "top":"-75px"});

Удалить только атрибут стиля text-align

$("#container").css("text-align", "");

Удалить весь стиль (атрибут style) полностью для элемента

$("#container").removeAttr("style")

Источники
http://stackoverflow.com/questions/883180/how-to-dynamically-add-a-style-for-text-align-using-jquery
http://stackoverflow.com/questions/5394951/adding-and-removing-style-attribute-from-div-with-jquery

CSS. 2 column div layout: right column with fixed width, left fluid

Необходимо создать layout из двух div элементов, стоящих друг за другом  - как два столбца одной таблицы. Причем необходимо чтобы один столбец был фиксированной ширины, а другой изменялся в зависимости от размеров окна и занимал все оставшееся место.

>>> Работающий пример <<<

Создадим разметку в HTML

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

У нас есть родительский элемент - div с классом container и два дочерних div элемента с классами right и left.

Это просто два div элемента, где второй лежит под первым, теперь чтобы добиться заданных условий необходимо описать классы CSS для div-элементов.

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

Для того чтобы выровнять div элемент по правому краю и зафиксировать его ширину сделаем следующее - зададим ему ширину свойством width и выровняем по правому краю свойством float. 

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

Для наглядности зададим цвет фона для этого div элемента.

Теперь сделаем левый div изменяемым и независимым от правого. Для того, чтобы при изменении размеров экрана этот div не обтекал соседний а оставался в своих границах добавим свойства width: auto и overflow: hidden.  

.left {
    background: #e8f6fe;
    width: auto;
    overflow: hidden;
}​​

Также добавим свойства overflow: hidden и height (может быть auto) к div элементу, который является контейнером.

.container {
   height: auto;
   overflow: hidden;
}

Заключение

Если правый div имеет свойства float и width, и если левый div не имеет width и float, то левый будет гибким

GWT TextBox Placeholder

В GWT у виджета TextBox нету поля placeholder. Поэтому чтобы его добавить необходимо выполнить следующие действия.

Допустим у нас имеется виджет TextBox описанный в uiBinder

<g:TextBox ui:field="emailField"></g:TextBox>

Соответствующее ему поле в Java классе

@UiField
TextBox emailField;

Для того чтобы задать placeholder этому виджету, получаем у него элемент и ему задаем атрибут placeholder.

emailField.getElement()
  .setAttribute("placeholder", "Gmail or Google-based email only");

CSS hand cursor on hover

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

li { cursor: pointer; }

Чтобы это гарантированно работало во всех браузерах можно написать так.

li { cursor: pointer; cursor: hand; }

CSS text-decoration Property

Свойство стиля text-decoration позволяет добавить к тексту выделения. Следующее выделение используется наиболее часто.

1. text-decoration: overline; Линия над  текстом
2. text-decoration: line-through; Текст перечеркивается
3. text-decoration: underline; Текст подчеркивается

HTML + CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-decoration: overline;
}
 
h2 {
    text-decoration: line-through;
}
 
h3 {
    text-decoration: underline;
}
</style>
</head>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
 
</body>
</html>

Результат

CSS. How to center div inside div

Для div элемента, который будет выравниваться по центру другого div элемента, необходимо прописать следующий стиль

margin: 0 auto;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="width: 100%;">
     <div style="margin: 0 auto;">
      Test
     </div>
    </div>
</body>
</html>

jQuery. How to lock screen while loading

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

jQuery Block UI

Заблокировать страницу

$.blockUI();

Разблокировать страницу

$.unblockUI();

Помимо это есть варианты блокировки с опциями (затенение экрана и добавление текста)

Если этот плагин используется в связке с библиотекой require.js, тогда его подключать нужно так

requirejs.config({
    "baseUrl": "js/lib",
    paths: {
        'jquery': ['jquery-1.9.1.min'],
        'jquery-mobile': ['jquery.mobile-1.3.2.min'],
        'iscroll': ['iscroll'],
        'iscroll-lite': ['iscroll-lite'],
        'jquery-form': ["jquery.form"],
        'jquery-validity': ["jquery.validity.min"],
        'jquery-blockui':["jquery.blockUI"],
 
 ...
 
        'facebook-helper': ['../helper/facebook-helper'],
        "components": ["../components"]
    },
    shim: {
        'jquery-mobile': ['jquery'],
        'jquery-form': ["jquery"],
        'jquery-validity': ["jquery"],
        'jquery-blockui':["jquery"]
    }
 
});

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

define(["jquery", "jquery-blockui"], function ($, settings) {
    var apiClient = {
 
        callPost: function (methodName, requestData, callback) {
            require(['utils'], function (utils) {
                console.info("Call server method: name='" + 
                methodName + "' requestData='" + 
                requestData + "' apiUrl='" + settings.apiUrl + "'");
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                } });
                $.ajax({url: settings.apiUrl + methodName, type: "post", 
                  data: requestData, success: function (data) {
 
                        if (data.serviceData && data.serviceData.error) {
                            $(document).ajaxStop($.unblockUI);
                            console.warn(data.serviceData.message);
                            utils.popup(data.serviceData.message)
                            // some logic invoke
                        } else {
                            callback(data);
                            utils.hideLoading();
                            $(document).ajaxStop($.unblockUI);
                        }
                    }, error: function (jqXHR, textStatus, errorThrown) {
                        $(document).ajaxStop($.unblockUI);
                        utils.popup("Oops...an error occurred. 
                          Please try again in a few seconds.");
                        console.info("Error:" + textStatus);
                        console.info("Error:" + errorThrown);
                    },
                        contentType: "application/json"
                    }
                )
            });
        }
 
...
 
});

Блокируем экран с затемнением

$.blockUI({ 
  css: {
    border: 'none',
    padding: '15px',
    backgroundColor: '#000',
    '-webkit-border-radius': '10px',
    '-moz-border-radius': '10px',
    opacity: .5,
    color: '#fff'
  } 
});

Разблокируем экран

$(document).ajaxStop($.unblockUI);

jQuery. How to handle page refresh

Для того, чтобы в jQuery обработать событие обновления страницы необходимо сделать следующее.

$(window).bind('beforeunload',function(){
 
  //Your logic here
 
  return 'Are you sure you want to leave?';
 
});

Работающий пример

Ускоряем Phonegap

Разрабатываю приложение на стеке технологий PhoneGap и jQueryMobile. Приложение, которое получилось в итоге оказалось не таким быстрым как нативные приложения. Начал искать способы повышения производительности работы приложения. Нашел много интересной информации для себя. Что можно сделать для того, чтобы приложение, написанное при помощи phonegap и jQueryMobile стало работать быстрее.

Что делать для повышения скорости работы приложения

1. Библиотека fastclick. Ускоряем нажатие кнопок

fastclick - библиотека, которая ускоряет нажатие на кнопки в мобильном браузере. Эта библиотека устраняет задержку в 300 мс между физическим нажатием на экран телефона и вызовом события click в мобильных браузерах. Причина такой задержки в мобильных браузерах следующая.

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

2. Отключаем часть CSS

Причиной медленной работы приложения также могут быть тени и круглые углы элементов. Которые мы и отключим.

* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}

Поместите этот код в конец CSS файла.

3. Отключаем градиент

За место CSS градиента лучше использовать заранее сделанные картинки с градиентным фоном

4. Отключаем эффекты jQueryMobile

В методе mobileinit прописать следующий код

$(document).on("mobileinit", function () {
 
  ...
 
  $.mobile.autoInitializePage = false;
  $.mobile.defaultPageTransition = 'none';
  $.mobile.touchOverflowEnabled = false;
  $.mobile.defaultDialogTransition = 'none'; 
 
  ...
 
});

5. Не используйте много изображений в разных файлах

Не используйте много изображений/значков на одной странице. Скомпонуйте все изображения в одно изображение и используйте CSS спрайт. Как сделать спрайт я написал тут.

Источники

http://stackoverflow.com/questions/19849637/how-to-use-fastclick-js-with-phonegap-and-jqm
http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
http://publish.illinois.edu/weiyang-david/2013/06/05/phonegap-app-problemssuggestions/
https://github.com/ftlabs/fastclick
http://www.codefessions.com/2012/09/creating-native-user-experience-with.html
http://www.codefessions.com/2012/10/improving-performance-of-html5-based.html
http://codedrop.com.au/blog/phonegap-performance-tips
http://therockncoder.blogspot.ru/2012/06/three-quick-performance-tips-for.html
http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
http://www.tricedesigns.com/
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/8208679/android-performance-jquery-phonegap-issue
http://stackoverflow.com/questions/13904315/android-webview-late-rendering/14010732#14010732
https://groups.google.com/forum/#!topic/phonegap/bv3lLlsgr74
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/

Кросбраузерный скроллинг с библиотекой iscroll 5

1. Сайт автора  и небольшая инструкция http://cubiq.org/iscroll-5-ready-for-beta-test

2. Ссылка на GitHub https://github.com/cubiq/iscroll

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

 http://lab.cubiq.org/iscroll5/demos/event-passthrough/

jQuery Mobile Remote AutocompleteView. Доделываем и исправляем баги.

Элемент AutoComplete - это поле ввода, в котором после ввода в него определенного количества символов появляется список возможных вариантов. Например, вводим несколько букв из названия города и появляется список возможных городов. Пример на jQuery Mobile можно посмотреть тут.
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/

Пример со списком городов, которые еще и загружаются при помощи вызова удаленного метода здесь.
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/autocomplete-remote.html

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

Задачи

1. По нажатию на элемент списка добавлять этот элемент в поле ввода и закрывать список
2. Устранить баг с выводом пустой строки (Пустая строка выводится в том случае если введено три или более символов но совпадений не найдено)

Делаем Sprite для jQuery Mobile

Спрайт (в данном случае речь идет о CSS-спрайте) - это рисунок, внутри которого располагаются несколько изображений. Спрайт применяется для ускорения работы приложения, так как нужно будет загрузить только одно изображение и потом уже брать кусочки этого изображения и применять их в своем приложении. Для того чтобы получить необходимый кусочек спрайта необходимо использовать CSS. Я хочу рассказать о том, как создать вот такой спрайт и как его использовать.

Справочник полезных рецептов для CSS3 и HTML5

1. Как сделать текстовое поле не редактируемым (how make input textfield non-editable)

Для того, чтобы сделать текстовое поле не редактируемым не нужно применять классы CSS, достаточно использовать атрибут readonly (можно писать так readonly="readonly" )

<input type="text" value="some text" class="gray_text" readonly>

2. Как сделать указатель мыши как указатель с пальцем при наведении на объект (how to change cursor to finger pointer when a user hovers over a object)

Есть элемент, при наведении на который необходимо менять курсор мыши на указатель.

<div class="menu_general">
  <p><a id="to_account_and_settings" class="ui-link">
    <img src="img/menu/account_settings.png"/>
  </a></p>
 
  <p><a id="to_expansions_extras" class="ui-link">
    <img src="img/menu/expansions_extras.png"/>
  </a></p>
 
  <p><a id="to_how_to_play" class="ui-link">
    <img src="img/menu/how_to_play.png"/>
  </a></p>
</div>

Для того, чтобы менять курсор необходимо описать в классе ui-link следующее cursor: pointer

.menu_general .ui-link {
    cursor: pointer;
}