Гармошка-спойлер для сайта на JQuery

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

Простое но довольно интересное решение я нашел здесь. Я немножко поработал с CSS и представляю вам свой вариант.

Этот код вставляем в том месте где хотим видеть спойлер.

<h2 class="trigger"><a href="#">Заголовок</a></h2>
<div class="toggle_container">
<div class="block">Содержимое спойлера</div>
</div>

А этот код вставляем в файл CSS.

h2.trigger {
width: 647px;
height: 40px;
padding: 0 0 0 50px;
margin: 0 0 5px 0;
font-weight: normal;
font-size: 15px;
float: left;
line-height: 40px;
border: 1px solid #0454a8;
color: #fff;
text-decoration: none;
background: #0973bb;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f97d0', endColorstr='#0454a8');
background: -webkit-gradient(linear, left top, left bottom, from(#0f97d0), to(#0454a8));
background: -moz-linear-gradient(top,  #0f97d0,  #0454a8);
background: gradient(linear, top,  #0f97d0,  #0454a8);
border: 1px solid #0454a8;
}

h2.trigger:hover {
color: #fff;
text-decoration: none;
background: #0973bb;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0454a8', endColorstr='#0454a80f97d0');
background: -webkit-gradient(linear, left top, left bottom, from(#0454a8), to(#0454a80f97d0));
background: -moz-linear-gradient(bottom,  #454a8,  #0f97d00);
background: gradient(linear, bottom,  #0454a8,  #0f97d0);
border: 1px solid #0454a8;
}

h2.trigger  a {
color: #fff;
text-decoration: none;
display: block;
}

h2.trigger  a:hover {
color: #fff;
}

.toggle_container {
background-color: #000;
opacity: 0.9;
margin: 0 0 5px;
padding: 0;
font-size: 1em;
width: 698px;
clear: both;
overflow: hidden;
margin-top: 8px;
border-radius: 0 0 5px 5px;
font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 16px;
border: 1px solid #333;
}
.block {
padding: 20px;
}

И остается JQuery. Этот код нужно разместить между тегами <head></head>.

<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function() {
$('h2:first').addClass('active');
$('.toggle_container:not(:first)').hide();
$('h2.trigger').click(function() {
$(this).toggleClass('active').next().slideToggle('slow') .siblings("div:visible").slideUp('slow');
$(this).siblings('h2').removeClass('active');
return false; //
});
});
// ]]></script>

Вот собственно и всё. Пример работы представленного скрипта можно увидеть здесь. Кстати, сайт на котором представлен данный пример — это дело моих рук. Если не сложно черкните пару слов в комментариях, что можете сказать об этом сайте. Для меня это очень важно.

С уважением, Мышак Пётр.

Как ускорить браузер Гугл Хром

Доброго времени суток, дорогие читатели блога «Мои тараканы»!

Гугл Хром

В сегодняшнем посте пойдет речь о браузере Гугл Хром.  Когда этот браузер только появился, он позиционировался как самый быстрый, но со временем (в основном,  по нашей вине) он потерял свою былую прыть.  И действительно, я даже не заметил, как мой любимый браузер перестал быть таким, каким я узнал его в день нашей первой встречи. Он оброс кучей настроек и расширений. Бесспорно, они облегчают жизнь юзеру, но в то же время они  замедляют работу браузера.

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

Сказать честно, сюжет этого поста я подсмотрел в vk — недавно наткнулся на небольшую заметку  на эту тему и решил её развить. Вот сейчас представляю свою версию советов по ускорению Хрома (в Вконтакте не было ссылки на источник оригинала, если вы знаете его, отпишитесь в комментариях — я обязательно оставлю ссылку).

8 простых советов по ускорению браузера Гугл Хром (Google Chrome).

1. Стартовая страница. Что у вас загружается при запуске браузера? Если у вас в настройках стоит «Последние открытые страницы», то перед закрытием браузера стоит закрыть все ненужные вкладки — это ускорит старт при следующем включении.

Настройки стартовой страницы

2. Расширения. Я писал о расширениях , которые использую, но в моем случае именно они сильно тормозили мой браузер. Я подключил больше дюжины расширений, хотя постоянно использовал, в лучшем случае, половину. Оставив лишь самые необходимые, я сразу заметил изменения в лучшую сторону (чтобы попасть в панель управления расширениями,  достаточно набрать в адресной строке chrome://extensions/).

3. Тема. Используйте тему по умолчанию. Дополнительная графика и анимация поглощают системные ресурсы.

Тема по умолчанию

Вот всего три простых совета,  которые мне помогли заметно ускорить работу браузера Гугл Хром. Но на этом список советов не заканчивается. Вот ещё парочка:

4. Кеш. Периодически чистите кеш браузера. Зачем нужен кеш? Кеш  в переводе с французского означает припрятанный. Когда браузер загружает страничку в первый раз, он припрятывает изображения и некоторые другие элементы на жестком диске компьютера пользователя, что позволяет ускорить повторную загрузку этой страницы —  эти элементы уже грузятся не из интернета, а с жесткого диска. Некоторые сайты мы можем посетить один раз, а в кеше будет храниться ненужная нам больше информация об этом ресурсе. И таких сайтов может быть тысячи, и, как вы понимаете, перегруз ненужной инфой также стопорит работу нашего браузера. Чтобы почистить кеш в Google Chrome, можно воспользоваться комбинацией клавиш Ctrl + Shift + Delete и проставить галочки в нужных пунктах.

Очистить историю

5.Настройки.  Оптимизируйте настройки. В дополнительных настройках следует поставить галочку напротив пункта « Предсказывать сетевые действия для ускорения загрузки страниц» и снять напротив « Автоматически отправлять в Google статистику использования и отчеты о сбоях». Подробнее о этих настройках можно почитать здесь.

Личные данные

6. Версия браузера. Установите последнюю версию браузера. Хром обновляется автоматически, но стоит проверить. Чтобы посмотреть версию программы,  нужно зайти в настройки и открыть вкладку «Справка».

Справка

Версия браузера

7. Вкладки. Держите открытыми не более 10  вкладок. Этот пункт — моё больное место, даже  мои знакомые часто офигевают от того,  сколько у меня открыто вкладок. Я знаю, что это плохо, но ничего с собой поделать не могу :( .  Я заметил, что, когда работаешь в самом браузере, большое количество открытых вкладок не сильно мешает, но стоит переключиться на другую программу,  сразу включаются тормоза, даже иногда виснет весь комп. Так что,  делайте выводы.

8. Переустановите браузер. Это крайний, радикальный  шаг, на который следует идти,  когда ничего из вышеперечисленного не помогло. Перед установкой следует провести синхронизацию (как это делается, я писал здесь). Также можно, даже нужно, произвести экспорт закладок на жесткий диск компьютера. Для этого переходим в диспетчер закладок. Это можно сделать несколькими путями: ввести в адресной строке chrome://bookmarks/#1, или  нажать на пиктограмку настроек => закладки, или, проще всего, Ctrl+Shift+O. Кликаем на «Упорядочить» и в выпадающем списке выбираем «Экспортировать закладки в файл HTML»:

Диспетчер закладок

Удаляем браузер через панель управления: Пуск => Панель управления => Программы и компоненты => Удаление программы. В появившемся списке кликаем по Хрому.

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

Надеюсь,  вам будут полезны данные советы. Чтобы узнавать о новых статьях в блоге, предлагаю подписаться на обновления по RSS или по почте! Также Вы можете следить за моим щебетом в Твиттере.

С уважением, Мышак Пётр.

Финстрип за февраль

Доброго времени суток, уважаемые читатели блога Мои тараканы.

Финстрип за февральСегодня буду краток. Скажу только что у меня в этом месяце несколько приятных событий. Первое — мой рыбацкий сайт получил тИЦ=10. Второе, и самое приятное — мой заработок в интернете вышел в плюс:). Пусть достижения небольшие, но они хорошо мотивируют когда руки уже начинают опускаться, появляется стимул работать.

Финстрип за февраль

Курс USD: 36.08ք за 1$ .

Курс EUR: 49.54ք за 1.

Затраты :

Оплата хостинга: 170 ք.

Покупка домена: 100 ք

Закупка статей: 20 $.

Закупка ссылок: 0 ք.

ИТОГО: 922ք

Доход:

Заработок на контексте: 1,27 € (+ 0,50 €).

Заработок на партнерках: 0$ + 0ք.

Заработок на продаже ссылок: 0$ + 0 ք.

Предоставление услуг по созданию сайта: 2380 ք

ИТОГО: 2443 ք на 2406,4 ք больше, чем в прошлом месяце.

Чистая прибыль:1484,4 ք

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

С уважением, Мышак Пётр

Плагин галереи для WordPress NextGEN Gallery. Настройка исправление проблем.

Доброго времени суток, уважаемые читатели блога «Мои тараканы»!

NextGen Gelery

В сегодняшнем посте пойдет речь о плагине для WordPress NextGEN Gallery, при помощи которого можно создавать красочные галереи.

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

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

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

Настройка миниатюр

Настройка галереи

Так выглядит вкладка настроек миниатюр изображений в галерее. Давайте рассмотрим их детальней.

1. Override thumbnail settings (переопределить настройки миниатюр) — если мы ставим радиобатом на против отметки «Да» то нам открываются настройки миниатюры:

  • Thumbnail dimensions — размеры миниатюры (максимальные размеры — 120*90px).
  • Thumbnail quality — качество миниатюры — меньшее качество миниатюры позволит увеличить скорость загрузки страницы.
  • Thumbnail crop — эта опция указывает на то, как отображать миниатюру — обрезать миниатюру до одного размера, или пропорции миниатюры должны соответствовать оригиналу.
  • Thumbnail watermark — показать водяной знак.

2. Images per page — сколько нужно отображать изображений на странице.

3. Number of columns to display — во сколько колонок выстраивать миниатюры.

4. Enable AJAX pagination — предотвращает перезагрузку страниц при навигации по страницам галереи.

5. Add Hidden Images — если у вас галерея разбита на несколько страниц, при просмотре изображений в лайтбоксе будут показываться все имеющиеся в галерее изображения, а не только те, которые находятся на этой страничке (немного увеличивает скорость загрузки страницы).

6. Use imagebrowser effect — что значит эта настройка, я так и не разобрался, но даже на сайте разработчиков говорится, что эта функция устарела, и для её нормальной работы, возможно, нужно будет установить расширение для браузера.

7. Show slideshow link — показать ссылку на  слайд-шоу.

8. Slideshow link text — текстовая ссылка на слайд-шоу.

Настройка слайд шоу

setting_slide_shou

1. Maximum dimensions — размер окна просмотра слайд шоу.

2. Effect —  если честно, я не понял, для чего предназначен этот пункт настроек.

3. Interval — интервал смены изображений в секундах.

4. Image limit — количество изображений, отображаемых в слайд- шоу.

5. Enable flash slideshow — интегрировать флэш слайд-шоу для всех флэш поддерживаемых устройств.

6. Background music (url) — для слайд-шоу можно использовать фоновую музыку.

7. Stretch image — растягивать изображение.

8. Transition / fade effect — переход / эффект затухания.

9. Shuffle — перемешивать изображения.

10. Show next image on click — показывать следующее изображение по клику.

11. Show navigation bar — показать навигационный бар.

12. Use watermark logo — использовать изображение водяного знака в флэш-объекте.

13. Use slow zooming effect — использовать медленный эффект увеличения.

14. Try XHTML validation — использовать HTML-валидатор. Важно: Может привести к проблемам со старыми браузерами.

15. Show thumbnail link — показать ссылку на миниатюры.

16. Thumbnail link text — текст ссылки на миниатюры.

Проблемы в работе плагина NextGEN Gallery

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

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

На сайте разработчиков сайта говорится, что подобные конфликты могут возникать также с другими плагинами. Если у вас возникла подобная ситуация, то необходимо отключить все плагины (включая NextGEN Gallery). И потом снова подключать, сначала NextGEN Gallery, а потом поочередно остальные, пока не обнаружится тот плагин, который создавал конфликт.

3. Не работает слайд шоу — вместо слайдов  отображается пустое место. Причину этой проблемы стоит искать в настройках слайд-шоу. В пункте «Image limit» нужно указывать количество изображений, соответствующее количеству изображений в галерее. То есть,  если у вас в галерее 100 фото, то и в этом пункте нужно указывать 100 фото, если вы укажете, скажем, 20, то скорее всего, получите данный глюк.

4. Не обновляются настройки галереи. Вы произвели общие настройки галереи, создали галерею и вставили её в запись. Всё работает, но вам что-то стало нужно заменить. После обновления настроек в админке на странице ничего не меняется. Что бы вы ни делали, но настройки не вступают в силу. Оказывается, всё очень просто: нужно обновить настройки галереи непосредственно в самой статье.

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

Чтобы узнавать о новых статьях в блоге, предлагаю подписаться на обновления по RSS или по почте! Также Вы можете следить за моим щебетом в Твиттере.

С уважением, Мышак Пётр.

Как разблокировать учетную запись в Twitter

Доброго времени суток, уважаемые читатели блога Мои тараканы!

TwitterНедавно обнаружил что мой аккаунт в Twitter заблокирован, хотя никаких противоправных действий не производил.

Сказать по правде я холодно отношусь к Twitter’y как к социальной сети, и поэтому не сильно расстроился.  Но я не люблю когда что-то не работает (или работает не правильно), и самое главное в нем имелись люди которые подписывались на обновления моего блога, а мы своих не бросаем ;).

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

«В настоящее время действие вашей учётной записи временно приостановлено. Для получения дополнительной информации посетите эту страницу».

На страничке службы поддержки меня ждала следующая надпись:

«В настоящее время Твиттер не предоставляет поддержку на русском языке. Пожалуйста, ожидайте ответ от службы поддержки Твиттера на английском».

Я сначала даже немного опешил — перевести текст с английского я бы ещё смог (в крайнем случае, можно воспользоваться переводчиком Гугл), но написать просьбу  на английском проблематично (до 3-го курса я изучал немецкий). Но потом решил, что хуже не будет и заполнил все поля на русском:

Форма ввода

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

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

Теперь вы снова можете следить за обновлениями блога в Twitter 🙂 ну или же в RSS или по почте!

 С уважением, Мышак Пётр.