Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX] mintAjax i przesuwanie (coś w stylu marquee)
Forum PHP.pl > Forum > Przedszkole
in5ane
Cześć, mógłby mi ktoś powiedzieć jak mam zrobić za pomocą ajaxa w bibliotece mintAjax coś w stylu marquee. Na stronie http://dancepiotrkow.pl/ w DIV'ie z pozdrowieniami o nazwie pozdr-text i chciałbym aby się one przesuwały (obojętne czy od prawej do lewej czy odwrotnie). Aha i tam teraz jest tak, że one się odświeżają co 10 sekund, po każdych 10 sekundach jest następne pozdrowienie.

Oto kod strony:
  1. <script type="text/javascript">
  2. function refresh() {
  3. var req = mint.Request();
  4. req.OnSuccess = function () { document.getElementById("pozdr-text").innerHTML = this.responseText;},
  5. req.OnError = function () {document.getElementById("pozdr-text").innerHTML = "Brak pozdrowień!";}
  6. req.Send ("generuj-pzdr.php");
  7. }
  8. var ginter=setInterval(refresh, 10000);
  9. <!--- ................... --->
  10. <div id="pozdr-text"></div>

mintAjax pobiera z pliku generuj-pzdr.php dane.

Z góry dziękuję za pomoc ;-)
gebp
Pomyśl i pokombinuj z Zmiana położenia i jeszczeTU i TU
Przyda Ci się "Czy animacja jeszcze trwa".
A wszystko za pomocą mintAJAX'a
in5ane
I tak nie wiem jak mam za pomocą tego zrobić, żeby normalnie na tej stronie mi w tym DIV'ie te pozdrowienia latały od prawej do lewej czy odwrotnie. Mógłby mi ktoś pomoc?

Pzdr..
erix
Utwórz kontener i co każdą jednostkę czasu przesuwaj obiekt w nim umieszczony o N pikseli. Jeśli już się kończy/zszedł z wizji, podstaw drugi/zmień zawartość.
in5ane
Nie jestem pijawą i spróbuje sam tongue.gif

  1. <script type="text/javascript">
  2. function refresh() {
  3. var req = mint.Request();
  4. req.OnSuccess = function () { document.getElementById("pozdr-text").innerHTML = this.responseText;},
  5. req.OnError = function () {document.getElementById("pozdr-text").innerHTML = "Brak pozdrowień!";}
  6. req.Send ("generuj-pzdr.php");
  7. }
  8. var ginter=setInterval(refresh, 10000);
  9. function Move() {
  10. mint.fx.Move("pozdr-text", 600, null, 20, 500);
  11. }
  12. <!--- ................... --->
  13. <div id="pozdr-text" onclick="Move()"></div>


No i to nie działa jak powinno ;/ Przesuwa się tak dziwnie, a powinno jak się w prawo przesuwa to się chować przed wyszukiwarką i w ogóle tak jakoś dziwnie jak się na to kliknie, no to od obrazka POZDROWIENIA się przesuwa i jeszcze jak się nowy pojawia no to nie w org. miejscu. I to chciałbym, aby się cały czas samo przesuwało od lewej do prawej (coś w stylu opcji <marquee>tekst</marquee>).
gebp
~in5ane
Używam w przykładzie używam mintAJAX'a (przy okazji polecam forum mintAJAX. Tam szybciej dostaniesz odp. nt. wpomnianej przez mnie biblioteki).
Poniżej podaje Ci przykład. Trzeba jaszcze pobawić się stylami aby wyglądało , no i odpowiednio generować pozdrowienia. Oczywiście to tylko poglądówka.
pokaz.html
Kod
<html>
<head>
<script type="text/javascript" src="mintajax.js"></script>
<script type="text/javascript">
//<![CDATA[
function get()

{ var req= mint.Request();
  
   req.OnSuccess = function() { $("box").innerHTML= req.responseText;
                                                  przewin(); }
   req.Send("plik.php");
}

function przewin()
{var  boxsize=GetWidth("box");  
   mint.fx.Move("pozdr", boxsize+10, null, 20, 2000);
}
//]]>
</script>
</head>
<body>
<div id="box" style="width: 400px; height: 100px; border: solid; z-index: 5;" >

</div>
<br />
<input type="button" value="POKAŻ" onclick="get()" />
</body>
</html>

plik.php
  1. <?php
  2.  
  3. echo " <div id=\"pozdr\" style=\"height: 90px; border: solid; border-color: lime;\" >
  4. Pozdrawiam wszystkich
  5. </div>";
  6.  
  7. ?>
in5ane
No mnie nie o to dokładnie chodzi, tylko o to, aby one się same cały czas przesuwały (dokładnie tak samo jak w marquee, tylko, że tutaj w ty mintAjax).
gebp
dodaj
  1. <body onload="get()" >


a do skryptu
  1. function get()
  2. {
  3. ...
  4. }
  5. var ginter=setInterval(get(), 10000);


Ja tylko pokazałem Ci przykład jak to można rozwiązać.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.