Центрирование блока внутри блока с прокруткой

Европа - быстрые серверы на дисках NVMe от $5 / Русский датацентр от 199руб

Тема в разделе "PHP & JavaScript & AJAX & JQUERY & HTML & FLASH", создана пользователем peretc001, 9 окт 2018.

  1. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    Добрый день.

    Пытаюсь сделать аналог вкладок как в Excel
    Рабочий пример https://jsfiddle.net/peretc001/chpv0gre/

    Внизу страницы имеются закладки внутри блока с overflow:hidden
    При нажатии на вкладку (например 15) с помощью ajax происходит перезагрузка страницы и через php подгружается инфа из базы в центр страницы (там где Название компании Адрес Телефон).
    При этом вкладка (например 15) остается на месте и становится активной

    Но Если перейти по ссылке на карточку Компании и потом вернуться обратно то активная вкладка (например 15) уедет за область видимости, и видны будут только с 1 по 10.

    Можно ли как-то сделать, чтоб при возврате активная вкладка (как вы уже догадались, номер 15), была в зоне видимости

    Всем кто понял что я хочу, спасибо :)
     
  2. AnrDaemon

    AnrDaemon Продвинутый новичок

    Сообщения:
    4.641
    Ваш город:
    Moscow, Russia
    Address:
    Moscow, Russia
    Country:
    Location on Map:
    Выставляй фрагмент при переключении вкладки.
     
  3. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    не понял что это значит.

    Я думал может есть скрипт, который горизонтально сдвигает экран внутри блока overflow
    или что-то по типу ссылки <a href="#id-15">15</a>
    только переход происходит не по вертикали а по горизонтали
     
  4. AnrDaemon

    AnrDaemon Продвинутый новичок

    Сообщения:
    4.641
    Ваш город:
    Moscow, Russia
    Address:
    Moscow, Russia
    Country:
    Location on Map:
  5. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    честно признаться я не понял про фрагменты и найти понятного для меня объяснения и примеров мне не удалось

    удалось определить на сколько % по оси х прокручен блок oveflow (https://jsfiddle.net/peretc001/chpv0gre/ обновлен)
    Код:
    $('.region_list ul').scroll(function(){
        var scrollPercentage=100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
        $('#log').html(scrollPercentage.toFixed(0));
    });
    подскажите как мне теперь запихнуть это в ссылку <a href="/user.php?id=<?php echo $row['id']; ?>" + js code> или в сессию
     
  6. fixxxer

    fixxxer К.О. Партнер клуба

    Сообщения:
    12.947
    Ваш город:
    Moscow, Russia
    Address:
    Moscow, Russia
    Country:
    Location on Map:
    Да нафига ему фрагмент, он же страницу релоадит, и там в css уже предусмотрен class="active", который будет проставлен на ссылку активного таба сервером

    Что-то типа того (не проверял)

    PHP:
    document.addEventListener('DOMContentLoaded', () => {
      const 
    container document.querySelector('.region_list ul');
      const 
    activeLink container.querySelector('.active');
      if (
    activeLink) {
        
    container.scrollLeft Math.max(0activeLink.offsetLeft - (container.offsetWidth activeLink.offsetWidth) / 2);
      }
    });
     
    AnrDaemon и peretc001 нравится это.
  7. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    Круто! Спасибо, то что надо.
     
  8. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    А можно еще вопрос:
    Есть таблица
    данные такие
    1, Абинск, Краснодарский
    2, Геленджик, Краснодарский
    3, Новороссийск, Краснодарский
    4, Сочи, Краснодарский
    5, Майкоп, Адыегя
    6, Адыгейск, Адыгея
    и т.д.

    Подскажите как написать запрос чтоб получить:

    Адыгея: Адегейск, Майкоп, Краснодарский: Абинск, Геленджик, Новороссийск, Сочи и т.д

    я делаю
    Код:
    $region_list = $db->getAll('SELECT * FROM `region` GROUP BY kray');
    foreach ($region_list as $row) {   ?>
    <li><?php echo $row['kray'];?>:</li>
    <li><?php echo $row['city'];?>,</li>
    <?php } ?>
    и получаю:
    Адыгея: Адегейск, Краснодарский: Абинск
     
  9. fixxxer

    fixxxer К.О. Партнер клуба

    Сообщения:
    12.947
    Ваш город:
    Moscow, Russia
    Address:
    Moscow, Russia
    Country:
    Location on Map:
    Это вообще некорректный запрос. При group by обязательно должны быть агрегирующие функции в SELECT. Mysql при настройках по умолчанию многое прощает и работает по принципу "garbage in - garbage out", при более строгих настройках будет выдана ошибка.

    Для получения желаемого нужен GROUP_CONCAT.
     
    peretc001 нравится это.
  10. peretc001

    peretc001 Новичок

    Сообщения:
    160
    Ваш город:
    Krasnodar, Russia
    Address:
    Krasnodar, Russia
    Country:
    Location on Map:
    спасибо

    Код:
    $region_list = $db->getAll('SELECT kray, GROUP_CONCAT(`city`) as `city_group` FROM `region` GROUP BY kray'); 
    foreach ($region_list as $row) { ?>
    <li><b><?php echo $row['kray'];?>:</b></li>
    <?php 
    #разбиваем группу
    $divide = explode(',', $row['city_group']); 
    foreach($divide as $list) { ?>
    <li><a <?php if($city == $list) { echo 'class="active"'; } ?> href="/home.php?city=<?php echo $list;?>"><?php echo $list;?></a></li>
    <?php } ?>