JavaScript (Статей: 16)

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

Решил сделать максимально просто:
1. Проверка наличия куки: Функция 'checkCookieConsent()' проверяет, установлен ли уже куки с согласием пользователя.
2. Установка куки: Функция 'setCookie()' создает куки с названием 'cookieConsent', значением 'accepted' и сроком действия 365 дней.
3. Отображение уведомления: Если куки с согласием пользователя не найдено, отображается уведомление с кнопкой "Понял!".
4. Скрытие уведомления: После нажатия на кнопку "Понял!" куки устанавливается, и уведомление скрывается.

Т.к. я пользуюсь всего одной темой в файл public/themes/default/views/theme.blade.php в body прописать кусок кода:
<div id="cookie-notice">
{{ __('main.cookie_alert_text') }}<button id="accept-cookies">{{ __('main.cookie_alert_button') }}</button>...
Автор: (17.08.2024 / 05:28)
Просмотры: 205
Комментарии (0) »
Недавно задался вопросом с выводом диалога с затухающим и не активным фоном, вышло в две функции. В body создается div #op c длинной и шириной равной текущему документу, с черным фоном и прозрачностью 0.7, поверх него накладывается наш див с диалогом. При клике вне диалога, срабатывает обратный эффект исчезновение диалога и возврат нормального фона.
Пример
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 
    <head> 
        <script type="text/javascript" src="/public/js/jquery.min.js"></script> 
        <script type="text/javascript"> 
            function mydialog(id) 
            { 
                $(id).show('slow'); 
                $('<div id="op" style="position: absolute;z-index:100;" onclick="op_close()"></div>').insertBefore('body'); 
                $('#op').css({ 
                    height: $(document).height(), 
                    width:  $(document).width(), 
                    background: 'black' 
                }).fadeTo('slow', '0.7'); 
           } 

           function op_close() 
           { 
               $('#op').fadeOut('slow'); 
               $('#dialog').fadeOut('slow'); 
           } 
        </script> 
    </head> 
        <body> 
           <div id="dialog" style="width: 700px;left: 30%;position: absolute;z-index: 101;display:no...
Автор: (04.06.2013 / 22:32)
Просмотры: 2359
Комментарии (0) »
Уже давно понравилась идея на сайте вконтакте.ру, когда вводишь определенное колличество переносов строки, то поле ввода становиться более широкое.

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

В общем решил это дело решить на js

<script type="text/javascript">
  function resizeTextarea(event, key)
  {
      if (event.keyCode == 13) {
          if (typeof self.totalEnter != 'number') {
              totalEnter = 1;
          }

          totalEnter++;   
                
          if (totalEnter > 3) {
              key.rows = key.rows + 1;
          }                           
      }
  } 
</script>

Использовать так:
<textarea cols="55" rows="3"...
Автор: (25.06.2011 / 00:22)
Просмотры: 2057
Комментарии (7) »
Замечательно, когда у посетителя есть возможность заходить на Ваш сайт автоматически при запуске браузера. Необходимо предоставить ему эту возможность... Один клик по ссылке и дело сделано.

Для нашей задачи воспользуемся JavaScript-ом и гипертекстовой ссылкой. <A onclick="strt(this); return false;" href="Ваш URL"> Сделать стартовой </A>

< SCRIPT language=JavaScript>
< !--
function strt(f) 
{
   	 if ( (navigator.appVersion.indexOf('MSIE 5.') !=-1) || 
   (navigator.appVersion.indexOf('MSIE 6.')!=-1)) 
   { 
      f.style.behavior='url(#default#homepage)'; 
      f.setHomePage('Ваш URL'); 
} }
// -->
</SCRIPT>
Просто и быстро осталось только проверить... smile
Примечание: этот скрипт будет работать только в Internet Explorer 5.x и 6.x.
Очевидно, что для других браузеров целесообразно не отображать ссылку.
<SCRIPT language=JavaScript> 
<!--
function...
Автор: (08.06.2011 / 16:19)
Просмотры: 1967
Комментарии (3) »
Фреймы давно являются предметом спора. У них есть сторонники и противники(последних больше). Сначала рассмотрим положительные моменты. Используя фреймы легко создавать навигационные меню, структурировать отображаемую информацию, сократить время загрузки страницы, т.к. общие элементы загружаются только один раз. Теперь посмотрим на недостатки. Такая конструкция сайта не позволяет полноценно использовать META-данные, а также, что не менее важно, возникает проблема адресной строки.
Проблема адресной строки
Рассмотрим проблему адресной строки. Её суть в следующем. При использовании фреймов на сайте используется одна страниц, которая указывает местоположение фреймов.
Приведём пример такой страницы:
<HTML>
 <HEAD> 
   <TITLE> 
   </TITLE> 
  </HEAD> 
 <FRAMESET ROWS="60px,*”>
  <FRAME name=”menu”  SRC="Навигационное меню.html">
  <FRAME name=”main” SRC="Информационная часть.html">
 </FRAMESET>...
Автор: (08.06.2011 / 16:17)
Просмотры: 2055
Комментарии (0) »
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset
document.forms["имя формы"].reset() или
document.forms.имя формы.reset(
Рассмотрим следующую задачу, где очистка формы может весьма... Автор: (08.06.2011 / 16:13)
Просмотры: 2953
Комментарии (0) »
Здравствуйте.
Как и моя прошлая статья, эта ориентированна на опытных пользователей и потому содержит только теоретические сведения, реализацию идеи могу предоставить совершенно бесплатно администратору данного сайта и знакомым мне пользователям.
Появление не так давно метода асинхронной передачи данных и запросов небольших порций данных побудило меня к разделению серверной и клиентской части программы дабы запретить перезагрузку статических частей страницы. Для этого я разделил веб-программирование на следующие уровни: разметка, дизайн, клиентское исполнение, протокол "интерфейс-сервер", серверное исполнение, база данных. Все кроме протокола уже давно существует в веб-программировании, потому я поставил задачу написать способ передачи и принятия любых объектов между клиентом и сервером, при... Автор: (24.04.2011 / 03:09)
Просмотры: 1516
Комментарии (1) »
AJAX. Отправка данных методом POST.

Основное преимущество POST запросов – это их большая безопасность и функциональность по сравнению с GET-запросами. Поэтому метод POST чаще используют для передачи важной информации, а также информации большого объема. В данном уроке мы напишем AJAX приложение для добавления новой информации о клиентах, отправка запроса и получение ответа будет производиться именно методом POST.

Прежде всего советую изучить предыдущий урок, в нём мы рассамтривали GET запросы и написали web-приложение для просмотра информации о клиентах из БД. Структура таблицы осталась прежней:

CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Name` varchar(255) NOT NULL default...
Автор: (20.08.2010 / 18:41)
Просмотры: 4072
Комментарии (8) »
AJAX. Используем GET запросы.

Пришло время создать реальное и полезное web-приложение. В данном уроке будет рассмотрено взаимодействие с сервером через GET запросы, для этого мы напишем небольшой php-скрипт извлекающий информацию о сотрудниках из базы данных c использование AJAX технологии. В качестве СУБД будем использовать MySQL.

Итак, приступим. Для начала давайте создадим таблицу в которой будет содержаться информация о наших клиентах. Делается это следующим SQL запросом:

CREATE TABLE `Customers` (
`CustomerId` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`Name` varchar(255) NOT NULL default '',
`Adress` varchar(255) NOT NULL default '',
`Phone` varchar(255) NOT NULL default '',
`E-mail` varchar(255) NOT NULL default...
Автор: (20.08.2010 / 18:32)
Просмотры: 2402
Комментарии (1) »
Как заставить AJAX читать между строк

Дмитрий Шейко
ведущий программист Red Graphic Systems


На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху AJAX мы... Автор: (19.08.2010 / 17:56)
Просмотры: 1783
Комментарии (0) »
Топ статей / Облако тегов / Поиск / Авторы