DeerBlog about Coding -> Javascript: вставить тег перед каким-то определённым тегом (или после)

Декабрь 2008

6 декабря 2008, 22:55 более месяца назад

Javascript: вставить тег перед каким-то определённым тегом (или после)

Для этого нужно всего лишь найти тег и по ветке DOM ( parentNode ) вставить перед тегом ( insertBefore ) , тег (созданым, например, через document.createElement ). Что бы вставить после определённого тега, к его id приписываем .nextSibling

Например:

id.parentNode.insertBefore(optg,id);// вставить тег перед тегом
id.parentNode.insertBefore(optg,id.nextSibling);// вставить тег после тега

Комментировать…

Теги: javascript id parentNode insertBefore, javascript id nextSibling

5 декабря 2008, 13:45 более месяца назад

Dynamic load style or CSS («OnDemand»). Full dynamic Import :)

Функция empty определяет, считается ли переменная пустой.

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);

Комментировать…

Теги: javascript import ondemand, javascript, css

4 декабря 2008, 11:22 более месяца назад

YASS: Yet Another cSS selector

Вот тут можно скачать YASS, который поможет быстрее всех выбрать все нужные DOM элементы по маске!
как использовать? :) всё просто:

_('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 (русские комментарии)

1 комментарий

Теги: javascript framework yass, css selectors, html w3c DOM

16 ноября 2008, 19:43 более месяца назад

css: cursor pointer in all browsers

element {
	cursor: pointer;
	cursor: hand;
}

Комментировать…

Теги: css cursor pointer

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);

Комментировать…

Теги: javascript import ondemand, javascript import, javascript function setTimeout

11 сентября 2008, 21:50 более 3-х месяцев назад

1px round border, simple valid css method

«Как-бы» круглая граница текста(блока) делается довольно легко, используя всего 3 вложеных елемента :)
Расмотрим 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: подглядел вот сдесь

Комментировать…

Теги: css

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 */
}

Комментировать…

Теги: transparency

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
		// 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
}

Теперь вместо doucment.getElementById(«somekrap») пишешь $(«somekrap») устраняет много проблем, когда голимый ИЕ не видит Элемент по названию айди.

Комментировать…

Теги: javascript document getElementById

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’;

1 комментарий

Теги: bugs className, browsers microsoft Internet Explorer, javascript id setAttribute

11 июля 2008, 11:33 более 5-и месяцев назад

JavaScript Gallery

Нужно подключить всего лишь один джаваскрипт в боди:

<script type="text/javascript" src="/ssh/ssh.js"></script>

Все настойки хранятся в самом джаваскрипте.

1 комментарий

Теги: javascript examples

Предыдущие заметки		Следующие заметки
←	Ctrl	→