Forum PHP.pl > [HTML][CSS][JavaScript] Zmiana klasy dla diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS][JavaScript] Zmiana klasy dla diva - dziwny problem

puz219

18.08.2008, 18:57:09

Witam.

Mam na stronie diva, dla którego napisałem skrypt w js, który miał zmieniać jego szerokość poprzez nadanie mu odpowiedniej klasy, ale niestety nie działa i nie wiem dlaczego, sprawdzałem zarówno w ff 3 jaki i w ie7 i w obydwu nic.

Oto div:

[HTML] pobierz, plaintext 
<div id="nowosci" class="nowosci_short"></div>
<br>
<a href="#" onclick="zmienrozmiar()">Zmien rozmiar ramki</a>
[HTML] pobierz, plaintext

Teraz CSS:

[HTML] pobierz, plaintext 
#nowosci {
background-color: #d6d6d6;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
height:25px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #0a0f1a;
vertical-align: middle;
}
 
.nowosci_short {
width: 998px;
border-right: 1px solid #0a0f1a;
border-left: 1px solid #0a0f1a;
}
 
.nowosci_wide {
width: 100%;
border-right: 0pt;
border-left: 0pt;
}
[HTML] pobierz, plaintext

I na koniec js:

[HTML] pobierz, plaintext 
function zmienrozmiar() {
document.getElementById('nowosci').className = 'nowosci_wide';
}
[HTML] pobierz, plaintext

Czy ktoś spotkał się z takim problemem, bo już przeczytałem ten kawałek kodu z 30 razy i prawie na 100% jestem pewny, że nie popełniłem, żadnego błędy, więc dlaczego to nie chce działać?

Proszę o pomoc.

paziek

18.08.2008, 19:22:30

Kod

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE        html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html            xmlns="http://www.w3.org/1999/xhtml"
                xml:lang="pl"
                lang="pl">
<head>
    <meta http-equiv="Content-Type"        content="text/html; charset=utf-8" />
    <title>Tytuł</title>
    <meta http-equiv="Content-Language"    content="pl" />
    <meta name="Description"            content="Opis" />
    <meta name="Keywords"                content="słowa, kluczowe" />
    <meta name="Author"                    content="Łukasz 'Paziek' Kamiński" />

    <style type="text/css">
        #nowosci {
            background-color: #d6d6d6;
            filter:alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            height:25px;
            border-top: 1px solid #eeeeee;
            border-bottom: 1px solid #0a0f1a;
            vertical-align: middle;
        }

        .nowosci_short {
            width: 998px;
            border-right: 1px solid #0a0f1a;
            border-left: 1px solid #0a0f1a;
        }

        .nowosci_wide {
            width: 100%;
            border-right: 0pt;
            border-left: 0pt;
        }
    </style>
    <script type="text/javascript">
        function zmienrozmiar() {
            document.getElementById('nowosci').className = 'nowosci_wide';
        }
    </script>
</head>
<body>
    <div id="nowosci" class="nowosci_short"></div>
    <br>
    <a href="#" onclick="zmienrozmiar()">Zmien rozmiar ramki</a>
</body>
</html>

Działa pod Operą 9.52 oraz Firefox 3.0.1
Może mieszasz ten kod z innym - sprawiającym problemy?

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.