СОЗДАНИЕ САЙТОВ | Разработка сайтов - Veselov.sumy.ua

# Выделяем текущий пункт меню отдельным стилем явой jQuery

Допустим нужно выделить текущий пункт меню отдельным стилем как например сейчас выделен "домой" если это главная страница сайта или "блог" если вы находитесь в разделе блог. Но иногда это сделать просто невозможно (в случае аякса) или сложно из за структуры меню. И тут нам на помощь приходит ява:

Этот сниппет очень прост и заключается в том, что бы из полученного массива ссылок выбрать только ту, у которой атрибут href совпадает с адресом страницы.

$(function () {                                      // Когда страница загрузится
    $('.lmenu a').each(function () {             // получаем все нужные нам ссылки
        var location = window.location.href; // получаем адрес страницы
        var link = this.href;                // получаем адрес ссылки
        if(location == link) {               // при совпадении адреса ссылки и адреса окна
            $(this).addClass('active');  //добавляем класс
        }
    });
});

Нужно выделить и родителей ?
Если у вас древовидное меню, бывает, нужно выделить не только текущую ссылку но и ссылки родительских разделов, для этого используем метод Match(). Код будет таким:

$(function () {                             // когда страница загружена
    $('.lmenu a').each(function () {    // проходим по нужным нам ссылками
        var location = window.location.href // переменная с адресом страницы
        var link = this.href                // переменная с url ссылки
        var result = location.match(link);  // результат возвращает объект если совпадение найдено и null при обратном

        if(result != null) {                // если НЕ равно null
            $(this).addClass('current');    // добавляем класс
        }
    });
});

UPD Еще один способ

(function($){ 
        $(document).ready(function(){
                var pathname = window.location.pathname,
                        page = pathname.split(/[/ ]+/).pop(),
                        menuItems = $('#main_menu a');
                menuItems.each(function(){
                        var mi = $(this),
                                miHrefs = mi.attr("href"),
                                miParents = mi.parents('li');
                        if(page == miHrefs) {
                                miParents.addClass("active").siblings().removeClass('active');
                        }
                });
        });
})(jQuery);

# Число тегов в облаке DLE

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

Открываем файл \engine\modules\tagscloud.php и ищем:

и заменяем на:

где LIMIT 0,60 — количество тегов извлекаемые из базы данных.
Ищем в том же файле:

и заменяем на:

где >= 60— количество тегов выводимые в блоке.

# Все страницы внизу новостей в DataLife

Открыть show.short.php

Найти

Заменить на


А еще немного статистики за 2009:

# Позиционирование блоков горизонтально

Сразу скажу что эти решения не подходят для ИЕ6. Вообще мое мнение надо отстреливать всех кто использует этот браузер -) Шутка -)

Штука намбер ван (обычно приходилось применять php):
Нужно сделать вот так:

Делаем html каркас:

Для того, чтобы горизонтально расположить блоки в оболочке, нам потребуется всего несколько строк CSS кода. Первое, что приходит в голову: объявить класс .section со свойствами width и margin-right, с нужными нам значениями. Но при этом правый отступ крайнего правого элемента будет выступать за границы оболочки:

Так как правый отступ крайнего правого элемента превышает ширину оболочки, по правилам разметки крайний правый блок «уйдет» вниз:

Возникает вопрос: как убрать «лишний» отступ у крайнего правого блока без специального CSS класса, у которого свойство margin-right будет задано 0?

Именно здесь и стоит вспомнить о селекторе :first-child, и инвертировать правые отступы на левые. Таким образом, чтобы у первого блока отступ слева был нулевым. Напрашивается вопрос: зачем инвертировать? Все дело в том, что в IE7|8 поддержка :first-child добавлена, а :last-child нет. Экономят?

Итак, давайте посмотрим на CSS код решения. Сперва определим оболочку:

Теперь объявим класс содержимого оболочки .section:

В примере используются фиксированные значения свойств width и margin-left. Вы на свое усмотрение можете использовать и процентные отношения.

Теперь нам надо убрать отступ слева у первого блока, делается это так:
#wrapper div:first-child {
margin-left:0px;
}

# Ошибки IE6 или опять о кроссбраузерности

Что это "великий" и "могучий" бразуер я писать опять не буду, просто приведу некоторые ошибки ИЕ и варианты фикса:

В основном все используют для создания навигационного меню списки. А если нужно сделать меню горизонтальным, просто ставят float:left на ссылки внутри списка. Смотрим код:

html


css


Вот, что мы увидим в нормальных браузерах:

а вот, что в IE6:

не правда ли чудесно? :)
Эффект возможно и красивый, но абсолютно нам не нужный. Чтоб заставить IE6 отобразить меню так как мы это задумали нам нужно чуть поправить наш css код следующим образом:

После такого веского аргумента даже шестой ослик не устоит и будет отображать меню так как нужно.

Двойной margin у элемента при обтекании.

В нормальных браузерах:

В IE:

Фикс:


Отступы между элементами списка

html

css

Нормальные браузеры:

IE6:

Решение 1:
css

Решение 2:
css:

# Картинка в стороне от текста без обтекания

К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:

Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.

Итак первое и очевидное сделать float:left; картинке, но тогда появится обтекание. Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть любыми. Казалось бы без таблиц не обойтись, а не тут то было, можно:


Эта приблуда должна работать в Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win