Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Pasek z buttonami scrolowany
AQuatro
post 22.03.2023, 01:42:54
Post #1





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 29.09.2004

Ostrzeżenie: (0%)
-----

Witam.
Chcę stworzyć na stronie poziomy pasek, na którym jest dużo buttonów. Wszystko poukładane poziomo.
Buttonów jest oczywiście dużo więcej niż mieścić się może na stronie, ale za pomocą scrolla można przewijać i wybrać odpowiedni button.
Mój problem polega na tym, że chciałbym aby ten pasek sam się przewinął do pozycji klikniętego buttona, w ten sposób, żeby aktywny button był mniej więcej na środku.
Może dałoby się to jakoś zrobić używając:
<body onload="document.getElementById('in').focus()">
Ale mam jeszcze dodatkowy problem, chciałbym, żeby focusowało się na aktywnym polu formularza, gdzie będą wprowadzane dane a tę opcję można wykorzystać chyba tylko w jednym miejscu.
W związku z tym moje pytanie, czy znacie jakiś sposób przykład. Na stworzenie długiego, poziomego paska z buttonami, którego tylko fragment widoczny jest na stronie i sposób na jakieś przewinięcie go do wybranego pewnego elementu.
Go to the top of the page
+Quote Post
LowiczakPL
post 22.03.2023, 10:41:07
Post #2





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

Ostrzeżenie: (0%)
-----

może coś w ten sposób

[HTML] pobierz, plaintext 
  1. <style>
  2. #container {
  3.   overflow-x: scroll;
  4.   display: flex;
  5.   justify-content: center;
  6.   align-items: center;
  7.   height: 100px;
  8.   width: 200px;
  9. }
  10.  
  11. button {
  12.   margin: 0 10px;
  13.   height: 50px;
  14.   width: 50px;
  15. }
  16. </style>
  17. <div id="container">
  18.   <button onclick="scrollToCenter(this)">Button 1</button>
  19.   <button onclick="scrollToCenter(this)">Button 2</button>
  20.   <button onclick="scrollToCenter(this)">Button 3</button>
  21.   <button onclick="scrollToCenter(this)">Button 4</button>
  22.   <button onclick="scrollToCenter(this)">Button 5</button>
  23. </div>
  24. <script>
  25. function scrollToCenter(button) {
  26.   var container = button.parentNode;
  27.   var containerWidth = container.offsetWidth;
  28.   var buttonWidth = button.offsetWidth;
  29.   var buttonLeft = button.offsetLeft;
  30.   var buttonHalfWidth = buttonWidth / 2;
  31.   var buttonCenter = buttonLeft + buttonHalfWidth;
  32.   var scrollLeft = buttonCenter - (containerWidth / 2);
  33.   container.scrollTo({
  34.     left: scrollLeft,
  35.     behavior: 'smooth'
  36.   });
  37. }
  38. </script>
[HTML] pobierz, plaintext


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
AQuatro
post 22.03.2023, 12:43:18
Post #3





Grupa: Zarejestrowani
Postów: 92
Pomógł: 0
Dołączył: 29.09.2004

Ostrzeżenie: (0%)
-----

Dzięki. Działa to bez zarzutu i dokładnie jest to to co chciałem.
Jest tylko problem. Nie działa gdy div umieszczę wewnątrz '<form></form>' nie rozumiem dlaczego.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 23.05.2024 - 10:32
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn