—»     —»   Плавающая панель социальных сетей на jQuery и CSS
  Раздел: Java-Скрипты, Руководства   Комментариев: 2  

Плавающая панель социальных сетей на jQuery и CSS



Сегодня мы хотим поделиться с вами еще одним руководством по созданию привлекательной плавающей панели, используя jQuery и javascript. Панель будет прокручиваться вместе со страницей. Мы расскажем вам об этом в виде пошагового процесса разработки, от создания PHP-файла до форматирования CSS. На панели можно разместить различные элементы, но в последнее время такие панели используются для размещения иконок социальных сетей, важной информации и так далее. Некоторые отличные примеры применения можно увидеть на сайтах Meebo и Wibiya. Не забывайте, что нет определённых правил по поводу того, что конкретно должно быть размещено на этой панели.

Вы можете разместить:

- социальные иконки
- рекламу
- выделить важную информацию (афишу, анонс и т.д.)
- контактные данные
- опросы / обратную связь

Как это работает?

Сегодня мы будем разрабатывать красивую плавающую панель с подсказками. Плавающая панель будет отображаться в верхней части страницы. Плотность отображения панели будет постепенно повышаться и, более того, будет отображаться интересная подсказка, как вы можете наблюдать на втором демо. Этап разработки кода крайне прост, а для того чтобы сделать его ещё более простым, мы объясним вам всё пошагово.

Плавающая панель социальных сетей на jQuery и CSS

Разработка HTML-кода

Первое, что нам нужно сделать – написать код HTML. Для начала нам надо создать демо-страницу, а затем сохранить её как demo.php. Теперь мы можем продолжить с внедрением библиотеки javascript.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Floating bar by tutorialshock</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>
</head>
<body>
</body>
</html>

Настройка CSS

Плавающая панель социальных сетей на jQuery и CSS

/*This is the main container, it's 100 % width so it can always expand horizontally to the totality of the screen.*/
div.scr_esp_down{
width:100%;
height:51px;
/* This is the 1 pixel background image that expands horizontally */
background: url(images/toolbar_make.jpg) repeat-x;
position:fixed;
top:0;
left:0;
/* We place it in front of the rest*/
z-index:9999;
/* We start the opacity from 10%*/
opacity:0.10;
filter:alpha(opacity=10);
/* We initialize the container as hidden, then we use this operator because we need to reserve the area that the floating bar is going to occupy once it’s shown*/
visibility:hidden;
}

/* This div contains the image with the floating bar’s information such as the icons, main message and more. We initialize it on the horizontal center of the page*/

div.scr_esp_down div{
width:100%;
height:51px;
background:url(images/IS_toolbar_img.jpg) no-repeat top center;
}

/*This class applies for the tooltip that is going to show on the 2nd demo’s roll over, on this case we use display none due to the fact that we no longer need to save space for this

image*/
img.img_animate{
display:none;
}

Теперь время оставшегося кода HTML

<div id="toolbar" align="center" class="scr_esp_down">
<div>
</div>
<img src="images/tooltip_2.jpg" border="0" class="img_animate" />
</div>
/* This div sets a fixed height to the page so the scroll gets visible */
<div style="height:3000px;">
</div>

И, наконец, финальная часть – javascript (именно эта часть и будет творить волшебство)

/* This function avoids having conflicts with other jQuery scripts, we suggest you to always use it.*/

var $jx= jQuery.noConflict();

/* On this validation we identify the browser to assign it the superior value of the vertical scroll, because you must remember that every browser plays by its own rules*/

Плавающая панель социальных сетей на jQuery и CSS

$jx(window).scroll(function () {
    if (whichBrs()=='chrome')
    {
/* Identifies the superior position of the scroll in Chrome*/
        $scroll_final=document.body.scrollTop;
    }
    if (whichBrs()=='Internet Explorer' || whichBrs()=='Firefox' )
    {
/* Identifies the superior position of the scroll in Firefox and Internet Explorer*/
        $scroll_final=document.documentElement.scrollTop;
    }

/* If you need to add additional browsers then you have to research which function establishes the top position on each one of them*/

/* On this part we identify the main container*/
    var toolbarid=document.getElementById('toolbar');
/* If the superior value of the scroll goes below 300, it means that the toolbar must not be shown and it will only be displayed once this value has been passed */
    if ($scroll_final < 300)
    {
        toolbarid.style.visibility='hidden';
    }
   /* Here’s where the fade in animation begins*/

/* On this part we check the top value of the scroll and then we make 3 different opacity ranges to recreate the fade in effect. if you wish a softer effect you can simply add some

extra ranges*/

Плавающая панель социальных сетей на jQuery и CSS

if ($scroll_final > 300 && $scroll_final  <600 )
    {
        toolbarid.style.opacity='0.20';
        toolbarid.style.filter='alpha(opacity=20)';
        toolbarid.style.visibility='visible';
    }
    if ($scroll_final >600 && $scroll_final <1000 )
    {
        toolbarid.style.opacity='0.40';
        toolbarid.style.filter='alpha(opacity=40)';
        toolbarid.style.visibility='visible';
    }

    if ($scroll_final >=1000)
    {
        toolbarid.style.opacity='1.00';
        toolbarid.style.filter='alpha(opacity=100)';
        toolbarid.style.visibility='visible';
    }
}
);

var $bt= jQuery.noConflict();
var time=0;

/*Coming next is the code that handles the tooltip*/

$bt(document).ready(function() {

/* We utilize the slideToggle function from jQuery to animate the tooltip, you can try another types of speeds and animation by visiting  http://api.jquery.com/category/effects/ */

    $bt("#toolbar").stop(true,true).mouseover(function () {

    /* This part displays the tooltip*/

    if (time==0)
        {
            $bt(".img_animate").slideToggle("slow");
            time=1;
        }
    });

    /* And this part hides the tooltip*/

    $bt(".img_animate").click(function () {
        if (time==1)
        {
            $bt(".img_animate").slideToggle("slow");
            time=0;
        }
    });
});

/* Here’s where we make the tooltip to turn invisible once we click outside the tooltip’s image*/

$(document).bind('click', function(e){
    var $clicked = $(e.target);
    if (!($clicked.is('.img_animate') || $clicked.parents().is('.img_animate'))) {
        $bt(".img_animate").stop(true, true);
        time=0;
        $bt(".img_animate").hide();
    }
});

/* Identifies which browser is being utilized */

function whichBrs() {
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("opera") != -1) return 'Opera';
    if (agt.indexOf("staroffice") != -1) return 'Star Office';
    if (agt.indexOf("webtv") != -1) return 'WebTV';
    if (agt.indexOf("beonex") != -1) return 'Beonex';
    if (agt.indexOf("chimera") != -1) return 'Chimera';
    if (agt.indexOf("netpositive") != -1) return 'NetPositive';
    if (agt.indexOf("phoenix") != -1) return 'Phoenix';
    if (agt.indexOf("firefox") != -1) return 'Firefox';
    if (agt.indexOf("chrome") != -1) return 'chrome';
    if (agt.indexOf("safari") != -1) return 'Safari';
    if (agt.indexOf("skipstone") != -1) return 'SkipStone';
    if (agt.indexOf("msie") != -1) return 'Internet Explorer';
    if (agt.indexOf("netscape") != -1) return 'Netscape';
    if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
    if (agt.indexOf('\/') != -1) {
        if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
        return navigator.userAgent.substr(0,agt.indexOf('\/'));}
    else return 'Netscape';} else if (agt.indexOf(' ') != -1)
    return navigator.userAgent.substr(0,agt.indexOf(' '));
    else return navigator.userAgent;
}

И всё готово! Мы почти не потратили времени, но успели разработать привлекательную плавающую панель. Если у вас возникли какие-то проблемы или вопросы, отпишитесь в комментариях. Также не будет лишним, если вы поделитесь с нами вашими вариантами реализации панели. Теперь у вас есть возможность разработать панель и разместить полезные элементы на ней.

Посмотреть демо 1 | Посмотреть демо 2 | Посмотреть в действии | Скачать исходник
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 11571   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 ноября 2011 @ 14:50
Написал: Кап — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Угу. Только в ОПЕРА она не работает
Комментарий #2: 31 августа 2012 @ 15:28
Написал: Alluru — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
После установки на сайт не работают спойлеры в чем может быть дело ?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30