Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[jQuery] Zła szerokość elementu

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[jQuery] Zła szerokość elementu

Post 11.12.2017, 12:12:38

Witam bardzo serdecznie. Mam pewien problem z napisanym skryptem przy użyciu jQuery.

Mam taki kod html (przepraszam za brak wcięć, ale w tym edytorze nie działa tab:
Kod: Zaznacz cały
<div class="footer-big-content">
<h1 class="heading-footer-big">Kancelaria Adwokacka - adwokat Ewa Knobloch</h1>
<div class="footer-big-group">
<span class="footer-big-address">ul. Jasna 15 lok. 108, 00-003 Warszawa</span>
<span class="footer-big-telephone">Tel.: 501 711 165</span>
</div>
</div>

Dla h1 mam nadany odpowiedni kod w css, aby nie przyjmował szerokości całej strony tylko względem swojej zawartości - display: initial, a footer-big-group jest zrobione na flexie z space-between.

Oraz kod JS
Kod: Zaznacz cały
var setFooterBigWidth = function() {
      var headingWidth = $(".heading-footer-big").css("width");

      $(".footer-big-content").css("width", headingWidth);
   };

   setFooterBigWidth();
   $(window).resize(function() {
      setFooterBigWidth();
   });


Efekt końcowy ma być następujący:
Obrazek

A teraz objaśnienie działania kodu JS. Pobieram szerokość h1 i ustawiam ją dla footer-big-content, aby granicę dla footer-big-group wyznaczał napis z h1. Kod byłby ok, gdyby nie fakt, że po pierwszym wywołaniu funkcji setFooterBigWidth(); pobiera mi zły rozmiar (h1 ma 510 px, a jQuery widzi 569px) przez co strona wygląda w ten sposób:

Obrazek

Po zmniejszeniu/zwiększeniu rozmiaru okna przeglądarki funkcja wywołuje się jeszcze raz i rozmiar jest prawidłowy.

Co może być przyczyną tego błędu? Dziękuję za pomoc :).
dawido323
Dawid

Posty: 31
Dołączył(a): 03.11.2016

Re: [jQuery] Zła szerokość elementu

Post 15.12.2017, 07:02:08

Obrazek

style.css:
Kod: Zaznacz cały
.heading-footer-big, .footer-big-content {
   width: auto;
   min-width: 510px;
   max-width: 70%;
   margin: auto;
}

Bez kombinowania, i mnożenia skryptów.
Avatar użytkownikaLuna_s20
Posty: 98
Dołączył(a): 02.05.2014


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Ahrefs [Bot] i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51520 zarejestrowanych użytkowników.
Najnowszy użytkownik: ThomasNix


Nasi użytkownicy napisali:

  • 937847 wiadomości
  • w 247510 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)