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 programming scroll in GWT

Программно прокрутить скрол до нужного элемента можно при помощи jQuery следующим образом. Нужно использовать метод animate() и метод scrollTop() в нем. Параметр 2000 задержка - это анимация. Если он равен 0, то прокрутка происходит мгновенно.

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Как это реализовать в GWT.

private native void jQueryScrollCalendar(elementId) /*-{
  $wnd.jQuery("#scrollContainer").animate({
   scrollTop: $wnd.jQuery("#" + elementId).offset().top}, 0);
 }-*/;
 

Источники 

1. http://stackoverflow.com/questions/6677035/jquery-scroll-to-element

Guava Lists.partition + gae objectify

Загружать данные из datastore при помощи objectify можно группами(то есть по частям). Для этого можно использовать средства из библиотеке Guava. Это метод Lists.partition, в который передаем два параметра - список ключей и количество элементов в группе (например 25).

for (List<String> list : Lists.partition(new ArrayList<>(ids), 25))

 Подготовленный лист с ключами передаем в метод ids и получаем список значений.

result.addAll(ofy().load().type(UserEntity.class).ids(list).values());

public List<UserEntity> getUserEntities(Collection<Long> userIds, Long systemId) {
    List<UserEntity> result = new ArrayList<>();
    if (userIds == null) {
      return result;
    }
    List<String> ids = new ArrayList<>();
    for (Long id : userIds) {
      ids.add(UserEntity.generateKey(systemId, id));
    }
    for (List<String> list : Lists.partition(new ArrayList<>(ids), 25)) {
      result.addAll(ofy().load().type(UserEntity.class).ids(list).values());
    }
    return result;
 }

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