Forum PHP.pl > [JavaScript]Pobieranie danych z CSS

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Pobieranie danych z CSS

Sueroski

12.03.2010, 20:01:47

Witam mam problem. Chciałbym zrobić powoli zanikające okienko, więc wykombinowałem coś takiego:

[HTML] pobierz, plaintext 
<style type="text/css">
#tresc{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top:  120px;
    margin-left: 120px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
function display(){
    document.getElementById('tresc').style.opacity=document.getElementById('tresc').style.opacity-0.01;
}
</script>
<a onclick="document.getElementById('tresc').style.visibility='visible';setTimeout('display()',100)" href="#">a</a>
<div id="tresc">a <a onclick="document.getElementById('tresc').style.visibility='hidden';" href="#">a</a></div>
[HTML] pobierz, plaintext

Niestety po kliknięciu na przycisk okienko (ten div z "a" i zamykającym okno "x") całkowicie znika zamiast stopniowo robić się przeźroczyste. Podejrzewam, że po prostu nie może odczytać coś danych z css. Pytanie tu - jak to zrobić?

Wicepsik

12.03.2010, 20:14:10

Użyj frameworka jQuery.

piotrooo89

12.03.2010, 20:18:28

a dokładnie fadeIn() i/lub fadeOut().

Sueroski

12.03.2010, 20:26:05

Ok. Udało mi się coś wykombinować. Oto działający kod:

[HTML] pobierz, plaintext 
<style type="text/css">
#tresc{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top:  120px;
    margin-left: 120px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
a=1;
function display(){
    document.getElementById('tresc').style.opacity=a-0.1;
    a=a-0.1;
    //alert(1)
    setTimeout('display()',100)
}
</script>
<a onclick="document.getElementById('tresc').style.visibility='visible';setTimeout('display()',100)" href="#">a</a>
<div id="tresc">a <a onclick="document.getElementById('tresc').style.visibility='hidden';" href="#">a</a></div>
[HTML] pobierz, plaintext

kamil4u

12.03.2010, 20:35:51

A jeśli jednak chcesz zrobić to w czystym JS, co jest bardzo proste to:
- nie setTimeout, a setInterval
- element.style pobiera style tylko z atrybutu style, więc po prostu przypisz przezroczystość w tym atrybucie
- jeżeli jednak nie możesz tego zrobić pobaw się z getComputedStyle - https://developer.mozilla.org/en/DOM:window.getComputedStyle
- użyj operatora -=
- referencję do elementu możesz zapisać do zmiennej globalnej, zamiast szukać elementu co sekundę w drzewie DOM

@up: popraw ten kod, stosując się do moich wskazówek, bo niestety zbyt ładnie on nie wygląda.

Sueroski

12.03.2010, 20:43:37

Aha dzięki. A możesz mi wytłumaczyć, że za pomocą tego kodu:

[HTML] pobierz, plaintext 
<style type="text/css">
#tresc{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top:  120px;
    margin-left: 120px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
a=1;
function close(){
    document.getElementById('tresc').style.opacity=a-0.01;
    a=a-0.01;
}
function open(){
    document.getElementById('tresc').style.opacity=a+0.01;
    a=a+0.01;
}
</script>
<a onclick="document.getElementById('tresc').style.visibility='visible';setInterval('open()',100)" href="#">a</a>
<div id="tresc">a <a onclick="document.getElementById('tresc').style.visibility='hidden';setTimeout('close()',100)" href="#">a</a></div>
[HTML] pobierz, plaintext

Okienko zamyka się bez efektu zanikania? Po prostu normalnie? Gdzie jest błąd?

kamil4u

12.03.2010, 21:37:07

Błędów jest bardzo dużo(lepiej zrób to według moich wskazówek, bo inaczej będzie tylko ciężej):
- document.getElementById('tresc').style.visibility='hidden'; <-- już na wstępie chowasz tego div-a, więc nie może być mowy o żadnym efekcie
- nie setTimeout, a setInterval (już Ci to pisałem)
- zmienna a rośnie w nieskończoność, a może być jedynie w przedziale <0,1>
- podpowiedź: użyj tej funkcji: clearInterval

https://developer.mozilla.org/pl/DOM/window.setInterval
https://developer.mozilla.org/en/DOM/window.clearInterval

Sueroski

13.03.2010, 10:50:19

Ok. Dzięki za porady

Jednak muszę was jeszcze troszkę pomęczyć

Otóż warunek nie chce się spełnić. Postawiłem alert, żeby mi pokazywał wartość "a" i przy 3 wykonaniu odliczenia wychodzi "0.7000000000000001" i dalej ten błąd się cały czas ciągnie i warunek nie może się wykonać. JS kiepski z matmy, że nie potrafi poprawnie odliczać po 0.1? Proszę o pomoc (zaś

)

[HTML] pobierz, plaintext 
<style type="text/css">
#tresc{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-top:  120px;
    margin-left: 120px;
    opacity: 1;
    filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
a=1;
function close(){
    document.getElementById('tresc').style.opacity=a-0.1;
    a=a-0.1;
    alert(a)
    if(a==0){
        clearInterval(intervalID)
        alert('close end')
    }
}
function open(){
    document.getElementById('tresc').style.opacity=a+0.1;
    a=a+0.1;
    if(a==1){
        clearInterval(intervalID)
        alert('open end')
    }
}
</script>
<a onclick="intervalID =setInterval('open()',10)" href="#">a</a>
<div id="tresc">a <a onclick="intervalID=setInterval('close()',10)" href="#">a</a></div>
[HTML] pobierz, plaintext

kamil4u

13.03.2010, 12:21:58

Nigdy nie dawaj alertów w nieskończonej pętli

Szczerze powiedziawszy nie wiem, dlaczego tak się dzieje, a nie chce mi się tego dokładnie analizować. Zamiast znaku równości(==)zastosuj znaki mniejsze równe i większe równe. I dla pewności w if-e przypisz od a dokładnie 1 lub 0.

Po co na siłę, chcesz korzystać z tej zmiennej a?

Kod

Nie wiem dlaczego, ale w funkcji open, nie specjalnie chce dzialac +=

Sueroski

14.03.2010, 13:51:57

Dzięki. Odświeżam, bo może ktoś wie czemu nie chce się dodawać? (wersja z odejmowaniem liczb ujemnych to też dobre wyjście, ale jestem ciekaw)
JS ma chyba jakąś inną logikę myślenia

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.