Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Всплывающая Панель

Автор arver, 08 мая 2014 15:36

Авторизуйтесь для ответа в теме

Сообщений в теме: 18

#1 arver

Активный участник

Пользователи
982 сообщений

Отправлено 08 Май 2014 - 15:36

Добрый день!
Установил всплывающую панель и возникли следующие трудности:
сам файл панели cartpanel.css.
Мне необходимо чтобы эта панель:
1)Всплывала не сверху страницы,а снизу.
2)Чтобы отображение этой панели было видно сразу,без скроллинга вниз.
3)Хотелось бы сделать эту панель по всей ширине экрана.
Мой аккаунт Sl-203796.

p.s.знаний из предыдущих тем хватило только на следующие изменения:
в файле cartpanel.css
строка примерно 35 изменил код margin: 0 auto; на text-align: center;
строка примерно 37 width: 1000px; изменил конкретную величину на %
строки 33 и 36 так же удалил
в итоге получилось следующее на основном мониторе все отлично по всей ширине экрана,смотрю с ноута(диагональ меньше) и снова у панели фиксированная ширина и пробелы по бокам,
поэтому вернул весь код в исходное состояние.

Наверх

#2 arver

Активный участник

Пользователи
982 сообщений

Отправлено 08 Май 2014 - 15:43

прилагаю картинку как должна выглядеть панель

Прикрепленные изображения

Наверх

#3 MikDark

Активный участник

Модераторы
6 468 сообщений

Отправлено 08 Май 2014 - 15:48

В шаблоне найдите строки:

#float-cart {
position: fixed;
top: 0;
left: 50%;

margin: 0 auto;
margin-left: -500px;
width: 1000px;
z-index: 10000;
color: #fff;
background-color: #3caa3c;
padding:10px 0 10px;
display: none;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900; border-radius:0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; -webkit-border-bottom-right-radius:15px;-webkit-border-bottom-left-radius:15px;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}

и замените на:

#float-cart {
				 position: fixed;
				 bottom: 0;
				 left: 0;
				 margin: 0 auto;
				 width:100%;
				 z-index: 10000;
				 color: #fff;
				 background-color: #3caa3c;
				 padding:10px 0 10px;
				 display: block;
font:10pt arial, helvetics, sens-serif;
border-bottom:1px solid #009900;
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
filter:alpha(opacity=80);
				 -moz-opacity: 0.8;
				 opacity: 0.8;
				 -khtml-opacity: 0.8;
				 behavior: url(http://design.xn----7sbahxjlc3aa3b.xn--p1ai/PIE.htc);
}

Наверх

#4 arver

Активный участник

Пользователи
982 сообщений

Отправлено 08 Май 2014 - 15:54

Изменил код на предложенный Вами,получилось следующее:
1)Всплывающая панель разделилась:
половина панели в нижнем левом углу,кнопка наверх справа,само слово наверх вообще справа вверху.
Не решилось:
Хотелось бы чтобы панель была видна сразу внизу экрана,сейчас надо немного проскроллить чтобы она появилась.
Панель по всей ширине экрана,как на картинке приложенной выше.

Наверх

#5 MikDark

Активный участник

Модераторы
6 468 сообщений

Отправлено 08 Май 2014 - 16:11

arver (08 Май 2014 - 15:54) писал:

Изменил код на предложенный Вами,получилось следующее:
1)Всплывающая панель разделилась:
половина панели в нижнем левом углу,кнопка наверх справа,само слово наверх вообще справа вверху.
Не решилось:
Хотелось бы чтобы панель была видна сразу внизу экрана,сейчас надо немного проскроллить чтобы она появилась.
Панель по всей ширине экрана,как на картинке приложенной выше.

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

$(document).ready(function(){
				 window.onscroll = function(){
												 if(window.pageYOffset>100){
																				 $('#float-cart').fadeIn();
												 } else{
																				 $('#float-cart').fadeOut();
												 }
				 }
});

Наверх

#6 arver

Активный участник

Пользователи
982 сообщений

Отправлено 08 Май 2014 - 16:17

Спасибо!

Наверх

#7 arver

Активный участник

Пользователи
982 сообщений

Отправлено 09 Май 2014 - 20:11

Добрый вечер!С Праздником!!!
Помогите пожалуйста привести всплывающую панель к нужному виду(панель_итог.jpg)!
1)Дублируется кнопка наверх под цифрами 1 изображение панель.jpg
2)Как добавить белую полосу(на картинке она выделена красным под цифрой 2)
p.s.пробовал добавлять свойство border-bottom в файл cartpanel.css border-bottom:1px solid #FFFFFF;
3)Не получилось сделать слова Доставка и Как оформить заказ жирным шрифтом и без подчеркивания.
Пробовал добавить в файл style.css

#menu{
font-weight: bold;
text-decoration: none;
}

4)Расположить элементы на панели как на картинке панель_итог.jpg

Прикрепленные изображения

Наверх

#8 arver

Активный участник

Пользователи
982 сообщений

Отправлено 09 Май 2014 - 23:50

up

Наверх

#9 arver

Активный участник

Пользователи
982 сообщений

Отправлено 10 Май 2014 - 10:33

help

Наверх

#10 daria_dnk

Активный участник

Модератоpы
482 сообщений

Отправлено 10 Май 2014 - 10:53

arver (09 Май 2014 - 23:50) писал:

up

Здравствуйте!
В шаблоне HTML найдите строку

 <a href='#' id='Go_Top'></a>

замените на

 <a href='#' style="display:none;" id='Go_Top'></a>

Строки

<ul>
												 <li id="back-top"><a href="#top">Вверх <span>&#x25B2;</span></a></li>
				 <ul>

замените на

<div class="moveup"><a href="#top">Вверх <span>&#x25B2;</span></a></div>

Удалите код

<img src="http://st.hozbe.ru/9/1122/413/logo_mini.png">
<a href="http://hozbe.ru/page/Dostavka-i-oplata">Доставка</a>
<a href="http://hozbe.ru/page/Kontakty">Как оформить заказ</a>
<img src="http://st.hozbe.ru/8/1062/099/probel30px.png"> 8 (499) 888-88-88</li>

и после строк

<ul onclick="document.location='{CART_URL}';">
{% IF cart_count_empty %}
<li class="cartSumP" style="cursor: pointer;"><a>Корзина пустая&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}</a></li>
{% ELSE %}
{% FOR cart_sum %}
<li class="cartSumP" style="cursor: pointer;"><a>Товаров на: {cart_sum.NOW | money_format}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{% IF cart_sum.NOW<SETTINGS_STORE_ORDER_MIN_ORDER_PRICE %}Минимальная сумма заказа: {SETTINGS_STORE_ORDER_MIN_ORDER_PRICE | money_format}{% ELSE %}Оформить заказ{% ENDIF %}</a></li>
{% ENDFOR %}
{% ENDIF %}
</ul>

Добавьте



<div style="float:right;margin-right:300px">
<a href="http://hozbe.ru/page/Dostavka-i-oplata">Доставка</a>
<a href="http://hozbe.ru/page/Kontakty">Как оформить заказ</a>
</div>

Также добавьте в style.css строку

.moveup
{
position: fixed; bottom:10px; right: 5px; width: 70px;z-index:100;
}

Найдите в style.css код

#menu{
	 font-weight: bold;
		 text-decoration: none;
}

замените на

#menu{
	 font-weight: bold;
		 text-decoration: none;
	 width: 100%;
}

Добавить белую полоску (2):
в шаблоне style.css найдите строку

#float-cart {
								 position: fixed;
								 bottom: 0;
								 left: 0;
								 margin: 0 auto;
								 width:100%;
								 z-index: 10000;
								 color: #fff;
								 background-color: #e7e7e7;
								 padding:10px 0 10px;
								 display: block;
font:10pt arial, helvetics, sens-serif;
border: 5px color: #fff;
}

замените на

#float-cart {
								 position: fixed;
								 bottom: 0;
								 left: 0;
								 margin: 0 auto;
								 width:100%;
								 z-index: 10000;
								 color: #fff;
								 background-color: #e7e7e7;
								 padding:10px 0 10px;
								 display: block;
font:10pt arial, helvetics, sens-serif;
border: 5px color: #fff;
border-top: 5px solid white;
}

Убрать подчеркивание и сделать жирным указанные ссылки:
в шаблоне html найдите строки

<a href="http://hozbe.ru/page/Dostavka-i-oplata">Доставка</a>
	 <a href="http://hozbe.ru/page/Kontakty">Как оформить заказ</a>

замените их на

<a style="font-weight:bolder;text-decoration:none;" href="http://hozbe.ru/page/Dostavka-i-oplata">Доставка</a>
<a style="font-weight:bolder;text-decoration:none;" href="http://hozbe.ru/page/Kontakty">Как оформить заказ</a>

Наверх

#11 arver

Активный участник

Пользователи
982 сообщений

Отправлено 10 Май 2014 - 11:59

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

Наверх

#12 Castiel

Активный участник

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 10 Май 2014 - 12:22

arver (10 Май 2014 - 11:59) писал:

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

В шаблоне HTML удалите код

<a href='#' style="display:none;" id='Go_Top'></a>

Наверх

#13 arver

Активный участник

Пользователи
982 сообщений

Отправлено 10 Май 2014 - 13:06

А возможно чтобы при нажатии наверх было плавный переход,а не резкий скачок наверх страницы?

Наверх

#14 Castiel

Активный участник

Модераторы
3 519 сообщений

ГородНижний Новгород

Отправлено 10 Май 2014 - 13:48

arver (10 Май 2014 - 13:06) писал:

А возможно чтобы при нажатии наверх было плавный переход,а не резкий скачок наверх страницы?

Здравствуйте, редактируем шаблон HTML
Находим

<div class="moveup"><a href="#top">Вверх <span>&#x25B2;</span></a></div>

Заменяем на

<div class="moveup"><a href="#" id="top">Вверх <span>&#x25B2;</span></a></div>

Далее редактируем файл main.js
Находим

$(function() { 
  $("#Go_Top").scrollToTop();
});

Заменяем на

$(function() { 
  $("#top").scrollToTop();
});

Наверх

#15 arver

Активный участник

Пользователи
982 сообщений

Отправлено 10 Май 2014 - 13:56

Спасибо все отлично!

Наверх

#16 arver

Активный участник

Пользователи
982 сообщений

Отправлено 10 Май 2014 - 23:06

Доброй ночи,помогите еще немного подкорректировать панель..
1)Как мне уменьшить ее по высоте?(чтобы она была в размер картинки в нижнем левом углу,ее высота 25px)

аккаунт sl-203796

Наверх

#17 arver

Активный участник

Пользователи
982 сообщений

Отправлено 11 Май 2014 - 00:49

help

Наверх

#18 daria_dnk

Активный участник

Модератоpы
482 сообщений

Отправлено 11 Май 2014 - 10:41

arver (11 Май 2014 - 00:49) писал:

help

Здравствуйте!
В шаблоне style.css Замените код

#float-cart {
position: fixed;
bottom: 0;
left: 0;
margin: 0 auto;
width:100%;

z-index: 10000;
color: #fff;
background-color: #e7e7e7;
padding:10px 0 10px;
display: block;
font:10pt arial, helvetics, sens-serif;
border: 5px color: #fff;
border-top: 2px solid white;
}

на

#float-cart {
position: fixed;
bottom: 0;
left: 0;
margin: 0 auto;
width:100%;

z-index: 10000;
color: #fff;
background-color: #e7e7e7;
display: block;
font:10pt arial, helvetics, sens-serif;
border: 5px color: #fff;
border-top: 2px solid white;
max-height: 25px;
min-height: 25px;
}

поправить расположение картинки: в шаблоне HTML найдите код (659)

 <div style="float:left;margin-right:30px;margin-top:-10px">

замените на

<div style="float:left;margin-right:30px;">

Наверх

#19 arver

Активный участник

Пользователи
982 сообщений

Отправлено 11 Май 2014 - 11:51

Спасибо за помощь!

Наверх

Обратно в Изменение общей стилистики

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Всплывающая Панель

Прикрепленные изображения

Прикрепленные изображения

Количество пользователей, читающих эту тему: 0

Войти

Google поиск