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ę?
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.
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>
<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>
No nie działa :/ Wczytuje ten pierwszy css ale ten warunek mimo że jest spełniony nic nie daje :/
Pokaż kawałek kodu zawierający podpięcie stylu i js. Upewnij się czy istnieje podmieniany css.
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.
Wg mnie to powinno działać dla rozdzielczości < 1440 a dla wyższych nie.
Wywal slasha na początku href.
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
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.
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 :)