• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

offsetLeft - czym jest

VPS Starter Arubacloud
0 głosów
116 wizyt
pytanie zadane 9 czerwca 2019 w JavaScript przez Luckyluck87 Użytkownik (660 p.)
edycja 10 czerwca 2019 przez Luckyluck87

Witam,

Potrzebuje wykonać w navigacji następujący efekt:

Po wczytaniu strony, pod link który bedzie miał klasę "active" , podjeżdżać będzie taki "suwak" o szerokości powiedzmy 100px i wysokości 5px. 

Dodatkowo ma on podjeżdżać pod każdy link na który najedziemy myszką.

Problem jest taki że gdy najeżdżam myszką działa bez zarzutu, natomiast po wczytaniu ten suwak (o klasie "zip") nie ustawia się jak należy. Poprzez console.log widzę że wyliczany jest inny offsetLeft oraz offsetWidth dla linka przy najechaniu a inny przy wczytaniu. 

Nie mam pojęcia o co tutaj chodzi 

Poniżej zamieszczam kod

Będę bardzo wdzięczny za pomoc, pozdrawiam.

HTML :

<nav class="navbar">
      <div class="container">
        <div class="logo"></div>
        <ul class="menu">
          <li class="option"><a class="link  href="#"> O nas </a></li>
          <li class="option"><a class="link" href="#">Aktualności</a></li>
          <li class="option"><a class="link active" href="#">Nasze sklepy</a></li>
          <li class="option"><a class="link" href="#">Kontakt</a></li>
        </ul>
      </div>
      <div class="zip"></div>
</nav>

CSS :

.navbar {
width: 100%;
height: 100px;
position: fixed;
}

.zip {
width: 100px;
height: 5px;
background-color: green;
position: absolute;
transition: .3s;
}

li {
  color: #fff;
    display: inline-block;
}

.link {

  padding: 0 20px;
  transition: .3s;

}

.menu {
  
  width: 100%;
  position: absolute;
}

JS :

let links = document.querySelectorAll('.link');
      let zip = document.querySelector('.zip');
      let positionLeft = '';


      for ( const link of links ) {

        
        link.addEventListener('mouseover', function() {

            positionLeft = (link.offsetLeft + (link.offsetWidth / 2 )) - (50);
            zip.style.left= ((positionLeft) + 'px');
           
            
            console.log(link);
            console.log(link.offsetLeft);
            console.log(link.offsetWidth);

        
        });

        

        if (link.classList.contains('active')) {

          positionLeft = (link.offsetLeft + (link.offsetWidth / 2 )) - (50);

          zip.style.left= ((positionLeft) + 'px');

            console.log(link);
            console.log(link.offsetLeft);
            console.log(link.offsetWidth);

        } 
                
      }

 

komentarz 11 czerwca 2019 przez Luckyluck87 Użytkownik (660 p.)

Dziwne bo tutaj działa https://jsfiddle.net/drn201cz/8/

Ale u mnie w projekcie nie :/

hm...

komentarz 11 czerwca 2019 przez Luckyluck87 Użytkownik (660 p.)

Dobra udało się, trzeba było tą funcję opkować w 

 window.addEventListener('load', ()=> {

...

}

Pozdro 

1 odpowiedź

0 głosów
odpowiedź 10 czerwca 2019 przez mati2762 Mądrala (5,510 p.)
Nie lepiej zrobić taka animacje w CSS?. Dodaj jeszcze CSS to zobaczę jak to wygląda
komentarz 10 czerwca 2019 przez Luckyluck87 Użytkownik (660 p.)
No własnie w samym CSS nie zrobie takiego hovera żeby suwak podjeżdżał z jednego miejsca w inne. Dodałem kod CSS. Głowny problem jest taki że offsetLeft wylicza mi inny gdy najade kursorem na link , a inny gdy wywołuje console.logiem "link.offsetLeft"
komentarz 10 czerwca 2019 przez mati2762 Mądrala (5,510 p.)

@mati2762, Według mnie bez problemu da się to zrobić w samym CSS.

https://jsfiddle.net/h4oyq8du/

Coś mi ten twój projekt nie działa :)

komentarz 10 czerwca 2019 przez Luckyluck87 Użytkownik (660 p.)
edycja 10 czerwca 2019 przez Luckyluck87
Teraz sprawdź, uzupełniłem css :)
komentarz 10 czerwca 2019 przez mati2762 Mądrala (5,510 p.)

@mati2762, No to w sumie takiego to sie w CSS nie da zrobic 
A może użyć JQuery do pobrania pozycji 

https://api.jquery.com/position/

http://api.jquery.com/offset/

Podobne pytania

0 głosów
1 odpowiedź 152 wizyt
pytanie zadane 14 maja 2020 w HTML i CSS przez Allen Obywatel (1,010 p.)
0 głosów
1 odpowiedź 280 wizyt
0 głosów
1 odpowiedź 1,047 wizyt
pytanie zadane 4 sierpnia 2019 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...