Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2015, 15:38
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

При клике на кнопку переход к якорю и открытие блока
Здравствуйте!
Прошу помощи.
На сайте в шапке есть форма фильтра с кнопкой
<button type="submit" class="goresult" >Подобрать кондиционер</button>


Результаты сортировки фильтра выводятся в блоке ниже
section class="selection,
до применения фильтра там выводятся все записи без сортировки

Задача такая.
Изначально блок с записями скрывать, при клике по кнопке submit надо блок отображать и поднимать его вверх (прокручивать экран).

Как пробовал.
Поставил якорь перед блоком
<a name="result"></a>
Во-первых якорь срабатывает только если кнопку button обернуть ссылкой на якорь и плюс к тому же поставить такую ссылку рядом, ее приходится скрывать.
<a href="#result"><button type="submit" class="goresult" >Подобрать кондиционер</button></a> 
<a style="opacity:0;" href="#result">дублирующая</a>


Во-вторых когда поставил скрипт который отображает блок с записями при клике на кнопку, исчез переход к якорю.

<script>
function resu() {
  $('.selection').hide();

  $('.goresult').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('.selection').slideToggle();
  });
resu(); 
</script>


Как заставить все это работать вместе и одновременно?
Ответить с цитированием
  #2 (permalink)  
Старый 10.12.2015, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Galyanov,
$('.selection').slideToggle()[0].scrollIntoView();
Ответить с цитированием
  #3 (permalink)  
Старый 10.12.2015, 16:52
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Спасибо!
Сделал вот так, только после прокрутки к блоку через несколько секунд блок опять исчезает и кидает наверх
<script>

$('.selection').hide();
$('.goresult').click(function(event) {
    $('.selection').slideToggle()[0].scrollIntoView();
  });

</script>


P.S.
А если повесить это событие не на клик кнопки?
У меня на странице есть код php который запускает функцию фильтрации если что то было передано из формы, может туда добавить как-то код?
<?php if ($_GET && !empty($_GET)) { // если было передано что-то из формы
             go_filter(); // запускаем функцию фильтрации
         } ?>

Последний раз редактировалось Galyanov, 10.12.2015 в 17:01. Причина: новая мысль
Ответить с цитированием
  #4 (permalink)  
Старый 10.12.2015, 16:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Galyanov,
кидает на верх значит либо форма перегружает страницу либо ссылка.
непонятно в чём проблема -- открыли блок -- взяли позицию блока, проскролили до блока если надо отменили событие по умолчанию.
Ответить с цитированием
  #5 (permalink)  
Старый 10.12.2015, 17:21
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Да, форма перегружает страницу, чего не было до установки скрипта.
Если скрипт убрать, то страница не перегружается.
Ответить с цитированием
  #6 (permalink)  
Старый 10.12.2015, 17:33
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Отменить событие всмысле убрать скрытие?
Вот этим preventDefault() ?

<script>
$('.selection').hide();
$('.goresult').click(function(event) {
    $('.selection').slideToggle()[0].scrollIntoView().preventDefault();
  });
</script>


все равно кидает наверх и блок скрывается
Ответить с цитированием
  #7 (permalink)  
Старый 10.12.2015, 17:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Сообщение от Galyanov
Вот этим preventDefault() ?
строка 6 первый ваш пост
Ответить с цитированием
  #8 (permalink)  
Старый 10.12.2015, 17:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,258

Galyanov,
и зачем кнопку в ссылку оборачивать? -- и функция сортировки должна скролл делать в конце
Ответить с цитированием
  #9 (permalink)  
Старый 10.12.2015, 17:47
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Да, вот так заработало)
Однако при повторном нажатии на сабмит, блок скрывается...

<script>
$('.selection').hide();
$('.goresult').click(function(event) {
    event.preventDefault();
    $('.selection').slideToggle()[0].scrollIntoView();
    
  }); 
</script>


Т.е. по очереди, нажал - открылось, нажал закрылось.
А если повторно делать фильтрацию, как сделать чтобы уже открытое не закрывалось?

P.S. Обертыванеи я естественно уже убрал, раз функция есть)
Ответить с цитированием
  #10 (permalink)  
Старый 10.12.2015, 17:51
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Блин, я рано радуюсь...
Открывает и скролит это да, но выборка перестала работать, показывает все записи без фильтрации...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исчезновение меню при клике на ссылку wiserfild Элементы интерфейса 4 24.10.2015 20:50
Как сделать скрытие блока при клике на фон? clb Элементы интерфейса 6 11.06.2013 18:03
Кратное увеличение при клике на кнопку vabus Элементы интерфейса 2 15.04.2013 20:42
Сворачивание блока при клике в любом месте страницы onuvidelsolnce Элементы интерфейса 6 15.04.2013 13:35
Появление блока при нажатии на кнопку nik_neman jQuery 2 02.03.2012 08:06