Forum PHP.pl > [js][jquery] problem z preloaderem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [js][jquery] problem z preloaderem

Forum PHP.pl > Forum > Po stronie przeglądarki

michaelt

26.10.2009, 20:24:30

Witam

Zwracam się do Was z prośbą o pomoc w rozwiązaniu niżej opisanego problemu:

Dostosowuję do swoich potrzeb kod dynamicznej zmiany treści w danym <div>

[HTML] pobierz, plaintext 
<!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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
 
<script type="text/javascript">
 
function switchdivs(){
$('#LoadingDiv').fadeOut('slow',function(){
   $('#ContentDiv').fadeIn('slow'); });
}
</script>
 
</head>
<body onload="switchdivs();">
<div id="dataDiv" class="dataDiv"><img src="obrazek2.jpg"></div>
<div id="selectorsDiv" class="mainDiv">
 
<!--pierwszy art--><a href="java script:scroll(0,0);"><img src="obrazek_norm.jpg" onMouseOver="itemrollover(this)" onMouseOut="itemrollout(this)" 
       onclick="loadArticle(1)" id="btn1"></a>
 
<!--drugi art--><input type="button" class="myButton" value="Drugi artykuł" 
       onclick="loadArticle(2)" id="btn2">
 
<!--trzeci art--><input type="button" class="myButton" value="Trzeci artykuł"
       onclick="loadArticle(3)" id="btn3">
 
 </div>
</body>
</html>
[HTML] pobierz, plaintext

Wszytko działa jak należy tj. klikając na obrazek <--pierwszy art-->, lub buttony drugi i trzeci w div id="dataDiv" wczytuje się zawartość plików zdefiniowanych wcześniej w ajax.js

Postanowiłem dodać do tego preloader, tak w każdym z artykułów najpierw pojawiał się gif typu please wait.... i dopiero później z ladnym przejściem pojawiał się artykuł.

Nie mam za bardzo pojęcia o javascript itp. znalazłem za to w sieci skrypt na jquery, który pasuje do scenariusza

Jak łatwo zauważyć jest on zaimplementowany w podanym wyżej kodzie - function switchdivs.

Problem polega na tym, że nie chce to za bardzo działać we "wczytywanych" plikach/artykułach. Dla przykładu art1:

[HTML] pobierz, plaintext 
<div id="LoadingDiv" class="dataDiv"><img src="obrazek.gif"></div>
<div id="ContentDiv" style="display:none" class="dataDiv">tekst art, img. etc....</div>
[HTML] pobierz, plaintext

obrazek.gif = loading please wait.... Powinien się zamienić z przejściem fadeIn('slow') z treścią artykułu z drugiego diva. Sprawdzałem działanie na innej stronie i działa bez zarzutu.

Czy jest szansa, że to da się połączyć ze sobą tj. zmiana kontentu w dataDiv i preloader?

Co powinienem zrobić? pewnie wystarczy dopisać linijkę kodu i będzie hulać a ja siedzę nad tym mhhh długo

Z góry dzięki za pomoc.

erix

2.11.2009, 12:48:48

Strzelam, że gdzieś musisz zmienić metodę podpinania zdarzeń z konkretnego na live. Puść to najlepiej na żywo.

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.