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

peretc001

Новичок
Добрый день.

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

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

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

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

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

AnrDaemon

Продвинутый новичок
Выставляй фрагмент при переключении вкладки.
 

peretc001

Новичок
Выставляй фрагмент при переключении вкладки.
не понял что это значит.

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

peretc001

Новичок
честно признаться я не понял про фрагменты и найти понятного для меня объяснения и примеров мне не удалось

удалось определить на сколько % по оси х прокручен блок 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> или в сессию
 

fixxxer

К.О.
Партнер клуба
Да нафига ему фрагмент, он же страницу релоадит, и там в 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(0, activeLink.offsetLeft - (container.offsetWidth - activeLink.offsetWidth) / 2);
  }
});
 

peretc001

Новичок
А можно еще вопрос:
Есть таблица
данные такие
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 } ?>
и получаю:
Адыгея: Адегейск, Краснодарский: Абинск
 

fixxxer

К.О.
Партнер клуба
Это вообще некорректный запрос. При group by обязательно должны быть агрегирующие функции в SELECT. Mysql при настройках по умолчанию многое прощает и работает по принципу "garbage in - garbage out", при более строгих настройках будет выдана ошибка.

Для получения желаемого нужен GROUP_CONCAT.
 

peretc001

Новичок
Это вообще некорректный запрос. При group by обязательно должны быть агрегирующие функции в SELECT. Mysql при настройках по умолчанию многое прощает и работает по принципу "garbage in - garbage out", при более строгих настройках будет выдана ошибка.

Для получения желаемого нужен GROUP_CONCAT.
спасибо

Код:
$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 } ?>
 
Сверху