[JS] CSS zależny od szerokości ekranu

0

Mam problem gdyż chce mieć 2 pliki css do wczytania zależnie od szerokości ekranu. Wiem że w JS do pobrania tejże szerokości służy screen.availWidth Tylko teraz pytanie jak zmienić tą linijkę:
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/NAZWA.css" type="text/css" />
żeby zamiast NAZWA.css pojaiwało się w zależności od szerokości: template.css lub template_1440.css
Próbowałem if'a ale coś mi to nie chce wychodzić, i właśnie wydaje mi się że to niemożliwe żeby zadziałało ze względu na sposób interpretacji JS i html ale może da jakoś radę?

0

Wszystko jest możliwe.

<script type="text/javascript">
if ( somfing ) {
document.print('<' + 'link id="arkusz" rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /' + '>');
} else {
document.print('<' + 'link id="arkusz" rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template123.css" type="text/css" /' + '>');
}
</script>

Powinno zadziałać wstawione w miejscu gdzie normalnie wklejasz <link />. Ew. jakąś literówkę pieprznąłem ale to Firebugiem wykryjesz.

0

No próbowałem podobnie i mi nie działało. Teraz zrobiłem to co dałeś i też nie działa :/ A przecież wszystko jest dobrze... Zamieniłem:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

na:

<script type="text/javascript">
if ( screen.availWidth<1440 ) {
document.print('<' + 'link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /' + '>');
} else {
document.print('<' + 'link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_1440.css" type="text/css" /' + '>');
}
</script>
0

<link rel="stylesheet" type="text/css" href="/css/template.css">

<script>
  if ( screen.availWidth<1440 )
    document.getElementsByTagName('LINK')[0].href = '/css/template_1440.css';
</script>
0

No nie działa :/ Wczytuje ten pierwszy css ale ten warunek mimo że jest spełniony nic nie daje :/

0

Pokaż kawałek kodu zawierający podpięcie stylu i js. Upewnij się czy istnieje podmieniany css.

0

OK, to jest w head:

<link rel="stylesheet" href="/templates/adiksw_template/css/template_1440.css" type="text/css" />
<script type="text/javascript">
  if ( screen.availWidth<1440 )
    document.getElementsByTagName('LINK')[0].href = 'templates/adiksw_template/css/template.css';
</script>

Ściezki styli są na pewno dobre.

0

Wg mnie to powinno działać dla rozdzielczości < 1440 a dla wyższych nie.
Wywal slasha na początku href.

0

A rzeczywiście niepotrzebie się zaplątał. No domyślnie ładuje styl tempalte_1440.css a jak rozdzialka jest mniejsza to ma ładować styl template.css który ma mniejsze rozmiary itd. Ale ładuje ten duzy bez względu na małą rozdziałkę :P

0

Sprawdziłem, u mnie działa na IE i FF.
Albo masz jakąś literówkę albo Twoje cssy dają ten sam efekt.
Zobacz w konsoli błędów czy nic się nie pojawiło. Może masz wyłączoną obsługę js.

0

Już wiem czemu nie działało, miałem jeszcze wcześniej wczytywany inny styl i przez to. Nadałem id tym stylom i zmieniłem skrypt na getElementById i działa :D Dziękuję wszystkim :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1