Закрытие элемента при клику за его пределами

Чаще всего при создании модальных окон внутри них делают кнопку для их закрытия, например обычный крестик. Такой вариант отличный и его отбрасывать не стоит, можно даже в паре с ним использовать и метод с данной статьи.

О том как сделать подобные окна, подробно мы останавливаться не будем. На моем сайте есть много статей на подобные темы.

Теперь подробнее о скрипте. Он работает на основе jQuery,поэтому, мы должны убедится что к сайту уже подключена библиотека jQuery. Если нет, то это нужно сделать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки нужно подключить наш скрипт.
Выглядит скрипт так:
$(document).mouseup(function (e){
var modalctr = $("#modal_cinw_ctnr");
var modal = $(".modal_cinw");
if (!modal.is(e.target) && modal.has(e.target).length === 0){
modalctr.hide();
}
});

Скрипт имеет важные параметры, настройка которых нужна для корректной работы скрипта.

$(document).mouseup(function (e){ - эта строка определяет, что скрипт будет работать когда отпущена любая из стандартных клавиш мыши.

var modalctr = $("#modal_cinw_ctnr"); - создаем переменную. В данном случаи это родительский контейнер окна. В примере это затемненная область поверх сайта. Иногда такой области нет, все зависит от типа вашего окна или другого элемента который вы хотите скрыть по клику вне его области.
#modal_cinw_ctnr - это айди нашего родительского контейнера. Меняйте на свой нужный.

var modal = $(".modal_cinw"); - создаем вторую переменную. Как раз эта переменная и является нашим окном, нажимая вне его области и будет скрываться именно оно. .modal_cinw - класс нашего окна. Вы можете менять на айди или класс, вашего элемента, что нужно скрыть.

if (!modal.is(e.target) && modal.has(e.target).length === 0){ - в этой строке мы определяем был ли совершен клик по нашему главному элементу, то бишь по окну или нет, а также по его дочерних элементах, что размещены внутри. Если это не они, то переходим далее.

modalctr.hide();
- скрываем наш родительский контейнер, первую переменную - modalctr. То бишь нажимая вне окна, мы скрываем область, что затемняет сайт, внутри которой и лежит окно. Если у вас нет родителя, а нужно скрыть просто элемент из переменной modal. То есть строка будет иметь такой вид - modal.hide();
Далее, просто закрываем скобки.
Если вы настроите все правильно то результат не заставит себя ждать.

На этом все, спасибо за внимание.

Добавлено: 19 Июня 2019 14:04:48 Добавил: Андрей Ковальчук

Поле с автодополнением при помощи jQuery UI Autocomplete

Стандартный способ создания поля с автодополнением достаточно ограничен, например нет возможности вызвать свой код после выбора элемента, или вывести список в каком-нибудь изощренном виде. Но выход есть, это jQuery UI Autocomplete, который входит в ядро Drupal 7.

Ниже, пример создания поля с автодополнением по заголовкам нод при помощи jQuery UI Autocomplete:

jqueryui_autocomplete.module:

/**
 * Implements hook_menu()
 */
function jqueryui_autocomplete_menu() {
  $items['test/form'] = array(
    'page callback' => 'drupal_get_form',
    'page arguments' => array('jqueryui_autocomplete_test_form'),
    'access arguments' => array('access content'),
  );
  $items['test/autocomplete'] = array(
    'page callback' => 'jqueryui_autocomplete_autocomplete',
    'access arguments' => array('access content'),
  );
  return $items;
}
 
/**
 * Form builder
 */
function jqueryui_autocomplete_test_form() {
  $form['title'] = array(
    '#type' => 'textfield',
    '#title' => 'Title',
  );
 
  $form['#attached']['library'][] = array('system', 'ui.autocomplete');
  $form['#attached']['js'][] = drupal_get_path('module', 'jqueryui_autocomplete') . '/jqueryui_autocomplete.js';
 
  return $form;
}
 
/**
 * Menu callback
 */
function jqueryui_autocomplete_autocomplete() {
  $titles = db_select('node', 'n')
    ->fields('n', array('title'))
    ->condition('n.title', '%' . db_like($_GET['term']) . '%', 'LIKE')
    ->execute()
    ->fetchCol();
 
  drupal_json_output($titles);
}

jqueryui_autocomplete.js:

(function ($) {
 
  Drupal.behaviors.jqueryui_autocomplete = {
    attach: function (context, settings) {
      $('input[name="title"]', context).autocomplete({
        source: Drupal.settings.basePath + 'test/autocomplete'
      });
    }
  };
 
}(jQuery));

Написанное актуально для
Drupal 7

Добавлено: 30 Июля 2018 07:32:11 Добавил: Андрей Ковальчук

Как подключить javascript файл из своего js скрипта

Пример подключения скрипта http://example.com/script.js:

Native javascript

var script = document.createElement('script');
script.src = 'http://example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(script);
alert('script loaded');

jQuery:

$.getScript('http://example.com/script.js', function(){
  alert('script loaded');
});

Добавлено: 29 Июля 2018 22:22:25 Добавил: Андрей Ковальчук

Как с помощью jQuery UI Dialog открыть AJAX окно

В jQuery UI виджете Dialog нет встроенной возможности показать окно с данными, полученными с помощью AJAX. Но это легко решаемо:

$('<div>').load('/some/url').dialog();
Или так, если после получения данных, их необходимо обработать:

$('<div id="my-dialog">Загрузка...</div>').dialog({
    open: function() {
        $.get('/some/url', function(response) {
            $('#my-dialog').html('<p>' + response + '</p>');
        });
    },
    close: function() {
        $('#my-dialog').remove();
    }
});

Добавлено: 29 Июля 2018 20:11:32 Добавил: Андрей Ковальчук

jQuery, функция scrolled

Небольшой кусок js кода, функция, из разряда сниппетов. Принимает jQuery объект (элемент) возвращает true когда элемент выходит за верхнюю границу окна.

function scrolled(e)
{
    var docViewTop = $(window).scrollTop();
    var elemTop = $(e).offset().top;
    var elemBottom = elemTop + $(e).height();
    return (elemBottom < docViewTop);
}

Добавлено: 13 Июля 2018 07:30:22 Добавил: Андрей Ковальчук

jQuery Ajax $.post

jQuery.post( url, [data], [callback], [type] )

Загружает страницу, используя POST-запрос.
Используется для отправки простых post-запросов на сервер, в случаях, когда нет необходимости использовать более сложную функцию $.ajax. Можно определить функцию-колбэк, которая будет выполнена по завершении запроса (в случае, если получен соответствующий ответ). Формат возвращаемых данных может быть определен в четвертом параметре type.

Аргументы:
url - String

url загружаемой страницы
data (необязательный) Map, String

данные, которые будут отправлены на с
ервер (пары key/value или результат функции .serialize() )
callback (необязательный) Function
функция, которая будет выполнена, если данные загружены успешно.
type (необязательный) String

тип данных, которые будут возвращены в функцию callback ( “xml”, “html”, “script”, “json”, “jsonp”, “text”.)

Примеры:
1. Запрашивает страницу mytest.php без возвращения результата.
$.post("mytest.php");

2. Запрашивает страницу mytest.php, передавая дополнительные данные. Результат не возвращается
$.post("mytest.php", { name: "Alex", balance: "7000" } );

3. Отсылает массивы данных на сервер без возвращения результата.
$.post("mytest.php", { 'names[]': ["Ольга", "Петр", "Анастасия"] });

4. Отсылает данные формы, используя ajax запрос
$.post("mytest.php", $("#mytestform").serialize());

5. Выводит сообщение с результатом запроса страницы mytest.php
$.post("mytest.php", function(data){
    alert("Данные загружены: " + data);
});

6. Отправляет данные и выводит результат запроса страницы mytest.php
$.post("mytest.php", { name: "Alex", balance: "7000" },
    function(data){
        alert("Данные загружены: " + data);
    });

7. Получает содержимое mytest.php, сохраняет в объекте XMLHttpResponse и вызывает функцию process().
$.post("mytest.php", { name: "Alex", balance: "7000" },
    function(data){
        process(data);
    }, "xml");

8. Получает содержимое mytest.php, которое было возвращено в формате
json (&lt;?php echo json_encode(array("name"=&gt; "Alex", "balance"=&gt; "7000")); ?&gt;)

$.post("mytest.php", { func: "getNameAndTime" },
    function(data){
        alert(data.name); // Alex
        console.log(data.balance); //  7000
    }, "json");

Добавлено: 12 Июля 2018 21:18:20 Добавил: Андрей Ковальчук

Простой jQquery слайд шоу без плагина

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

<div class="slidshow">
  <img src="images/first.jpg">
  <img src="images/second.jpg">
  <img src="images/third.jpeg">
</div>

Ну здесь должно быть все понятно, див с тремя картинками находящимися от текущего html файла на расстоянии одной директории images, далее пишем css код:
.slidshow {
        position:relative; 
}
.slidshow img { 
        position:absolute;
        left:0; 
        top:0; 
        width:500px; 
        height:375px;
}

Здесь мы ставим для картинок абсолютное позиционирование и ставим их левый верхний угол, ну и определяем для них одну ширину и высоту что бы при смене они не скакали ). Далее пишем Javascript код точнее jQuery )) но перед этим должны подключить его, лично я его всегда подключаю с гугла… примерно вот так вот:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

А теперь пишем такой вот код:
$(function(){
    $('.slidshow img:gt(0)').hide();//скрываем все картинки кроме 1го
      setInterval(function(){
      $('.slidshow :first-child').fadeOut()//анимированно скрываем 1ую картинку
         .next('img').fadeIn()//и показываем вторую
         .end().appendTo('.slidshow');},2000);//повторяем это каждые 2000 мс
});

Добавлено: 05 Июля 2018 08:33:14 Добавил: Андрей Ковальчук

Перекидное круглое слайдшоу

Сегодня мы поделимся с вами идеей простого и забавного круглого слайдшоу. Это – экспериментальная концепция, в корне которой лежит идея «перекидывания» круга под определенным углом в зависимости от того, на какую точку круга производится щелчок. Для каждой стороны существует три возможности: верх, середина и низ. Например, при щелчке по верхней правой части изображения круг перевернется под сопутствующим углом, при этом будет казаться, что мы нажали на указанную часть и показалось следующее изображение, находящееся на обратной стороне круга.

Вот как выглядит структура:

<div id="fc-slideshow" class="fc-slideshow">
    <ul class="fc-slides">
        <li><img src="images/1.jpg" /><h3>Hot</h3></li>
        <li><img src="images/2.jpg" /><h3>Cold</h3></li>
        <li><img src="images/3.jpg" /><h3>Light</h3></li>
        <li><img src="images/4.jpg" /><h3>Dark</h3></li>
        <li><img src="images/5.jpg" /><h3>Soft</h3></li>
        <li><img src="images/6.jpg" /><h3>Hard</h3></li>
        <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
        <li><img src="images/8.jpg" /><h3>Rough</h3></li>
    </ul>
</div>

А мы преобразуем ее следующим образом:
<div id="fc-slideshow" class="fc-slideshow">

    <ul class="fc-slides">
        <!-- ... -->
    </ul>

    <nav>
        <div class="fc-left">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-left"></i>
        </div>
        <div class="fc-right">
            <span></span>
            <span></span>
            <span></span>
            <i class="icon-arrow-right"></i>
        </div>
    </nav>

    <div class="fc-flip">
        <div class="fc-front">
            <div><img src="images/4.jpg"><h3>Dark</h3></div>
            <div class="fc-overlay-light"></div>
        </div>
        <div class="fc-back">
            <div><img src="images/5.jpg"><h3>Soft</h3></div>
            <div class="fc-overlay-dark"></div>
        </div>
    </div>

</div>

У элемента nav есть несколько пустых участков, служащих в качестве “зон обнаружения”. У каждой стороны окружности имеется три области, на которые можно будет щелкать, одна вверху, одна посредине и одна внизу. Элемент i послужит в качестве навигационной стрелки-указателя и, в зависимости от того, над которым из участков проводим мышью, мы будем вращать маленький квадрат со стрелкой. Но мы не станем применять в качестве области щелчка стрелку, а возьмем весь участок.

Разделение для перекидывания круга содержит специальную 3D-структуру: у него есть передняя и задняя стороны. При переходе к следующему или предыдущему элементу мы покажем эту структуру и будем вращать контейнер так, чтобы было видно обратную сторону.

От применения наложений все смотрится более реалистичным по причине обеспечения эффекта света и тени. Мы анимируем непрозрачность в зависимости от угла вращения.

Просто вызываем плагин вроде этого:
$( '#fc-slideshow' ).flipshow();
А вот опции плагина:

// опции
$.Flipshow.defaults = {
    // скорость перехода по умолчанию (в мс)
    speed : 700,
    // ослабление перехода по умолчанию
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

Пожалуйста, помните, что это эксперимент, и работать как следует все будет в браузерах, поддерживающих 3d-трансформации CSS. Для остальных есть простая альтернатива, при которой предыдущий или следующий элемент показываются и скрываются.

Надеюсь, вас вдохновит этот маленький плагин!

Добавлено: 29 Мая 2018 08:27:01 Добавил: Андрей Ковальчук

Как написать AJAX-приложение

Как работали обычные веб-приложения? Как правило, на событие (клик по ссылке или нажатие на кнопку) браузер реагировал отправкой запроса серверу. Когда с сервера приходил ответ, всё содержимое страницы полностью обновлялось.

Одна из проблем состояла в том, что при обновлении содержимого страницы веб-приложение переходит в новое состояние. Из информации о предыдущем состоянии сохраняются только данные, переданные в запросе. Чем более точная информация о прежнем состоянии системы требуется, тем больше данных необходимо пересылать в запросе.

Другим недостатком является необходимость пересылать повторяющиеся массивы данных клиенту после каждого события. Например, если пользователь ошибся при заполнении формы, то вместо короткого сообщения об ошибке приходится снова загружать и форму, и всю введённую ранее информации.

Современные браузеры, поддерживающие стандарты W3C DOM, позволяют вывести веб-приложение на новый уровень.

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

Веб-приложение получается распределенным, и часть логики находится на стороне клиента, а часть - на стороне сервера. Такие приложения и называют термином "AJAX Applications" (аббревиатура расшифровывается как Asynchronous Javascript And Xml Applications).

Объект XMLHTTPRequest
Для асинхронных запросов от клиента к серверу на стороне браузера служит специальный объект под названием XMLHTTPRequest.

Перечислим методы и свойства объекта, которые будут использованы далее:

* LHTTPRequest.open("method", "URL", async, "uname", "pswd") – создает запрос к серверу.
* method – тип запроса, например, GET
* URL – URL запроса, например httр://localhost/file.xml
* async – если True, то будет использоваться асинхронный запрос, то есть выполнение скрипта продолжится после отправки запроса. В противном случае скрипт будет ожидать ответа от сервера, заморозив UI.
* uname, pswd – логин и пароль для простой веб-авторизации.
* XMLHTTPRequest.send("content") – отправляет запрос на сервер. Значением content могут быть данные для POST-запроса или пустая строка.
* XMLHTTPRequest.onreadystatechange – обработчик событий срабатывающий на каждое изменение состояния объекта. Состояния объекта могут быть следующими:
* 0 - до того как запрос отправлен (uninitialized)
* 1 - объект инициализирован (loading)
* 2 - получен ответ от сервера (loaded)
* 3 - соединение с сервером активно (interactive)
* 4 - объект завершил работу (complete)
* XMLHTTPRequest.responseText – возвращает полученные от сервера данные в виде строки.
* XMLHTTPRequest.responseXML – если ответ сервера пришел в виде правильного XML, возвращает XML DOM объект.
* XMLHTTPRequest.status – возвращает статус HTTP-ответа в виде числа. Например, 404 если запрашиваемая страница не была найдена на сервере.

Рассмотрим применение объекта на примере простого AJAX-приложения.

Поле SELECT с поиском
Предположим у нас есть таблица, в которой порядка миллиона записей. Пользователю необходимо выбрать всего одну запись из таблицы (реализация отношения "один ко многим"). Выбор пользователя является всего лишь одним из этапов заполнения большой веб-формы.

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

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

Выбор записи будет реализован с помощью двух элементов веб-формы. Первый элемент - это текстовое поле, где пользователь вводит ключевое слово. Оно отсылается на сервер, а тот возвращает только те строки из таблицы, которые удовлетворяют условию поиска. Ответ сервера (в виде списка) помещается в поле SELECT, в котором пользователь и сделает окончательный выбор. Таким образом, при отправке всей формы на сервер попадет выбранное в поле SELECT значение в виде ID записи из большой таблицы.

В HTML выглядеть это может так:

<input type="text"
   onkeyup="lookup(this.value, 'id_select', 
   'http://localhost/cgi-bin/xmlhttp.cgi')" />
<select id="id_select" name="id_select">
<option selected="selected" value=""></option>
</select>

На любое событие KeyUp (отжатие кнопки) в текстовом поле вызывается функция lookup ('текст', 'id-selecta', 'url')
function lookup(text, select_id, url) {
        // Получаем объект XMLHTTPRequest
        if(!this.http){
            this.http = get_http();
            this.working = false;
        }
        // Запрос
        if (!this.working && this.http) {
            var http = this.http;
            // Если в текстовом поле менее трёх
            // символов – не делаем ничего
            if (text.length <3 ) return;
//добавляем закодированный текст
                //в URL запроса
            url = url + "?text="+encodeURIComponent(text);
      //создаём запрос
            this.http.open("GET", url, true);
            //прикрепляем к запросу функцию-обработчик
            //событий
            this.http.onreadystatechange = function() {
// 4 – данные готовы для обработки
                if (http.readyState == 4) {
                    fill(select_id, http.responseText);
                    this.working = false;
                  }else{
                     // данные в процессе получения, 
                     // можно повеселить пользователя
                     //сообщениями 
                     // ЖДИТЕ ОТВЕТА
                  }
            }
            this.working = true;
            this.http.send(null);
        }
        if(!this.http){
              alert('Ошибка при создании XMLHTTP объекта!')
        }
    }

Как видно, в начале мы получаем XMLHTTP-объект с помощью функции get_http(). Затем поисковый текст кодируется в стиле URL и формируется GET-запрос к серверу. URL запроса в данном случае будет выглядеть приблизительно так: httр://localhost/cgi-bin/xmlhttp.cgi?text=...

Скрипт на сервере, получив значение text, делает поиск в таблице и отсылает результат клиенту. В обработчике событий объекта XMLHTTP, когда данные от сервера получены и готовы к использованию, вызывается функция fill('select_id', 'data'), которая заполнит список SELECT полученными данными.

Функция get_http() – это кросс-браузерная реализация получения объекта XMLHTTP (в каждом браузере он получается по-своему). Её реализацию с комментариями вы можете легко найти в интернете, это, так сказать, пример из учебника.
function get_http(){
    var xmlhttp;
    /*@cc_on
    @if (@_jscript_version >= 5)
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new 
                ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }
    @else
        xmlhttp = false;
    @end @*/
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            xmlhttp = false;
        }
    }
    return xmlhttp;
}

Функция fill() получает на вход значение параметра ID списка SELECT, который необходимо заполнить, и сами данные, полученные с сервера.

Для простоты предположим, что данные с сервера мы получаем в виде таблицы, поля которой разделены символом табуляции 't', а строки - символом переноса строки 'n':

id1tname1n
id2tname2n
...

На основании содержимого этой таблицы мы будем заполнять поле SELECT элементами OPTION.
function fill (select_id, data){
    // поле SELECT в переменную в виде объекта
    var select = document.getElementById(select_id);
    // очищаем SELECT
    select.options.length = 0;
    // если данных нет – не делаем больше ничего
    if(data.length == 0) return;
    // в массиве arr – строки полученной таблицы
    var arr = data.split('n');
    // для каждой строки
    for(var i in arr){
        // в массиве val – поля полученной таблицы
        val = arr[i].split('t');
        // добавляем новый объект OPTION к нашему SELECT
        select.options[select.options.length]=
        new Option(val[1], val[0], false, false);
    }
}

Готово. Теперь для любой веб-формы приложения мы можем реализовать подобный выбор значения из многомиллионного списка, который для пользователя будет выглядеть как считанные нажатия клавиш. В локальной сети выбор происходит практически мгновенно. В случае нестабильного или низкоскоростного соединения с сервером, необходимо также оповещать пользователя о том, что загрузка данных с сервера еще не завершена. Полезно предусмотреть и средства для реакции на обрыв соединения.

Добавлено: 24 Мая 2018 20:17:32 Добавил: Андрей Ковальчук

Рейтинг как на YouTube

Я получил email вопрос от моих читателей, они спросили меня, как осуществить рейтинг как на YouTube с jQuery. Это приятный бар с результатами, так что я разработан простой сценарий с помощью PHP, jQuery и Ajax. Уверен, что вам понравится.
Рейтинг как на YouTube

Создаем базу данных
Выполняем sql запрос через phpmyadmin

CREATE TABLE messages(
id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT,
up INT,
down INT);


index.php
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".like").click(function()
{
var id=$(this).attr("id");
var name=$(this).attr("name");
var dataString = 'id='+ id + '&name='+ name;
$("#votebox").slideDown("slow");

$("#flash").fadeIn("slow");

$.ajax
({
type: "POST",
url: "rating.php",
data: dataString,
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content").html(html);
} 
});
});

// Close button action
$(".close").click(function()
{
$("#votebox").slideUp("slow");
});

});
</script>
//HTML Code
<a href="#" class="like" id="1" name="up">Like</a>
-- 
<a href="#" class="like" id="1" name="down">Dislike</a>

<div id="votebox">
<span id='close'><a href="#" class="close">X</a></span>
<div id="flash">Loading........</div>
<div id="content">
</div>
</div>


rating.php
<?php
include("db.php"); // подключаем настройки к БД
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$name=mysql_escape_String($_POST['name']);
// Vote update  
mysql_query("update messages set $name=$name+1 where id='$id'");
// Getting latest vote results
$result=mysql_query("select up,down from messages where id='$id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
$down_value=$row['down'];
$total=$up_value+$down_value; // Total votes 
$up_per=($up_value*100)/$total; // Up percentage 
$down_per=($down_value*100)/$total; // Down percentage
//HTML output
echo '<b>Ratings for this blog</b> ( '.$total.' total)
Like :'.$up_value.'
<div id="greebar" style="width:'.$up_per.'%"></div>
Dislike:'.$down_value.'
<div id="redbar" style="width:'.$down_per.'%"></div>';
}
?>

Украшаем css style
#votebox
{
border:solid 1px #dedede; padding:3px;
display:none;
padding:15px;
width:700px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#greebar
{
float:left;
background-color:#aada37;
border:solid 1px #698a14;
width:0px;
height:12px;
}
#redbar
{
float:left;
background-color:#cf362f;
border:solid 1px #881811;
width:0px;
height:12px;
}
#close
{
float:right; font-weight:bold; 
padding:3px 5px 3px 5px; 
border:solid 1px #333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

Добавлено: 20 Мая 2018 18:10:30 Добавил: Андрей Ковальчук

Простой калькулятор на php

Сегодня будем писать простой калькулятор на php. Он будет выполнять всего 4 действия (деление,умножение,сложение,вычитание) и состоять из 3 файлов. Скажу вам честно не самое лучшее решения как сделать калькулятор, но для новичков этого хватит. Наш калькулятор будет выглядеть вот таким образом:
Простой калькулятор на php

И так приступим.
Создадим файл calcform.php
В нем будет находится форма с функциями калькулятора.

<?
echo "<table border=0>";
echo "<tr><td>";


?>  <html>
<head>
<title>Капитал инвест. ++Калькулятор++</title>
<style>
.s1 {font-size: 24; color: FFCC33}
.s2 {color: FFCC33; text-align: center}
.s3 {font-size: 16; color: FFCC33; text-align: center}
</style>
</head>
  <body bgcolor=darkgreen>
  <h2 class=s2>Калькулятор.</h2>
  <form enctype='multipart/form-data' method="post" action="calc.php">
    <p class=s1>Введите первое число: <input type="text" name="name"></p>
    <br>
    <fieldset>
<legend class=s1>Выбор действия.</legend>
<table border=0 width=100%>
<tr>

<td class=s3>умножить:
<input name="znak" type="radio" value="um" checked>
</td>


<td class=s3>разделить:
<input name="znak" type="radio" value="del">
</td>
</tr>
<tr>
<td class=s3>сложить:
<input name="znak" type="radio" value="sl">
</td>
<td class=s3>отнять:
<input name="znak" type="radio" value="min">
</td>
</tr>
</table>
</fieldset>
<br><br>
<p class=s1>Введите второе число: <input type="text" name="email"><br></p>

<div align=center><input type="submit" value="расчитать"  bgcolor=FFCC33></div>
</form>
  </body>
  </html>     <?php
echo "</td></tr></table>";
?>

Создаем calc.php
Это обработчик данных веденых в форме.
<head>
<title>&#736;&#2674;&#6880;&#39842;&#27826;. ++&#736;&#53098;&#966642;&#64555;+ - &#1125;&#36139;&#206898;.</title>
<style>
.s1 {font-size: 24; color: FFCC33}
.s2 {color: FFCC33; text-align: center}
</style>
</head>
<?php
$x = $_POST ['name'];
$y = $_POST ['email'];
$znak = $_POST ['znak'];
if ($x == '' || $y =='')
{
        ?><h1 align=center class=s1>&#251;</h3>
         <body bgcolor=darkgreen><form metod = post action = calcform.php>
        <input type = submit value = "">
        </form></body><?php
        exit;
}
if ($znak == '')
{
        echo '<h3 align=center style = color: red>error</h3>';
        exit;
}
if (!eregi ('[0-9]', $x) || eregi ('[a-zA-Z]', $x))
{
        ?>   <body bgcolor=darkgreen><form metod = post action = calcform.php>
        <input type = submit value = "go">
        </form></body><?php
        exit;
}
if (!eregi ('[0-9]', $y) || eregi ('[a-zA-Z]', $y))
{
        ?>
        <body bgcolor=darkgreen><form metod = post action = calcform.php>
        <input type = submit value = "go">
        </form></body><?php
                exit;
}
if ($znak == 'um')
{
        $rez = $x * $y;
        $viv = "*";
}
elseif ($znak == 'del')
{
        $rez = $x / $y;
         $viv = "/";
}
elseif ($znak == 'sl')
{
        $rez = $x + $y;
        $viv = "+";
}
elseif ($znak == 'min')
{
        $rez = $x - $y;
        $viv = "-";
}
?>

<body bgcolor=darkgreen>
<h2 class=s2> Ressult:</h2>
<p class=s1>
<?php
echo $x."$viv".$y."=".$rez;
?>
</p>
<form metod = post action = calcform.php>
<input type = submit value = "go">
</form>
</body>

Готова =)

Добавлено: 20 Мая 2018 07:19:06 Добавил: Андрей Ковальчук

Подгрузка сообщений как на твиттер

Твиттер и Фейсбук используют хороший метод для загрузки более старых сообщений, вы нажимаете на кнопку "ещё". И вы получите список еще 10 сообщений.
Подгрузка сообщений как на твиттер

Создаем базу
Для создания базы данных выполните следующий sql запрос через phpmyadmin

CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);

javascript код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}

return false;
});
});
</script>

loadmore.php
<div id='container'>
<ol class="timeline" id="updates">

<?php
include('config.php');
$sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>

//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>

</div>

ajax_more.php
limit 9 - отвечает за то что будет выводиться по 9 сообщений.
<?php
include("config.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
while($row=mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>

//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>

Украсим css стилем
*{ margin:0px; padding:0px }
ol.timeline
{ 
list-style:none
}
ol.timeline li
{ 
position:relative;
border-bottom:1px #dedede dashed; 
padding:8px; 
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }

Добавлено: 20 Мая 2018 07:15:26 Добавил: Андрей Ковальчук

Система голосования на jQuery, Ajax и PHP

В этом уроке мы будет создавать систему голосования на jQuery, Ajax и PHP.
Система голосования на jQuery, Ajax и PHP

1. Создаем базу
Выполняем sql запрос в phpmyadmin.
Таблица хранения сообщений

CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT,
up INT,
down INT);

Таблица харнения ip
CREATE TABLE Voting_IP(
ip_id INT PRIMARY KEY AUTO_INCREMENT,
mes_id_fk INT,
ip_add VARCHAR(40),
FOREIGN KEY(mes_id_fk)
REFERENCES messages(mes_id));

2. Создаем Voting.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".vote").click(function() 
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id;
var parent = $(this);

if (name=='up')
{
$(this).fadeIn(200).html('<img src="dot.gif" />');
$.ajax({
type: "POST",
url: "up_vote.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
} 
});
}
else
{
$(this).fadeIn(200).html('<img src="dot.gif" />');
$.ajax({
type: "POST",
url: "down_vote.php",
data: dataString,
cache: false,

success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
<script

//HTML Code

<?php
include('config.php');
$sql=mysql_query("SELECT * FROM messages LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg=$row['msg'];
$mes_id=$row['mes_id'];
$up=$row['up'];
$down=$row['down'];
?>
<div class="main"> 
<div class="box1">
<div class='up'>
<a href="" class="vote" id="<?php echo $mes_id; ?>" name="up">
<?php echo $up; ?></a></div>

<div class='down'>
<a href="" class="vote" id="<?php echo $mes_id; ?>;" name="down">
<?php echo $down; ?></a></div>
</div>

<div class='box2' ><?php echo $msg; ?></div>
</div>

<?php } ?>

3. Создаем up_vote.php
<?php
include background-color:#009900; 
$ip=$_SERVER['REMOTE_ADDR']; 

if($_POST['id'])
{
$id=$_POST['id'];
$id = mysql_escape_String($id);
//Verify IP address in Voting_IP table
$ip_sql=mysql_query("select ip_add from Voting_IP where mes_id_fk='$id' and ip_add='$ip'");
$count=mysql_num_rows($ip_sql);

if($count==0)
{
// Update Vote.
$sql = "update Messages set up=up+1 where mes_id='$id'";
mysql_query( $sql);
// Insert IP address and Message Id in Voting_IP table.
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query( $sql_in);
echo "<script>alert('Thanks for the vote');</script>";
}
else
{
echo "<script>alert('You have already voted');</script>";
}

$result=mysql_query("select up from Messages where mes_id='$id'");
$row=mysql_fetch_array($result);
$up_value=$row['up'];
echo $up_value;

}
?>

4. Создаем down_vote.PHP
Точно такойже код как и в файле up_vote.php просто замените слово вверх на вниз.

CSS код:
#main
{
height:80px; 
border:1px dashed #29ABE2;
margin-bottom:7px;
width:500px;
}
.box1
{
float:left; 
height:80px; 
width:50px;
}
.box2
{
float:left; 
width:440px;
text-align:left;
margin-left:10px;
height:60px;
margin-top:10px;
font-weight:bold;
font-size:18px;
}
.up
{
height:40px; 
font-size:24px; 
text-align:center;
background-color:#009900; 
margin-bottom:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.down
{
height:40px; 
font-size:24px; 
text-align:center; 
background-color:#cc0000;
margin-top:2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

Готова.

Добавлено: 20 Мая 2018 07:13:13 Добавил: Андрей Ковальчук

Резиновая разметка с помощью jQuery

В сегоднящнем уроке мы создадим разметку сайта с возможностью изменения ширины блоков.

Предоставление возможности пользователю самостоятельно менять ширину сайта очень хорошая идея. Для выполнения этой задачи нам понадобится jQuery и CSS.

Для начала мы создаем три блока с помощью HTML:

<div class="wrapper">
<div class="leftcolm"> text content.... </div>
<div class="rightcolm"> text content.... </div>
<div class="midcont"> text content.... </div>
</div>

Далее с помощью стилей превратим эти блоки в 3 колонки:
body { margin:0px; padding:0px; }
.wrapper { width:980px; margin:0 auto; }
.leftcolm { float:left; width:200px; background-color:#99FF99; padding:10px; }
.rightcolm { float:right; width:200px; background-color:#99FF99; padding:10px; }
.midcont { padding:10px; margin-left:230px; margin-right:230px; background-color:#CCCCCC; }

Наша структура из 3-х колонок готова. Теперь нам необходимо добавить кнопки управления шириной.

Ниже представлен HTML код для кнопок. Для этого будет использоваться неупорядоченный список с 3 элементами.
<div class="controls">
<ul>
<li><a href="#" class="switch_fluid">100%</a></li>
<li><a href="#" class="switch_980">980</a></li>
<li><a href="#" class="switch_780">780</a></li>
</ul>
</div>

Ниже представлены стили оформления для кнопок управления. Как Вы видите мы используем три иконки.
.controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline }
.controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; margin-left:10px; }
.controls li a.switch_780 { background-image:url(images/icon_780.jpg); }
.controls li a.switch_980 { background-image:url(images/icon_980.jpg); }
.controls li a.switch_fluid { background-image:url(images/icon_fluid.jpg); }
.controls li a.select{border:solid 1px #cc0000; width:14px; height:14px;}

JavaScript

Теперь нам необходимо создать JavaScript. Подключаем фреймворк jQuery и прописываем все необходимые функции.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.switch_780").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 780}, 'slow', function() {;
});
});
$("a.switch_980").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: 980}, 'slow', function() {;
});
});
$("a.switch_fluid").click(function () {
$("div.controls a").removeClass("select");
$(this).addClass("select");
$("div.wrapper").animate({width: '100%'}, 'slow', function() {;
});
});
});
</script>

Все готово! Пользуйтесь, уважаемые читатели!

Добавлено: 20 Мая 2018 06:56:23 Добавил: Андрей Ковальчук

Ограничитель количества символов в форме

Количество символов любого поля в форме может быть ограничено атрибутом "maxlength". Но он не работает для текстового поля. Что же делать в таком случае? Выход есть! И как всегда нам на помощь придет jQuery.

Демо версия находится тут. Файлы для скачивания здесь.

Достаточно поместить следующий код между тегами <head></head>:

<script language="javascript" src="Jquery.js"></script>
    <script language="javascript">
    function limitChars(textid, limit, infodiv)
    {
    var text = $('#'+textid).val(); 
    var textlength = text.length;
    if(textlength > limit)
    {
    $('#' + infodiv).html('Вам нельзя написать более чем '+limit+' символов!');
    $('#'+textid).val(text.substr(0,limit));
    return false;
    }
    else
    {
    $('#' + infodiv).html('У Вас осталось '+ (limit - textlength) +' символов.');
    return true;
    }
    }
  $(function(){
    $('#comment').keyup(function(){
    limitChars('comment', 20, 'charlimitinfo');
    })
    });
  </script>

В начале кода мы подключаем фреймворк (помним про путь). А далее идет функция, которая и делает всю работу. Количество символов задается в команде "limitChars". В нашем примере это 20 символов. Вы можете поменять на любое значение. Кроме этого, в этой команде мы также прописываем ID нашего текстового поля, чтобы скрипт знал, что обрабатывать. В примере это "comment".

Теперь при оформлении текстового поля мы просто вставляем id="comment" в тег textarea:
<form name="test">
    <h2>Ограничитель количества символов в форме</h2>
<div style="padding:10px">
   <label>Напишите комментарий:</label><br />
    <textarea name="comment" id="comment" rows="6" cols="50"></textarea><br />
    <span id="charlimitinfo">У Вас осталось 50 символов.</span> 
    </div>

Также необходимо обратить внимание на текст под текстовым полем (который отображает количество оставшихся символов). Его неоходимо заключить в теги <span></span> и присвоить id="charlimitinfo". Такие простые действия сделают его динамическим и при вводе символов число будет автоматически уменьшаться.

На сегодня все! Комментарии приветствуются :).

Добавлено: 20 Мая 2018 06:55:15 Добавил: Андрей Ковальчук