JavaScript (Статей: 15)

-3

Недавно задался вопросом с выводом диалога с затухающим и не активным фоном, вышло в две функции. В 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...

Автор: orel (04.06.2013 / 22:32)
Просмотры: 2033
Комментарии (0) »

Ресайз TEXTAREA при введении символов

Уже давно понравилась идея на сайте вконтакте.ру, когда вводишь определенное колличество переносов строки, то поле ввода становиться более широкое.

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

В общем решил это дело решить на 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"...

Автор: Nu3oN (25.06.2011 / 00:22)
Просмотры: 1731
Комментарии (7) »

Стартовая страница для Internet Explorer

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

Для нашей задачи воспользуемся 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>

Просто и быстро осталось только проверить...
Примечание: этот скрипт будет работать только в Internet Explorer 5.x и 6.x.
Очевидно, что для других браузеров целесообразно не отображать ссылку.

<SCRIPT language=JavaScript> 
<!--
function...

Автор: ZipeR (08.06.2011 / 16:19)
Просмотры: 1703
Комментарии (3) »

Фреймы – хорошо или плохо?

Фреймы давно являются предметом спора. У них есть сторонники и противники(последних больше). Сначала рассмотрим положительные моменты. Используя фреймы легко создавать навигационные меню, структурировать отображаемую информацию, сократить время загрузки страницы, т.к. общие элементы загружаются только один раз. Теперь посмотрим на недостатки. Такая конструкция сайта не позволяет полноценно использовать META-данные, а также, что не менее важно, возникает проблема адресной строки.
Проблема адресной строки
Рассмотрим проблему адресной строки. Её суть в следующем. При использовании фреймов на сайте используется одна страниц, которая указывает местоположение фреймов.
Приведём пример такой страницы:

<HTML>
 <HEAD> 
   <TITLE> 
   </TITLE> 
  </HEAD> 
 <FRAMESET ROWS="60px,*”>
  <FRAME name=”menu”  SRC="Навигационное меню.html">
  <FRAME name=”main” SRC="Информационная часть.html">
 </FRAMESET>...

Автор: ZipeR (08.06.2011 / 16:17)
Просмотры: 1766
Комментарии (0) »

очистка формы способом JS

Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset

document.forms["имя формы"].reset() или
document.forms.имя формы.reset(

Рассмотрим следующую задачу, где очистка формы может весьма...

Автор: ZipeR (08.06.2011 / 16:13)
Просмотры: 2277
Комментарии (0) »

Протокол Интерфейс-Сервер

Здравствуйте.
Как и моя прошлая статья, эта ориентированна на опытных пользователей и потому содержит только теоретические сведения, реализацию идеи могу предоставить совершенно бесплатно администратору данного сайта и знакомым мне пользователям.
Появление не так давно метода асинхронной передачи данных и запросов небольших порций данных побудило меня к разделению серверной и клиентской части программы дабы запретить перезагрузку статических частей страницы. Для этого я разделил веб-программирование на следующие уровни: разметка, дизайн, клиентское исполнение, протокол "интерфейс-сервер", серверное исполнение, база данных. Все кроме протокола уже давно существует в веб-программировании, потому я поставил задачу написать способ передачи и принятия любых объектов между клиентом и сервером, при...

Автор: Артур (24.04.2011 / 03:09)
Просмотры: 1243
Комментарии (1) »

AJAX. Отправка данных методом POST.

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)
Просмотры: 3810
Комментарии (8) »

AJAX. Используем GET запросы.

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)
Просмотры: 2079
Комментарии (1) »

Как заставить AJAX читать между строк

Как заставить AJAX читать между строк

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

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

Автор: Станислав (19.08.2010 / 17:56)
Просмотры: 1468
Комментарии (0) »

AJAX: С чего начать

В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.

Содержание

1 Что такое AJAX?
2 Шаг 1 — Как послать HTTP запрос
3 Шаг 2 — Обрабатываем HTTP ответ
4 Шаг 3 — Простой пример
5 Шаг 4 — Работа с XML ответом

Что такое AJAX?

Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax — это его...

Автор: Станислав (18.08.2010 / 15:49)
Просмотры: 1855
Комментарии (1) »

Топ статей / Облако тегов / Поиск / Авторы