6 декабря 2008, 22:55 более месяца назад
Javascript: вставить тег перед каким-то определённым тегом (или после)
Для этого нужно всего лишь найти тег и по ветке DOM ( parentNode ) вставить перед тегом ( insertBefore ) , тег (созданым, например, через document.createElement ). Что бы вставить после определённого тега, к его id приписываем .nextSibling
Например:
Например:
id.parentNode.insertBefore(optg,id);// вставить тег перед тегом id.parentNode.insertBefore(optg,id.nextSibling);// вставить тег после тега
5 декабря 2008, 13:45 более месяца назад
Dynamic load style or CSS («OnDemand»). Full dynamic Import :)
Функция empty определяет, считается ли переменная пустой.
Для загруки стиля динамически, используем функцию import_style
Для загруки CSS динамически, используем функцию import_css
Использовать очень и очень просто :)
Раньше я описывал Импорт JavaScript, теперь можно подитожить, и научить фунцкию $import загружать style, css и js
Используем вот-так
Запомни!
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту (после подгрузки с помощью $import), вот так: setTimeout(«SomeFreamework.SomeFucntionMake(’someparametr’)», 100);
function empty(param) {return (param == null || param == undefined) ? true : false;}
Для загруки стиля динамически, используем функцию import_style
function import_style(src){ if (empty(src)) return; var imprt = document.createElement('style'); imprt.setAttribute("type", "text/css"); if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE else imprt.appendChild(document.createTextNode(src)); // Other normal browsers document.getElementsByTagName('head')[0].appendChild(imprt); return false; // disable link href-action }
Для загруки CSS динамически, используем функцию import_css
function import_css(src, media){ if (empty(src)) return; var imprt = document.createElement('link'); imprt.setAttribute("rel", "stylesheet") imprt.setAttribute("type", "text/css"); imprt.setAttribute("media", empty(media) ? "all" : media); imprt.setAttribute("href", src); document.getElementsByTagName('head')[0].appendChild(imprt); return false; // disable link href-action }
Использовать очень и очень просто :)
<a href="#" onclick="import_style('body {color: red;}');">make red</a> <a href="#" onclick="import_css('test.css');">make styled</a><br>
Раньше я описывал Импорт JavaScript, теперь можно подитожить, и научить фунцкию $import загружать style, css и js
function tms() {return new Date().getTime().toString();} // funtion return today date in second function $import(src, type, media){ if (empty(src) || empty(type)) return; // if empty go away switch (type) { case "js" : // import some javascript var imprt = document.createElement('script'); imprt.setAttribute('type','text/javascript'); imprt.setAttribute('src',src + '?' + tms()); // Get rid of the caching break; case "css" : // import css var imprt = document.createElement('link'); imprt.setAttribute("rel", "stylesheet") imprt.setAttribute("type", "text/css"); imprt.setAttribute("media", empty(media) ? "all" : media); imprt.setAttribute("href", src + '?' + tms()); // Get rid of the caching break; case "style" : // import some style in head var imprt = document.createElement('style'); imprt.setAttribute("type", "text/css"); if (imprt.styleSheet) imprt.styleSheet.cssText = src; //IE else imprt.appendChild(document.createTextNode(src)); // Others break; default: return; } document.getElementsByTagName('head')[0].appendChild(imprt); // mount import stuff to head return false; // disable link href-action }
Используем вот-так
<a href="#" onclick="$import('body {color: red;}','style');">make red</a> <a href="#" onclick="$import('test.css','css');">make styled</a> <a href="#" onclick="$import('test.js','js');">make alert</a>
Запомни!
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту (после подгрузки с помощью $import), вот так: setTimeout(«SomeFreamework.SomeFucntionMake(’someparametr’)», 100);
4 декабря 2008, 11:22 более месяца назад
YASS: Yet Another cSS selector
Вот тут можно скачать YASS, который поможет быстрее всех выбрать все нужные DOM элементы по маске!
как использовать? :) всё просто:
скачать 0.1ю версию для ознакомления с принципом работы 6Kb (русские комментарии)
как использовать? :) всё просто:
_('a.link'); // выбрать все теги <a> с class="link" _('.link span'); //выбрать все теги <span> внутри тега с class="link" _('p'); //выбрать все теги <p> _('#p'); //выбрать все теги с id="p" _('#p .link'); //выбрать все теги с class="link" внутри тега с id="p" _('#p #sp1'); //выбрать все теги с id="sp1" внутри тега с id="p" _('p#p'); //выбрать все теги <p> с id="p" _('p a'); //выбрать все теги <a> внутри тега <p> _('.link'); //выбрать все теги с class="link" _('.link #sp1'); //выбрать все теги с id="sp1" внутри тегов с class="link" _('img'); //выбрать все теги <img> _('body p img'); //выбрать все теги <img> внутри тега <p>, что внутри <body> _('a, img'); // выбрать все теги <a> и <img>
скачать 0.1ю версию для ознакомления с принципом работы 6Kb (русские комментарии)
16 ноября 2008, 19:43 более месяца назад
css: cursor pointer in all browsers
element { cursor: pointer; cursor: hand; }
8 октября 2008, 12:49 более 3-х месяцев назад
Dynamic load JavaScript («OnDemand»)
Для загрузки джаваскриптов динамически («по требованию»), можно использовать простую функцию:
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту(после подгрузки самих фреймфорков/функций)
function $import(src){ var scriptElem = document.createElement('script'); scriptElem.setAttribute('src',src); scriptElem.setAttribute('type','text/javascript'); document.getElementsByTagName('head')[0].appendChild(scriptElem); }Если загружаемый Джаваскрипт часто изменяется, что бы избавиться от кеширования, можно использовать функцию ниже:
function $importNoCache(src){ var ms = new Date().getTime().toString(); var seed = "?" + ms; $import(src + seed); }Пример использования:
$import("/js/somescript.js"); или $importNoCache("/js/somescript.js");
Для корректной работы с фреймворками, или обьёмными функциями их лучше подгружать по таймауту(после подгрузки самих фреймфорков/функций)
setTimeout("SomeFreamework.SomeFucntionMake('someparametr')", 100);
11 сентября 2008, 21:50 более 3-х месяцев назад
1px round border, simple valid css method
«Как-бы» круглая граница текста(блока) делается довольно легко, используя всего 3 вложеных елемента :)
Расмотрим CSS:
а в HTML всё просто:
ps: подглядел вот сдесь
Расмотрим CSS:
ul.r1pxc, ul.r1pxc li, ul.r1pxc a, ul.r1pxc b { /* обнуляем все елементы и начинаем параметры указывать: */ text-decoration: none; position: relative; display: block; margin: 0; padding: 0;} ul.r1pxc li { /* отступы */ float: left; clear: both; left: 1px; /* своеобразный паддинг слева*/ list-style: none; /* нам не нужны лишние "артефакты" :) */ background-color: #aaa; /* цвет бордера, верхнего */ border-bottom: 2px solid #aaa; /* цвет бордера, нижнего */ margin-bottom: 5px;} ul.r1pxc li a { width: 120px; /* длину елемента, в данном случае ссылки */ float: left; left: -1px; top: 1px; margin-right: -2px; /* что бы появилась правая граница */ background-color: #ddd;} /* цвет фона */ ul.r1pxc li a:hover { background-color: #ccc;} /* цвет фона при наведении мышей */ ul.r1pxc li a b { border: solid #aaa; /* цвет бордеров */ border-width: 0 1px 0 1px; /* бордеров правой и левой стороны */ padding: 4px; /* просто паддинг для текста */ font-weight: normal; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000;}
а в HTML всё просто:
<ul class="r1pxc"><li><a href="#"><b>Example</b></a></li></ul>
ps: подглядел вот сдесь
24 августа 2008, 01:01 более 4-х месяцев назад
CSS: transparency in all browsers
.make_me_transparent_baby{ filter:alpha(opacity=50); /* IE, all IE*/ -moz-opacity:0.5; /* old gecko */ -khtml-opacity: 0.5; /* old safari */ opacity: 0.5; /* all normal browsers */ }
15 августа 2008, 11:58 более 4-х месяцев назад
getElementById IE BUGS
var $ = function (id, doc) { if((id)&&((typeof id == "string")||(id instanceof String) ) ){ if (!doc) { doc = document; } var ele = doc.getElementById(id); // workaround bug in IE and Opera 8.2 whereТеперь вместо doucment.getElementById(«somekrap») пишешь $(«somekrap») устраняет много проблем, когда голимый ИЕ не видит Элемент по названию айди.
// getElementById returns wrong element if (ele && (ele.id != id) && doc.all) { ele = null; // get all matching elements with this id eles = doc.all[id]; if (eles) { // if more than 1, choose first // with the correct id if (eles.length) { for (var i=0; i < eles.length; i++) { if (eles[i].id == id) { ele = eles[i]; break; } } } // return 1 and only element else { ele = eles; } } }return ele; }return id; // assume it's a node }
15 августа 2008, 10:59 более 4-х месяцев назад
setAttribute(«class») не работает в ИЕ (Internet Explorer)
JavaScript setAttribute «class» not work in IE
//Хорошо работает везде, кроме ИЕ - good for all but not IE setAttribute(’class‘, ‘value’); //в ИЕ работает вот так - IE only setAttribute(’className‘, ‘value’); //везде работает вот так ;) - good for all browsers someElement.className = ‘value’;
11 июля 2008, 11:33 более 5-и месяцев назад
JavaScript Gallery
Нужно подключить всего лишь один джаваскрипт в боди:
<script type="text/javascript" src="/ssh/ssh.js"></script>Все настойки хранятся в самом джаваскрипте.