Просмотр полной версии : Кросс-браузерные функции
Вот такими функциями пользуюсь для себя. Может кому-то будут полезны. Пишите если в них что-то не так.
Функция получения CSS-свойства.
function xGetStyleValue(e,type1,type2){
if(!type2)type2=type1;
if(e.currentStyle&&e.currentStyle[type2]!='')return e.currentStyle[type2];
else if(window.getComputedStyle(e,'').getPropertyValue( type1)!='')return window.getComputedStyle(e,'').getPropertyValue(typ e1);
}
Функция возвращает установленное, либо вычисленное значение указаного CSS-свойства. Под установленным подразумевается, значение описанное в CSS файле, либо присвоено по-умолчанию браузером. Если возвращается дефолтное значение, то естесственно оно может различаться в разных браузерах. Так же стоит заметить, что некоторые браузеры хранят значение CSS-свойств в разных форматах. Это не значит, что вы получите неправельные данные, просто они немного другого вида. Допустим вы определили в CSS файле сойство background-color в #fff для узла body. Тогда при попытке получить значение этого свойства, IE возвратит #fff, а Mozilla rgb(255, 255, 255). Оба ответа являются правельными и для того чтобы можно было пользоваться ими, необходима дополнительная функция-конвертер. Функция xGetStyleValue показывает, как всё-таки можно получить значения CSS свойств, если вы явно не указывали его в скрипте или через аттрибут style, т.к. при обращении, например, к ele.style.backgroundColor мы получим пустую строку.
Параметры:
e - узел DOM
type1 - своиство CSS (строка) как при использовании в файлах стилей, например 'margin-left'
type2 - свойство CSS (строка) как при динамическом обращении, например 'marginLeft'
Если свойства CSS одинаковые в обоих представлениях, например width, второй параметр можно не указывать.
Установка прозрачности
function xAlpha(e,n){
(document.body.style.opacity)?e.style.opacity=n/100:e.style.filter=(n>=100)?null:'progid:DXImageTransform.Microsoft.Alph a(opacity='+n+')';
}
Параметры:
e - узел DOM
n - число от 0 до 100. 100 - нет прозрачности.
Функции получения размеров клиентской области окна
function xClientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth :document.body.clientWidth;}
function xClientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeigh t:document.body.clientHeight;}
Функции для работы с событиями
Добавление функции для обработчика
function xAddEventListener(e,eventType,eventListener){
if(e.addEventListener) e.addEventListener(eventType,eventListener,false);
else if(e.attachEvent) e.attachEvent('on'+eventType,eventListener);
}
Параметры:
e - узел DOM
eventType - тип события без префикса 'on', например 'mousedown'
eventListener - имя регистрируемой функции
Удаление функции из обработчика
function xRemoveEventListener(e,eventType,eventListener){
if(e.removeEventListener) e.removeEventListener(eventType,eventListener,fals e);
else if(e.detachEvent) e.detachEvent('on'+eventType,eventListener);
}
Параметры аналогичны функции xAddEventListener().
Получение объекта, вызвавшего данное событие
function xGetEventTarget(evt){
var e=evt.target||event.srcElement;
return (e.nodeType==1)?e:e.parentNode;
}
В качестве параметра передаём событие. Например мы зарегистрировали функцию onEvent() с помощью функции xAddEventListener(). Для того, чтобы передать событие в нашу ф-цию пишем так:
function onEvent(evt){
var e=xGetEventTarget(evt);
}
В переменной е хранится узел DOM, сгенерировавший событие.
Снятие выделения с текста
function clearSelection(){
(document.selection&&document.selection.empty)?document.selection.empty ():window.getSelection().removeAllRanges();
}
Отмена просачивания события
function xClearEvent(evt){
if(evt.stopPropagation)evt.stopPropagation();
else event.cancelBubble=true;
}
Сюда передаём сгенерированное событие, как для xGetEventTarget().
Отмена события по-умолчанию
function xCancelDefEvent(evt){
if(evt.preventDefault)evt.preventDefault();
else event.returnValue=false;
}
Сюда передаём сгенерированное событие, как для xGetEventTarget().
Функции для работы с AJAX
Создание объекта AJAX
function xCreateRequest(){
return (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}
Трансормация XML + XSL
function xTransform(xml,xsl){
if(window.ActiveXObject)return xml.transformNode(xsl);
var proc=new XSLTProcessor();
var ser=new XMLSerializer();
proc.importStylesheet(xsl);
return ser.serializeToString(proc.transformToFragment(xml ,document));
}
Передаём файлы XML и XSL, полученные в AJAX-ответе и получаем строку, которую затем можно вставить на страницу методом innerHTML.
Пока всё... Если кому непонятно как использовать ту или другую функцию - пишите.
if(e.currentStyle&&eval('e.currentStyle.'+type2)!='')return eval('e.currentStyle.'+type2);
жесть!!! e.currentStyle[type2] не катит уже?
function xGetEventTarget(evt){ var e=evt||window.event; return (e.target)?e.target:e.srcElement; }
function xGetEventTarget(e){
e=e||event;
return e.target||e.srcElement
}
ну и так далее...
СПС за замечание... оптимизация енто хорошо... исправлю...
if(document.getElementById)
Интересно где бы откопать браузер, который не поддерживает getElementById. Мне такой для коллекции нужен.
if(e.currentStyle&&eval('e.currentStyle.'+type2)!='')return eval('e.currentStyle.'+type2);
eval - зло. Здесь он совершенно не нужен.
function xGetStyleValue(e,type1,type2){
Вы точно протестировали эту функцию? Для currentStyle нужен camelCase (или как там называется), а для getPropertyValue нужен .... , блин да не помню. В общем backgroundColor и background-color.
if(document.documentElement.clientWidth)return document.documentElement.clientWidth;
return document.body.clientWidth;
Кто сказал, что если есть documentElement.clientWidth, то в нем обязательно правильное значение.
Интересно где бы откопать браузер, который не поддерживает getElementById. Мне такой для коллекции нужен.
eval - зло. Здесь он совершенно не нужен.
Вы точно протестировали эту функцию? Для currentStyle нужен camelCase (или как там называется), а для getPropertyValue нужен .... , блин да не помню. В общем backgroundColor и background-color.
Кто сказал, что если есть documentElement.clientWidth, то в нем обязательно правильное значение.
1. Вам мешает document.all?! стоит ли отрезать его, если можно добавить дополнительную возможность?!
2. Eval исправил... писал её давно.
3. Эта функция работает в указанных браузерах. Если чесно все своиства не перебирал, но если нужно - выложу отдельно ф-цию для чтения/смены бэкграунда.
4. В нём правильное значение. IE8 понимает только эту конструкцию. Без documentElement возвращается пустое значение.
Вам мешает document.all?! стоит ли отрезать его, если можно добавить дополнительную возможность?!
Смело режьте.
Eval исправил... писал её давно.
Теперь одно и тоже два раза вызывается. Нужно сохранять в переменную.
выложу отдельно ф-цию для чтения/смены бэкграунда.
background-color это для примера. Там еще много подобных свойств. Вы для каждого будете отдельную функцию писать?
В нём правельное значение. IE8 понимает только эту конструкцию. Без documentElement возвращается пустое значение.
Тестируйте. На данный момент все совсем плохо.
Смело режьте.
Теперь одно и тоже два раза вызывается. Нужно сохранять в переменную.
background-color это для примера. Там еще много подобных свойств. Вы для каждого будете отдельную функцию пи сать?
Тестируйте. На данный момент все совсем плохо.
1. Ок... ф-ция удаляется из списка.
2. Так оформленно из соображений компактности кода. Не думаю, что это сильно напрягёт интерпретатор и Вам никто не мешает переписать всё так, как вам это видится.
3. По-видимому я вас не правильно понял. Вас смущает, что background-color!=backgroundСolor?! Прочитайте описание под ф-цией. Мы должны указывать и background-color и backgroundСolor. Если у нас совпадают названия сойств - 2-ой параметр опускаем.
4. ОК. Протестим
Функция "Функции получения размеров окна" работает в IE, FF и Opera. Что конкретно плохо?!
Ок... ф-ция удаляется из списка.
Зачем же совсем удалять. Я имел в виду сделать так:
var $ = function(elem/* id */) {
return typeof elem == 'string' ? $d.getElementById(elem) : elem;
};
Так оформленно из соображений компактности кода.
Так он наоборот больше становится.
По-видимому я вас не правильно понял. Вас смущает, что background-color!=backgroundСolor?! Прочитайте описание под ф-цией. Мы должны указывать и background-color и backgroundСolor. Если у нас совпадают названия сойств - 2-ой параметр опускаем.
Так не проще сделать что бы 'margin-left' автоматически, когда это необходимо переводился в ''marginLeft'', и наоборот.
Исправлено описание для ф-ции "получения CSS-свойства". Ошибка была в неправильном описании порядка параметров. В часности свойство backgroudColor возвращается.
Так не проще сделать что бы 'margin-left' автоматически, когда это необходимо переводился в ''marginLeft'', и наоборот.
да... так тоже можно... опять же всё для компактности... любой может прикрутить себе такую фичу, если его не устраивают такие параметры... Суть ф-ции - работать... а удобство использования не так критично.
Проверка типов переменных.
Зачем? typeof сам по себе нормален. А вот функция типа isArray не повредила бы.
Зачем? typeof сам по себе нормален. А вот функция типа isArray не повредила бы.
Затем, что эти ф-ции используются почти во всех остальных. И я нахожу это удобным.
isArray да... но не для этого поста... тут не "полезные", а "кросс-браузерные" ф-ции...
Затем, что эти ф-ции используются почти во всех остальных.
Аргумент из серии: я написал функцию function f(x) { return x; }и использую ее везде.
Функция "Функции получения размеров окна" работает в IE, FF и Opera. Что конкретно плохо?!
То, что она работает, еще не значит, что она выдает правильный результат во всех актуальных браузерах.
То, что она работает, еще не значит, что она выдает правильный результат во всех актуальных браузерах.
По крайней мере они совпадают, и все скрипты, которые я писал и используют эту функцию - работают пиксель-в-пиксель. Под понятием "размер окна" я подразумеваю размер узла body а не окно самого браузера. Не вижу никаких причин в сомнении... если у Вас есть что-то конкретное - говорите... зачем догадками?!
Аргумент из серии: я написал функцию function f(x) { return x; }и использую ее везде.
:)
Когда в 100 местах мы будем писать typeof(n)=='хз_что' вместо xDef(n) - разница будет видна...
Под понятием "размер окна" я подразумеваю размер узла body а не окно самого браузера.
Размер клиентской области?
именно... Если кого ввёл в ступор - сори...
если у Вас есть что-то конкретное - говорите...
prototype.1.6.1_rc2.js
str 3093
document.viewport = {
getDimensions: function() {
return { width: this.getWidth(), height: this.getHeight() };
},
getScrollOffsets: function() {
return Element._returnOffset(
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
}
};
(function(viewport) {
var B = Prototype.Browser, doc = document, element, property = {};
function getRootElement() {
if (B.WebKit && !doc.evaluate)
return document;
if (B.Opera && window.parseFloat(window.opera.version()) < 9.5)
return document.body;
return document.documentElement;
}
function define(D) {
if (!element) element = getRootElement();
property[D] = 'client' + D;
viewport['get' + D] = function() { return element[property[D]] };
return viewport['get' + D]();
}
viewport.getWidth = define.curry('Width');
viewport.getHeight = define.curry('Height');
})(document.viewport);
Единственный минус: не учитывается compatMode. Но это сейчас уже не столь актуально.
Очень хрупко...
window.parseFloat(window.opera.version()) < 9.5
Не стал бы таким пользоваться...
prototype.1.6.1_rc2.js
не до конца понятно для чего этот код.
Очень хрупко...
У вас предвзятое мнение. Хрупко как раз у вас.
У вас предвзятое мнение. Хрупко как раз у вас.
Везде и в любых авторитетных источниках говорится о неправильном подходе к написанию кросс-браузерных функций. А именно о том, что почти во всех библиотеках и фреймворках есть проверка версии или типа браузера и не её основе строят логику. Это не есть гуд. Покажите мне кусок моего кода, где используется неправельный код.
ИМХО
писать такие вещи нада так, что бы в конце всех условий была такая контрукция, которая описана в доках W3C.
А именно о том, что почти во всех библиотеках и фреймворках есть проверка версии или типа браузера и не её основе строят логику. Это не есть гуд.
Мнение в некотором смысле верное, но и меру нужно знать. В Opera9.5+ верное значение перенесли в documentElement.clientHeight. Как вы это хотите определить с помощью:
Вместо этого идёт проверка соответствующих своиств или методов
?
Факт остается фактом: пока ваш вариант некроссбраузерен. Вариант из PrototypeJs, по-вашему, плох, но он работает верно. Когда напишете вашим способом кроссбраузерный вариант, тогда и поговорим.
писать такие вещи нада так, что бы в конце всех условий была такая контрукция, которая описана в доках W3C.
К этому нужно стремиться, но при всем желании это не всегда возможно.
documentElement.clientHeight.
А в чём, собственно, проблема?! Пусть переносят...
Факт остается фактом: пока ваш вариант некроссбраузерен. Вариант из PrototypeJs, по-вашему, плох, но он работает верно. Когда напишете вашим способом кроссбраузерный вариант, тогда и поговорим.
Мой вариант кроссбраузен для тех, которые я описал (IE, FF, Opera всех актуальных версий) и я сомневаюсь, что в Safari или Chrome что-то не сработает. Зачем так утверждать?! Лучше напишите ту ф-цию, которая не работает в заявленных браузерах.
Никто не говорил, что вариант из prototype плох.
Какой способ мне написать?! аналог их объекта?!
А в чём, собственно, проблема?! Пусть переносят...
Давно уже перенесли. И в вашем скрипте это не учитывается.
Мой вариант кроссбраузен для тех, которые я описал (IE, FF, Opera всех актуальных версий)
Это вы так думаете. Простейший пример: уберите DOCTYPE из документа или поставьте любой старый. Ну как, правильно работает?
и я сомневаюсь, что в Safari или Chrome что-то не сработает.
Как же вы можете утверждать, что функции кроссбраузерены, если вы их даже толком не тестируете.
----
Вы слышите только себя и ваше мнение всегда самое правильное? Обсуждение теряет смысл.
Давно уже перенесли. И в вашем скрипте это не учитывается.
Посмотрите на ф-цию... из какого, по вашему мнению, свойства возвратится значение в опере?!
Это вы так думаете. Простейший пример: уберите DOCTYPE из документа или поставьте любой старый. Ну как, правильно работает?
ОК... Сейчас проверим.
Как же вы можете утверждать, что функции кроссбраузерены, если вы их даже толком не тестируете.
Речь идёт о тех браузерах, которые я неоднократно уже перечислял.
Естесственно обсуждение не будет иметь смысла, когда тебе говорят - "Всё говно!" и при этом не приводят ни одного аргумента в поддержку этих слов.
Это вы так думаете. Простейший пример: уберите DOCTYPE из документа или поставьте любой старый. Ну как, правильно работает?
После смены HTML 4.01 Transitional с на XHTML 1.0 Strict и назад, значеня, возвращаемые IE, FF и Opera не изменились при тестировании ф-ций xGetStyleValue и xClientHeight/xClientWidth. Думаю, перебор всех DTD/ф-ций не изменит ситуацию. Если у Вас действительно есть пример с DTD/ф-цией/браузером, где что-то не работает - выкладывайте. В ближайшее время оттестирую на Chrome.
Посмотрите на ф-цию... из какого, по вашему мнению, свойства возвратится значение в опере?!
Для оперы <9.5 должно возвращаться из body. А у вас? Или эти версии оперы уже не актуальны?
Речь идёт о тех браузера, которые я неоднократно уже перечислял.
Создается впечатление, что вы не код подстраиваете под среду исполнения, а просто составили список браузеров, где ваш код все же заработал и все эти браузеры объявили актуальными.
"Всё говно!" и при этом не приводят ни одного аргумента в поддержку этих слов.
Вы же обсуждали эти аргументы. Или может, обсуждали и не заметили?
После смены HTML 4.01 Transitional с на XHTML 1.0 Strict
Хорошо, раз кроме последних (почти) версий HTML и XHTML для вас ничего не существует (не актуально) попробуйте вообще убрать DOCTYPE.
Для оперы <9.5 должно возвращаться из body. А у вас? Или эти версии оперы уже не актуальны?
В опере можно использовать как одно значение, так и другое при любом DTD, т.е. они ОДИНАКОВЫЕ. Где Вы видели разницу?!
Создается впечатление, что вы не код подстраиваете под среду исполнения, а просто составили список браузеров, где ваш код все же заработал и все эти браузеры объявили актуальными.
Мой код не просто "всё же заработал". Эти функции писались ещё до появления Оперы 9.6 и IE8. И они продолжали работать без корректировки. И тестились не в 1 день, а больше года и в при разных условиях (типа DTD).
Вы же обсуждали эти аргументы. Или может, обсуждали и не заметили?
Я всё время пытаюсь добиться от Вас этих аргументов... То что всё же мне удаётся понять из ваших постов - то я и аргументирую.
Хорошо, раз кроме последних (почти) версий HTML и XHTML для вас ничего не существует (не актуально) попробуйте вообще убрать DOCTYPE.
ОК... минуту...
ОК... минуту...
Работает...
В опере можно использовать как одно значение, так и другое
Что, правда? Зачем же тогда в PrototypeJs написано:
window.parseFloat(window.opera.version()) < 9.5 ? document.body : document.documentElement
Да и в любом известном фреймворке есть что-то подобное? Они все глупые там наверно. А вы умный.
Эти функции писались ещё до появления Оперы 9.6 и IE8
Ой как давно.
То что всё же мне удаётся понять из ваших постов
Я что так не понятно пишу?
Работает...
Правда? Ух, ты!
Знаете, много косяков полезет, когда вы начнете применять эти функции к реальным сайтам.
Что, правда? Зачем же тогда в PrototypeJs написано:
window.parseFloat(window.opera.version()) < 9.5 ? document.body : document.documentElement
Да и в любом известном фреймворке есть что-то подобное? Они все глупые там наверно. А вы умный.
Я пишу свои наблюдения, а не утверждение, того, что без разницы что использовать. Когда эти значения изменятся - тогда и поговорим. Никто никогда не сможет предугадать заранее какое свойство предпочтительней, в том числе и парни из prototype. А пока это всё работает - это кроссбраузерно.
Ой как давно.
Это было приведено для понимания, что после появления новых версий - ничего не упало. Для меня это только + к этим ф-циям.
Я что так не понятно пишу?
Нет, понятно. Просто немножко не дописываете:)
Правда? Ух, ты!
Знаете, много косяков полезет, когда вы начнете применять эти функции к реальным сайтам.
Когда полезет - вам икнёцццццца:)
И мне кажется это уже извращение кода. Человек, который не указал DTD скорее всего даже не знает, что такое скрипт, поэтому этот вариант не критичен.
Riim, а можно вопрос?! Только чесно!
Вам когда-нибудь приходилось оприделять размер клиентской области руками?! без фрейморков?! Если да, то можно взглянуть на код, которому вы доверяете?!
Когда эти значения изменятся - тогда и поговорим.
Я был уверен, что они (значения) разные, но все же на всякий проверил. И знаете что: они разные.
А пока это всё работает - это кроссбраузерно.
Еще раз повторю:
много косяков полезет, когда вы начнете применять эти функции к реальным сайтам
Я был уверен, что они (значения) разные, но все же на всякий проверил. И знаете что: они разные.
DOCTYPE:
null, HTML 4.01 Transitional, HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1.
Opera 9.24, 9.63, 9.64, 10.00 1
alert(document.body.clientWidth==document.document Element.clientWidth);
Выводит true. Где ж разные?!
То же самое и в FF 2.0.0.8, 3.0.8, 3.0.10.
То же самое и в IE 6,7,8.
Сдаётся мне, Вы просто издеваетесь...
Вам когда-нибудь приходилось оприделять размер клиентской области руками?! без фрейморков?!
О, это очень интересная тема. Дело в том, что это сейчас есть целая куча разных фреймворков. Можно полазить по ним и найти всю необходимую кроссбраузерность. Раньше их (фреймворков) можно сказать не было, а коду неизвестной древности с форумов доверять было нельзя. Нужно было практически методом "тыка" перебирая разные свойства подбирать правильные для каждого браузера. Все это нужно было примерять к разным вариантам верстки и прочим ситуациям. Например, в IE6 функция, идеально определяющая высоту всего документа (не клиентской части) при 0-1 скроллингах, почему то при обоих скроллингах ошибалась на один пиксель. На все эти опыты уходило очень много времени. Сейчас все намного проще, но по инерции и сейчас иногда случайно возвращаюсь к старым э-э-э, ну пусть будет: способам. Например со строчкой
window.parseFloat(window.opera.version()) < 9.5
как раз связана забавная ситуация: захожу на одну страничку через оперу и с ужасом обнаруживаю, что tooltip появляется явно не в том месте, где должен. Меня это очень удивило, т. к. я точно помнил, что тщательно все протестировал. В том числе и в опере. Установил заметно более старую оперу - все нормально. Начал поочередно, в обратном порядке (от более новой к старой), устанавливать разные версии (я собираю их иногда). В конце концов, вычислил, что изменение произошло при переходе на 9.5 . На все это ушло пол-ночи. На следующий день, вечером, с удивлением обнаружил, что версия PrototypeJs давно обновилась, и за пару минут нашел в новой версии число 9.5 . Т. е. пол-ночи было убито зря.
Это все я к тому, что мне действительно приходилось определять размер клиентской области "руками" (как вы выразились). Причем у меня с этим столько связано, что вам и не снилось.
Таки допечатал.
Если да, то можно взглянуть на код, которому вы доверяете?!
Он жутко секретный. Но он очень похож на тот, что в prototype-1.6.0.3.js (str: 2689)
Разница лишь в том, что я добавил проверку compatMode и оптимизировал своим чудо-способом, который на этом форуме признан жутко не читабельным.
Сдаётся мне, Вы просто издеваетесь...
Нет, я на полном серьезе.
У меня так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<script type="text/javascript">
window.onload = function() {
alert([
document.body.clientHeight,
document.documentElement.clientHeight
].join('\n'));
};
</script>
</head>
<body>
</body>
</html>
Выводятся два разных числа.
Опера такая:
Version - 10.00 alpha
Build - 1139
Но это (разные числа) должно быть верно, для любой (по крайней мере, из тех с какими я сталкивался) оперы. И не только для нее.
Для чего все эти сложности с массивом?!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blank</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload=function() {
alert(document.body.clientWidth+', '+document.documentElement.clientWidth);
}
</script>
</head>
<body>
</body>
</html>
А вот, что у меня:
Opera 10.00 1, Build - 1355.
1263, 1279.
Opera 9.64, Build - 10487
1263, 1279
Opera 9.24, Build - 8816
1274, 1274
Отличается из-за левой панели.
Разрешение экрана - 1280х1024.
Получается, что свойство document.documentElement.clientWidth показывает настояший размер, в отличии от document.body.clientWidth. Почему же вы тогда утверждаете обратное?!
Почему я раньше писал, что document.documentElement.clientWidth==document.bod y.clientWidth в опере?!
Установите margin и padding в 0 для html и body и они совпадут.
Для чего все эти сложности с массивом?!
Когда вам нужно будет вывести не 2, а 20 значений тогда поймете.
Здесь просто по привычке.
Отличается из-за левой панели.
Установите margin и padding в 0 для html и body и они совпадут.
Не обязательно. Там много причин.
Почему же вы тогда утверждаете обратное?!
Обратного для всех версий я не утверждал. Еще раз вчитайтесь в строку:
window.parseFloat(window.opera.version()) < 9.5
Opera 10.00 1, Build - 1355.
1263, 1279.
Opera 9.64, Build - 10487
1263, 1279
Opera 9.24, Build - 8816
1274, 1274
Так вы все-таки признаете, что были неправы? И я могу спокойно идти спать? Отпустите меня, пожалуйста. Я уже 4 часа должен спать.:)
:lol:
Конечно...
Но я прав:)
1263, 1279 - разные значения мы получаем из-за margin и padding, установленных по-дефолту... Каждый более-менее опытный верстальщил их обнулит и значения совпадут.
Но я прав
Да да. Я уже писал:
Они все глупенькие там. А вы умный.
1263, 1279 - разные значения мы получаем из-за margin и padding, установленных по-дефолту... Каждый более-менее опытный верстальщил их обнулит и значения совпадут.
Еще раз. Контрольный:
Не обязательно. Там много причин.
А в Opera 9.24 это происходит из-за левой панели. Она как раз и отнимает эти 5 пикселей... так что всё правильно...
Riim,
Дайте мне свой код, а?!
оптимизировал своим чудо-способом, который на этом форуме признан жутко не читабельным
улыбнуло :)
по поводу размеров клиентской области есть такая статья - http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
по поводу размеров клиентской области есть такая статья - http://www.howtocreate.co.uk/tutoria.../browserwindow
Понравилась табличка, но она не актуальна уже:(
Если у кого эти ф-ции возвращают неправельный результат - пожалуйста! напишите подробнее об этом! какой браузер, сборка, DTD и при каких условиях это проявляется. Возможно после установки каких-либо стилей у вас стала врать ф-ция или ещё что-нить. И, пожалуйста, не пишите вещей вроде "а ты попробуй дтд сменить - я уверен всё слетит!". Сначала сам поменяй, а потом говори! Ненада глупых догадок. clientWidth - это реализация браузера, а не свойство из спецификации DOM, поэтому смена DTD, думаю, не должна на это влиять. Хотя... Ядро браузера - потёмки... Спасибо.
Сначала сам поменяй, а потом говори! Ненада глупых догадог.
Глупые? Хм.. Ну что же, тогда дальше сам разбирайся. Там кстати к каждой второй функции можно придраться не в меньшей степени, чем к этой. Да и эту мы только начали разбирать. Ведь кроме строки
parseFloat(window.opera.version()) < 9.5
есть еще строка
B.WebKit && !document.evaluate
И еще есть таинственный compatMode, о котором ты ничего не спросил. Наверно потому что лучше всех знаешь что это. Если так, то странно, что не используешь где надо. Или может не актуально совсем?
На данный момент функции очень далеки от понятия "кроссбраузерные". Это выше было доказано на конкретном примере. Но раз уж ты, несмотря на это, продолжаешь считать всех глупыми, а себя самым умным, то флаг тебе в руки, барабан на шею, и !самостоятельно! вперед в светлое будущее.
Там кстати к каждой второй функции можно придраться не в меньшей степени, чем к этой.
Вперёд. Кто не даёт?!
Глупые? Хм.. Ну что же, тогда дальше сам разбирайся.
Речь шла о ваших догадках про DTD.
Ведь кроме строки
parseFloat(window.opera.version()) < 9.5есть еще строка
B.WebKit && !document.evaluate
Я могу написать кучу строк. Вы по-сути расскажите на что они влияют и почему. Я так и не увидел ответа - почему же всё-таки ваш тултип на странице стоял не на месте. В чём причина?! и что поменялось в опере после версии 9.5?!
Про веб кит... Браузеров существует ООЙ как много и если мы их всех будем учитывать - догадываетесь что тогда будет?! Такие вещи можно смело отбрасывать. Зайдите на лайв интернет и посмотрите процент этого браузера.
И еще есть таинственный compatMode
Ты мне можешь написать конкретно?! Ты тестил в этом режиме?! Если да - то:
Если у кого эти ф-ции возвращают неправельный результат - пожалуйста! напишите подробнее об этом! какой браузер, сборка, DTD и при каких условиях это проявляется.
Зачем тратить время на лишние вопросы?!
На данный момент функции очень далеки от понятия "кроссбраузерные".
Список в студию тех браузеров, для которых должен работать код и он считался кросс-браузерным.
Это выше было доказано на конкретном примере.
Пример с (не)совпадением значений свойств не может это доказывать. Главное - что мы получаем на выходе. И условие, описанное про margin и padding нужно совсем не для оперы.
продолжаешь считать всех глупыми, а себя самым умным
Процетируешь?! Что-то не помниться что я такое писал.
Зайдите на лайв интернет и посмотрите процент этого браузера.
2.5% по liveinternet.
2.5% по liveinternet.
Можно ссылку?
Вы не знаете, где находится статистика по браузерам в liveinternet? Думаю, вы просто не знаете, что такое WebKit.
Для справки: WebKit -- движок рендеринга, используемый, в частности, браузерами Safari и Chrome. И всякими другими проектами, типа, AdobeAIR и TitaniumApp, что меня совсем не радует, т.к. движок говеный :)
Я не про WebKit
что касается Safari и Chrome
Chrome 1.7%
Safari 2 0.6%
Вот что вижу я. Я хотел получить вашу ссылку для того, чтобы увидеть данные, которые показаны вам.
В Chrome ф-ция работает.
Даже Opera Mini имеет больший процент, чем любой из WebKit-браузеров. Может вообще отказаться от JS, т.к. в нём почти ничего не работает?!:wacko:
Я прекрасно понимаю, что возможно многие меня сейчас обвинят.
ИМХО. Писать сайты необходимо под:
1. Mozilla потому что все знают почему.
2. Internet Explorer с 6(пока) по 8. Потому что билли ещё молодой.
3. Opera потому что почему-то он нравиться пользователям и на это нельзы закрывать глаза. Тем более, что амбиций у создателей много.
Браузеры, которые могут, но лучше. чтоб не шли лесом:
1. Chrome - потому что гугл и это груто.
2. Safari - потому что жив Mac.
Браузеры, которые ходят лесом сами, если разработчики из тайги:
Konqueror и всякими другими проектами, типа, AdobeAIR и TitaniumApp + IE-подобные, написанные на коленке.
Я хотел получить вашу ссылку для того, чтобы увидеть данные, которые показаны вам.
http://www.liveinternet.ru/stat/ru/browsers.html?id=3&id=26&id=27&id=28&show=%D0%BF%D0%B5%D1%80%D0%B5%D1%81%D1%82%D1%80%D0 %BE%D0%B8%D1%82%D1%8C+%D0%B3%D1%80%D0%B0%D1%84%D0% B8%D0%BA&per_page=20&report=browsers.html
сумма выбранных 338,483 2.5%
Kolyaj,
Основной процент - Chrome, в которомВ Chrome ф-ция работает.
Так что я думаю это не смертельно.
если мы их всех будем учитывать - догадываетесь что тогда будет?!
Могу разьяснить, если кто незнает.
Могу разьяснить, если кто незнает.
Разъяснишь это своему будущему заказчику, у которого тетя IE5 использует.
В Chrome ф-ция работает.
А я сказал, что она где-то не работает? Я ее даже не смотрел :)
А про кроссбраузерность нельзя так категорично. Мне вот, например, нужно, чтобы часть моего кода работала абсолютно везде: от телефонов до игровых приставок.
Riim,
Разъяснишь это своему будущему заказчику, у которого тетя IE5 использует.
В ие5 ф-ция работает.
Kolyaj,
А я сказал, что она где-то не работает? Я ее даже не смотрел
Я так... для спарвки.
Мне вот, например, нужно, чтобы часть моего кода работала абсолютно везде: от телефонов до игровых приставок.
Ну с приставками это беребор:)
Если действительно нужен код, который будет работать везде - пожалуйста, есть куча вариантов которые вы все прекрасно знаете.
или тем, кто не хочет тащить за каждой страницей десятки киллобайт библиотек и фреймворков
Выбор есть всегда.
Ну с приставками это беребор
Я же сказал, нельзя так категорично.
Процетируешь?! Что-то не помниться что я такое писал.
Ты споришь с намеком на мысль: я так думаю, и значит, так оно и есть.
Пример с (не)совпадением значений свойств не может это доказывать.
А по-моему доказывает. Я так думаю, и значит, так оно и есть.
Список в студию тех браузеров, для которых должен работать код и он считался кросс-браузерным.
Примерно твой список, плюс Chrome. На IE6 и FF2 можно забить иногда.
Вперёд. Кто не даёт?!
Речь шла о ваших догадках про DTD.
Я могу написать кучу строк. Вы по-сути расскажите на что они влияют и почему. Я так и не увидел ответа - почему же всё-таки ваш тултип на странице стоял не на месте. В чём причина?! и что поменялось в опере после версии 9.5?!
Ты мне можешь написать конкретно?! Ты тестил в этом режиме?! Если да - то:
Зачем тратить время на лишние вопросы?!
Ты вот все говоришь, что очень хорошо все тестируешь. А я вот этого не вижу. Если бы это было так, то ты находил бы проблемы с минимальными подсказками. Вместо этого для разъяснения предыдущей проблемы, мне пришлось аж код за тебя написать. Причем простейший.
При всём желании никто не сможет написать код который будет во ВСЕХ существующих браузерах работать правильно. Мы сами продлеваем таким прогам жизнь, поддерживая их. Хотите опять вернуться во времена "Битвы браузеров"?! когда приходилось ставить на что-то одно, потому что для всех невозможно было реализовать некоторые идей. Если мой сайт слетит в каком-нибудь Konqueror-е я только рад буду этому. Это касается как вёрстки так и JS.
И ещё момент. Почему мне навязывают фрейморки и библиотеки?! Я написал код, который работает там где мне надо и весит в 20 раз меньше?! Говоря "там где мне надо" я имею ввиду то, что было описанно несколькими постами выше. И я уверен что этот код потнадобиться многим людям. Сейчас мой нач. отдела плюёт на Safari и Chrome и я не думаю, что это не безосновательно.
Riim...
Я всё протестил. Всё работает на реальных сайтах и в указанных браузерах. Если найдёшь ошибку - пиши если считаешь нужным. Мне не нужны твоиминимальными подсказками. ОК?!
Я здесь не ребус разгадываю.
При всём желании никто не сможет написать код который будет во ВСЕХ существующих браузерах работать правильно.
Про все речь и не шла.
И ещё момент. Почему мне навязывают фрейморки и библиотеки?!
Кто навязывает?
Мне не нужны твои
Ладно. Не нужны, так не нужны.
Я же сказал, нельзя так категорично.
ок:)
Про все речь и не шла.
Кто навязывает?
Это не про Вас. Это общее мнение.
Это не про Вас. Это общее мнение.
А, да, это есть. Навязывают гады.
Мы сами продлеваем таким прогам жизнь, поддерживая их.
Типичное заблуждение. Поддерживая их, вы увеличиваете свою аудиторию. Если ваш сайт/скрипт не будет работать в любимом Васином браузере, Вася просто не будет пользоваться вашим сайтом/скриптом, а не побежит тут же качать новый браузер.
Поддерживая их, вы увеличиваете свою аудиторию.
По мне 0.5% это не есть аудитория.
Если ваш сайт/скрипт не будет работать в любимом Васином браузере, Вася просто не будет пользоваться вашим сайтом/скриптом, а не побежит тут же качать новый браузер.
Соглашусь.
Даю 99% что этим васей окажется человек, у которого уже стоит пачка браузеров. Это вполне логично.
По мне 0.5% это не есть аудитория.
Если вы зарабатываете на банерах, то конечно. А если вы продаете оборудование стоимостью от 100000, то очень даже аудитория.
Даю 99% что этим васей окажется человек, у которого уже стоит пачка браузеров.
Если человек пользуется IE6, на который чаще всего нападают те, кто не умеет под него верстать/писать скрипты, то, скорее всего, у него не стоит больше никаких браузеров.
Если человек пользуется IE6, на который чаще всего нападают те, кто не умеет под него верстать/писать скрипты, то, скорее всего, у него не стоит больше никаких браузеров.
Мои ф-ции написанны именно под те браузеры, которые действительно составляют основной процент пользователей. Что касается вёрстки/скриптов под IE - у меня никогда с ним не возникало нерешаемых проблем. В примере про васю (я так думаю) подразумевалось что речь идёт не о популярном браузере, а о каком-нить экзотическом. И моё мнение про 99% верно только в этом случае. На всякий...
Если вы считаете, что мои ф-ции нерабочие и только навредят - я без проблем всё затру...
B~Vladi,
вы местами теряете нить обсуждения. На что я отвечаю, у меня процитировано.
вы местами теряете нить обсуждения. На что я отвечаю, у меня процитировано.
Да я не про ваши посты... Я прекрасно понимаю о чём кто что пишет. Просто сложилось такое впечатление...
Суть топика уже давно потеряна. Проще всего слить ссылки на фрейморки/библиотеки и все будут довольны.
Да я не про ваши посты
А зачем цитировать тогда?
Это не относилось к цитате.
У вас есть что-нибудь по существу топика?!
Riim, а во всех фреймворках есть эти
parseFloat(window.opera.version()) < 9.5
и
B.WebKit && !document.evaluate
?
а во всех фреймворках есть эти
Нет, конечно. Многие с момента появления Opera9.5 еще ни разу не обновлялись. Для меня важно то, что я сначала сам пришел к определенному варианту, в котором каждая строчка была обоснована конкретными ситуациями, в которых она что-то исправляла, а затем в PrototypeJs нашел практически идентичный вариант. Если два человека, независимо друг от друга приходят к практически идентичным вариантам, то это я думаю, о чем-то говорит.
Про WebKit много где встречал.
12.06.2008 - Opera 9.50
jquery-1.3.2 (2009-02-19):
// :4354
document.compatMode == "CSS1Compat" && document.documentElement[ "client" + name ] ||
document.body[ "client" + name ]
mootools-1.2.2:
// :2395
getSize: function(){
if (Browser.Engine.presto || Browser.Engine.webkit) {
var win = this.getWindow();
return {x: win.innerWidth, y: win.innerHeight};
}
var doc = getCompatElement(this);
return {x: doc.clientWidth, y: doc.clientHeight};
}
// :2449
function getCompatElement(element){
var doc = element.getDocument();
return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
};
YUI-2.7.0:
// /dom/dom.js:919
getViewportHeight: function() {
var height = self.innerHeight, // Safari, Opera
mode = document[COMPAT_MODE];
if ( (mode || isIE) && !isOpera ) { // IE, Gecko
height = (mode == CSS1_COMPAT) ?
documentElement.clientHeight : // Standards
document.body.clientHeight; // Quirks
}
return height;
},
для начала, пожалуй хватит
И что? Я же говорю:
в котором каждая строчка была обоснована конкретными ситуациями, в которых она что-то исправляла
В MooTools и в YUI для оперы просто используется innerWidth/innerHeight. Моя практика говорит мне, что этими свойствами нужно пользоваться в самых крайних случаях. В PrototypeJs тоже для оперы что-то выдумывают.
Только в Jquery все идеально само работает. Как и у B~Vladi.
так какой вариант правильный? innerWidth vs определение версии браузера? !doc.compatMode может означать standards mode? document.documentElement vs document.getElementsByTagName('html')[0]? B.WebKit && !doc.evaluate vs innerWidth?
innerWidth vs определение версии браузера?
В данном случае мне больше нравится определять версию браузера. Слишком уж часто innerWidth/innerHeight меня обламывал.
!doc.compatMode может означать standards mode?
Есть еще standards mode? Я встречался с тремя вариантами:
1. compatMode == 'CSS1Compat'
2. compatMode == 'BackCompat'
3. compatMode == undefined
document.documentElement vs document.getElementsByTagName('html')[0]?
Слышал, что documentElement может ссылаться на body, но сам вроде не сталкивался.
B.WebKit && !doc.evaluate vs innerWidth?
Это как они так сравниваются?
Зачем? typeof сам по себе нормален
А typeof-то как раз не очень типы проверяет...
var a='test';
console.log(typeof a); // "string"
a = new String('test');
console.log(typeof a); // "object"
Zeroglif
23.05.2009, 18:44
var a='test'; console.log(typeof a); // "string" a = new String('test'); console.log(typeof a); // "object"
И что не так, как должно быть?
Есть еще standards mode? Я встречался с тремя вариантами
я имел в виду Standards-compliant mode или Strict mode, т.е. CSS1Compat
Zeroglif, Все так, как и должно быть, вот только это, выходит, работает не совсем так, как надо:
var $ = function(elem/* id */) {
return typeof elem == 'string' ? $d.getElementById(elem) : elem;
};
Видимо, нужно использовать что-то вроде
(elem!=null) && elem.constructor==String
Zeroglif
24.05.2009, 11:10
работает не совсем так, как надо
Зачем передавать в эту функцию объект "подтипа" String?
Затем, что это строка. У нее есть все методы, которые есть у строки
Zeroglif
24.05.2009, 14:21
Затем, что это строка. У нее есть все методы, которые есть у строки
Это не строка, а объект (тип Object, "объектный подтип" String). Различайте примитивные значения от объекта. У первых нет методов пока не произойдёт конвертация из типа в тип. Зачем вместо строки отправлять в функцию объект - непонятно.
"test".substr(1)
Методы есть. Или они все-же появлись после приведения типа? Я к тому, что в функцию можно передать строку и так:
function some_func(str){}
...
some_func(String(var1))
Zeroglif
24.05.2009, 16:42
"test".substr(1)
Обращение к свойству (и ещё пара операций) инициирует создание одноразового объекта в рамках конвертации примитивного значения в объект. Объект позволит обратиться к прототипу и т.д. Это не означает, что примитивные значения можно считать объектами или что у примитивных значений есть свойства, это обычное движение из типа в тип, только его не видно...
some_func(String(var1))
Есть разница между 'String()' и 'new String()', первое - это вызов функции и конвертация в строку, второе - это вызов конструктора и создание объекта. Оператор 'typeof' будет работать как должен:
var s = 'text';
alert( [ typeof ( s ), typeof String( s ), typeof ( new String( s ) ) ] ); // string,string,object
Zeroglif, ты лучше скажи как размеры клиентской области определеить ;)
Что-то B~Vladi на сайте появляться перестал :( . Расстроился наверно сильно. Я тут перечитал все и сам себя не узнал. Прям как с цепи сорвался, подумаешь пара мелких недочетов. На эмоциях немного получилось.
B~Vladi, если будешь читать, то извини если что не так. Нормальные у тебя функции. И те, что тип определяют, тоже имеют право быть. Я иногда в разных фреймворках встречаю такие.
Небольшой совет:
В следующий раз, когда будешь предлагать что-то подобное, вместо:
Вот такие у меня супер-мега-функции. Они самые лучшие и все ими должны срочно пользоваться.
напиши лучше:
Вот такими функциями пользуюсь для себя. Может кому-то будут полезны. Пишите если в них что-то не так.
Т. е. нужно не навязывать, а просто предлагать. Тогда, такие странные люди как я, не будут придираться к мелочам.
Использует ф-цию xDef().
там xNum()
Что-то я не понял тут id писать?
function xTop(e,y){
if(xNum(y)) e.style.top=y+'px';
return e.offsetTop;
}
там xNum()
Ну может и ошибся, чего придирацо если всё понятно:)
Что-то я не понял тут id писать?
Нет, ссылку на DOM-узел.
Нет, ссылку на DOM-узел.
приведи пример
Такой чтоли?!
xTop(document.getElementById('id'),100);
Да=) спс
а то я думал ты о другом говоришь
а то я думал ты о другом говоришь
Ну ок. На самом деле xTop и xLeft использовать не рекомендуется, т.к. это совсем не нужный и лишний вызов функции. То же самое и про xDef, xNum, xStr.
Немного подредактировал:)
"x" в именах что-то значит?
Только не устанавливает он значение
пишу я
xTop(document.getElementById('la'),14);
но не 14 а 8 почему-то
"x" в именах что-то значит?
Для удобства. Раньше я таким ф-циям ставил префикс x, чтобы различать для чего они. А ещё раньше была кроссбраузерная библиотека X, когда с этим было всё совсем плохо и они использовали тот же префикс:)
но не 14 а 8 почему-то
Ну может у тебя ещё что-то влияет.
Я удалил их, т.к. от них нет толку никакого.
Для установки одиночного css-свойства делаем примерно так:
ele.style.left='100px';
Для установки нескольких - рекомендуется делать так:
ele.style.cssText='left:100px;top:100px';
т.к. это работает быстрее и перерисовывает элемент сразу же, в отличии от смены className.
Ну может у тебя ещё что-то влияет.
исключенно я отдельно эти функции тестил
исключенно я отдельно эти функции тестил
Взгляни сам что там происходит. Как может присвоецо другое значение?! Никак. Там же нет ничего хитрого.
Всмысле?
твои функции меняют значения?
твои функции меняют значения?
Если ты конкретно про xTop || xLeft - они возвращают и/или устанавливают, если передаётся второй аргумент.
Ну дак почему в моём случае не установили
и вообще если чё нибудь сверху написать то топ увеличиваетса а если внутри то нет
Если этот код не сработает - проблемы точно у тебя:
document.getElementById('la').style.top='100px';
Это тоже самое, что и ф-ция и это работает везде.
Ну хорошо приведи мне код от нуля и до конца где с этой функцией где она работает
Ну хорошо приведи мне код от нуля и до конца где с этой функцией где она работает
Забудь про них - их больше нет.
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot