Forum PHP.pl > [PHP][Ajax][HTML][CSS] Dynamiczna strona

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [PHP][Ajax][HTML][CSS] Dynamiczna strona

MateuszS

1.02.2009, 13:58:57

Witam. Mam zamiar zrobić ładną stronę na Ajaxie, Javie, CSS itd. ;] I tu moje pytanie. Czy da się zrobić aby gdy klikne jakiś link na stronie kolor tła dynamicznie się zmieniał na inny? Ale dopiero gdy klikne w link. Wiem ze to moze proste pytanie, jednak bede zadawal takich wiele bo w Ajaxie jestem zielony ;] Pozdrawiam.

piotrooo89

1.02.2009, 14:04:05

po co ajax? js powinno Ci wystarczyć zdarzenie onClick.

[HTML] pobierz, plaintext 
<a href="" onClick="document.style.backgroundColor='red';">Link</a>
[HTML] pobierz, plaintext

MateuszS

1.02.2009, 14:13:50

Ale jak już mowilem chce aby ta strona dynamicznie sie zmieniala, jak jest na poczatku zielona a potem ma byc czerwona to zeby przechodzil kolor przez barwy posrednie.. nie wiem czy wiesz o co mi chodzi. Czy powyzszy skrypt tak dziala?

piotrooo89

1.02.2009, 14:22:14

mintAjax ale przyznam się że nie stosowałem tego do tła strony i nie bardzo wiem co i jak.

MateuszS

1.02.2009, 14:23:44

No własnie z tej strony pomysl zaczerpnalem. Tam jest na przykladzie kwadracika, gdy na niego najedziesz zmienia odcien koloru, mi chodzi o to zeby gdy klikne na link zmienil sie odcien tla strony

Spyder

1.02.2009, 14:24:53

http://www.ianodonnell.com/2008/11/javascr...ur-dynamically/
http://www.ianodonnell.com/postexamples/changecolour/

MateuszS

1.02.2009, 14:35:46

Nom dzieki, da sie ten skrypt przerobic zeby kolor tej strony przechodzil ladnie w kolor drugiej?

Spyder

1.02.2009, 14:51:47

Jak chcesz ladne plynne przejscie pomiedzy kolorami to tu masz po polsku bys musial zmiksowac oba albo ten przerobic:

http://mintajax.pl/Przewodnik/Efekty/

Wystarczy onmouseover zmienic na onclick i dac wielki div 100% na 100% zaraz po body z odpowiednim id i bedzie smigac proscizna

MateuszS

1.02.2009, 15:42:59

Dzięki wielkie.

isso

1.02.2009, 15:44:58

myślę, że godnym polecenia jest również prototype

MateuszS

1.02.2009, 17:13:38

und was ist das?!

piotrooo89

1.02.2009, 17:17:02

Cytat(isso @ 1.02.2009, 15:44:58 )

myślę, że godnym polecenia jest również prototype

zupełnie nie rozumiem po co strzelać do muchy z armaty, skoro mamy zwykłą łapkę na muchy? i tym i tym osiągniemy cel - zbijemy muche - ale jak sie namęczymy to już inna sprawa

Cytat(MateuszScirka @ 1.02.2009, 17:13:38 )

und was ist das?!

prototype framework js.

MateuszS

1.02.2009, 23:15:41

Kurcze macie pojecie jak to zrobic zeby dzialalo?

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript" src="mintAjax.js"></script>
<script>
 
function ColorIn() {
    mint.fx.Color("box", "backgroundColor", null, "B22222", 20, 500);
    mint.fx.Color("box", "borderColor", null, "000000", 20, 500);
}
 
function ColorOut() {
    mint.fx.Color("box", "backgroundColor", null, "B7C059", 20, 500);
    mint.fx.Color("box", "borderColor", null, "8F9D11", 20, 500);
}
</script>
</head>
<body>
 
<div id="box" onmouseover="ColorIn()" onmouseout="ColorOut()"></div> 
 
 
</body>
</html>
[HTML] pobierz, plaintext

Nie bardzo to chce dzialac, pusty ekran ;/

kilas88

2.02.2009, 08:01:49

Cytat(MateuszScirka @ 1.02.2009, 13:58:57 )

Da się zrobić na wiele różnych sposobów. Na moje jednak, jeśli chcesz całą stronę budować opartą na jakichś efektach, dobrze by było byś wykorzystał do tego jakis framework. Sam korzystam z jQuery, więc tego też Ci polecę. Chcesz zmienić tło? Poczytaj o $("body").effect().

MateuszS

2.02.2009, 22:56:03

Dzięki, a możecie powiedziec co nie tak jest z kodem powyzej? Plik ajaxa wkleilem w dobre miejsce

Pomoze ktos? Jak Wy zagniezdzacie kod ze Wam dziala a mi nie

Sam poczatek a juz komplikacje. Wg mnie powinno byc OK robie zgodnie z wskazaniami

erix

2.02.2009, 23:03:42

A w ogóle linkujesz do mintAjax? Zaglądałeś do konsoli błędów przeglądarki?

MateuszS

2.02.2009, 23:09:38

Tak jak pow. w kodzie, odwolalem sie do tego pliku, jest w folderze odpowiednim. Teoretycznie wszystko powinno byc OK.. a jednak..

gebp

2.02.2009, 23:11:55

Pytanie jedno - częsty błąd (jak byś zajrzał na forum mintAjax'a to możliwe że sam byś doszedł).
Czy na serwerze/dysku masz plik "mintAjax.js" czy "mintajax.pl" ( ważna WIELKOŚĆ liter).

MateuszS

2.02.2009, 23:29:04

Plik mam nazwany mintAjax.js. W kodzie też tak samo. Zmieniłem na małe litery i nic nie pomogło

gebp

2.02.2009, 23:36:32

Aby zmienić któryś z parametrów CSS za pomocą mintAjax'a w danym obiekcie, w większości obiekt ten musi mieć nadaną tą wartość.
Czyli jeżeli zmieniasz background-color obiekt musi mieć nadany jakiś background-color.

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript" src="mintAjax.js"></script>
<script>
 
function ColorIn() {
mint.fx.Color("box", "backgroundColor", null, "B22222", 20, 500);
mint.fx.Color("box", "borderColor", null, "000000", 20, 500);
}
 
function ColorOut() {
mint.fx.Color("box", "backgroundColor", null, "B7C059", 20, 500);
mint.fx.Color("box", "borderColor", null, "8F9D11", 20, 500);
}
</script>
</head>
<body>
 
<div id="box" onmouseover="ColorIn()" onmouseout="ColorOut()" style="border: solid; width: 100px; height: 100px; background-color: #ff8000;"> tutaj zmiany</div>
 
 
</body>
</html>
[HTML] pobierz, plaintext

MateuszS

2.02.2009, 23:39:07

Rozumiem. Na przyszłość będę pamiętał. Pozdrawiam

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.