doc.3dn.ru
Вторник, 05.11.2024, 22:35
Приветствую Вас Гость | RSS
 
Главная Каталог статейРегистрацияВход
Меню сайта
Категории каталога
HTML [2]
JavaScript [1]
Разное [5]
Joomla! [1]
CMS [6]
Обзор свободных систем управленя контентом
WordPress [1]
Наш опрос
Нужны ли на сайте видео уроки по Flash?
Всего ответов: 489


Главная » Статьи » В помощь WEB-мастеру » Joomla!

Создаем индикатор загрузки сайта
Создаем индикатор загрузки сайта (для CMS Joomla!)

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

Приступим. 

1. Открываем файл index.php шаблона.

2. В любом месте между тегами <head> и </head> добавляем код:

<script type="text/javascript">
function hideLoading()
 
{document.getElementById('pageIsLoading').style.display = 'none';}
</script>

3. Сразу после тега <body> добавляем код: 

<div id="pageIsLoading" style="position:absolute; 
display:block;
padding-left:44px;
padding-right:12px;
width:auto;
height:46px;
line-height:46px;
border:1px solid #890000;
color:#000000;
font-weight:bold;
background-color:#e5e5e5;
background-image: url(http://www.путь_к_папке_images/имя_картинки.gif);
background-position: 6px center;
background-repeat: no-repeat;"
>
<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined')
{
var window_width; var window_height;
if( typeof( window.innerWidth ) == 'number' )
{
window_width = window.innerWidth; window_height = window.innerHeight;
}
else
if(document.documentElement && ( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) )
{
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
}
else
if(document.body && ( document.body.clientWidth ||
document.body.clientHeight ) )
{
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 200) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.left = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Загружается... Ждите...
</div>

Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус. Вместо "имя_картинки" введите название файла изображения, которое вы желаете показать на индикаторе. Лучше всего сюда подойдет анимированный GIF с изображением, например, песочных часов. Размер картинки при указанных в примере установках - примерно 32х32 пикселя.

Индикаторы загрузки так же самим можно собрать с помощью конструктора Ajaxload.

4. Непосредственно перед тегом </body> в самом конце файла index.php добавляем код:

<script type="text/javascript"> 
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
}
else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
}
else {
hideLoading();
}
</script>

5. Закидываем нужную картинку в папку images вашего сайта, или в любую другую, путь к которой будет указан в вашем коде.

6. Любуемся результатом...


При написании статьи использованы исходники от D4.


Источник: http://help.joom.ru
Категория: Joomla! | Добавил: doc (26.02.2009) | Автор: doc
Просмотров: 2301 | Рейтинг: 0.0/0 |

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Поиск
Друзья сайта
www.work-zilla.com
Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 0


Copyright MyCorp © 2024
Бесплатный хостинг uCoz