Вопрос Улучшения выдвижного блока. CSS + jQuery

Пользователь · Регистрация: 26.04.2012

Здравствуй Vector,
Вот так сейчас у меня все работает.
Вектор помоги собрать пожалуйста сборочку такую, а то я то то сейчас попробовал у меня не вышло =( походу надо мне книжки читать срочно по php java =)

Код HTML:

<div class="consultant">
	<a class="handle" href="http://jemand.ru">Content</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
	<center><h3><span lang="ru">Консультант Онлайн</span></h3><br><center>
	<span lang="ru">
		<div class="box">
  <div class="box-heading">
  <div class="box-content" style="text-align: center;">

		<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
		<a href="skype:<?php echo $code; ?>?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a>

<!-- webim button --><a href="/webim/client.php?locale=ru&amp;style=simplicity" target="_blank" onclick="if(navigator.userAgent.toLowerCase().indexOf('opera') != -1 &amp;&amp; window.event.preventDefault) window.event.preventDefault();this.newWindow = window.open('/webim/client.php?locale=ru&amp;style=simplicity&amp;url='+escape(document.location.href)+'&amp;referrer='+escape(document.referrer), 'webim', 'toolbar=0,scrollbars=0,location=0,status=1,menubar=0,width=640,height=480,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;"><img src="/webim/b.php?i=webim&amp;lang=ru" border="0" width="163" height="61" alt=""/></a><!-- / webim button -->
		
	</div>


</div>
<div class="box">
  <div class="box-heading">
  <div class="box-content" style="text-align: center;">
<body>
Время работы оператора: Пн-пт с 8:00 по 17:00 МСК
<br>
<font color="#CC0000">*******</font>
</body></div></div>
<center>
<div class="otstup">
<a href="">Обратная связь</a>

</center>
</div>
	</span>
</div>

javacript, my

<script src="jquery.tabslideout.v1.2.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
	$('.consultant').tabSlideOut({							//Класс панели
		tabHandle: '.handle',						//Класс кнопки
		pathToTabImage: 'button.jpg',				//Путь к изображению кнопки
		imageHeight: '400px',						//Высота кнопки
		imageWidth: '65px',						//Ширина кнопки
		tabLocation: 'left',						//Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
		speed: 300,								//Скорость анимации
		action: 'click',								//Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
		topPos: '450px',							//Отступ сверху
		fixedPosition: false						//Позиционирование блока false - position: absolute, true - position: fixed

	});
});
</script>

И CSS. про тот который я забыл упоминать выше)

PHP код:



.consultant {
     width: 200px;
     background: url(); /* Цвет фона */
     padding: 5px; /* Поля вокруг текста */
     color: #6E6E6E; /* Цвет текста */
     border: #6E6E6E 1px solid;
}

PS сори я твой фон с форума поставил себе временно пока не нарисую что нибудь) извиняюсь)

Администратор · Регистрация: 27.02.2009

Как-то так...

PHP код:



<div class="consultant">
    <div class="btn">
        <a class="handle" href="http://jemand.ru"></a>
    </div>
    <div class="block">
        <h3><span>Консультант Онлайн</span></h3><br>    
        <div class="box-heading" style="text-align: center;">
            <script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>
            <a href="skype:<?php echo $code; ?>?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_blue_white_124x52.png" style="border: none;" width="124" height="52" alt="Skype Me™!" /></a>
            <!-- webim button --><a href="/webim/client.php?locale=ru&amp;style=simplicity" target="_blank" onclick="if(navigator.userAgent.toLowerCase().indexOf('opera') != -1 &amp;&amp; window.event.preventDefault) window.event.preventDefault();this.newWindow = window.open('/webim/client.php?locale=ru&amp;style=simplicity&amp;url='+escape(document.location.href)+'&amp;referrer='+escape(document.referrer), 'webim', 'toolbar=0,scrollbars=0,location=0,status=1,menubar=0,width=640,height=480,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;"><img src="/webim/b.php?i=webim&amp;lang=ru" border="0" width="163" height="61" alt=""/></a><!-- / webim button -->        
        </div>
        <div class="box">
            <div class="box-heading">
                <div class="box-content" style="text-align: center;">
                    Время работы оператора: Пн-пт с 8:00 по 17:00 МСК
                    <br>
                    <font color="#CC0000">*******</font>
                </div>
            </div>
            <div class="otstup">
                <a href="http://.ru/index.php?route=information/contact" class="sb email text">Обратная связь</a>
            </div>
        </div>
    </div>
</div>

Чет наворочено там...

Пользователь · Регистрация: 26.04.2012

Цитата:

Чет наворочено там...

Что есть то есть, куча боксов врезано)

Вот так блок стал полупрозрачный а кнопка нормальная. (это уже хорошо)
Но картинка не меняться при нажатии на кнопку. (онлайн Консультант)
Я предполагаю что это где то в регулируется. мб я и не прав яж Алеша ешё тот)

Администратор · Регистрация: 27.02.2009

PHP код:



.consultant {

}
.consultant .block {
    background: url("http://_.ru/images/bg_1.jpg") repeat scroll 0 0 transparent;
    border: 1px solid #6E6E6E;
    color: #6E6E6E;
    padding: 5px;
    width: 200px;    
    /*opacity: 0.7;*/
}
.consultant .btn a {
    display: block;
}
.consultant .btn a:hover {
    display: block;
}

Где у свойств .consultant .btn a и .consultant .btn a:hover фоновые картинки? (то есть изображения кнопки в нормальном и состоянии наведения)

Пользователь · Регистрация: 26.04.2012

Цитата:

Где у свойств .consultant .btn a и .consultant .btn a:hover фоновые картинки? (то есть изображения кнопки в нормальном и состоянии наведения)

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

Администратор · Регистрация: 27.02.2009

Я вот про что:

PHP код:



.consultant .btn a {
    background: url("/button.jpg") no-repeat;
    display: block;
    height: 400px;
    width: 65px;
}
.consultant .btn a:hover {
    background: url("/button_hover.jpg");
}

у параметра background указать нужно название картинки для кнопки

Пользователь · Регистрация: 26.04.2012

Сss

PHP код:



.consultant .block {
    background: url("") repeat scroll 0 0 transparent;
    border: 1px solid #6E6E6E;
    color: #6E6E6E;
    padding: 5px;
    width: 200px;    
}
.consultant .btn а {
    background: url("") no-repeat;
    display: block;
    height: 400px;
    width: 65px;
}
.consultant .btn а :hover {
    background: url("image/GC_button_380x62_up.png");
}

Блин что то не работает такое решение... =(( Мб что то в квери надо меняться все таки?

Пользователь · Регистрация: 26.04.2012

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

Мир

Пользователь · Регистрация: 07.08.2014

Спасибо помогло

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Использование сервиса Я.RSS от Yandex для улучшения индексации форума на vBulletin	noname	Поисковая оптимизация (SEO, RSS)	13	03.11.2012 04:40
Модуль Раздвижное вертикальное меню на jQuery для блока CMPS	Vector	Модули для vba CMPS	0	30.09.2011 18:09
Новости Новый билд Opera 12 Wahoo: улучшения в визуализации страниц и Экспресс-панели	Jeffry Dahmer	Новости Software	0	05.09.2011 12:17
Инфо Bins — утилита для улучшения таскбара Windows 7	Vector	Windows 7	0	26.04.2011 14:29
Статья Выбор блока питания	Vector	Блоки питания, UPS (ИБП)	1	27.07.2010 10:47

Шмальчик #18
-10 МГц Пользователь Вес репутации: 0 Регистрация: 26.04.2012 Сообщений: 65 Сказал(а) спасибо: 21 Спасибок 2 в 2 сообщениях	Re: Улучшения выдвижного блока. CSS + jQuery - 10.01.2014, 01:23 Здравствуй, вектор можно тебя попросить, подчистить в своих ответах ссылку на мой сайт. Мир

JIuC #19
00 МГц Пользователь Вес репутации: 0 Регистрация: 07.08.2014 Адрес: Кыргызстан Сообщений: 1 Сказал(а) спасибо: 0 Спасибок 0 в 0 сообщениях	Re: Улучшения выдвижного блока. CSS + jQuery - 07.08.2014, 14:50 Спасибо помогло