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

Количество символов любого поля в форме может быть ограничено атрибутом "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 Добавил: Андрей Ковальчук

Оригинальная проверка заполнения формы

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

Нам необходимо создать файлы: index.html, init.js и default.css. Следующим шагом является загрузка JQuery плагина проверки от http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Включить все файлы в головной части в index.html:

<link href="css/default.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/validate.min.js" type="text/javascript"></script> 
<script src="js/init.js" type="text/javascript"></script>

Далее html разметка:

index.html
<form id="form" class="blocks" action="#" method="post"> 
    <p> 
        <label>Name:</label> 
        <input type="text" class="text" name="name" /> 
    </p> 
    <p> 
        <label>Company:</label> 
        <input type="text" class="text" name="company" /> 
    </p> 
    <p> 
        <label>Your e-mail:</label> 
        <input type="text" class="text" name="email" /> 
    </p> 
    <p> 
        <label>Contact number:</label> 
        <input type="text" class="text" name="phone" /> 
    </p> 
    <p class="area"> 
        <label>Message:</label> 
        <textarea class="textarea" name="message"></textarea> 
    </p> 
    <p> 
        <label> </label> 
        <input type="submit" class="btn" value="Submit" /> 
    </p> 
</form>

Легко? Обратите внимание, что я передал ID в форму. Это действительно важно, поскольку мы собираемся использовать его позже. Идем к следующему шагу.

default.css
Делаем нашу форму красивой с помощью стилей.
.blocks p { 
    margin-bottom:15px; 
    position:relative; 
} 
  
.btn { 
    display:block; 
    float:left; 
    height:31px; 
    line-height:31px; 
    padding:0 10px; 
    background:url(../gfx/bgbtn.jpg) repeat-x; 
    color:#565e62; 
    font-weight:bold; 
    font-size:11px; 
    border:1px solid #e1e0df; 
    outline:none; 
} 
  
.text, 
.textarea { 
    padding:5px 10px; 
    height:27px; 
    border:1px solid #ddd; 
    color:#333; 
    background:url(../gfx/bginput.jpg) repeat-x bottom #fff; 
    position:relative; 
    z-index:2; 
} 
  
.text { 
    width:220px; 
} 
  
.textarea { 
    height:150px; 
    width:350px; 
} 
  
.blocks label { 
    float:left; 
    width:100px; 
    line-height:37px; 
    text-align:right; 
    margin-right:15px; 
    font-weight:bold; 
    color:#666; 
} 
  
.blocks label.error, 
.blocks label.ok { 
    position:absolute; 
    z-index:1; 
    top:-4px; 
    left:110px; 
    padding:5px 15px 5px 280px; 
  
    /* Reseting previous label values */
    width:auto; 
    text-align:left; 
    margin:0; 
    background-repeat:no-repeat; 
    background-position:257px 16px; 
} 
  
.blocks label.ok { 
    background-image:url(../gfx/icook.gif); 
    background-color:#deefca; 
    color:#577530; 
} 
  
.blocks label.error { 
    background-image:url(../gfx/icofail.gif); 
    background-color:#f5d6d7; 
    color:#c81925; 
} 
  
.area label.ok, 
.area label.error { 
    height:163px; 
    padding-left:410px; 
    background-position:387px 16px; 
} 
  
/* CSS3 */
.btn, .text, .textarea, .blocks label.error, .blocks label.ok {  
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    border-radius:8px; 
}

init.js
$(function(){ 
    $("#form").validate({ // your form id (you can also use class name instead id) 
        rules: { 
            name: { 
                required: true, // makes the element always required 
                minlength: 3 // makes the element require a given minimum length 
            }, 
            company: { 
                required: true
            }, 
            phone: { 
                required: true, 
                number: true, // makes the element require a decimal number 
                minlength: 6 
            }, 
            email: { 
                required: true, 
                email: true // makes the element require a valid email 
            }, 
            message: { 
                required: true
            } 
        }, 
        messages: { // specify custom messages 
            name: { 
                required: 'This field is required', 
                minlength: 'Minimum length: 3'
            }, 
            company: { 
                required: 'This field is required', 
            }, 
            phone: { 
                required: 'This field is required', 
                number: 'Invalid phone number', 
                minlength: 'Minimum length: 6'
            }, 
            email: 'Invalid e-mail address', 
            message: { 
                required: 'This field is required'
            } 
        }, 
        success: function(label) { 
            // set 'ok' class to error-labels to indicate valid fields and call fadeOut() function after 2000ms 
            label.html('OK').removeClass('error').addClass('ok'); 
            setTimeout(function(){ 
                label.fadeOut(500); 
            }, 2000) 
        } 
    }); 
});

Наша форма и проверка заполнения полей готовы!

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

Красивые странички: решение с помощью jQuery

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

Шаг 1: XHTML

Первым шагом нашего урока является создание разметки XHTML. Кароч, для плагина всего-то что и нужну это - неупорядочненный список, Ul, с несколькими Li-шками внутри них. Ниже представлен код)

    <div id="main">
        <ul id="holder">
            <li>Lorem ipsum dolor sit amet...</li>
            <li>Lorem ipsum dolor sit amet...</li>
            <li>Lorem ipsum dolor sit amet...</li>
            <li>Lorem ipsum dolor sit amet...</li>
        </ul>
    </div>

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

Красивые странички: решение с помощью jQuery

Шаг 2: CSS

После создания XHTML разметки, мы можем приступать к созданию стилей. Чем сейчас и займемся.

Styles.css - часть 1
    #main{
        /* The main container div */
        position:relative;
        margin:50px auto;
        width:410px;
        background:url('img/main_bg.jpg') repeat-x #aeadad;
        border:1px solid #CCCCCC;
        padding:70px 25px 60px;
     
        /* CSS3 rounded cornenrs */
     
        -moz-border-radius:12px;
        -webkit-border-radius:12px;
        border-radius:12px;
    }
     
    #holder{
        /* The unordered list that is to be split into pages */
     
        width:400px;
        overflow:hidden;
        position:relative;
        background:url('img/dark_bg.jpg') repeat #4e5355;
        padding-bottom:10px;
     
        /*  CSS3 inner shadow (the webkit one is commeted, because Google Chrome
            does not like rounded corners combined with inset shadows): */
     
        -moz-box-shadow:0 0 10px #222 inset;
        /*-webkit-box-shadow:0 0 10px #222 inset;*/
        box-shadow:0 0 10px #222 inset;
    }
     
    .swControls{
        position:absolute;
        margin-top:10px;
    }

Обратите внимание на то, как мы используем "box shadow" в CSS3, что-бы имитировать внутреннюю тень. Также в соответствии со всеми правилами CSS3 мы должны "позаботиться" о конкретных браузерах, таких как Mozila, Safari и Chrome.

Styles.css - часть 2
    a.swShowPage{
     
        /* The links that initiate the page slide */
     
        background-color:#444444;
        float:left;
        height:15px;
        margin:4px 3px;
        text-indent:-9999px;
        width:15px;
        /*border:1px solid #ccc;*/
     
        /* CSS3 rounded corners */
     
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
    }
     
    a.swShowPage:hover,
    a.swShowPage.active{
        background-color:#2993dd;
     
        /*  CSS3 inner shadow */
     
        -moz-box-shadow:0 0 7px #1e435d inset;
        /*-webkit-box-shadow:0 0 7px #1e435d inset;*/
        box-shadow:0 0 7px #1e435d inset;
    }
     
    #holder li{
        background-color:#F4F4F4;
        list-style:none outside none;
        margin:10px 10px 0;
        padding:20px;
        float:left;
     
        /* Regular CSS3 box shadows (not inset): */
     
        -moz-box-shadow:0 0 6px #111111;
        -webkit-box-shadow:0 0 6px #111111;
        box-shadow:0 0 6px #111111;
    }
     
    #holder,
    #holder li{
        /* Applying rouded corners to both the holder and the holder lis */
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        border-radius:8px;
    }
     
    .clear{
        /* This class clears the floated elements */
        clear:both;
    }

Во второй части кода мы с вами написали стили для преключения страниц и Li-шек. Как вы могли заметить, в 46-й строке мы закругляем углы маркированного списка и li элементов, что спасает нас от дублирования кода.

Шаг 3: jQuery

Переходя к последней части урока, мы должны добавить на страницу самую последнюю версию библиотеки jQuery. Лучше всего инклудить внешние файлы javascript перед зкрытием тега "body".

script.js - часть 1
    (function($){
     
    // Creating the sweetPages jQuery plugin:
    $.fn.sweetPages = function(opts){
     
        // If no options were passed, create an empty opts object
        if(!opts) opts = {};
     
        var resultsPerPage = opts.perPage || 3;
     
        // The plugin works best for unordered lists,
        // although OLs would do just as well:
        var ul = this;
        var li = ul.find('li');
     
        li.each(function(){
            // Calculating the height of each li element,
            // and storing it with the data method:
     
            var el = $(this);
            el.data('height',el.outerHeight(true));
       });
     
        // Calculating the total number of pages:
        var pagesNumber = Math.ceil(li.length/resultsPerPage);
     
        // If the pages are less than two, do nothing:
        if(pagesNumber<2) return this;
     
        // Creating the controls div:
        var swControls = $('<div class="swControls">');
     
        for(var i=0;i<pagesNumber;i++)
        {
            // Slice a portion of the li elements, and wrap it in a swPage div:
            li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
     
            // Adding a link to the swControls div:
            swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
        }
     
        ul.append(swControls);

script.js - часть 2
        var maxHeight = 0;
        var totalWidth = 0;
     
        var swPage = ul.find('.swPage');
        swPage.each(function(){
     
            // Looping through all the newly created pages:
     
            var elem = $(this);
     
            var tmpHeight = 0;
            elem.find('li').each(function(){tmpHeight+=$(this).data('height');});
     
            if(tmpHeight>maxHeight)
                maxHeight = tmpHeight;
     
            totalWidth+=elem.outerWidth();
     
            elem.css('float','left').width(ul.width());
        });
     
        swPage.wrapAll('<div class="swSlider" />');
     
        // Setting the height of the ul to the height of the tallest page:
        ul.height(maxHeight);
     
        var swSlider = ul.find('.swSlider');
        swSlider.append('<div class="clear" />').width(totalWidth);
     
        var hyperLinks = ul.find('a.swShowPage');
     
        hyperLinks.click(function(e){
     
            // If one of the control links is clicked, slide the swSlider div
            // (which contains all the pages) and mark it as active:
     
            $(this).addClass('active').siblings().removeClass('active');
     
            swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');
            e.preventDefault();
        });
     
        // Mark the first link as active the first time the code runs:
        hyperLinks.eq(0).addClass('active');
     
        // Center the control div:
        swControls.css({
            'left':'50%',
            'margin-left':-swControls.width()/2
        });
     
        return this;
     
    }})(jQuery);

script.js – часть 3
    $(document).ready(function(){
        /* The following code is executed once the DOM is loaded */
     
        // Calling the jQuery plugin and splitting the
        // #holder UL into pages of 3 LIs each:
     
        $('#holder').sweetPages({perPage:3});
     
        // The default behaviour of the plugin is to insert the
        // page links in the ul, but we need them in the main container:
     
        var controls = $('.swControls').detach();
        controls.appendTo('#main');
     
    });

Заключение

С помощью этого плагина вы сможете организовать любые виды комментариев, слайд-шоу, страницы с описанием товара или другие виды данных. Преимущество заключается в том, что даже при "отключенном" javascript'е в итоге получается семантический, SEO дружественных код. Удачи)

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

Popup с затухающим фоном с помощью jQuery

Popup с затухающим фоном с помощью jQueryМногие из нас сталкивались с всплывающими окнами, когда при этом постепенно потухает фон. Взгляд пользователя невольно фокусируется только на той части экрана, где что-то требуется от этого самого пользователя. Достаточно полезно, не правда ли?

Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

Описание

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

Реализация

Для начала нам понадобится последняя версия библиотеки jQuery.
Далее в начало нашей разметки мы помещаем два блока:
«opaco» — это будет темный слой, который спрячет лишнее вокруг окна;
«popup» — это будет блок, в который мы вставим необходимое содержимое.

<div id="opaco" class="hidden"></div>
<div id="popup" class="hidden"></div>

Далее нам необходимо добавить сами ссылки и формы, которые по умолчанию будут скрыты:

форма для ошибки:
<div class="user-actions">
  <p class="bug"><a href="#" onclick="showPopup('bug'); return false;">Сообщите об ошибке на сайте!</a></p>
</div>

<div id="popup_bug" class="hidden">
<div class="bug">
  <form action="#" class="bug">
   <h3>Зaвести ошибку</h3>
   <div class="form_error"></div>
   <p>Раздел, где обнаружена ошибка:</p>
   <input type="text" />
   <p>Описание ошибки:</p>
   <textarea rows="5" cols="30"></textarea>
   <input type="button" value="Отправить" onclick="closePopup(); return false;" />
   <input type="button" value="Отмена" onclick="closePopup(); return false;" />
  </form>
</div>
</div>

Для примера, на обе кнопки мы назначаем действие — закрыть форму (closePopup()).

форма для отзыва:
<div class="user-actions">
  <p class="reference"><a href="#" onclick="showPopup('reference'); return false;">Оставьте свой отзыв!</a></p>
</div>

<div id="popup_reference" class="hidden">
<div class="reference">
  <form action="#">
   <h3>Оставить отзыв</h3>
   <div class="form_error"></div>
   <p>Ваше мнение:</p>
   <textarea rows="5" cols="30"></textarea>
   <input type="button" value="Отправить" onclick="closePopup(); return false;" />
   <input type="button" value="Отмена" onclick="closePopup(); return false;" />
  </form>
</div>
</div>

Итак, теперь можно приступать и к самим функциям отображения и закрытия всплывающего окна. Логично начать с отображения:
function showPopup(popup_type)
{
  //when IE - fade immediately
  if($.browser.msie)
  {
   $('#opaco').height($(document).height()).toggleClass('hidden');
  }
  else
  {
   $('#opaco').height($(document).height()).toggleClass('hidden').fadeTo('slow', 0.7);
  }

  $('#popup')
   .html($('#popup_' + popup_type).html())
   .alignCenter()
   .toggleClass('hidden');

  return false;
}

Первая часть функции обрабывает блок с id=«opaco». Первым делом данному блоку присваивается высота равная всему документу, используя jquery метод height. Это нужно, чтобы затемнить даже ту часть страницы, которая под скроллом. Причем мы здесь используем сразу две разновидности метода — если не передавать аргумент, то мы просто получаем текущее значение height объекта (у нас в примере $(document).height()), а если передать аргумент — то мы присваиваем объекту, над которым производим действие, данную высоту (в нашем примере объект $('#opaco')).

Теперь мы уверены, что блок '#opaco' покрывает весь документ и отображаем его, убирая класс 'hidden' (toggleClass('hidden')).
В зависимости от браузера — мы делаем затемнение: если IE — то там плавного затухания сделать не получится (а мы даже и не пытаемся), а вот во всех остальных случаях, мы постепенно затемняем блок, используя метод fadeTo('slow', 0.7).

Вторая половина функции обрабатывает следующий блок — id=«popup».
первым делом мы наполняем этот блок нужным нам содержимым, в зависимости от того, какое значение передается в функцию.
Последним действием мы отображаем этот блок, опять же убирая класс 'hidden'.

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

alignCenter — это определенный нами метод, его нет в стандартном пакете jQuery. Определить свой метод очень просто:
//additional properties for jQuery object
$(document).ready(function(){
  //align element in the middle of the screen
  $.fn.alignCenter = function() {
   //get margin left
   var marginLeft = Math.max(40, parseInt($(window).width()/2 - $(this).width()/2)) + 'px';
   //get margin top
   var marginTop = Math.max(40, parseInt($(window).height()/2 - $(this).height()/2)) + 'px';
   //return updated element
   return $(this).css({'margin-left':marginLeft, 'margin-top':marginTop});
  };
});

Прежде всего, его определять необходимо после загрузки всего DOM документа браузером, для этого мы используем jQuery метод $(document).ready().

Внутри нашего метода мы находим вначале отступ сверху и отступ слева по простой формуле. Для этого нам понадобится размеры экрана у клиента и размеры нашего всплывающего окна. Полезным свойством jQuery здесь является возможность обращаться к объекту, к которому мы собираемся применять наш метод, через $(this). Таким образом, в зависимости от размера всплывающего блока, мы динамически посчитаем необходимые отступы. На всякий случай, если всплывающий блок будет сильно большим или размеры экрана сильно маленькие — мы задаем минимальные отступы в 40px, чтобы не уехать за левую границу экрана.

Ну и под конец нам нужно применить эти новые отступы, что мы делаем через метод css({'margin-left':marginLeft, 'margin-top':marginTop}).

C отображением мы закончили, осталось за малым — закрыть окошко, когда пользователь закончит с ним работать:
//close pop-up box
function closePopup()
{
  $('#opaco').toggleClass('hidden').removeAttr('style');
  $('#popup').toggleClass('hidden');
  return false;
}

Вначале мы добавляем класс 'hidden' на оба блока, скрывая их. Дополнительно мы еще должны убрать атрибут style у блока с id=«opaco», т.к. методы fadeTo и height, которые мы использовали ранее, реализованы через добавление именно этого атрибута элементу.

Про CSS — стоит отметить, что на блок '#opaco' мы навесили z-index: 10, чтобы он покрыл все остальные элементы. А поверх '#opaco' у нас останется popup-окно, которому мы присвоили z-index: 11.

Возможно, кому-то будет полезно.

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

Скролинг к указаному элементу

Вот как можно переместить скролл к указаному элементу:

$("#button").click(function() {
     $('html, body').animate({
         scrollTop: $("#elementtoScrollToID").offset().top
     }, 2000);
 });

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

Перезагрузка Select в Ajax запросе

Очень часто встречается задача, когда нужно заполнить drop-dawn-list новыми значениями получеными в ajax-запросе. Вот как я это делаю:

$.ajax({
	url: ajaxurl,
	data: {
		action:'get_data'
	}
}).done(function(response){
	headers = $.parseJSON(response);
	reloadSelect($('select'), headers);
});

function reloadSelect(select, data) {
	select.empty();
	for(var option in data) {

		option = $('<option>', {
			value: data[option].alias,
			text: data[option].title
		});			
		
		select.append(option);
	}
}

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

Как запретить пользователю сохранять картинки?

Политика браузеров такова, чтобы любому пользователю предоставить свободный доступ как исходнику html страницы так и к картинкам на страницы. Обычно всё это делается через контекстное меню. Значит надо искать способы, чтобы пользователи не могли вызывать это меню.

С выходом в свет появилась возможность управлять меню. Теперь в тэге <IMG> можно использовать событие oncontextmenu которое обрабатывается каждый раз, когда контекстное меню собирается появиться на страничке. Если перехватить это событие и возвращать false, то контекстное меню не будет появляться. Поэтому если использовать

<img src="images/picture.jpg" oncontextmenu="return false">

то пользователь никогда не увидит контекстного меню для данного элемента страницы.

Те, кто не использует Internet Explorer 5.0 могут проделать эту хитрость при помощи Cascading Style Sheets (CSS):
<img src="images/clear.gif" width=200 height=142
style="background:url(images/picture.jpg)">

Здесь использован тэг <IMG> для отображения прозрачной картинки GIF с теми же размерами чтои реальная картинка. А затем, при помощи стиля в качестве фона установлено нужное изображение. Данный приём работает в Internet Explorer 4.0.

Однако, это ухищрение не будет работать в Навигаторе, а нижеприведённое будет:
<div style="background:url(images/picture.jpg) no-repeat; width:200;
height:142">
<img src="images/clear.gif" width=200 height=142>
</div>

Этот код фактически проделывает тоже самое - поверх реальной картинки помещается прозрачное изображение, а сама картинка делается фоном тэга <DIV>.

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

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

Как поместить программу на языке JavaScript в документ HTML.

Программы на языке JavaScript встраиваются в страницу текста на языке HTML. Для этого имеется специальный тег <script>. Броузер распознает программу на языке JavaScript, помещенную между начальным и конечным тегами <script>, и приступает к ее выполнению. Тег <script> HTML является контейнером, и поэтому для того, чтобы указать конец тела сценария Java, всегда требуется </script>. Сам код сценария располагается соответственно, внутри контейнера.

Сценарии можно помещать в любом месте документа HTML, но важно помнить, что теги HTML и операторы JavaScript нельзя распологать вперемешку - иначе результат может оказаться некорректным. Броузер выполняет синтаксический анализ содержимого контейнера <script> построчно. Если на этом этапе обнаруживается ошибка, то на экран будет выведено сообщение и номер строки, содержащей ошибочный оператор.

Рекомендуется размещать программы на языке JavaScript в контейнере HTML между <head>...</head>, поскольку это один из первых тегов которые читает броузер. Теоритически сценарии можно расположить в любом месте документа HTML, однако основной сценарий рекомендуется разместить в контейнере заголовка документа HTML. Местоположение сценариев зависит от того, для чего они предназначаются. Если сценарии используются для динамического создания кода HTML и предназначенные для генерации программных или системных параметров контейнеры <script> разбросаны по всему тексту документа HTML, то такое их расположение вполне оправдано. Однако если требуется определить функции для решения различных задач, то самым лучшим местом для них будет отдельный контейнер <script>, расположенный в начале документа.

Синтаксис тега <script> следующий:

<script language="JavaScript">
операторы JavaScript ...
</script>

где атрибут language (язык) должен быть установлен равным "JavaScript" (с точным соблюдением регистра!) для всех сценариев на языке JavaScript. Атрибут language является необязательным, но на всякий случай его лучше указывать всегда. Весь текст за пределами контейнера <script>...</script> должен быть исключительно в формате HTML. В файл HTML можно поместить несколько программ на языке JavaScript; они выполняются в порядке их расположения в тексте (сверху вниз). Программы на языке JavaScript начинают анализироваться только после (а не до) загрузки страницы HTML, содержащей контейнер <script>...</script>. Функции загружаются в память и выполняются броузером, когда генирируется соответствующее событие или при явном вызове функции JavaScript (либо других функций, определенным пользователем, - под функцией здесь понимается группа операторов языка JavaScript).

Например:
<html>
<head>
<title>Заголовок документа</title>
<script language="JavaScript">
alert ("Добро пожаловать !");
</script>
</head>
<body>
Далее идет текст документа ...
</body>
</html>

Примечание: В языке JavaScript, как и в языке Java, символы набранные в верхнем и нижним регистрах различаются, поэтому при вводе текста необходимо учитывать регистр клавиатуры (так, "JavaScript" не то же самое, что "Javascript".). Использование маленькой буквы "я" внутри контейнера <script>...</script>, нежелательно, всвязи с тем, что броузеры типа Netscape Navigator будут воспринимать ее как ошибку программы.

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

Метатеги

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

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

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

Некоторые принципы, относящиеся к метатегам:

* Не включайте ключевые слова, которые не содержатся на ваших страницах;
* Не повторяйте ключевые слова;
* Используйте метатеги по их прямому назначению;
* Делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.

description
Большинство поисковых серверов отображают содержимое поля description при выводе результатов поиска.
Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример 1. Использование description

<head>
<meta name="description" content="Сайт об html и создании сайтов">
</head>

keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на странице. Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики просто пропускают этот параметр.
Пример 2. Использование keywords
<head>
<meta name="keywords" content="html, meta, метатег, тег, поисковая система">
</head>

Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.

Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).
Пример 3. Автозагрузка страницы
<head>
<meta http-equiv="refresh" content="5; url=http://www.htmlbook.ru">
</head>

Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре url.

Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если url не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в параметре content.

Кодировка
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv=content-type content="text/html; charset=имя кодировки">. Для операционной системы windows и кириллицы аргумент charset принимает значение windows-1251 (пример 4). Обратите внимание, что в кавычки берется только содержимое атрибута content.
Пример 4. Выбор текущей кодировки
<head>
<meta http-equiv=content-type content="text/html; charset=windows-1251">
</head>

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в koi-8, а браузер, встретив параметр charset=windows-1251, переводит текст в кодировку windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

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

Стена спонсоров с JQuery & CSS

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

Мы используем PHP, CSS и JQuery с JQuery Flip плагином , чтобы сделать именно это. Полученный код можно использовать для демонстрации ваших спонсоров, клиентов или портфелем проектов.

Шаг 1 - XHTML

Большинство разметки порождается с PHP для каждого из авторов после цикла основной спонсор массива. Ниже вы можете увидеть код, который будет создан и выводится для Google:

demo.php

<div title="Click to flip" class="sponsor">
    <div class="sponsorFlip">
        <img alt="More about google" src="img/sponsors/google.png">
    </div>

    <div class="sponsorData">
        <div class="sponsorDescription">
            The company that redefined web search.
        </div>
        <div class="sponsorURL">
            <a href="http://www.google.com/">http://www.google.com/ </a>
        </div>
    </div>
</div>

Шаг 2 - CSS
Мы можем начать оформление стены, поскольку без нее нет особого смысла на этой странице. Код состоит из двух частей. Некоторые классы опущены для ясности. Вы можете увидеть все стили, используемые в демо в styles.css в скачанном архиве.

styles.css - Часть 1
body{
    /* Setting default text color, background and a font stack */
    font-size:0.825em;
    color:#666;
    background-color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
    margin-bottom:30px;
}

.sponsor{
    width:180px;
    height:180px;
    float:left;
    margin:4px;

    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.sponsorFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;
    background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
    border:1px solid #999;

    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}


Теперь стили для скрытой информации:
.sponsorFlip img{
    /* Centering the logo image in the middle of the .sponsorFlip div */

    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -70px;
}

.sponsorData{
    /* Hiding the .sponsorData div */
    display:none;
}

.sponsorDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.sponsorURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

Шаг 3 - PHP
У нас есть много вариантов хранения ваших данных спонсоров - в базе данных MySQL, XML-документ или даже обычный текстовый файл. Все они имеют свои преимущества, и мы использовали все из них в предыдущих уроках (за исключением хранения XML).
Мы будем использовать хранение информации в php в массиве:

demo.php - Часть 1
// Each sponsor is an element of the $sponsors array:

$sponsors = array(
    array('facebook','The biggest social..','http://www.facebook.com/'),
    array('adobe','The leading software de..','http://www.adobe.com/'),
    array('microsoft','One of the top software c..','http://www.microsoft.com/'),
    array('sony','A global multibillion electronics..','http://www.sony.com/'),
    array('dell','One of the biggest computer develo..','http://www.dell.com/'),
    array('ebay','The biggest online auction and..','http://www.ebay.com/'),
    array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
    array('google','The company that redefined w..','http://www.google.com/'),
    array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
    array('mysql','The most popular open source dat..','http://www.mysql.com/'),
    array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
    array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
    array('cisco','The biggest networking and co..','http://www.cisco.com/'),
    array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
    array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

Далее идет код отвечающий за вывод наших спонсоров:

demo.php - Часть 2
// Looping through the array:

foreach($sponsors as $company)
{
    echo'
        <div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
            </div>

            <div class="sponsorData">
                <div class="sponsorDescription">
                    '.$company[1].'
                </div>
                <div class="sponsorURL">
                    <a href="'.$company[2].'">'.$company[2].'</a>
                </div>
            </div>
        </div>

    ';
}

Шаг 4 - JQuery
JQuery плагин Flip.

script.js
$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $('.sponsorFlip').bind("click",function(){

        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

        var elem = $(this);

        // data('flipped') is a flag we set when we flip the element:

        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:

            elem.revertFlip();

            // Unsetting the flag:
            elem.data('flipped',false)
        }
        else
        {
            // Using the flip method defined by the plugin:

            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden
                    // from view with display:none) into the clicked
                    // .sponsorFlip div before the flipping animation starts:

                    elem.html(elem.siblings('.sponsorData').html());
                }
            });

            // Setting the flag:
            elem.data('flipped',true);
        }
    });

});

Стена спонсоров готова ;)

Добавлено: 19 Мая 2018 21:44:31 Добавил: Андрей Ковальчук

Разбитие новостей на страниции (JQuery)

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

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

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

Идея

При вызове, JQuery плагин распознает LI элементы и группирует их по 3 штуки.
Разбитие новостей на страниции (JQuery)

Шаг 1 - XHTML
Первым шагом урока является создание разметки XHTML. Плагину нужно только неупорядоченный список, UL, с некоторыми элементами Li внутри него. Вот код из demo.html, который вы можете найти в архиве:

<div id="main">
    <ul id="holder">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
    </ul>
</div>

Плагин будет преобразовывать наш контент в нечто подобное:

Шаг 2 - CSS

После создания разметки XHTML, мы можем перейти к моделированию его. CSS стили будут связаны с javascript. Это означает, что если у пользователей будут отключены js то они не смогут увидеть и использовать нумерацию. Хотя сейчас таких пользователей почти не осталось.

styles.css
#main{
    /* The main container div */
    position:relative;
    margin:50px auto;
    width:410px;
    background:url('img/main_bg.jpg') repeat-x #aeadad;
    border:1px solid #CCCCCC;
    padding:70px 25px 60px;

    /* CSS3 rounded cornenrs */

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

#holder{
    /* The unordered list that is to be split into pages */

    width:400px;
    overflow:hidden;
    position:relative;
    background:url('img/dark_bg.jpg') repeat #4e5355;
    padding-bottom:10px;

    /*    CSS3 inner shadow (the webkit one is commeted, because Google Chrome
        does not like rounded corners combined with inset shadows): */

    -moz-box-shadow:0 0 10px #222 inset;
    /*-webkit-box-shadow:0 0 10px #222 inset;*/
    box-shadow:0 0 10px #222 inset;
}

.swControls{
    position:absolute;
    margin-top:10px;
}
a.swShowPage{

    /* The links that initiate the page slide */

    background-color:#444444;
    float:left;
    height:15px;
    margin:4px 3px;
    text-indent:-9999px;
    width:15px;
    /*border:1px solid #ccc;*/

    /* CSS3 rounded corners */

    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
}

a.swShowPage:hover,
a.swShowPage.active{
    background-color:#2993dd;

    /*    CSS3 inner shadow */

    -moz-box-shadow:0 0 7px #1e435d inset;
    /*-webkit-box-shadow:0 0 7px #1e435d inset;*/
    box-shadow:0 0 7px #1e435d inset;
}

#holder li{
    background-color:#F4F4F4;
    list-style:none outside none;
    margin:10px 10px 0;
    padding:20px;
    float:left;

    /* Regular CSS3 box shadows (not inset): */

    -moz-box-shadow:0 0 6px #111111;
    -webkit-box-shadow:0 0 6px #111111;
    box-shadow:0 0 6px #111111;
}

#holder,
#holder li{
    /* Applying rouded corners to both the holder and the holder lis */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}

.clear{
    /* This class clears the floated elements */
    clear:both;
}


Шаг 3 - JQuery

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

script.js
(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){

    // If no options were passed, create an empty opts object
    if(!opts) opts = {};

    var resultsPerPage = opts.perPage || 3;

    // The plugin works best for unordered lists,
    // although OLs would do just as well:
    var ul = this;
    var li = ul.find('li');

    li.each(function(){
        // Calculating the height of each li element,
        // and storing it with the data method:

        var el = $(this);
        el.data('height',el.outerHeight(true));
    });

    // Calculating the total number of pages:
    var pagesNumber = Math.ceil(li.length/resultsPerPage);

    // If the pages are less than two, do nothing:
    if(pagesNumber<2) return this;

    // Creating the controls div:
    var swControls = $('<div class="swControls">');

    for(var i=0;i<pagesNumber;i++)
    {
        // Slice a portion of the li elements, and wrap it in a swPage div:
        li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');

        // Adding a link to the swControls div:
        swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
    }

    ul.append(swControls);
    var maxHeight = 0;
    var totalWidth = 0;

    var swPage = ul.find('.swPage');
    swPage.each(function(){

        // Looping through all the newly created pages:

        var elem = $(this);

        var tmpHeight = 0;
        elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

        if(tmpHeight>maxHeight)
            maxHeight = tmpHeight;

        totalWidth+=elem.outerWidth();

        elem.css('float','left').width(ul.width());
    });

    swPage.wrapAll('<div class="swSlider" />');

    // Setting the height of the ul to the height of the tallest page:
    ul.height(maxHeight);

    var swSlider = ul.find('.swSlider');
    swSlider.append('<div class="clear" />').width(totalWidth);

    var hyperLinks = ul.find('a.swShowPage');

    hyperLinks.click(function(e){

        // If one of the control links is clicked, slide the swSlider div
        // (which contains all the pages) and mark it as active:

        $(this).addClass('active').siblings().removeClass('active');

        swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');
        e.preventDefault();
    });

    // Mark the first link as active the first time the code runs:
    hyperLinks.eq(0).addClass('active');

    // Center the control div:
    swControls.css({
        'left':'50%',
        'margin-left':-swControls.width()/2
    });

    return this;

}})(jQuery);
$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    // Calling the jQuery plugin and splitting the
    // #holder UL into pages of 3 LIs each:

    $('#holder').sweetPages({perPage:3});

    // The default behaviour of the plugin is to insert the
    // page links in the ul, but we need them in the main container:

    var controls = $('.swControls').detach();
    controls.appendTo('#main');

});

Наше сладкое решение нумерации страниц с JQuery и CSS3 успешно закончено!

Добавлено: 19 Мая 2018 21:42:28 Добавил: Андрей Ковальчук

Создание Meta-тегов

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

Правильность составления МЕТА тегов делает возможным, чтобы ваш сайт было легко отыскать при помощи поисковых систем среди огромного числа других сайтов! Для этого необходимо следовать следующим рекомендациям:

1. Длина содержимого тегов МЕТА "desctiptions" не должна превышать 200 символов, a "keywords" - 1000 символов. Это связано с тем, что поисковые серверы, как правило, используют именно такие величины при индексировании информации о вашем сайте. Можно получить отрицательный результат, если поисковые машины отбросят часть описания, превышающего установленные нормы, в результате чего в каталог попадет не вся желаемая информация, либо сервер просто отвергнет регистрацию вашего сайта.
2. Нужно включить все наиболее часто используемые в вашем сайте термины и их синонимы в тег "desctiptions". Можете включить и термины, не имеющие отношения к вашим страницам, однако в Internet такое поведение считается некорректным. В список ключевых слов можно вставлять и фразы. В этом случае у вашего сайта повышается шанс попасть в самое начало списка, выданного поисковым сервером (в случае совпадения фразы с той, что вводит пользователь).
3. Для увеличения рейтинга сайта и попадания его в верхнюю часть поискового списка необходимо каждый термин, включаемый в описание, повторять около 3 раз. Поисковые машины, как правило, работают с тегами МЕТА, а в случае их отсутствия - уже с содержимым страницы. Иногда это приводит к появлению сайта в списке top 10, но может привести ик отрицательному результату (перед регистрацией проверьте поисковую машину, дав запрос и просмотрев ключевые слова у сайтов, стоящих на верхних позициях)
4. Используйте в описаниях и списке терминов как можно больше синонимов.
5. Не используйте в описаниях и в списке терминов понятия и слова, слабо связанные друг с другом.

Cостав МЕТА-тегов.

1) Для того, чтобы при просмотре документа броузер брал свежую версию документа, а не версию из кеша используется:

<META HTTP-EQUIV="Expires" Content="Mon, 28 Mar 1999 00:00:01 GMT">

2) Для определения броузером языка, на котором написана страница используется:
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=Windows-1251">

3) Если неопытный Web-мастер скопирует Вашу страницу, в которой оставит следущий тег, то при заходе на эту страницу броузер автоматически перейдет на Вашу страницу
<META HTTP-EQUIV="Refresh" Content="1; url=http://адрес_вашей_страницы">

4) Для указания имени автора и дополнительной информации о нем используется:
<META Name="autor" Content="Ваши Ф.И.О., E-Mail...">

5) Для указания авторких прав используется:
<META Name="copyright" Content="Ваша_фирма...">

6) Для указания ключевых слов и терминов используется
<META Name="keywords" Content="Ваши_Ключевые слова">

7) Для указания краткого описания используется
<META Name="description" Content="Описание_Вашей_Страницы">

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

Добавлено: 19 Мая 2018 21:36:31 Добавил: Андрей Ковальчук

Создание вкладок средствами HTML.

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

Для создания вкладок потребуется таблица из шести ячеек. Четыре из них образуют сами вкладки,
а две крайние ячейки нужны больше для красоты, они формируют горизонтальную линию и служат для отступа от краев.
Потребуется всего два селектора, один изменяет стиль текущей вкладки, назовем его open,
а второй селектор с именем close будет управлять видом неактивной вкладки.
Рамка создается с помощью атрибута border, он позволяет одновременно задать стиль рамки, ее толщину и цвет.
Чтобы не образовывалась двойная рамка в местах состыковки ячеек, следует границу справа убрать.
Для этого используется параметр border-right: none. Для текущей вкладки (селектор open) следует спрятать также и нижнюю границу.
Стиль самой правой и левой ячеек можно описать прямо в теге td, но при частом использовании вкладок на сайте,
лучше создать отдельный класс.

<html>
<head>
<style>
.open { border: solid 1px black; border-right: none; border-bottom: none; text-align: center; font-weight: bold;}
.close { border: solid 1px black; border-right: none; text-align: center; background: #cfd6d4; }
</style>
</head>
<body>
<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td width=10 align=center style="border-bottom: solid 1px black"> </td>
<td width=25% class=open>Чебурашка</td>
<td width=25% class=close>Крокодил Гена</td>
<td width=25% class=close>Шапокляк</td>
<td width=25% class=close>Крыса Лариса</td>
<td width=10 align=center style="border-left: solid 1px black; border-bottom: solid 1px black"> </td>
</tr>
</table>
</body>
</html>

Добавлено: 19 Мая 2018 21:35:11 Добавил: Андрей Ковальчук

Использование нескольких кнопок сабмит (submit) на одной форме

Когда на форме ( form) расположено несколько кнопок сабмита (submit), есть несколько вариантов, как определять, какая именно из кнопок самбита была нажата.

Есть форма с несколькими кнопками сабмит, как определить какая из кнопок была нажата.

<FORM NAME="theForm">
<input type="hidden" name="func" id="func">

<INPUT TYPE="button" VALUE="Submit 1" onclick="document.theForm.func.value='1'; document.theForm.submit();">
<INPUT TYPE="button" VALUE="Submit 2" onclick="document.theForm.func.value='2'; document.theForm.submit();">
<INPUT TYPE="button" VALUE="Submit 3" onclick="document.theForm.func.value='3'; document.theForm.submit();">
</FORM>

При нажатии на кнопку мы инициализируем скрытую переменную func и вызываем сабмит формы. Собственно ничего сложного.

Добавлено: 19 Мая 2018 21:23:05 Добавил: Андрей Ковальчук

Использование !important в CSS

Итак, почему же стоит отказаться от «!important»?

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


Рассмотрим простой пример использования:

XHTML

<div id="content">
  <p>Первый абзац</p>
  <p class="p1">Второй абзац</p>
  <p class="p2">Третий абзац</p>
</div>

CSS
#content p {
color: #009;
}
.p1 {
color: #900;
}
.p2 {
color: #090 !important;
}

Получилось, что цвет текста, описанный в классе «p1», не перекрыл значение цвета, заданное через идентификатор родительского контейнера «#content» для дочерних элементов «p». Это произошло, потому что приоритет стилей, заданных через идентификатор объекта, выше, чем приоритет класса. В случае с «p2» для параметра «color» задано значение «!important», что дает ему высший приоритет, поэтому мы видим в третьем абзаце текст зеленого цвета.

Представим, что нам требуется таким образом перекрыть много CSS-параметров, тогда получится что-то вроде этого:
#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
.p2 {
margin: 0 24px !important;
padding: 24px 0 !important;
color: #090 !important;
font-size: 12px !important;
line-height: 24px !important;
text-align: left !important;
}

Довольно громоздко и некрасиво получилось, не так ли? Давайте подумаем, как обойтись без «!important». Мы знаем, что стили идентификатора перекрывают оформление класса, поэтому и запишем все через идентификатор «#content»:
#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
#content .p2 {
margin: 0 24px;
padding: 24px 0;
color: #090;
font-size: 12px;
line-height: 24px;
text-align: left;
}

Вот, то, что нужно, ни одного «!important» и все работает так, как и хотелось. Вернемся к нашему примеру и перепишем его без использования «!important»:

CSS
#content p {
color: #009;
}
.p1 {
color: #900;
}
#content .p2 {
color: #090;
}

Результат тот же, что и в первом примере, но мы избавились от «!important», а значит избежали проблем, приведенных в начале статьи, да еще и сократили код, если требовалось бы перекрыть несколько параметров.

До момента написания статьи, я ни разу не встречал такого использования CSS-селекторов:
#identificator.class
/* или */
.class#identificator

Как оказалось, применение такой конструкции есть. Допустим, у нас есть меню навигации:
<ul id="nav">
  <li><a id="main" class="current" href="index.html">Главная</a></li>
  <li><a id="projects" href="projects.html">Проекты</a></li>
  <li><a id="partners" href="partners.html">Партнеры</a></li>
  <li><a id="about" href="about.html">О нас</a></li>
  <li><a id="contacts" href="contacts.html">Контакты</a></li>
</ul>

И по каким-то причинам, стили описаны следующим образом:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}

Например, для того, чтобы выделить ссылку на текущую страницу, мы добавляем для нее класс «current», т. к. идентификатор уже задан, но теперь чтобы перекрыть значение параметра «background» нам потребуется использовать «!important»:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
.current {
background: #ff0 !important;
}

Вроде бы «!important» не так и сильно мешает и запись довольно короткая, но вспомним, что IE6 не понимает его. Что же делать? Перепишем код, используя конструкцию, о которой говорилось чуть выше:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
#main.current, #projects.current,
#partners.current, #about.current,
#contacts.current {
background: #ff0;
}

Все заработало, аналогично примеру с «!important», но теперь и в IE6. Возможно, пример не совсем удачный потому, что получилось больше кода.

Уверен, что найдется и применение конструкции «.class#identificator». Надеюсь, прочтение этой статьи, поможет Вам сократь использование «!important» в ваших таблицах стилей.

Добавлено: 18 Мая 2018 06:43:36 Добавил: Андрей Ковальчук