Перейти к содержимому


Фото
- - - - -

Вопрос к знатокам JS


  • Чтобы отвечать, сперва войдите на форум
8 ответов в теме

#1 alexivchenko

alexivchenko
  • Пользователь
  • 140 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Курск

Опубликовано 20.05.2020 - 09:50

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

#2 simpla24

simpla24
  • Пользователь
  • 99 сообщений
  • Дизайн, Программирование, Верстка, Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда::)

Опубликовано 20.05.2020 - 10:58

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

 

Покажите сайт, где это нужно сделать



#3 alexivchenko

alexivchenko
  • Пользователь
  • 140 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Курск

Опубликовано 20.05.2020 - 11:27

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

Покажите сайт, где это нужно сделать


Причём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики.
Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript.

#4 shooroop

shooroop
  • Фрилансер
  • 1 080 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 20.05.2020 - 11:32

На форуме Okay Вам не помогли, и Вы решили тут написать (правильно: один хрен система одна и та же)

 

Покажите сайт, где это нужно сделать


 

Странно почему не помогли?)



#5 simpla24

simpla24
  • Пользователь
  • 99 сообщений
  • Дизайн, Программирование, Верстка, Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда::)

Опубликовано 20.05.2020 - 11:33

Причём тут система? И сайт показывать не нужно. Написал там где сижу и сидят верстальщики.
Вопрос не к функционалу, а к тем кто занимается версткой и знает JavaScript.

 

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

 

Если принципиально не показываете сайт, то ответить можно примерно след. образом: "просто отцентруйте текущий пункт меню"

 

Пс. Ну камон, каждый случай уникальный - ванговать очень сложно



#6 shooroop

shooroop
  • Фрилансер
  • 1 080 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Antarktida

Опубликовано 20.05.2020 - 11:33

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


 

нифига не понятно может вам надо сначала определить разрешение экрана а от него уже и плясать



#7 simpla24

simpla24
  • Пользователь
  • 99 сообщений
  • Дизайн, Программирование, Верстка, Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда::)

Опубликовано 20.05.2020 - 11:34


 

Странно почему не помогли?)

 одновременно увидел и тут, и там. Решил тут помочь



#8 alexivchenko

alexivchenko
  • Пользователь
  • 140 сообщений
  • Заказчик, Пользователь
  • Версия CMS:2.x
  • Откуда:Курск

Опубликовано 22.05.2020 - 11:12

Вроде нашел решение, но что-то не работает

 

https://codepen.io/v...nyov/pen/jeYZLg

 

class Menu {
  constructor(el) {
    this.el = el
    
    this.el.addEventListener('click', this.handleClick.bind(this))
    window.addEventListener('resize', this.scrollToActiveItem.bind(this))
    
    this.scrollToActiveItem()
  }
  
  get activeEl() {
    return this.el.querySelector('.is__active')
  }
  
  handleClick(e) {
    e.preventDefault()

    this.el.querySelector('.is__active')
      .classList
      .remove('is__active')
    
    e.target.parentNode
      .classList
      .add('is__active')
    
    this.scrollToActiveItem()
  }
  
  scrollToActiveItem() {
    if (!this.activeEl) return

    const scrollParent = this.el.parentNode
    const scrollParentWidth = scrollParent.clientWidth
    const activeElWidth = this.activeEl.clientWidth
    const activeElLeftOffset = this.activeEl.offsetLeft

    const isActiveElInvisible = activeElLeftOffset + activeElWidth > scrollParentWidth

    if (isActiveElInvisible) {
      scrollParent.scrollLeft = activeElLeftOffset - (scrollParentWidth / 2) + (activeElWidth / 2)
    } else {
      scrollParent.scrollLeft = 0
    }
  }
}

new Menu(document.querySelector('.menu'))

Меню становится не кликабельным

<aside class="aside">
	<div class="menu">
		<div class="menu-list__track">
			{* Рекурсивная функция вывода дерева категорий *}
			{function name=categories_tree}
			{if $categories}
			{foreach $categories as $c}
				{* Показываем только видимые категории *}
				{if $c->visible}
						<a class="category-nav__item {if $category->id == $c->id}is__active{/if}" href="catalog/{$c->url}" data-category="{$c->id}">
							{if $c->image}
							<div class="category-nav__icon">
								<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name|escape}">
							</div>
							{/if}
							{$c->name|escape}
						</a>
						{categories_tree categories=$c->subcategories}
				{/if}
			{/foreach}
			{/if}
			{/function}
			{categories_tree categories=$categories}			
		</div>
		<!-- /.category-list__track -->
	</div>
	<!-- /.category-list -->
</aside>
<!-- /.aside -->

Изменено: alexivchenko, 22.05.2020 - 11:13


#9 Kosjak76

Kosjak76
  • Модератор
  • 3 854 сообщений
  • Программирование
  • Версия CMS:1.x, 2.x
  • Откуда:Харьков, Украина

Опубликовано 22.05.2020 - 12:01

Попробуйте убрать вот эту строчку

this.el.addEventListener('click', this.handleClick.bind(this))

И тогда и вот это все

  handleClick(e) {
    e.preventDefault()

    this.el.querySelector('.is__active')
      .classList
      .remove('is__active')
    
    e.target.parentNode
      .classList
      .add('is__active')
    
    this.scrollToActiveItem()
  }





0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых