Раздер Название темы Ответов Последний
Графика для сайта Shareman 3.70 RUS/2010 0 mandelsonsouggisse
Изготовление контента Нужен контент 10 ali7875
DataLife Engine Проблема регистрации. 1 JimaX
DataLife Engine Модальное окно в DataLife Engine 3 lionprizrak
DataLife Engine Настройка robots.txt 8 Prizrak_2012
Стол заказов на cmsko.ru Мини-чат. 2 JimaX
Общение пользователей Статьи 3 nastroenie
Хостинг TneHost - Хстинг провайдер 10 ali7875
DataLife Engine Установка банеров 9 JimaX
DataLife Engine Помогите с установой. dle95 2 nastroenie
Яндекс Apdate
Апдейты Яndex тИЦ
25.09.2013Последний |
02.07.2013
23.05.2013
Апдейты Яndex выдачи
18.10.2013Последний |
17.10.2013
12.10.2013
Апдейты ЯКаталога
23.10.2013Последний |
22.10.2013
21.10.2013

» Просмотров:1070 » Дата: 15-12-2010, 21:21 » Автор: NeoMurderer
Добавляем кнопку "перезалейте" в полную новость.

Возможности:
- кнопка видна только зарегистрированным пользователям
- кнопку можно нажать только 1 раз (в каждой новости)
- в админке: список новостей с жалобами (новости сортируются по кол. жалоб)[/i]
- в админке: кто пожаловался
- в админке: если нажать на [Удалить] то все жалобы удаляются
Подробнее Комментарии: 0 Теги:
» Просмотров:1198 » Дата: 15-12-2010, 21:03 » Автор: NeoMurderer
Как сделать красивый вывод новостей на страницах без правки php-кода?
И не просто оформить новости через CSS, а сделать единообразный, удобочитаемый вид новостей, да ещё так, чтобы угодить и пользователям и поисковикам.
Сегодня я расскажу и покажу Вам как это сделать легко, непринуждённо и с минимальным вмешательством в код уже существующего шаблона.
Использовать будем только jQuery и CSS.
Подробнее Комментарии: 0 Теги:
» Просмотров:671 » Дата: 7-12-2010, 20:54 » Автор: NeoMurderer
Здравствуйте,сегодня я вам разкажу как можно пострелять всё что есть на моём сайте
Подробнее Комментарии: 0 Теги:
» Просмотров:1532 » Дата: 14-11-2010, 17:17 » Автор: NeoMurderer
Долго искал универсальный способ расшаривания новостей в соц.сетях. Советов много, есть для твиттера, вконтакта, фэйсбука. А вот так, чтобы все сразу - нет. Но я нашел, и как вы думаете, где? На карте лесных пожаров Яндекса.
Подробнее Комментарии: 0 Теги:
» Просмотров:1903 » Дата: 10-11-2010, 18:28 » Автор: NeoMurderer
В этом видеоуроке я вам расскажу как с помощью HTML и CSS вывести на вашем сайте новости в две колонки.
Подробнее Комментарии: 0 Теги:
» Просмотров:1180 » Дата: 10-10-2010, 10:51 » Автор: NeoMurderer
В этом видеоуроке я вам расскажу как с помощью HTML скрыть баннер Ucoz'a.
Подробнее Комментарии: 0 Теги:
» Просмотров:1047 » Дата: 9-10-2010, 19:45 » Автор: NeoMurderer

CSS имеет прекрасное свойство white-space, которое игнорируется большинством новичков. Вероятно, вы без него сможете работать достаточно долгое время. Но стоит узнать данное свойство поближе и попробовать использовать его в своих работах, то вы будете обращаться к нему снова и снова.

В данном уроке мы разберем свойство CSS  white-space в очень практичной манере.

Свойство CSS white-space

CSS имеет прекрасное свойство white-space, которое игнорируется большинством новичков. Вероятно, вы без него сможете работать достаточно долгое время. Но стоит узнать данное свойство поближе и попробовать использовать его в своих работах, то вы будете обращаться к нему снова и снова.

В данном уроке мы разберем свойство CSS  white-space в очень практичной манере.

Немного основ HTML

В (X)HTML каждый раз, когда в вашей строке кода встречается несколько следующих друг за другом пробелов, браузер по умолчанию будет обрезать из (или сворачивать) до одного пробела. Такое функционирование очень удобно, потому что позволяет корректно структурировать текст и разделять элементы в (X)HTML, так что их легко читать и редактировать — без создания нежелательных пробелов и переводов строк при выводе в браузере.

Если вам нужно сохранить все пробелы и переводы строк в их оригинальной манере, то вы можете использовать корявого двоюродного брата свойства  white-space — тег <pre>. Весь контент, помещенный внутрь тега  <pre> будет выводиться идентично тому, что размещено в тексте кода. В этом случае единичная строка текста будет сдвигать границы своего родительского элемента, если в ней нет символа перевода строки. Таким образом, если по умолчанию в браузере при выводе HTML игнорируются множественные последовательные пробелы, то вы можете изменить такое поведение с помощью тега  <pre>.

(X)HTML также позволяет использовать пробел без перевода строки (&nbsp;). Если вам нужно сохранить в строке несколько последовательных пробелов, которые нельзя сворачивать в один, то можно использовать символы пробела без перевода строки. Также есть старый метод с использованием тега <nobr>, но данный тег не рекомендуется использовать, так как он выводится из употребления.

Свойство CSS white-space является совершенным методом для выше перечисленных методов (X)HTML, которые контролируют пробелы в тексте документа.

Определение и возможные значения.

С помощью возможный значений свойство white-space дает нам  способ через CSS определять, как браузер будет управлять множественным пробелами и символами перевода строки. Конечно, в части документа, которая ограничивается с помощью использования селекторов CSS.

Ниже перечисляются различные значения свойства white-space с демонстрацией их работы:

Значение: normal

Это значение по умолчанию. Если оно задано, то результат вывода в браузере ничем не будет отличаться от обычного. Использовать данное значение следует тогда, когда нужно изменить другое ранее установленное значение свойства white-space, или в случае наследования элементом-потомком нежелательного значения свойства.

Whitespace value:normal

Значение: nowrap

Это наиболее часто используемое значение свойства white-space, потому что оно действует почти идентично значению normal, за исключением того, что перевод строки никогда не будет вставлен, даже если строка выходит за границы элемента.

Элемент, который имеет свойство white-space со значением nowrap никогда не будет прерывать строку или встроенный элемент, вместо этого он расширит свои  (или родительского элемента) размещая все в одну строку. Но множественные смежные пробелы будут свернуты в один, как обычно.

whitespace value:nowrap

Значение: pre

Данное значение работает в точности как и тег <pre>. Все множественные пробелы и переводы строк сохраняются, создавая внешний вид вывода таким, как он задан в разметке. Также как и при использовании тега <pre>, если строка выходит за границы элемента, то границы раздвигаются, сохраняя структуру строки.

whitespace value: pre

Значение: pre-line

Данное значение работает также как и значение по умолчанию (normal), за исключением одного: символы перевода строки в HTML будут действовать при выводе в браузере. Множественные пробелы между элементами сворачиваются в один. Данное значение не поддерживается в Internet Explorer до версии 7, Firefox до версии 3.0, и Opera до версии 9.2.

whitespace value:pre-line

Значение: pre-wrap

Данное значение действует также как и  pre, за исключением того, что строки будут прерываться в соответствии с границами родительского элемента. Таким образом формирование текста в одну строку с расширением границ производится не будет, но множественные пробелы и переводы строк сохраняются при выводе в браузере. Данное свойство не поддерживается Internet Explorer до версии 7, и Firefox до версии 3.0.

whitespace value:pre-wrap

Несколько примеров использования

Наиболее ярким примером использования свойства white-space, является применение его к ссылке, которая не должна прерываться символом перевода на новую строку. Взгляните на пример страницы на рисунке ниже:

Использование whitespace

Сссылка “read more” имеет символ &raquo; (») в конце, но по причине недостаточности места, символ перенесен на следующую строку. Такая неприятность может быть исправлена с помощью свойства white-space со значением nowrap, назначенного для ссылки . Ссылка должна быть перемещена целиком на следующую строку без разрывов. Данный пример также демонстрирует факт, что свойство white-space влияет только на контент внутри элемента, к которому оно применено. Таким образом, хотя вся ссылка будет перемещена на следующую строку, текст внутри  элемента не будет разделяться символами перевода строки.

Так что значение nowrap свойства white-space может  помочь избежать некоторых проблем при форматировании текста документа.  Так как значения pre-line и pre-wrap не работают с Internet Explorer, их не рекомендуется широко использовать в своих работах. Однако с расширением поддержки, они могут быть очень полезны при верстке страниц.

Распространенная ошибка новичков

Одной возможной проблемой новичков при использовании данного свойства  (как в выше приведенном примере) является предположение, что установка свойства whitespace: nowrap для элемента предотвратит его перевод на следующую строку в случае нарушения границ родительского элемента. Однако свойство white-space действует только на элементы-наследники внутри и не влияет на сам элемент.

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.impressivewebs.com/css-white-space/

Подробнее Комментарии: 0 Теги:
» Просмотров:2365 » Дата: 9-10-2010, 16:20 » Автор: NeoMurderer

Создание программы для быстрой загрузки фотографий с помощью jQuery.

«Ленивая загрузка» - это программный плагин jQuery, написанный на javascript, который откладывает загрузку изображений на (больших) веб-страницах. Таким образом, изображения, которые не попадают в поле зрения пользователя, не будут открываться до тех пор, пока пользователь не прокрутит страницу вниз. То же самое, что предварительная загрузка, только наоборот.

Создание программы для быстрой загрузки фотографий с помощью jQuery.

«Ленивая загрузка» - это программный плагин jQuery, написанный на javascript, который откладывает загрузку изображений на (больших) веб-страницах. Таким образом, изображения, которые не попадают в поле зрения пользователя, не будут открываться до тех пор, пока пользователь не прокрутит страницу вниз. То же самое, что предварительная загрузка, только наоборот.

Использование «ленивой загрузки» на сайтах, содержащих много изображений большого размера, позволяет ускорить загрузку страницы – браузер сообщит о полном открытии, как только откроются все видимые картинки. В некоторых случаях использование данного модуля помогает сократить нагрузку на сервер.

Программа написана на основе модуля для загрузки изображений, который называется YUI ImageLoader Utility, автор программы – Мэтт Млинак.


Прокручивайте страницы вниз для просмотра эффекта.

Исходники пока не получилось собрать. Работаю над этим.

Как работает программа?

Программный плагин основан на jQuery (ну а как же?) и переменных, разработанных Брендоном Аароном, которые теперь включены в разметку jQuery. Укажите их в заголовке:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

И в коде:

$("img").lazyload(); 

После этого все изображения будут загружаться по мере доступа пользователя к ним.

Установка реагирования

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

$("img").lazyload({ threshold : 200 }); 

Если вы установите пороговое значение 200, то до начала открытия 200 пикселей картинки уже будут загружены.

Метка-заполнитель для изображения

Также можно установить метку-заполнитель для изображения и событие, с которого будет начинаться загрузка. Метка-заполнитель должна содержать адрес изображения. Программный модуль предлагает прозрачные, серые и белые изображения размером 1*1 пиксель.

$("img").lazyload({ placeholder : "img/grey.gif" });

Событие для начала загрузки

Событие устанавливается в jQuery – им может стать что угодно, в том числе щелчок или движение мыши. Можете разработать свои собственные варианты. По умолчанию программа ждет, пока пользователь прокрутит страницу вниз – тогда в окне браузера появляются картинки. Чтобы изображения не загружались, пока пользователь не нажмет на метку-заполнитель, делаем вот что:

$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"

}
);

Использование эффектов

По умолчанию плагин ждет полной загрузки изображения, а затем обращается к функции show(), чтобы его показать. Можете добавить к этой последовательности действий любой эффект, какой вам захочется. В нижеприведенном отрывке кода представлено добавление эффекта «постепенное проявление». На демо странице вы можете посмотреть, как это смотрится.

$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
}
);

Внутреннее хранение изображений

Также вы можете использовать плагин для изображений, хранящихся внутри контейнеров со скроллами – для этого просто укажите контейнер в коде в качестве объекта jQuery. Есть демо-варианты для горизонтальных и вертикальных контейнеров.

#container {
height: 600px;
overflow: scroll;
}

$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
}
);

Если изображения отображаются не по порядку

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

$("img").lazyload({
failurelimit : 10
}
);

Если мы устанавливаем значение функции равным 10, программа останавливает поиск после того, как обнаружит 10 видимых картинок. Если у страницы сложная разметка, следует указать здесь довольно большое число.

Отложенная загрузка изображений

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

$(function() { 
$("img:below-the-fold").lazyload({
placeholder : "img/grey.gif",
event : "sporty"

});
});

$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

На сегодня все! Спасибо за внимание.

Подробнее Комментарии: 0 Теги:
» Просмотров:4817 » Дата: 4-10-2010, 21:12 » Автор: NeoMurderer
Cкрипт для переноса сайта с uCoz на DLE  скачать бесплатно
Cкрипт переноса сайты с uCoz на любой DLE!
Теперь у Вас есть уникальная возможность придать своему сайту новую жизнь и новый движок,
независимый от системы uCoz
Подробнее Комментарии: 5 Теги:
» Просмотров:1151 » Дата: 3-10-2010, 21:50 » Автор: NeoMurderer
Многие знают что UCOZ требует свой копирайт на вашем сайте.Убрать его не каждому по карману,но есть бесплатный способ его убрать (визуально).Но сначала прочитайте это :

Подробнее Комментарии: 2 Теги: