Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Dolaczenie styli zależnie od rozdzielczości
Forum PHP.pl > Forum > Przedszkole
lukash82
25.11.2009, 13:13:37
Witam. Mam takie pytanie... Temat już poruszany na forum ale niestety żadne z rozwiązań mi nie zadziałało. Rozwiązania jakie znalazłem w guglu też nie działają albo są mocno okrojone... Dlatego postanowiłem wykombinować coś swojego. Muszę dołączyć odpowiedni arkusz css w zależności od rozdzielczości jaką ma użytkownik. Podzieliłem to na 3 kategorie czyli

1025<=1440<większe

A więc mam coś takiego:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var zmienna = screen.width;
  3. if(zmienna<'1025'){
  4.     //document.write(zmienna);
  5.     </script>
  6.         <link rel="stylesheet" type="text/css" href="style1025.css" />                        
  7.     <script>
  8. }
  9. if(zmienna>'1025' && zmienna<='1440'){
  10.     //document.write(zmienna);
  11.     </script>
  12.         <link rel="stylesheet" type="text/css" href="style1440.css" />                        
  13.     <script>
  14. }
  15. else if(zmienna>'1440'){
  16.     //document.write(zmienna);
  17.     </script>
  18.         <link rel="stylesheet" type="text/css" href="style1680.css" />
  19.     <script>
  20. }
  21. </script>
[HTML] pobierz, plaintext

Tylko problem w tym, że ładuje mi się non stop ostatni arkusz czyli style1680 mimo że warunki są dobrze zapisane... Co może być powodem takiego działalnia? Ewentualnie może macie jakieś swoje sprawdzone i przede wszystkim działające metody na rozpoznawania rozdzielczości? Jeden z pomysłów jakie znalazłem w guglu to coś takiego:

[HTML] pobierz, plaintext 
  1. <script language="javascript">
  2. <!--
  3. document.write("<img width=1 height=1 border=0 src= <a href="http://serwer/get_res.php?width=&quot;+screen.width+&quot;&height=&quot;+screen.height+&quot;&depth=&quot;+screen.colorDepth+&quot;" target="_blank">http://serwer/get_res.php?width="+scr...lorDepth+"</a> >");
  4. //-->
  5. </script> 
  6.  
[HTML] pobierz, plaintext


Ale jakoś nie mam pomysłu jak szerokość ekranu wyciągnąć w pliku get_res.php. Przykład ze strony:
http://www.webdeveloper.pl/wykrywanie_rozd...145,1,1,pl.html

Jeśli możecie mi coś podpowiedzieć to będę wdzięczny. Z góry dzięki i pozdrawiam, Ł
Wicepsik
25.11.2009, 13:24:21
Zmienna do której przypisujesz szerokość to int nie string.
lukash82
25.11.2009, 13:32:09
Witam. No ok, ale pisałem, że warunki działają jeśli nie robię opcji dołączania plików css tylko samo document.write(zmienna). Pytanie jest o to dlaczego jeśli tak to działa to gdy dodam opcję z arkuszami stylów dołącza tylko ostatni z nich niezależnie od rozdzielczości?
Wicepsik
25.11.2009, 13:46:34 
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. //var zmienna = screen.width;
  3. var zmienna = 1024;
  4. if(zmienna>1440){
  5. 		alert('1440');
  6. 		//<link rel="stylesheet" type="text/css" href="style1.css" />                        
  7. }
  8. else if(zmienna>1025){
  9. 		alert('>1025');
  10. 		//<link rel="stylesheet" type="text/css" href="style1440.css" />                        
  11. }
  12. else if(zmienna<1025){
  13. 		alert('<1025');
  14. 		//<link rel="stylesheet" type="text/css" href="style1680.css" />
  15. }
  16. </script>
[JAVASCRIPT] pobierz, plaintext
lukash82
25.11.2009, 14:56:16
Witam ponownie. Dzięki, za poprawki, ale to co napisałeś działa tak samo jak moje (no trochę tam błędów jest ale nieważne, działa) Spróbuj jednak zamiast alert-ów dołączyć jakikolwiek arkusz stylów... Nie wiem czemu ale jakby tak nie przerabiał to zawsze pobierze mi ostatni arkusz z możliwych opcji. Dla przykładu prosty test:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var zmienna = screen.width;
  5. if(zmienna>1440){
  6.         //alert('1440');
  7.         </script>
  8.             <style>
  9.                 #test{
  10.                     width: 300px; height: 300px; background: red;
  11.                 }
  12.             </style>
  13.         <script>                       
  14. }
  15. else if(zmienna>1025){
  16.         //alert('>1025');
  17.         </script>
  18.             <style>
  19.                 #test{
  20.                     width: 300px; height: 300px; background: yellow;
  21.                 }
  22.             </style>
  23.         <script>                     
  24. }
  25. else if(zmienna<1025){
  26.         //alert('<1025');
  27.         </script>
  28.             <style>
  29.                 #test{
  30.                     width: 300px; height: 300px; background: blue;
  31.                 }
  32.             </style>
  33.         <script>
  34. }
  35. </script>
  36. </head>
  37. <body>
  38.     <div id="test">
  39.     </div>
  40. </body>
  41. </html>
[HTML] pobierz, plaintext

Normalnie brak mi sił do tego:/ Pozdrawiam,Ł
Wicepsik
25.11.2009, 15:04:18 
[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. //var zmienna = screen.width;
  3. var zmienna = 1024;
  4. if(zmienna>=1440){
  5.         //alert('1440');
  6.         document.write('<style>#test{width: 300px; height: 300px; background: red;}</style>');
  7.  
  8. }
  9. else if(zmienna>=1025){
  10.         //alert('>1025');
  11.  
  12.         document.write('<style>#test{width: 300px; height: 300px; background: yellow;}</style>');
  13.  
  14. }
  15. else if(zmienna<1025){
  16.         //alert('<1025');
  17.  
  18.         document.write('<style>#test{width: 300px; height: 300px; background: blue;}</style>');
  19.  
  20. }
  21. </script>
[JAVASCRIPT] pobierz, plaintext

Ehh..
lukash82
25.11.2009, 15:16:15
Ok, nareszcie działa! Szczerze mówiąc pierwsza moja styczność z javascript i nie bardzo wiedziałem jak to ugryźć. Nie wiem czemu ale jakoś mam javowstręt chyba i staram się jej unikać jak ognia, hehe. Wielkie dzięki za pomoc! Pozdrawiam, Ł
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.