Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukrycie elementu przy zbyt niskiej rozdzielczości - działa, ale...
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Lawliet
Dobry wieczór wszystkim Lkingsmiley.png
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3.  
  4. if (screen.width <= 1200) {
  5. $(".content .page-width ul.video").hide();
  6. $(".content .page-width ul.second").css("width: 500px;");
  7. }
  8. else {
  9.  
  10. $(".content ul.video").show();
  11. }
  12.  
  13. });


Kod ten prawidłowo działa - jeżeli rozdzielczość jest równa/mniejsza od 1200px, to odpowiedni div się kryje - wszystko działa prawidłowo.
Kiedy wejdziecie jednak na facebooka, albo twitch.tv, to zauważycie, że tam również elementy kryją sięprzy zbyt niskiej rozdzielczości (np. boczne menu).

Jaka jest różnica? Obraz w przeglądarce możemy powiększać znakiem +, lub ctrl+ i kiedy to robię, to element się nie chowa (chociaż powiększam obraz sztucznie nawet do bardzo niskiej rozdzielczości). Przy sztucznym powiększaniu obrazu w przeglądarce, javascript nie działa. Wszystko wyświetla się prawidłowo dopiero po zmianie rozdzielczości w ustawieniach wyświetlacza i odświeżeniu strony internetowej. Na facebook'u i twichu elementy ulegają zmianie zarówno po zmianie rozdzielczości, jak i sztucznym powiększaniu. Jak to zrobić? Być może jest opcja zmiany efektu "schowaj div po zmianie rozdzielczości monitora" na "schowaj div po zmianie rozdzielczości obrazu w przeglądarce". Mam nadzieję, że dobrze wszystko wyjaśniłem.
Turson
Sprawdź
[JAVASCRIPT] pobierz, plaintext
  1. $(window).on('resize', function(){
  2. var width = $(window).width();
  3. //akcja
  4. })
[JAVASCRIPT] pobierz, plaintext
redeemer
Zamiast robić to w javascript skorzystaj z "media queries" w CSS3.
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-2025 Invision Power Services, Inc.