Архив

Архив раздела ‘Javascript’
JavaScript : «найти и заменить»
24 июня 2010 Нет комментариев

В примере нам нужно в браузере заменять ссылки вида http://krylov.org.ua/redirect.php?http://google.ru/ на http://google.ru/
JS:

function VRmRL() {
	var finished = 0;
	while (finished <= 1) {
		var removed = "http://krylov.org.ua/redirect.php?";
		var str = document.getElementById("tmp").innerHTML;
		if (str.indexOf(removed) > -1) {
			document.getElementById("tmp").innerHTML = str.replace(removed, "");
		}
		else {
			finished = 1;
		}
	}
}

Кусок HTML как пример ну да и чтобы проверить:

<html>
<head>
<script type="text/javascript" src="rml.js"></script>
</head>
<body id="tmp" onload="VRmRL();">
<a href="http://krylov.org.ua/redirect.php?http://ya.ru/">LINK_1</a>
<br/>
<a href="http://krylov.org.ua/redirect.php?http://google.ru/">LINK_2</a>
<br/>
<a href="http://krylov.org.ua/redirect.php?http://ya.ru/">LINK_3</a>
<br/>
<a href="http://krylov.org.ua/redirect.php?http://google.ru/">LINK_4</a>
<br/>
<a href="http://google.ru/">LINK_5</a>
<br/>
<a href="http://ya.ru/">LINK_6</a>
<br/>
</body>
</html>
Categories: Javascript Tags:
WYSIWYG jQuery Plugin
19 мая 2010 Нет комментариев

1. Скачиваем дистрибутив с http://code.google.com/p/jwysiwyg/
2. Содержимое папки jwysiwyg-0.6.zip\jwysiwyg\jwysiwyg\ копируем например в /js/jwysiwyg/
3. В head (если jquery ранее не подключен, то подключаем, берем на http://jquery.com/):

<link rel='stylesheet' type='text/css' href='js/jwysiwyg/jquery.wysiwyg.css' />
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jwysiwyg/jquery.wysiwyg.js'></script>
<script type='text/javascript' src='js/jwysiwyg_config.js'></script>

4. jwysiwyg_config.js (на основе wysiwyg-0.6.zip\jwysiwyg\examples\02-full.html, токльо добавлена кнопка «редактирование HTML»)

$(function()
{
$('#wysiwyg').wysiwyg({
    controls: {
      html          : { visible : true },
      strikeThrough : { visible : true },
      underline     : { visible : true },
 
      separator00 : { visible : true },
 
      justifyLeft   : { visible : true },
      justifyCenter : { visible : true },
      justifyRight  : { visible : true },
      justifyFull   : { visible : true },
 
      separator01 : { visible : true },
 
      indent  : { visible : true },
      outdent : { visible : true },
 
      separator02 : { visible : true },
 
      subscript   : { visible : true },
      superscript : { visible : true },
 
      separator03 : { visible : true },
 
      undo : { visible : true },
      redo : { visible : true },
 
      separator04 : { visible : true },
 
      insertOrderedList    : { visible : true },
      insertUnorderedList  : { visible : true },
      insertHorizontalRule : { visible : true },
 
      h4mozilla : { visible : true && $.browser.mozilla, className : 'h4', command : 'heading', arguments : ['h4'], tags : ['h4'], tooltip : "Header 4" },
      h5mozilla : { visible : true && $.browser.mozilla, className : 'h5', command : 'heading', arguments : ['h5'], tags : ['h5'], tooltip : "Header 5" },
      h6mozilla : { visible : true && $.browser.mozilla, className : 'h6', command : 'heading', arguments : ['h6'], tags : ['h6'], tooltip : "Header 6" },
 
      h4 : { visible : true && !( $.browser.mozilla ), className : 'h4', command : 'formatBlock', arguments : ['<H4>'], tags : ['h4'], tooltip : "Header 4" },
      h5 : { visible : true && !( $.browser.mozilla ), className : 'h5', command : 'formatBlock', arguments : ['<H5>'], tags : ['h5'], tooltip : "Header 5" },
      h6 : { visible : true && !( $.browser.mozilla ), className : 'h6', command : 'formatBlock', arguments : ['<H6>'], tags : ['h6'], tooltip : "Header 6" },
 
      separator07 : { visible : true },
 
      cut   : { visible : true },
      copy  : { visible : true },
      paste : { visible : true }
    }
  });
});

5. Ну и в тексте:

<div><textarea id='wysiwyg' name='some_name' cols='100' rows='20'></textarea></div>
Categories: Javascript Tags: ,
Javascript: Размеры клиентской части окна браузера
12 мая 2010 2 комментария 
function screenSize() {
   var w, h; // Объявляем переменные, w - длина, h - высота
   w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
   h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
   return {w:w, h:h};
}
// Пример:
document.write(
   "Длина = " + screenSize().w + "px<br>" +
   "Высота = " + screenSize().h + "px"
);

Источник: http://webew.ru/articles/152.webew

Categories: Javascript Tags:
Изменение высоты элемента в зависимости от разрешения экрана
6 мая 2010 3 комментария

В примере изменяется высота таблицы с контентом. Предположим, что над ней есть таблица header, а под ней footer, обе талицы имеют статическую высоту по 200px каждая. В head:

function ChHgh() {
   var client_height = window.screen.height;
   var content_height = client_height - 400;
   document.getElementById('contenttable').style.height = content_height + 'px';
}

400 — высота header + высота footer

<body onload='ChHgh()'>

Где то в тексте:

<table id='contenttable'..
Categories: Javascript Tags:
Стили :hover для Internet Explorer 6 или замена стилей с помощью javascript
30 апреля 2010 Нет комментариев

Нужен результат: меняется фон ячейки таблицы при наведении на нее мыши.
Допустим, переменная $classname может принимать значения current и nocurrent. Менять фон нужно только для nocurrent. Используем такие стили:

.nocurrent {
background: white;
}
.current {
background: red;
}
.nocurrent:hover {
background: red;
}
echo "<td class='".$classname."'>some text</td>";

В IE6 такой вариант работать не будет.
Можно так (но для current cтиль тоже будет меняться):

echo "<td class='".$classname."' onmouseover='style.backgroundColor=\"red\";' onmouseout='style.backgroundColor=\"white\";'>some text</td>";

Правильный вариант, ну во всяком случае у меня так получилось :)

function RPClass(hi) {
   if (hi.className == 'nocurrent') {
      hi.className = 'current_js';
   }
}
function RPClassR(hi) {
   if (hi.className == 'current_js') {
      hi.className = 'nocurrent';
   }
}
echo "<td class='".$classname."' onmouseover='RPClass(this);' onmouseout='RPClassR(this);'>some text</td>";

CSS (:hover теперь не нужен, стили просто будут меняться, вместо него второй стиль):

.current_js {
background: red;
}
Categories: CSS, Javascript Tags: , , ,
Переход по ссылке при нажатии на ячейку таблицы (td onclick)
13 февраля 2010 3 комментария

HTML:

<td style="cursor: pointer;" id="logo" onclick="window.location.href='/'"></td>

CSS:

#logo {
background: url(logo.png) no-repeat;
height: 100px;
width: 200px;
}

Можно использовать в header сайта, для перехода на главную страницу при нажатии на логотип. Преимущества такого способа заключаются в том, что пропадает возможность при клике правой кпопкой мыши сохранить логотип, как было бы в том случае, если поместить в эту ячейку <a href="/"><img src="logo.png" atl="logo" /></a>

Categories: Javascript Tags: ,
Защита информации от копирования
11 февраля 2010 Нет комментариев

1. Запрет правой кнопки мыши (к сожалению только для Internet Explorer):
<script type="text/javascript" language="JavaScript">

document.oncontextmenu = new Function("return false");

</script>
или более сложный вариант (также работает только для Internet Explorer):
<script type="text/javascript" language="JavaScript">

var mymessage = "Материалы защищены от копирования.";
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
}
 function rtclickcheck(keyp){
  if (document.layers && keyp.which != 1) {
    alert(mymessage);
    return false;
  }
  if (document.all && event.button != 1) { 
    alert(mymessage);
    return false;
  }
}
document.onmousedown = rtclickcheck

</script>
2. Запрет кеширования страницы (добавить в head):
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv=Cache-Control content=no-cache />

Categories: Javascript Tags: ,