Chrome deviceorientation event in javascript

Vladimir Boychentsov — Mon, 30 Jan 2012 22:01:24 +0000

Video:

1
2
3
4
5
6
7
8

Using jQuery thickbox built in WordPress

Vladimir Boychentsov — Fri, 17 Oct 2008 10:00:45 +0000

To cite an example of how to use the built-in thickbox wordpress when you write a plug-in.

First step: Create a folder “wp_plugin” in the folder “plugins”

Second step: Create a file with the following code ajax.php

1
2
3
4
5
6
7
8
9
10
11
12
13

define("VP","wp_plugin");
define("ABSPATH", str_replace("wp-content/plugins/".VP, "", dirname(__FILE__)));

//The inclusion of these files allows full use of all functions of wordpress
require_once(ABSPATH.'wp-load.php');
require_once(ABSPATH.'wp-admin/includes/admin.php');

if($_GET['options'])
{
echo $_GET['options'];
}
?>

Go next step

Third step: Create a file with the following code plugin_example.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/*
Plugin Name: WP plugin example
Plugin URI: http://www.developers-life.com
Description: Example using thickbox
Author: www.developers-life.com
Version: 0.1
Author URI: Vladimir Boichentsov
*/

define("VP","wp_plugin");
define("VP_URL", get_option('home')."/wp-content/plugins/".VP );

include_js();
add_action('admin_menu', 'wp_add_page');

//Add page to menu
function wp_add_page() {
add_options_page('Admin Menu', 'Plugin', 'manage_options', VP, 'wp_vp_adminmenu_options_page_includes');
}

//Include javascript
function include_js()
{
if($_GET["page"] == VP)
{
wp_enqueue_script( 'thickbox', get_option('home').'/wp-includes/js/thickbox/thickbox.js', array ('thickbox'), '3.1-20080430' );
add_action( 'admin_head', 'helperCSS');
}

}
// CSS style for thickbox
function helperCSS()
{
echo ")."/wp-includes/js/thickbox/thickbox.css?ver=20080613' type='text/css' media='all' />\n";

}

//Main function
function wp_vp_adminmenu_options_page_includes()
{
echo "\"".VP_URL."/ajax.php?options=ok&type=image&TB_iframe=true\" class=\"thickbox\" title='Example'>Example";
}
?>

It’s easy:)

P.S.: Пишу статью на английском т.к. сам не ищу помощи на русских сайтах, а если нахожу, то в основном все на английском :) Заранее извиняюсь за свой english.

Yandex тИЦ в статус баре FireFox`a

Vladimir Boychentsov — Sat, 20 Sep 2008 12:52:13 +0000

Искал расширение(extention) для Firefox которое показывает в статус баре(status bar) один Yandex тИЦ. Нашел, но оно уже не работает в новом FireFox 3. Пришлось написать своё :)

Пару часов лазанья по интернету и экспериментов и результат на лицо:

Человек я добрый :)

Поделюсь своей работай Yandex тИЦ

Будут вопросы, пишите.

Пример перехвата сообщений в Javasctipt

Vladimir Boychentsov — Sun, 07 Sep 2008 22:17:15 +0000

Когда нужно отделить javascript от HTML это лучший вариант. Возникала проблема с перехватом сообщений. В разных браузерах одни функции работали а в других нет. Пришел к выводу что так лучше. Может кто-то посоветует что-то получше.

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<title></title>
<meta content="">
<style></style>
</head>
<body>

<form name="myForm">
<input type="button" name="myButton">
</form>

<script language="JavaScript">
document.myForm.myButton.onclick= message;

function message() {
alert(''Click event occured!'');
}

</script>

</body>
</html>

FAQ – часто задаваемые вопросы по jQuery

Vladimir Boychentsov — Fri, 05 Sep 2008 07:58:19 +0000

Эта статья является чуть-чуть вольным переводом аналогичного раздела на сайте разработчиков библиотеки jQuery. Речь пойдет о казалось бы совсем простых вещах, но не всегда очевидных с первого взгляда, поэтому эта информация наверняка может кому-то пригодится.
Как выбирать элементы, используя class или id?

Этот код выбирает элемент с id “myDivId”. Поскольку id является уникальным, это выражение всегда выбирает один элемент. Или ничего не выбирает, если элемента с таким id не существует.

1	$('#myDivId');

Следующий код выбирает элемент(ы) с классом “myCssClass”. Поскольку любое количество элементов может иметь этот класс, это выражение будет выбирать любое количество элементов.

1	$('.myCssClass');

Выбранный элемент может быть присвоен переменной javascript, например так:

1	var myDivElement = $('#myDivId');

Обычно выбранные элементы задействуются другими функциями jQuery:

1
2
3
4

// получаем значение элемента
var myValue = $('#myDivId').val();
// устанавливаем значение элемента
$('#myDivId').val("hello world");

Выбирая элементы по имени класса, лучше использовать составной селектор. Если отбор идет по id, то логично использовать именно id.

1
2
3
4

$('#myDivId'); // лучше
$('div#myDivId'); // хуже
$('span.myCssClass'); // лучше
$('.myCssClass'); // хуже

Как проверить имеет ли элемент специфический класс?

Вы можете использовать метод is() (см. jQuery API: Traversing – обход DOM) вместе с подходящим селектором.

1 2	if ( $('#myDiv').is('.pretty') ) $('#myDiv').show();

Заметьте, что этот метод позволяет Вам проверять также и другие вещи. Например Вы можете проверить, скрыт ли элемент (при использовании :hidden селектора).

1 2	if ( $('#myDiv').is(':hidden') ) $('#myDiv').show();

Иногда также бывает вопрос: имеет ли jQuery hasClass (см. jQuery API: Attributes – атрибуты) метод?

Заметьте, что hasClass был добавлен начиная с версии 1.2, чтобы обрабатывать наиболее распространенное использование метода is().

1
2
3
4
5
6
7
8
9

$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});

В этом коде добавляется некая анимация для элемента(ов) с классом protected. Обратите внимание, что имя класса тут записывается без точки.
Как проверить существование элемента?

Вы можете использовать свойство length набора jQuery, возвращенного селектором.

1 2	if ( $('#myDiv').length ) $('#myDiv').show();

Заметьте, что вовсе не всегда необходимо проверять, существует ли элемент. Следующий код показал бы элемент, если он существует, и не сделал бы ничего (и никакой ошибки бы не возникло), если это неверно.

1	$('#myDiv').show();

Как определить состояние переключаемого элемента?

Вы можете проверить состояние, используя селекторы :visible или :hidden (см. jQuery API: Selectors – селекторы jQuery: фильтры контента, visibility-фильтры, фильтры атрибутов, child-фильтры).

1 2	var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden');

Если Вы хотите воздейстовать на элемент, основываясь на его видимости, просто включите “:visible” или “:hidden” в выражение селектора. Например:

1	$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Как выбирать элементы, которые имеют специфические символы в id?

Например, это может быть обычным для некоторых фреймворков, генерирующих уникальные id, которые имеют специальные символы в них (такие как ‘.’ или ‘[..]‘). Проблема состоит в том, что эти символы имеют специальное значение в CSS. Как поступать в таких случаях, смотрите на следующих примерах:

1
2
3
4

$("#some.id") // это не работает!
$("#some\\.id") // а это работает!
$("#some[id]") // это не работает!
$("#some\\[id\\]") // а это работает!

Как разрешать/запрещать использование элемента?

Вы можете разрешать/запрещать элемент, устанавливая атрибут ‘disabled’ в значение ‘disabled’ (чтобы запретить использование элемента) или присвоить тому же атрибуту пустое значение ”, или же просто удалить атрибут ‘disabled’ (чтобы разрешить использование элемента). Код может выглядеть примерно следующим образом:

1
2
3
4
5
6

// запрещаем использование элемента #x
$("#x").attr("disabled","disabled");
// разрешаем использование элемента #x
$("#x").attr("disabled","");
// разрешаем использование элемента #x
$("#x").removeAttr("disabled");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1
2
3
4
5

Как отметить/снять отметку с элемента checkbox?

Вы можете отметить/снять отметку c элемента checkbox, устанавливая атрибуту ‘checked’ значение ‘checked’ (чтобы отметить элемент) или установить атрибуту ‘checked’ пустое значение “” (чтобы снять отметку). Пример кода приведен ниже:

1
2
3
4

// отмечаем checkbox с id="c"
$("#c").attr("checked", "checked");
// снимаем отметку checkbox'а с id="c"
$("#c").attr("checked","");

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1	<label><input id="c" type="checkbox" />это подопытный checkbox</label>

Как получать значения выбранной опции элемента select?

Элементы select обычно имеют два значения, к которым нужно обратиться. Это значение атрибута value соответствующего элемента option и его текстовое значение. Для примера возьмем следующий код:

1	<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

Вот так можно получить значение атрибута value, выбранной опции:

1	$("select#myselect").val();

А вот так можно получить текст выбранной опции:

1	$("#myselect option:selected").text();

Вы можете попробовать следующий пример:

и посмотреть его исходный код:

1	<select id="myselect"> <option value="1">Mr</option> <option value="2">Mrs</option> <option value="3">Ms</option> <option value="4">Dr</option> <option value="5">Prof</option> </select>

“Правильное использование” Google maps

Vladimir Boychentsov — Wed, 03 Sep 2008 22:00:29 +0000

Доброго времени!

Сейчас я напишу пост об этой технологии. Не нашли реально разумный подход для решения отображения маркеров на карте и о том, что нам понадобилось для этого в просторах интернета

Первым делом сам google map, я не буду комментить коды, т.к. про все можно прочитать на офф сайте или найти в интернете.

Проект над которым я вел работы http://frantsia.ru/nedvigimost/

Заказчик у нас человек разумный! Он сразу предложил разбиение страны на зоны, а зоны на регионы, чтоб не отображать тучу маркеров сразу на всей карте и естественно отображать маркеры только в видимой области, что способствует к ускорению работы карты. При определенном зуме маркеры меняются на зоны/регионы/недвижимость. Каждый, раз когда человек двигает карту, происходит обращение на сервер за новыми данными. Организация передачи данных производится слега переписанным framework Sajax.

Почему Sajax? - маленький и быстрый!

Некие моменты! Можно добавить перелистывание объектов на карте, к примеру по 100 штук. Собственно как и поступили все мне известные проект связанные с картами. С одной стороны это удобно, но есть свои но… Читал статью на хабре, как одна команда решала задачу с маркерами. Они такие велосипеды изобретали…. :)

Карта и все элементы поиска прослушываются на evets, что делает ее более юзабельной. В google API есть свой GEvent который очень прост в использовании, к примеру:

1
2
3
4
5
6
7
8

GEvent.addListener(map, "moveend", function(){
if(map.getZoom() > 12 && !click) {
get_real();
}
if(!click)
get_zones();
setTimeout(function(){ click = false; }, 4000);
});

Продолжу писать пост как появится время :)

Google API AJAX Translate, переводим на своем сайте

Vladimir Boychentsov — Wed, 03 Sep 2008 17:06:23 +0000

Гуг открыл свой API по переводу! Думаю многие сразу его заюзали!

Вот пример который я реализовал

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1
2
3
4
5
6

<label for="text">Введите текст для перевода:<;/label>
<textarea style="width:400px;height:150px;" id="text"></textarea>

<div style="width:400px;height:150px;" id="translation"></div>
<input type="button" value="Перевод на English" onclick="transl('ru','en');">
<input type="button" value="Перевод на Русский" onclick="transl('en','ru');">

Пример определения языка:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Очень удобный AJAX! Я его заюзал уже на нескольких сайтах, к примеру http://uslugi.net/ там используется в панели юзера при добавлении объявления!

Notes of a Developer » Javascript

Chrome deviceorientation event in javascript

Using jQuery thickbox built in WordPress

Yandex тИЦ в статус баре FireFox`a

Пример перехвата сообщений в Javasctipt

FAQ – часто задаваемые вопросы по jQuery

“Правильное использование” Google maps

Google API AJAX Translate, переводим на своем сайте