JavaScript (Articles: 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>...
Author: (17.08.2024 / 05:28)
Views: 205
Comments (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...
Author: (04.06.2013 / 22:32)
Views: 2359
Comments (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"...
Author: (25.06.2011 / 00:22)
Views: 2057
Comments (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...
Author: (08.06.2011 / 16:19)
Views: 1967
Comments (3) »
Фреймы давно являются предметом спора. У них есть сторонники и противники(последних больше). Сначала рассмотрим положительные моменты. Используя фреймы легко создавать навигационные меню, структурировать отображаемую информацию, сократить время загрузки страницы, т.к. общие элементы загружаются только один раз. Теперь посмотрим на недостатки. Такая конструкция сайта не позволяет полноценно использовать META-данные, а также, что не менее важно, возникает проблема адресной строки.
Проблема адресной строки
Рассмотрим проблему адресной строки. Её суть в следующем. При использовании фреймов на сайте используется одна страниц, которая указывает местоположение фреймов.
Приведём пример такой страницы:
<HTML>
 <HEAD> 
   <TITLE> 
   </TITLE> 
  </HEAD> 
 <FRAMESET ROWS="60px,*”>
  <FRAME name=”menu”  SRC="Навигационное меню.html">
  <FRAME name=”main” SRC="Информационная часть.html">
 </FRAMESET>...
Author: (08.06.2011 / 16:17)
Views: 2055
Comments (0) »
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset
document.forms["имя формы"].reset() или
document.forms.имя формы.reset(
Рассмотрим следующую задачу, где очистка формы может весьма... Author: (08.06.2011 / 16:13)
Views: 2954
Comments (0) »
Здравствуйте.
Как и моя прошлая статья, эта ориентированна на опытных пользователей и потому содержит только теоретические сведения, реализацию идеи могу предоставить совершенно бесплатно администратору данного сайта и знакомым мне пользователям.
Появление не так давно метода асинхронной передачи данных и запросов небольших порций данных побудило меня к разделению серверной и клиентской части программы дабы запретить перезагрузку статических частей страницы. Для этого я разделил веб-программирование на следующие уровни: разметка, дизайн, клиентское исполнение, протокол "интерфейс-сервер", серверное исполнение, база данных. Все кроме протокола уже давно существует в веб-программировании, потому я поставил задачу написать способ передачи и принятия любых объектов между клиентом и сервером, при... Author: (24.04.2011 / 03:09)
Views: 1516
Comments (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...
Author: (20.08.2010 / 18:41)
Views: 4072
Comments (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...
Author: (20.08.2010 / 18:32)
Views: 2402
Comments (1) »
Как заставить AJAX читать между строк

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


На страницах вашего сайта содержится множество специализированных терминов. Когда пользователь просматривает сайт, у него могут возникать вопросы касательно этих терминов. Как сделать так, чтобы посетитель сайта по мере возникновения вопросов мог незамедлительно получать на них ответы? Раньше термины на страницах сайта оформлялись как ссылки и пользователь при желании мог кликать по ним и получать окно с контекстной подсказкой. Это подход достаточно неуклюжий, он отнимает у пользователя слишком много времени - на то, чтобы кликнуть по ссылке, дождаться загрузки окна и затем закрыть окно. В эпоху AJAX мы... Author: (19.08.2010 / 17:56)
Views: 1784
Comments (0) »
Top Articles / Tag Cloud / Search / Authors