Problem z przesuwanym menu w CSS/JS

Problem z przesuwanym menu w CSS/JS
baracadus
BA
baracadus
BA
  • Rejestracja:ponad 6 lat
  • Ostatnio:6 miesięcy
  • Postów:172
0

Witam serdecznie.
Męcze się od paru dni z tym menu: http://serwer1356363.home.pl/pub/sample (dni tygodnia na niebieskim pasku).
Po kliknięciu strzałki w prawo lub lewo nie widać dni sprzed przewijania. Przykładowo po wczytaniu strony ostatnim dniem jest 7.12.
Klikam strzałkę w prawo i pierwszym dniem jest 11.12 (powinien być 8.12). Analogicznie na responsywności.

Wie ktoś może jak można to naprawić?

Tutaj jest efekt jaki bym chciał uzyskać: https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/ (tylko to react)

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Mitek
MI
Mitek
MI
  • Rejestracja:ponad 6 lat
  • Ostatnio:około 6 lat
  • Postów:5
0

Może jakis fragment kodu? wyglada na to że za daleko przesuwasz pasek. Masz jakąś zmienną odpowiedzialną, za to jak daleko ma on sie przesunąć?

edytowany 1x, ostatnio: Mitek
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
baracadus
BA
baracadus
BA
  • Rejestracja:ponad 6 lat
  • Ostatnio:6 miesięcy
  • Postów:172
0
Mitek napisał(a):

Może jakis fragment kodu? wyglada na to że za daleko przesuwasz pasek. Masz jakąś zmienną odpowiedzialną, za to jak daleko ma on sie przesunąć?

Nie chciałem dzielić kodu na kawałki dlatego pomyślałem że lepiej będzie to widoczne na "żywym organizmie" :)

Mój kod:

Kopiuj
<script>
        $(document).ready(function() {
           
            var hidWidth;
            var scrollBarWidths = 40;

            var widthOfList = function() {
                var itemsWidth = 0;
                $('.list li').each(function() {
                    var itemWidth = $(this).outerWidth();
                    itemsWidth += itemWidth;
                });
                return itemsWidth;
            };

            var widthOfHidden = function() {
                return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
            };

            var getLeftPosi = function() {
                return $('.list').position().left;
            };

            var reAdjust = function() {
                if (($('.wrapper').outerWidth()) < widthOfList()) {
                    $('.scroller-right').show();
                } else {
                    $('.scroller-right').hide();
                }

                if (getLeftPosi() < 0) {
                    $('.scroller-left').show();
                } else {
                    $('.item').animate({
                        left: "-=" + getLeftPosi() + "px"
                    }, 'slow');
                    $('.scroller-left').hide();
                }
            }

            reAdjust();

            $(window).on('resize', function(e) {
                reAdjust();
            });

            $('.scroller-right').click(function() {

                $('.scroller-left').fadeIn('slow');
                $('.scroller-right').fadeOut('slow');

                $('.list').animate({
                    left: "+=" + widthOfHidden() + "px"
                }, 'slow', function() {

                });
            });

            $('.scroller-left').click(function() {

                $('.scroller-right').fadeIn('slow');
                $('.scroller-left').fadeOut('slow');

                $('.list').animate({
                    left: "-=" + getLeftPosi() + "px"
                }, 'slow', function() {

                });
            });
        });

    </script>
<div class="lukMenu2">
                        <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left activeMopTopMenuLeft"></i></div>
                        <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right activeMopTopMenuRight"></i></div>
                        <div class="wrapper">
                            <ul class="nav nav-tabs list lukMenu2LI" id="myTab">
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem callendarTopMenuItemNow">
                                        <div class="callendarTopMenuItem1">01</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">02</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">03</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">04</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">05</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">06</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">07</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">08</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">09</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">10</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">11</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">12</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">13</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">14</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">15</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">16</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                                <li class="activeMopTopMenuS lukMenu2LIP ">
                                    <a href="#home" class="callendarTopMenuItem">
                                        <div class="callendarTopMenuItem1">17</div>
                                        <div class="lukMenu2LISpan callendarTopMenuItem2">12</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
2

Nie chce mi się analizować kodu, ale on chyba pobiera ilość px do przewinięcia z divów na twojej stronie.
Zatem wyświetl sobie, co to za wartości, a potem pomierz ile px ma ten widoczny fragment.
Obstawiam, że nie uwzględniasz jakichś paddingów/marginesów.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto