Всё обо всём или попытки заработка

Представляю подборку различных навигационных менюшек написанных на jQuery которые мне понравились.

1. Animated Drop Down menu with JQuery

Код

2.iPod style menu

Код

3.Superfish – jQuery menu plugin

Код

4. Lavalamp for JQuery lovers

Код

5. Как сделать раздвижное анимированное меню.
Очень интересный урок по созданию очень гармоничного меню на ваш сайт.

Код

6. Navigation effect using JQuery

Код

7. Animated JQuery menu

Код

8. vertical sliding JQuery menu

Код

9. Apple menu

Код

10. Background Image Animations

Код

Исследую забугорные блоги наткнулся на интересный плагин для на jquery Sliding Login Panel, хотел было применить у себя, но буквально через пару минут наткнулся и на уже реализованный плагин для wordpress SuperSlider-Login, правда он использует не jquery а Mootools. Вот и поставил его себе, так что можете проверить юзабилити у меня на блоге.

З.Ы. Бывает такое что нужно отключить использование правой кнопки мышки на сайте. Есть множество скриптов на java, но jquery сделает это быстрей и займёт меньше строк:$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

З.Ы.Ы. После подключения плагина, была замечена большая нагрузка на сервер, так что пока отключил его, разберусь что да как и прийму окончательное решение, оставлять его или нет.
Спонсоры:
Ливневая канализация служит для отвода дождевых осадков в качестве дренажной системы. Канализационные системы, Септики из стеклопластика, Циклон, Очистка воды. В Новосибирске. В срок.

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

Станция ЮНИЛОС (СБМ) поставляется в собранном виде, за исключением вариантов доставки к месту монтажа без горловин по требованию условий перевозки негабаритных грузов. Канализационные насосные станции, Система очистки сточных вод, Юбас, Монтаж. В Иркутске. Качественно.

«ЮНИЛОС» – системы глубокой биологической очистки сточных вод. Монтаж канализации, Система очистки сточных вод, Топас, Проектирование. В Москве. Дешево.

Канализационные системы ЮНИЛОС АСТРА. Кнс, Система очистки сточных вод, Топас, Очистка воды для дачи. В Воронеже. Не дорого.

1. Использование версии minify + сжатый gzip.
2. Использовать for() вместо each()
3. Использование Id вместо Classes
4. Использовать кеширование

Это поможет увеличить скорость работы библиотеки jquery, а тем самым работу вашего блога.

Интересное в сети: Высокоскоростное создание сайта.
Бизнес идеи в сельском хозяйстве

Иногда надо чтобы какя-то иноформация находилась практически под рукой. Добавлять её на каждую страницу нет смысла, а когда надо чтобы она привлекала внимание без “уголка на странице” нам не обойтись.

И так приступим. Для начала нам надо добавить контейнер на страницу, в частности для wordpress`a мы будем делать это в header.php

<div id=”pageflip”>
<a href=”#”>
<img src=”page_flip.png” alt=”" />
<span class=”msg_block”>Subscribe via RSS</span>
</a>
</div>

Теперь нам нужно определить стили для отображения “уголка” закрытым и открытым:

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
text-indent: -9999px;
}

Ну а теперь вступает чудодейственный jquery:

$(”#pageflip”).hover(function() { //On hover…
$(”#pageflip img , .msg_block”).stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: ‘307px’,
height: ‘319px’
}, 500);
} , function() {
$(”#pageflip img”).stop() //On hover out, go back to original size 50×52
.animate({
width: ‘50px’,
height: ‘52px’
}, 220);
$(”.msg_block”).stop() //On hover out, go back to original size 50×50
.animate({
width: ‘50px’,
height: ‘50px’
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

Ну вот и всё. Да кстати не забываем что нам надо подключить чаму бибилиотеку jquery если этого ещё не сделано.

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

Интересное посмотреть: Только самые лучшие цифровые наркотики.
SEO блог ещё одного Seo Нуба

InnerFade - эффект растворения элементов на jQuery, как текство так и картинок. И так приступим:
Для начала нужно скачать и подключить к документу необходимые скрипты.

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

<script type=”text/javascript” src=”src/jquery.innerfade.js”></script>

Затем между тегами необходимо написать следующий код:

<script type=”text/javascript”>

$(document).ready(

function(){

$(’ul#portfolio’).innerfade({

speed: 1000,

timeout: 5000,

type: ’sequence’,

containerheight: ‘220px’

});

$(’#news’).innerfade({

speed: 1000,

timeout: 5000,

type: ’sequence’,

containerheight: ‘10px’

});

$(’.fade’).innerfade({

speed: 1000,

timeout: 6000,

type: ‘random’,

containerheight: ‘1.5em’

});

});

</script>

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

Параметр type указывает на порядок появления элементов: sequence (последовательно) или random (появление в случайном порядке).

Параметр containerheight указывает высоту растворяющегося блока.

В нужном нам месте вставим код блока с растворяющимися элементами:

Для картинок это будет следующий код:

<ul id=”portfolio”>

<li>

<a href=”http://domain.com/”><img src=”images/ggbg.gif” alt=”" /></a>

</li>

<li>

<a href=”http://domain.com/”><img src=”images/whizzkids.gif” alt=”" /></a>

</li>

<li>

<a href=”http://domain.com/”><img src=”images/km.jpg” alt=”" /></a>

</li>

</ul>

При необходимости список может быть продолжен или сокращен.

Для ссылок код будет такой:

<ul id=”news”>

<li>

<a href=”#n1″>1 Первый текст с ссылкой</a>

</li>

<li>

<a href=”#n2″>2 Второй текст с ссылкой</a>

</li>

<li>

<a href=”#n3″>3 Третий текст с ссылкой</a>

</li>

<li>

<a href=”#n4″>4 Четвертый текст с ссылкой</a>

</li>

</ul>

Ну вот и все! Область использования такого скрипта очень широкая! Надеюсь он получит свое отражение и на Ваших сайтах.
Теперь буду думать как использовать его в связке с ctrotator`ом или вместо него.

Спонсоры поста:
Выставочное оборудование
Раскрутка web сайтов

Я хотел приспособить у себя на сайте ротатор банеров, что-то на подобии как у joomla. Есть возможность использовать php код уже готовых ротаров, но мы не ищем лёгких путей и поэтому сейчас рассмотрим ctrotator на jquery.
Для начала нам нужно подключить jquery (если ещё это не сделано) и скрипт ctrotator`a:

<script src=”lib/jquery-1.2.6.pack.js” type=”text/javascript”></script> <script src=”src/jquery.ctrotator.js” type=”text/javascript”></script>

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

<script type=”text/javascript”>
var dataSource = [
{title: 'test', url: 'http://ksail.ru', tip: 'Заработок не выходя из дома'},
{title: 'test2', url: 'http://dtsa.ru', tip: 'Бесплатный каталог статей'},
{title: 'test3', url: 'http://google.com', tip: 'Гугля'},
{title: 'test4', url: 'http://ya.ru', tip: 'Яндекс'}
];
</script>

Далее создадим сам ротатор и вместе его вызова напишем данный код:

<ul id=”container”></ul>

<script type=”text/javascript”>
$(’#container’).ctRotator(dataSource, {
showCount:5,
speed:1000
});
</script>

Теперь рассмотрим пример создания ротатора из RSS ленты
Опять таки сначала подключаем скрипты:

<link rel=’stylesheet’ href=’src/jquery.ctrotator.css’ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’lib/jquery-1.2.6.pack.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.bridge.rss20.js’></script>

Далее вместе вызова функции содаём ротатор с нужными параметрами:

var bridge = new ctRotatorBridgeRss20(’http://ksail.ru/feed’, function(dataSource){ $(’#container’).ctRotator(dataSource, {showCount:10}); }); bridge.getDataSource();

И вот наконец-то мы добрались к наиболее меня интересующему вопросу по ротации одиночных картинок. Для начала всё также подключаем скрипты в header.php

<link rel=’stylesheet’ href=’src/jquery.ctrotator.css’ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’lib/jquery-1.2.6.pack.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.bridge.flickr.js’></script>

А теперь создадим ротарот который вставим на месте вызова

var bridge = new ctRotatorBridgeFlickR(’http://ksail.ru/image/’, function(dataSource){
$(’#container’).ctRotator(dataSource, {
showCount:10,
speed: 1000,
itemRenderer:function(item){
return ‘<li class=”ctrotator-item”><a href=”‘ +
item.url+ ‘”><img src=”‘ + item.image +
‘” alt=”‘ + item.title + ‘”/></a></li>’;
}
});
});

bridge.getDataSource();

Ну вот и всё. Пример работы ротатора картинок можете пронаблюдать у меня на блоге в шапке.. правда я немного изменил код.
Оригинал статьи и сами скрипты вы найдёте здесь

Спонсоры поста:
покупка продажа уникального контента
ремонт фото
Ремонт часов

Как я уже писал ранее я поменял шаблон блога и теперь занимался его доработкой.
Поставил плагин jquery “Переключатель размера шрифта” о котором прочитал у много уважаемого мною Dimox`a.
Поставил плагин Donation Bar, и буквально на следующий день у меня купили на нём ссылки.

В планах написать пост о ротаторе ссылок, картинок и баннеров на jquery, как только разберусь, или если его не напишет по моей просьбе Dimox.

Сегодня ещё совершенно случайно нашёл интересный сео-журнал Seo-plaza Вот содержание второго номера:

SE.Оптимизация
- Как ускорить индексацию сайта?
- Как увеличить PR? Ищем dofollow-блоги

Ликбез
- 40 SEO-советов, которые были бы понятны даже моей бабуле

e-коммерция
- Отдыхать любят все. Продаем мини-игры. Полное руководство по game-бизнесу

Сайтострой
- Тюнингуем DLE. Полезные добавки к популярному движку

SEO Soft
- Сервисы проверки и ежедневного мониторинга позиций сайтов.
SEUMKA и SETLINKS - что выбрать?

Полезности
- Дополнительные операторы Google для анализа вашего сайта

РелаксЗона
- 10 советов, как не быть сео-нубом.

P.S.Как то враз мне надоели спам комментарии и поэтому я решил что комментить будут только зарегестрированные пользователи!

P.P.S Не много интересного видео”Как появляются дети”

Пришла пора и мне разбираться с jquery.
Очень мне хотелось чтобы длинные посты можно было читать не переходя по ссылке “Читать далее”, и чтобы они не занимали много места на главной странице, тем самым не слишком растягивали её (ну не люблю я сильно много листать страницы вверх и вниз), а прям как выпадающее меню, чтобы при нажатии на ссылку(кнопку) открывалось здесь же. Таковое можно было осуществить с помощью AJAX, но так как я не силён в java(да как и во многом остальном), ринулся рыщить по интернету. И в какой-то момент мне попался скрипт jTruncate использующий jquery.
Скачав повертел его немного вруках, потыкав в разные места, попробовав разные функции вызова, решил уже было бросить это дело, так как ничего не получалось, но последней попыткой для меня было попробовать предложить разобрать по полочкам его Dimox`a. Вот что я ему написал:

Доброе время суток, у меня скорее всегопросьба к Вам. Не могли бы вы подробно описать о  jTruncate. Возможно ли его применить в блоге для развёртывания постов? Если да, то хотелось бы увидеть пост на вашем блоге с описанием
данного метода. Заранее благодарен.
Ссылка на jTruncate in Action -
http://blog.jeremymartin.name/2008/02/jtruncate-in-action.html

Буквально на следующий день получил от него письмо следующего содержания:

Добрый день.
Спасибо за предложение, но я не вижу для себя
полезности в этом плагине, поэтому нет
желанияписать о нем пост.

Сие меня совершенно расстроило и перед тем как забросить это дело я решил всё таки в последний раз поковыряться.

И всё оказалось не так сложно: для начала скачиваем сам jTruncate и закидываем его в папку с используемым шаблоном, далее подключаем его в header.php

<link href=”<?php bloginfo(’stylesheet_directory’); ?>/jtruncate.js” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/jtruncate.js”></script>

Далее сохраняем вот эти данные в ява скрипт например под названием jtrunc

$().ready(function($) {
$(’mo’).jTruncate({
length: 300,
minTrail: 0,
moreText: “[читать далее]“,
lessText: “[скрыть]“,
moreAni: 2000,
lessAni: “normal”
});
$(’/mo’).jTruncate({
length: 1000,
minTrail: 0,
moreText: “[читать далее]“,
lessText: “[скрыть]“,
moreAni: 2000,
lessAni: “normal”
});

});

Теперь его надо также подключить в header.php

<link href=”<?php bloginfo(’stylesheet_directory’); ?>/jtrunc.js” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/jtrunc.js”></script>

Далее в местах где мы хотели бы сворачивать запись нужно поставить тег <mo>, а в конце </mo>(возможно поставить и свои теги при этом изменив содержание файла jtunc.js)

Ну вот в принципе и всё, теперь должно работать приблизительно также как у меня на старой версии шаблона(на новую пока не решаюсь переносить).

З.Ы. Не давно заметил что это работает только в Опере, а Горячий Лис и Ослик игнорируют эти скрипты. Может кто может подсказать как это исправить.

Спонсоры поста:
БТИ свао
как заработать на своем сайте