MozillaPL.org - polskie centrum Mozilli

Główne menu:

text opacity i js

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

Odpowiedz

text opacity i js

Postautor: pppd » 10 kwietnia 2010, 07:21

Przeglądarka: Mozilla/5.0 (X11; Linux 2.6.33 athlon64x2; Linux i686; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Witam

Mam takie cos:

Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<script language="JavaScript1.2">
hex=255 // Initial color value.
function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",20);
}
else
hex=255 //reset hex value
}
</script>
<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-2" />
</head>
<body>
<div id="sample" style="width:100%">John slowly faded into view</div>
<button onClick="fadetext()">Fade Text</button>
</body>
</html>
~                                                                                                                           
~                                                                                                                           
~                     


Co zrobic aby tekst wylanial sie zaraz po zaladowaniu strony, bez oczekiwania na nacisniecie przycisku?

Pozdrawiam
pppd
 
Na górę

Odp: text opacity i js

Postautor: Mirek » 10 kwietnia 2010, 11:36

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9 (.NET CLR 3.5.30729)

Za pewne wystarczy zmienić <body> na:
Kod: Zaznacz cały
<body onload="fadetext()">
Mirek
Moderator
 
Posty: 2158
Z nami od: 09 sierpnia 2007, 20:37
Na górę

Odp: text opacity i js

Postautor: dexter » 10 kwietnia 2010, 12:33

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a5pre) Gecko/20100408 Minefield/3.7a5pre

Zamiast javascriptu można użyć css transitions, wyjdzie dokładnie ten sam efekt.
dexter
Moderator
 
Posty: 8498
Z nami od: 02 października 2004, 21:30
Na górę

Odp: text opacity i js

Postautor: Grzegorz » 10 kwietnia 2010, 13:15

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.3a5pre) Gecko/20100409 Minefield/3.7a5pre

Z tym, że CSS transitions jest obsługiwane dopiero od Firefoksa 3.7 (i to nie wiem czy w całości), a może się mylę?
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.

Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Grzegorz
Moderator
 
Posty: 7486
Z nami od: 15 kwietnia 2007, 12:33
Na górę

Odp: text opacity i js

Postautor: dexter » 10 kwietnia 2010, 13:56

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.3a5pre) Gecko/20100408 Minefield/3.7a5pre

Tak, od Firefoksa 3.7 (nie wspominając o Operze i webkitowych). Nie w całości, ale ten efekt da się wykonać.
dexter
Moderator
 
Posty: 8498
Z nami od: 02 października 2004, 21:30
Na górę

Odp: text opacity i js

Postautor: pppd » 11 kwietnia 2010, 10:45

Przeglądarka: Mozilla/5.0 (X11; Linux 2.6.33 athlon64x2; Linux i686; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Dzieki za poprzednie odpowiedzi. Ale mam kolejny problem. Tekst sie ladnie wylania, ale tylko w naglowkach. Reszta nie. Dlaczego?

Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
    <title>bookmarks</title>
    <link rel="icon" href="ktip.png" />
    <style type="text/css">

    *   {
       margin: 0;
       }

    body   
       {
       font-size: 10pt;
       margin: 10px;
       font-family: monospace;
       border: 1px;
       background-color: white;
       color: black;
       }

    a   
       {
       text-decoration: none;
       color: #444444;
       outline: none;
       padding-left: 5px;
       padding-right: 5px;
       letter-spacing: -1px;
       margin-left: -5px;
       }

    a:hover   
       {
       color: black;
       background-color: rgb(233, 233, 233);
       -moz-border-radius: 2px;
       }

    ul   
       {
       margin-top: 0px;
       list-style-type: square;
       color: #444444;
       }

    li:hover
       {
       color: gray;
       }

    h3   {
       font-size: 10pt;
       font-weight: bold;
       text-decoration: none;
       margin-bottom: 6px;
       margin-top: 16px;
       }

    hr   {
       color: black;
       border: 0px;
       border-bottom: 1px solid;
       }

    </style>
    <script language="JavaScript1.2">
    hex=255
    function fadetext(){
    if(hex>0) {
    hex-=11;
    document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
    setTimeout("fadetext()",80);
    }
    else
    hex=255
    }
    </script>
    <meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-2" />
    </head>
    <body onload="fadetext()">
    <div id="sample">
    <hr />
    <h3>google</h3>
    <ul>
    <li><a href="http://google.com">google.com</a></li>
    <li><a href="http://goosh.org">goosh.org</a></li>
    <li><a href="http://google.pl/advanced_search?hl=pl">google.pl/advanced</a></li>
    <li><a href="http://google.pl/firefox">google.pl/firefox</a></li>
    <li><a href="http://translate.google.pl">translate.google.pl</a></li>
    <li><a href="http://docs.google.com">docs.google.com</a></li>
    <li><a href="http://google.com/webmasters/tools">google.com/webmasters/tools</a></li>
    </ul>
    <br />
    <hr />
    </div>
    </body>
    </html>


Pozdrawiam
pppd
 
Na górę

Odp: text opacity i js

Postautor: dexter » 11 kwietnia 2010, 12:16

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

Pewnie dlatego, że własność color dla elementów ul, li i a w stylu nadpisuje zmianę stylu w funkcji js. Zauważ, że dla elementu h3 nie ustawiasz koloru w stylu.
dexter
Moderator
 
Posty: 8498
Z nami od: 02 października 2004, 21:30
Na górę

Odp: text opacity i js

Postautor: pppd » 11 kwietnia 2010, 12:42

Przeglądarka: Mozilla/5.0 (X11; Linux 2.6.33 athlon64x2; Linux i686; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3

Ok. Wywalilem CSS i dalej nie do konca dziala. Teraz li sie wylania, ale odnosniki juz nie.

Kod: Zaznacz cały
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>bookmarks</title>
<link rel="icon" href="ktip.png" />

<script language="JavaScript1.2">
hex=255
function fadetext()
        {
        if(hex>0)
                {
                hex-=11;
                document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
                setTimeout("fadetext()",80);
                }
        else
        hex=255
        }
</script>

<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-2" />
</head>
<body onload="fadetext()">
<div id="sample">
<h3>google</h3>
<ul>
<li><a href="http://google.com">google.com</a></li>
<li><a href="http://goosh.org">goosh.org</a></li>
<li><a href="http://google.pl/advanced_search?hl=pl">google.pl/advanced</a></li>
<li><a href="http://google.pl/firefox">google.pl/firefox</a></li>
</ul>
</div>
</body>
</html>


Pozdrawiam
pppd
 
Na górę

Odp: text opacity i js

Postautor: Mirek » 11 kwietnia 2010, 15:12

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9 (.NET CLR 3.5.30729)

Nie jestem znawcą w tym temacie, ale dla elementów wewnątrz diva można by użyć przy definiowaniu stylu dziedziczenia wartości odpowiedniego atrybutu -> color:inherit albo przerobić skrypt tak, żeby schodził do potomków, albo przypisać elementom, które mają się wyłaniać klasę (powiedzmy class="faded") i przerobić skrypt zamieniając linijkę z document.getElementById(...).style.color=rgb(...);
na coś w stylu:
Kod: Zaznacz cały
tofade = document.getElementsByClassName("faded");
for(j=0; j<tofade.length; ++j)
  tofade[j].style.color=rgb(...);

Może ktoś inny podpowie, który sposób będzie najwłaściwszy. Albo zaproponuje jeszcze jakiś inny.
Mirek
Moderator
 
Posty: 2158
Z nami od: 09 sierpnia 2007, 20:37
Na górę
Odpowiedz

Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Google [Bot]

Powered by phpBB® Forum Software © phpBB Group
Przejdź do powiązanej strony

Nawigacja:

Stopka: