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

[romatex]

miyako (11 Апрель 2013 - 10:41) писал:

по первому пункту - вы добавили свойство -

z-index: 9999

?
Как в сообщении - http://forum.storela...лок/#entry58951

Благодарю! С z-index все получилось! Вот только заметил что когда нажимаешь на увеличение фото товара (на странице товара), то моё меню и там показывается поверх увеличенного фото. Как это исправить?

По второму пункту - необходимо сделать так, как тут http://corp.ign.com/

[miyako]

romatex (11 Апрель 2013 - 13:05) писал:

Благодарю! С z-index все получилось! Вот только заметил что когда нажимаешь на увеличение фото товара (на странице товара), то моё меню и там показывается поверх увеличенного фото. Как это исправить?

По второму пункту - необходимо сделать так, как тут http://corp.ign.com/

Может быть вам больше подойдет такой скрипт - http://ruseller.com/...p?rub=32&id=156

Подключение :

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.scrollFollow.js"></script>
<script type="text/javascript">
	  $( document ).ready( function ()
   {
	$( '#mainNav' ).scrollFollow(); // выбираем элемент с id example и просто прицепляем ему ф-цию
   }
  );
	</script>

в шаблоне HTML

и нужно загрузить файл jquery.scrollFollow.js на сайт.

[AlexP_RUS]

Здравствуйте, подскажите пожалуйста следующее:

1. Мне нужно чтобы скользящий блок показывался только на странице товара в правом блоке. Но дело в том, что правый блок у меня прописан в HTML, и при вставке туда кода скользящий блок показывается абсолютно на всех страницах сайта. Как сделать чтобы он показывался только на странице товара в правом блоке?
(хочу сделать так, как реализованно на этом сайте: http://dvr-group.ru/...i_dvd/AVIS/407/)

2. Повставлял предложеные коды с первой страницы, потом немного исправил их как сказал ТС(kadi4), также удалил ширину, но скользащий блок не удалось сделать как например тут http://chipok.com/ca...catalog/Датчики
Посмотрите как он ведёт себя у меня на сайте и подскажите как это исправить. Так же скользящий блок не работает в хроме, вместо целого блока там одна только надпись.

Коды которые сейчас у меня стоят
Main.js:

$(document).ready(function(){
var obj = $('#sticky');
var offset = obj.offset();
var topOffset = offset.top;
var leftOffset = offset.left;
var marginTop = obj.css("marginTop");
var marginLeft = obj.css("marginLeft");
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= topOffset){
obj.css({
marginTop: -topOffset,
// marginLeft: leftOffset,
position: 'fixed',
});
}
if (scrollTop < topOffset){
obj.css({
marginTop: 0,
// marginLeft: marginLeft,
position: 'relative',
});
}
});
});

Main.css

#sticky {
margin-top: 11px;
padding:15px;
background: rgba(255,255,255,1);
border:1px solid #ddd;
font-size:12px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float:left
}
/* заголовок стикера*/
#sticky h5{
font-size:18px;
font-weight: bold;
}
/* текст в самом стикере */
#sticky p{
text-align: left;
padding: 5px;
}

[miyako]

AlexP_RUS (14 Июль 2013 - 12:47) писал:

Здравствуйте, подскажите пожалуйста следующее:

1. Мне нужно чтобы скользящий блок показывался только на странице товара в правом блоке. Но дело в том, что правый блок у меня прописан в HTML, и при вставке туда кода скользящий блок показывается абсолютно на всех страницах сайта. Как сделать чтобы он показывался только на странице товара в правом блоке?
(хочу сделать так, как реализованно на этом сайте: http://dvr-group.ru/...i_dvd/AVIS/407/)

2. Повставлял предложеные коды с первой страницы, потом немного исправил их как сказал ТС(kadi4), также удалил ширину, но скользащий блок не удалось сделать как например тут http://chipok.com/ca...catalog/Датчики
Посмотрите как он ведёт себя у меня на сайте и подскажите как это исправить. Так же скользящий блок не работает в хроме, вместо целого блока там одна только надпись.

Коды которые сейчас у меня стоят
Main.js:

$(document).ready(function(){
var obj = $('#sticky');
var offset = obj.offset();
var topOffset = offset.top;
var leftOffset = offset.left;
var marginTop = obj.css("marginTop");
var marginLeft = obj.css("marginLeft");
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= topOffset){
obj.css({
marginTop: -topOffset,
// marginLeft: leftOffset,
position: 'fixed',
});
}
if (scrollTop < topOffset){
obj.css({
marginTop: 0,
// marginLeft: marginLeft,
position: 'relative',
});
}
});
});

Main.css

#sticky {
margin-top: 11px;
padding:15px;
background: rgba(255,255,255,1);
border:1px solid #ddd;
font-size:12px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float:left
}
/* заголовок стикера*/
#sticky h5{
font-size:18px;
font-weight: bold;
}
/* текст в самом стикере */
#sticky p{
text-align: left;
padding: 5px;
}

1) В шаблоне HTML оберните Ваш код в условие:

{%IF MOD_LNAME=goods%}
<div id="sticky"><h5>Скользящий блок</h5>
						<p>Это скользящий блок. Здесь можно располагать важную информацию!</p>
						</div>
{%ENDIF%}

2)
Найдите код:

#sticky {
margin-top: 11px;
padding: 15px;
background: rgba(255,255,255,1);
border: 1px solid #ddd;
font-size: 12px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}

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

#sticky {
margin-top: 11px;
padding: 15px;
background: rgba(255,255,255,1);
border: 1px solid #ddd;
font-size: 12px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
width: 171px;
}

[AlexP_RUS]

Обернул код в HTML, после этого на всех страницах сайта кроме товаров стала выскакивать красным "1 JS ошибка".

Так же в коде прописан отступ "margin-top: 11px;", но при крокрутке страницы скользящий блок вплотную прилипает к верхнему блоку.

[miyako]

AlexP_RUS (14 Июль 2013 - 17:32) писал:

Обернул код в HTML, после этого на всех страницах сайта кроме товаров стала выскакивать красным "1 JS ошибка".

Так же в коде прописан отступ "margin-top: 11px;", но при крокрутке страницы скользящий блок вплотную прилипает к верхнему блоку.

Код:

{%IF MOD_LNAME=goods%}
						<div id="sticky"><h5>Скользящий блок</h5>
						<p>Это скользящий блок. Здесь можно располагать важную информацию!</p>
						</div>
					   {%ENDIF%}

замените на:

						<div id="sticky" {%IFNOT MOD_LNAME=goods%}style="display:none;"{%ENDIF%}><h5>Скользящий блок</h5>
						<p>Это скользящий блок. Здесь можно располагать важную информацию!</p>
						</div>

[AlexP_RUS]

Ошибка исчезла, спасибо. А что на счёт

Цитата

Так же в коде прописан отступ "margin-top: 11px;", но при прокрутке страницы скользящий блок вплотную прилипает к верхнему блоку.

[miyako]

AlexP_RUS (14 Июль 2013 - 19:42) писал:

Ошибка исчезла, спасибо. А что на счёт

Потому что месторасположение блока меняет js код.
А Вам нужно с отступом? В вашем примере http://chipok.com/ca...catalog/Датчики нет отступа

[AlexP_RUS]

Цитата

Потому что месторасположение блока меняет js код.
А Вам нужно с отступом? В вашем примере http://chipok.com/ca...catalog/Датчики нет отступа

Это не мой пример, но и там есть отступ.
Я хочу как здесь http://dvr-group.ru/...i_dvd/AVIS/407/
Мне не нужно чтобы скользящий блок вплотную прилипал к верхостоящему блоку в правой колонке(блоке).
Всё, я уже сам поправил, прописал в коде marginTop: 11

if (scrollTop < topOffset){
obj.css({
marginTop: 11,
// marginLeft: marginLeft,
position: 'relative',
});

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

[AlexP_RUS]

Подскажите срочно, как вставить цену товара и кнопку "в корзину" в скользящий блок? (надо как в примере)

[miyako]

AlexP_RUS (15 Июль 2013 - 12:59) писал:

Это не мой пример, но и там есть отступ.
Я хочу как здесь http://dvr-group.ru/...i_dvd/AVIS/407/
Мне не нужно чтобы скользящий блок вплотную прилипал к верхостоящему блоку в правой колонке(блоке).
Всё, я уже сам поправил, прописал в коде marginTop: 11

if (scrollTop < topOffset){
obj.css({
marginTop: 11,
// marginLeft: marginLeft,
position: 'relative',
});

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

Найдите код в main.js:

if (scrollTop >= topOffset){
  obj.css({
   marginTop: -topOffset,
   // marginLeft: leftOffset,
   position: 'fixed',
  });
}

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

if (scrollTop >= topOffset){
  obj.css({
   marginTop: -topOffset+22,
   // marginLeft: leftOffset,
   position: 'fixed',
  });
}

[AlexP_RUS]

Спасибо, отступ появился.

Подскажите, как вставить цену товара и кнопку "в корзину" в скользящий блок? (надо как в примере)

Также, когда страницу прокручиваешь вниз, а потом обновляешь её, то скользящий блок исчезает, и появляется он опять только тогда, когда прокрутишь страницу скролом. Как исправить?

[Koderhan]

AlexP_RUS (15 Июль 2013 - 16:09) писал:

Спасибо, отступ появился.

Подскажите, как вставить цену товара и кнопку "в корзину" в скользящий блок? (надо как в примере)

Также, когда страницу прокручиваешь вниз, а потом обновляешь её, то скользящий блок исчезает, и появляется он опять только тогда, когда прокрутишь страницу скролом. Как исправить?

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:

.myblock4 {
text-align: center;
display: block;
}

В файле "main.js".
Добавить в начало файла код:

function toPrint() {
var f = $('.goodsDataMainModificationDataBlock').html();
var g = $('.goodsDataFormSubmitButton').html();
console.log(f);
$('.myblock4').html(f);
$('.myblock4').append(g);
$('.myblock4 input').click(function(){$('.goodsDataMainOrder .goodsDataFormSubmitButton #ToCart').click()})
}

В файле "HTML".
После кода:

<div id="sticky" {%IFNOT MOD_LNAME=goods%}style="display:none;"{%ENDIF%}><h5>Скользящий блок</h5>
<p>Это скользящий блок. Здесь можно располагать важную информацию!</p>
<img src="http://files.storeland.net/f670/191/bok_buy.png" />

Добавить:

<div class="myblock4">
						
					 </div>

В файле "main.js".
Найти код:

if (scrollTop >= topOffset){
obj.css({
marginTop: -topOffset+22,
// marginLeft: leftOffset,
position: 'fixed',
});
}

Заменить:

if (scrollTop >= topOffset){
obj.css({
marginTop: -topOffset+22,
// marginLeft: leftOffset,
position: 'fixed',
});
toPrint();
}

[AlexP_RUS]

Всё поставил, проблемы следующие:
1. Проблема осталась!

Цитата

Также, когда страницу прокручиваешь вниз, а потом обновляешь её, то скользящий блок исчезает, и появляется он опять только тогда, когда прокрутишь страницу скролом. Как исправить?

2. Цена с кнопкой "в корзину" появляются только тогда, когда скользящий блок непосредственно начинает двигаться, до этого цены с кнопкой нет.

3. Надо убрать функцию "добавить к сравнению", далее опустить кнопку пониже от цены (сделать промежуток), и собственно саму цену опустить пониже от верхнего края.

[Koderhan]

AlexP_RUS (16 Июль 2013 - 11:35) писал:

Всё поставил, проблемы следующие:
1. Проблема осталась!


2. Цена с кнопкой "в корзину" появляются только тогда, когда скользящий блок непосредственно начинает двигаться, до этого цены с кнопкой нет.

3. Надо убрать функцию "добавить к сравнению", далее опустить кнопку пониже от цены (сделать промежуток), и собственно саму цену опустить пониже от верхнего края.

В файле "main.js".
Найти код:

function toPrint() {
var f = $('.goodsDataMainModificationDataBlock').html();
var g = $('.goodsDataFormSubmitButton').html();
console.log(f);
$('.myblock4').html(f);
$('.myblock4').append(g);
$('.myblock4 input').click(function(){$('.goodsDataMainOrder .goodsDataFormSubmitButton #ToCart').click()})
}

Заменить:

function toPrint() {
var f = $('.goodsDataMainModificationDataBlock').html();
var g = $('.goodsDataFormSubmitButton').html();
var g =$('.goodsDataFormSubmitButton').not('div').html();
console.log(g);
$('.myblock4').html(f);
$('.myblock4').append(g);
$('.myblock4 div').remove();
$('.myblock4 input').click(function(){$('.goodsDataMainOrder .goodsDataFormSubmitButton #ToCart').click()})
}

И в конец файла "Товар" добавить код:

<script>
$(function(){
toPrint();
});
</script>

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:

.myblock4 {
	padding-top: 10px;
	padding-bottom: 20px;
}
.myblock4 #ToCart {
	margin-top: 15px;
}

[AlexP_RUS]

Всё поставил, проблемы следующие:
1. Проблема осталась!

Цитата

Также, когда страницу прокручиваешь вниз, а потом обновляешь её, то скользящий блок исчезает, и появляется он опять только тогда, когда прокрутишь страницу скролом. Как исправить?

2. При нажатии на кнопку "в корзину" сразу делается переход к оформлению без всплывающего окошка. Можно сделать всплывающее окошко?

3. Надпись "Товар есть в наличии" не стоило убирать. Верните пож-та)

[Koderhan]

1. Но у вас скользящий блок выводится только на странице товара как и на сайте из примера.
2, 3.
В файле "main.js".
Код:

function toPrint() {
var f = $('.goodsDataMainModificationDataBlock').html();
var g = $('.goodsDataFormSubmitButton').html();
var g =$('.goodsDataFormSubmitButton').not('div').html();
console.log(g);
$('.myblock4').html(f);
$('.myblock4').append(g);
$('.myblock4 div').remove();
$('.myblock4 input').click(function(){$('.goodsDataMainOrder .goodsDataFormSubmitButton #ToCart').click()})
}

Заменить:

function toPrint() {
var f = $('.goodsDataMainModificationDataBlock').html();
var g = $('.goodsDataFormSubmitButton').html();
var g2 = $('.goodsDataMainModificationAvailable').html();
var g =$('.goodsDataFormSubmitButton').not('div').html();
console.log(g);
$('.myblock4').html(f);
$('.myblock4').append(g);
$('.myblock4 div').remove();
$('.myblock4').append(g2);
$('.myblock4 input').click(function(){
// Добавление товара в корзину через ajax
	$('.goodsDataForm').nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 420, // Minimum width
	  minHeight: 150, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;



})
}

В файле "main.css".
Найти код:

.myblock4 #ToCart {
margin-top: 15px;
}

Заменить:

.myblock4 #ToCart {
margin-top: 15px;
margin-bottom: 15px;
}

[AlexP_RUS]

1. Непонял, причём здесь это? Я говорю о том, что блок исчезает если обновить страницу. Вот зайдите на страницу товара, прокрутите её к низу и обновите, и увидите что блок исчез. (смотреть в firefox'е или опере, в хроме не пропадает).

2. Работает.

3. Надпись "Товар есть в наличии" поставить после цены, как было изначально.

[miyako]

AlexP_RUS (17 Июль 2013 - 09:19) писал:

1. Непонял, причём здесь это? Я говорю о том, что блок исчезает если обновить страницу. Вот зайдите на страницу товара, прокрутите её к низу и обновите, и увидите что блок исчез. (смотреть в firefox'е или опере, в хроме не пропадает).

2. Работает.

3. Надпись "Товар есть в наличии" поставить после цены, как было изначально.

1) В версии 22.0 Firefox скользящий блок не пропадает. Аналогично и с Оперой.

[AlexP_RUS]

miyako (17 Июль 2013 - 11:22) писал:

1) В версии 22.0 Firefox скользящий блок не пропадает. Аналогично и с Оперой.

У меня в 22.0 Firefox пропадает, и в Опере аналогично. Блок бывает исчезает через раз. Друг проверил, у него тоже самое.

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