Вы искали css - Страница 6 из 8

Пишем расширение для браузера Chrome

16.10.2015 Павел Грибов WEB

Ну не написал об этом только ленивый 😉

Задача: написать «Оповещалку» о проблемах в сети и серверах, которая тянет данные с Zabbix.

Первым делом создаем файл manifest.json:

{
"name": "Уведомления Zabbix от НОС",
"version": "1.0.0.1",
"manifest_version": 2,
"icons": {
"32": "z_red.png"
},

"browser_action": {
"default_title": "Уведомления Zabbix от НОС",
"default_icon" : "z_red.png",
"default_popup": "popup.html"
},

"background": {
"scripts": ["jquery.min.js","main.js"],
"persistent": false
},

"permissions": [
"https://*/*",
"http://*/*",
"alarms",
"notifications"
],

"content_security_policy": "script-src 'self'; object-src 'self'",

"web_accessible_resources": [
"z_red.png",
"jquery.min.js",
"main.js",
"notification.html",
"popup_main.js",
"config.js",
"notify.mp3",
"notify.wav",
"notify.ogg"
]
}

{

"name": "Уведомления Zabbix от НОС",

"version": "1.0.0.1",

"manifest_version": 2,

"icons": {

"32": "z_red.png"

"browser_action": {

"default_title": "Уведомления Zabbix от НОС",

"default_icon" : "z_red.png",

"default_popup": "popup.html"

"background": {

"scripts": ["jquery.min.js","main.js"],

"persistent": false

"permissions": [

"https://*/*",

"http://*/*",

"alarms",

"notifications"

"content_security_policy": "script-src 'self'; object-src 'self'",

"web_accessible_resources": [

"z_red.png",

"jquery.min.js",

"main.js",

"notification.html",

"popup_main.js",

"config.js",

"notify.mp3",

"notify.wav",

"notify.ogg"

]

}

В нем прописываем все файлы которые будут использоваться нашим расширение, ресурсы куда оно будет ходить и какие манипуляции может совершать.

В background перечисляются скрипты, которые будут автоматически запускаться при старте браузера (ну и собственно расширения).

defalut_popup — скрипт который будет запускаться при нажатии на иконку расширения.

» Читать далее

Оставить комментарий chrome, crome, пишем расширение браузера

fabric.js подсказка при наведении мышки на обьект..

28.07.2015 Павел Грибов WEB

Странно, что такой полезной функции не оказалось в «коробке»…Ну да ничего. Решаемо.

function showImageTools (e) {
    data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";       
    if (!$('#imageDialog').length) {
        $("#saveweldingandmark").append(data);
    }
    moveImageTools(e);
};
function moveImageTools (e) {
    var w = $('#imageDialog').width();
    var h = $('#imageDialog').height();
    $('#imageDialog').show();
    $('#imageDialog').css({top: my, left: mx});
}
var MouseCoords = {
getX: function(e){
    if (e.pageX) {
            return e.pageX;
    } else 
        if (e.clientX) {
            return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
        }
    return 0;
    },
getY: function(e){
    if (e.pageY){
            return e.pageY;
    } else 
      if (e.clientY) {
            return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
      }
    return 0;
    }
};
document.onmousemove = function(e){
    if (!e) e = window.event;
    mx=MouseCoords.getX(e);
    my=MouseCoords.getY(e);
};
canvas.on('mouse:over', function (e) {
    console.log("Я на что-то наехал...");
    showImageTools(e.target);
});
canvas.on('mouse:out', function (e) {
    $('#imageDialog').remove();
});

function showImageTools (e) {

data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>";

if (!$('#imageDialog').length) {

$("#saveweldingandmark").append(data);

}

moveImageTools(e);

};

function moveImageTools (e) {

var w = $('#imageDialog').width();

var h = $('#imageDialog').height();

$('#imageDialog').show();

$('#imageDialog').css({top: my, left: mx});

}

var MouseCoords = {

getX: function(e){

if (e.pageX) {

return e.pageX;

} else

if (e.clientX) {

return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

}

return 0;

getY: function(e){

if (e.pageY){

return e.pageY;

} else

if (e.clientY) {

return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;

}

return 0;

}

};

document.onmousemove = function(e){

if (!e) e = window.event;

mx=MouseCoords.getX(e);

my=MouseCoords.getY(e);

};

canvas.on('mouse:over', function (e) {

console.log("Я на что-то наехал...");

showImageTools(e.target);

});

canvas.on('mouse:out', function (e) {

$('#imageDialog').remove();

});

Оставить комментарий fabric.js, fabricjs, hint, подсказка

Реализация рисования на картах с использованием API Яндекс.Карт.

01.07.2015 Павел Грибов PHP, WEB

Задача: необходимо реализовать рисование на картах, с возможностью сохранения нарисованного во внешнюю базу.

Решение: будем использовать API Яндекс.Карт.

Логика: отображаем карту в зависимости от выбранного подразделения, и слоя. При выборе подразделения или слоя, подгружаем из вне ранее нарисованные обьекты. При нажатии кнопки «Сохранить» — сохраняем их во внешнюю базу.

Демо (безо возможности сохранения обьектов)

Далее код: » Читать далее

5 комментариев api, map.yandex, редактирование, рисование, яндекс карты

Меняем ширину темы twenty fourteen для WordPress

17.06.2015 Павел Грибов WEB

По непонятной причине разработчики темы twenty fourteen для WordPress решили что ширина экрана на современных экранах, ограничена размером в 1260 пикселей. Странно.. однако тема хорошая, а потому её можно чуть чуть «пофиксить».. Для этого нужно отредактировать style.css:

Найти все упоминания 1260px и заменить на 100%
Найти все вхождения max-width: 672px; и заменить на max-width: 100%;
Найти все вхождения max-width: 474px; и заменить на max-width: 80%;

2 комментария twenty fourteen, wordpress, ширина

Дерево на jquery с «drag and drop»

08.10.2014 Павел Грибов PHP, WEB

Для того чтобы организовать хранение дерева, массив данных должен содержать как минимум два параметра: id записи, и child — т.е. в иерархии к какой id относится эта запись. Пример child =0, если запись в «корне». Например структура в mysql в простейшем случае может быть такой: id,name,address,child

Для непосредственного отображения дерева удобно пользоваться jquery плагином dynatree. При перетаскивании элементов дерева при помощи «drag and drop», состояние ветвей записывается в БД. Ниже пример кода, какой он может быть: » Читать далее

Оставить комментарий javascript, php, дерево

« 1 … 4 5 6 7 8 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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