Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dynamiczna zmiana css
Forum PHP.pl > Forum > PHP
jarekski
jakiego kodu uzyc aby gdy uzytkownik zmienia rozmiary otwartego okna strony internetowej ( np. za pomoca myszy ) , zostalo to odczytane przez plik css i uwzglednione przez wszystkie parametry kazdego elementu ktore maja postac (x % * szerokosci okna lub wysokosci okna)

<script language="JavaScript">

<!--

var ww = window.innerWidth;
var wh = window.innerHeight;

window.location.href = "icec.php?&ww=" + ww + "&wh=" + wh;

//-->

</script>
ten skrypt przekazuje tylko do .php pliku jak odczytac var ww i wh w pliku css

Z gory dziekuje
.

rocktech.pl
Witam.

Media Queries.
  1. @media screen and (max-device-width: 480px) {
  2. html {
  3. width: 300px;
  4. }
  5. }
CuteOne
http://twitter.github.com/bootstrap/ gotowa podstawka
jarekski
Cytat(rocktech.pl @ 24.01.2013, 07:34:14 ) *
Witam.

Media Queries.
  1. @media screen and (max-device-width: 480px) {
  2. html {
  3. width: 300px;
  4. }
  5. }

to nie dziala dynamiczmie tylko przy pierwszym otwacciu strony i dla zadanych 300px

Cytat(CuteOne @ 24.01.2013, 08:33:45 ) *


nie ma bledu tylko css nie reaguje na ten skrypt gdy ktosc zmienia rozmiar strony
rocktech.pl
Zerknij jeszcze raz tu http://twitter.github.com/bootstrap/scaffo...html#responsive. Przeskaluj sobie ekran.

Zerknij na ten kod https://github.com/twitter/bootstrap/blob/2...ponsive.css#L68 i klasy.hidden-desktop .hidden-phone itd.
jarekski
tak ale nie pracuje gdy uzytwownik zmienia np. mysza okno z prostokata poziomego na pionowy obrazek zostaje przeskalowany ale pozostaje poziomym nie zmienia sie na pionowy closedeyes.gif
fizdulka
Cytat(rocktech.pl @ 24.01.2013, 10:55:27 ) *
Zerknij jeszcze raz tu http://twitter.github.com/bootstrap/scaffo...html#responsive. Przeskaluj sobie ekran.

Zerknij na ten kod https://github.com/twitter/bootstrap/blob/2...ponsive.css#L68 i klasy.hidden-desktop .hidden-phone itd.



Mam to samo na www.polanka.com.au zmiana rozmiarow okna przez restore lub restore down czy mysza i wydaje sie ze wszystko dziala ale reload page wprowadza zmiany ktore jarekski chcialby uzyskac zmieniajac rozmiary okna a to nie takie easy.
jarekski
Witam

Właśnie o to chodzi wszystko sie zmienia skalujac do wymiarów odczytanych
podczas ładowania strony,ale tylko pozornie bo po przeładowaniu strony dopiero
nastepuje całkowite przeskalowanie wszystkich elementów.
Dzieki za próbe zrozumienia mojego pytania.
Czy znasz sposób na rozwiązanie tego problemu?




CuteOne
A jakie to elementy nie są skalowane? pokaż, może wersję demo.. będzie szybciej
jarekski
Prosciej niz poprzedniczka wyjasnic nie moge ale sprobuje:

1- otworz www.polanka.com.au
2- zmien rozmiary okna
3 - przeladuj strone
4- teraz chyba widzisz co sie zmienia prostokaty podpowiadam
5- jezeli nie widac zmian idz do punktu 1

Czy teraz wszystko jasne
CuteOne
Ten jej/jego kod nie ma nic wspólnego z tzw. responsive, ot trochę js(w dodatku lipnego). Teraz otwórz http://twitter.github.com/bootstrap/index.html lub http://twitter.github.com/bootstrap/examples/fluid.html i zmień rozmiar przeglądarki..
jarekski
chyba ciebie nie rozumiem jak wiesz jak uzyskac zamierzony efekt to pokaz prosze jak zmienic ten kod .
bo zmiana rozmiaru przegladarki nic nie daje niestety.
Michasko
Ja chyba tutaj czegoś nie rozumiem.
Jarekski - Twój przykład ma niewiele wspólnego z responsive-layoutem. Zerknij na link niżej, aby zobaczyć na czym polega responsive design (zwróć uwagę, że elementy zmieniają swój rozmiar i/lub położenie bez konieczności przeładowania strony).
http://whatis.techtarget.com/definition/responsive-design

W Twoim przykładzie, aby prostokąty zmieniły rozmiar - konieczne jest przeładowanie strony.
W przykładzie CuteOne (bootstrap) - nie jest to konieczne, wystarczy zmienić rozmiar okna przeglądarki.
A jeśli u Ciebie nic nie daje - pochwal się z jakiej przeglądarki korzystasz. IE 4 ? 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-2025 Invision Power Services, Inc.