Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Anchor text - zła pozycja
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
martinii007
Opiszę mój problem w następujący sposób:

Mam 2 strony HTML: a.html i b.html.
Na stronie a.html jest następujący odnośnik w menu: b.html#miejsce
Teoretycznie powinien pozycjonować do elementu miejsce i tak się dzieje, jednakże w pliku b.html mam slidera, który jednocześnie się ładuje. Po załadowaniu slidera cała strona ucieka do góry w inne miejsce. Czy jest jakiś sposób żeby również "anchorowi" dać opóźnienie lub macie jakieś inne rozwiązać aby rozwiązać ten problem? Jeżeli moje tłumaczenie jest zawiłe to wyeksportuje stronę na ftpa wink.gif
vonski
Generalnie strona nie powinna nigdzie uciekać po załadowaniu sider-a, lub czegokolwiek innego, więc coś musi to wymuszać. Także zająłbym się bardziej naprawą tego, niż opóźnieniem skoku do anchor-a - co oczywiście też da sie zrobić za pomocą JS, ale z punktu widzenia UX będzie to dość nietrafione rozwiązanie.
martinii007
Kolejność jest taka, że najpierw link przechodzi do anchora, a później włącza się zamierzona animacja, która ładuje slider, trwa to oczywiście wszystko ms. Przechodząc do sedna czy jest możliwość, abyanchor się ładował np. dopiero po 1s?
vonski
Jest taka możliwość.
Możesz przerobić troche link na stronie a.html żeby prowadził do: b.html/#/id-elementu

Dzięki temu po załadowaniu strony b.html nie przeskoczy Ci od razu do #id-elementu. Javascriptem odczytujesz wartość hashtaga (window.location.hash) i po zakończeniu animacji slidera, czy po jakimś określonym czasie scrollujesz do tego elementu.
martinii007
Mógłbyś Twoją myśl przedstawić w postaci przykładowego kodu? Czyli takiego, który czeka np. 1s, a później przechodzi do anchora?
Z góry dzięki smile.gif
vonski
Coś w ten deseń:

  1.  
  2. // pobierasz ID elementu z URL-a (przy zalozeniu ze URL jest w postaci: b.html/#/id-elementu
  3. var hash = window.location.hash.replace(/#\//, '');;
  4.  
  5. // tutaj definiujesz co sie ma wykonac po sekundzie
  6. setTimeout(function() {
  7. var el = document.getElementById(hash);
  8. el.scrollIntoView(true); // scroll do elementu
  9. }, 1000); // 1000ms = 1s
  10.  
martinii007
yahoo.gif

Temat do zamknięcia, vonski masz piwo smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.