Забью свой костыль в виде аналога эффекта получаемого с помощью свойства text-overflow: ellipsis.
В моем случае задача немного сложнее, текст не умещался совсем не много, не больше чем на 50%, потому нужно было его отобразить при наведении курсора.
Все очень легко, на помощь пришли, псевдокласс :hover и свойство direction: rtl. Все бы ничего, Firefox, Chrome, Opera, все отлично, IE приплыли.
Ну раз уж, придется задействовать JavaScript, значит чуточку добавим требований, текст не будет просто переключаться с отображения, то с начала, то с конца, пусть он плавно прокручивается, тут и ограничение в 50% снимется.
Сляпал плагин, малютка, меньше сотни строк.
А как работает твой браузер?
Раз, два, три, четыре, пять, вышел зайчик погулять, заинька вышел…
Вдруг охотник выбегает, прямо в зайчика стреляет,
пиф-паф, ой-ой-ой, умирает зайчик мой,
привезли его домой, оказался он живой Живой пример
Раз, два, три, четыре, пять, вышел зайчик погулять, заинька вышел…
Вдруг охотник выбегает, прямо в зайчика стреляет,
пиф-паф, ой-ой-ой, умирает зайчик мой,
привезли его домой, оказался он живой Есть нюанс в зависимости от шрифта могут «уехать» точки, нужно добавить некую поправку, но пока править не стал, в моем случае все и так работало.
Понадобился простой фильтр в табличке по значениям с «памятью» все сессий, сваял jQuery плагин с хранением данных в локальном хранилище (localStorage).
HTML5 data-* attributes and jQuery.data() в примерах:
1) загруженная страница содержит
2)
на Vanilla JS
document.getElementById("test").dataset.data1
"qwer"
document.getElementById("test").dataset.data2-test
NaN
document.getElementById("test").dataset.data2Test
"asdf"
-- для IE 10- dataset не доступен
>> document.getElementById("test").dataset.data1
"Не удалось получить свойство "data1" ссылки, значение которой не определено или является NULL"
>> document.getElementById("test").getAttribute("data-data1")
"qwer"
>> document.getElementById("test").getAttribute("data-data2-test")
"asdf"
используем jQuery для чтения, все универсально, и главное, в IE тоже работает как надо
а сейчас попробуем сохранить данные используя jQuery.data(), и более того сохраним объект содержащий функцию
видим результат, с помощью jQuery можем легко воспользоваться сохраненным объектом
но эти данные не появляются в dataset, они сохраняются в кэше jQuery, при первой же попытке получить значение data элемента, jQuery создаст свойство в DOM структуре этого элемента «jQuery + $.now()» и присвоит ему уникальный идентификатор (или ранее), который и будет использоваться как ключ для доступа к кэшу, а так же, скопирует атрибуты data в свой кэш.
$('#test').data('data3', {tt: 10, fn1: function(n){ return this.tt * n + n } })
$('#test').data('data3').fn1(5)
55
document.getElementById("test").dataset.data3
undefined
data атрибуты загружаются в свойство attributes элемента
если браузер поддерживает DOMStringMap, то в свойство dataset дублируются все атрибуты data? имена приводятся в верблюжью нотацию, если в имени присутствуют «-«
jQuery сохраняет копию data атрибутов и более их не обновляет, ни в одну из сторон, jQuery использует javascript для хранения данных, а не DOM, вот тут то плагины jQuery и хранят свои экземпляры
по этому поводу часто идут холивары, но можно заглянуть в код jQuery и увидеть что присвоение значения списку установит свойство selected = true для элемента списка с равным значением.
jQuery.fn.extend({
val: function( value ) {
var hooks, ret, isFunction,
elem = this[0];
......................
return this.each(function( i ) {
var val;
......................
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
// If set returns undefined, fall back to normal setting
if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
this.value = val;
}
});
......................
jQuery.extend({
valHooks: {
option: {
get: function( elem ) {
var val = jQuery.find.attr( elem, "value" );
return val != null ?
val :
// Support: IE10-11+
// option.text throws exceptions (#14686, #14858)
jQuery.trim( jQuery.text( elem ) );
}
},
select: {
get: function( elem ) {
var value, option,
options = elem.options,
index = elem.selectedIndex,
one = elem.type === "select-one" || index < 0,
values = one ? null : [],
max = one ? index + 1 : options.length,
i = index < 0 ?
max :
one ? index : 0;
// Loop through all the selected options
for ( ; i < max; i++ ) {
option = options[ i ];
// oldIE doesn't update selected after form reset (#2551)
if ( ( option.selected || i === index ) &&
// Don't return options that are disabled or in a disabled optgroup
( support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
// Get the specific value for the option
value = jQuery( option ).val();
// We don't need an array for one selects
if ( one ) {
return value;
}
// Multi-Selects return an array
values.push( value );
}
}
return values;
},
set: function( elem, value ) {
var optionSet, option,
options = elem.options,
values = jQuery.makeArray( value ),
i = options.length;
while ( i-- ) {
option = options[ i ];
if ( jQuery.inArray( jQuery.valHooks.option.get( option ), values ) >= 0 ) {
// Support: IE6
// When new option element is added to select box we need to
// force reflow of newly added node in order to workaround delay
// of initialization properties
try {
option.selected = optionSet = true;
} catch ( _ ) {
// Will be executed only in IE6
option.scrollHeight;
}
} else {
option.selected = false;
}
}
// Force browsers to behave consistently when non-matching value is set
if ( !optionSet ) {
elem.selectedIndex = -1;
}
return options;
}
......................
Рассчитаем число Pi в 5000 знаков воспользовавшись Web Worker, setTimeout, и без использования разбора очереди setTimeout или многопоточности(Multithreading) Web Worker, цикл в основном (и единственном) потоке JavaScript. Сравним время выполнения, ощущения по блокировки графического интерфейса (UI).
Воспользуемся формулой Джона Мачайна John Machin
π=16arctan(15)−4arctan(1239)
arctanx=x−x33+x55−x77+x99−⋯
Web Worker
setInterval(0) (на каждую итерацию)
цикл while
Pi
—
—
—
Код под капотом.
Мои итоги, плюс Web Worker? работа в отдельном потоке, никакого влияния на основной поток, отсутствие задержки setTimeout, на каждый вызов порядка 10мс, и это если в это время очередь не занята еще чем-либо, например, визуальными эффектами jQuery, да и при setTimeout приходится модифицировать код задачи, итерации делить по вызовам setTimeout.
Минус, хотя это и не минус, по другому быть и не может, отсутствие доступа к не потокобезопасным ресурсам DOM, window, document, parent.
Где же использовать практически, однооконные веб-приложения с некими относительно тяжелыми расчетами, мне решать такую задачу пока не приходилось.
И еще, FF тормоз, см. скрин, все три теста на одной машинке.
Выравниваем алерты, промпты и диалоги Bootbox.js по вертикали если указан класс v-center
bootbox.alert({message: "Прежде необходимо утвердить реестр по всем предприятиям!", className: 'v-center'});
bootbox.alert("Прежде необходимо утвердить реестр по всем предприятиям!");