Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: XMLHTTPRequest + Efekt fade
Forum PHP.pl > Forum > XML, AJAX > AJAX
sebian
2.08.2009, 22:32:10
Witam serdecznie.
Osadziłem prosty skrypt js aby moja strona działała bez przeładowania ale chciałem jeszcze osadzic efekt przenikania "fade" przy zmianie pod stron, i nie wiem jak tego dokonać. Oto co mam:

Plik ajaxGetFile.js
Kod
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}


Menu ktore wywołuje skrypt:
Kod
<li><a href="javascript:ajaxpage('strona.html', 'box');">HOME</a></li>
<li><a href="javascript:ajaxpage('strona1.html', 'box');">FORUM</a></li>


I znacznik w ktorym skrypt osadza to co odczytuje:
Kod
<div id="box">
</div>


Wszystko działa tak jak nalezy, brakuje mi tylko tego efektu.
adrian.p
3.08.2009, 07:23:00
Proponuje zapoznać się z jQuery. Oczekiwany efekt uzyskasz minimalnym nakładem pracy a przy okazji nauczysz się czegoś użytecznego winksmiley.jpg
sebian
3.08.2009, 07:51:59
Gdybym chciał użyć jquery to bym tu nie pisał. Nie chce biblioteki, chce efekt dodac do tego co mam i to mi w zupełności wystarczy....
adrian.p
3.08.2009, 08:38:07
CODE
/* efekt graficznego wyswietlania sie zdjecia; s-szybkosc; n - id tagu*/
function blur(i,j,s,n) {
document.getElementById(n).style.filter="Alpha(Opacity="+i+")";
document.getElementById(n).style.opacity=""+(i/100)+"";

if ( i < 100 && j > 0 ) {
i += s;
j -= s;
setTimeout("blur("+i+","+j+","+s+",'"+n+"');",1);
}
}

blur(0,100,12,'box');


Kiedys cos takiego napisalem moze Ci sie to jakos przyda.
sebian
3.08.2009, 09:02:37
Tylko teraz jak to dodac...
wiem ze:
Kod
blur(0,100,12,'box');

Wywołuje funkcje blur ale jak to w linku umiescic gdy juz mam:
Kod
<li><a href="javascript:ajaxpage('strona.html', 'box');">HOME</a></li>


I jeszczenie wiem gdzie to zapakowac:
Kod
/* efekt graficznego wyswietlania sie zdjecia; s-szybkosc; n - id tagu*/
function blur(i,j,s,n) {
document.getElementById(n).style.filter="Alpha(Opacity="+i+")";
document.getElementById(n).style.opacity=""+(i/100)+"";

if ( i < 100 && j > 0 ) {
i += s;
j -= s;
setTimeout("blur("+i+","+j+","+s+",'"+n+"');",1);
}
}

Czy stworzyc z tego nowy plik js czy dodac do ajaxGetFile.js

EDIT: Dobra pokombinowałem i działa smile.gif Wielkie dzieki o to mi chodziło smile.gif

Osiagnąłem połowę celu smile.gif Zdało by sie jeszcze aby to płynnie znikalo biggrin.gif
adrian.p
3.08.2009, 11:52:37
CODE
function blur2(i,j,s,n) {
document.getElementById(n).style.filter="Alpha(Opacity="+j+")";
document.getElementById(n).style.opacity=""+(j/100)+"";

if( i > 0 && j > 0 ) {
i += s;
j -= s;
setTimeout("blur("+i+","+j+","+s+",'"+n+"');",1);
}
}


blur2(100,100,10,'box');


O ile sie nie myle to cos takiego...
sebian
3.08.2009, 12:03:08
Gdzies jest błąd, bo nie dziła, strona sie wczytuje ale bez efektu...
adrian.p
3.08.2009, 12:30:08
Ta linijke
Kod
setTimeout("blur("+i+","+j+","+s+",'"+n+"');",1);


zamien na:

Kod
setTimeout("blur2("+i+","+j+","+s+",'"+n+"');",1);


Musisz wybaczyc ale nie mam czasu by to teraz sprawdzac wiec dalej moga być błędy.
sebian
3.08.2009, 12:40:35
nie no spoko dziaała tongue.gif Ale nie z taki sposob jak bym chciał biggrin.gif Bo jak klikam na odnosnik to mi sie pojawia tresc i znika ;D

Chodzi mi o to aby to działało na takiej zasadzie jak tu KLIK

probowałem wykozystac mintajax ale mi nie wyszło.
adrian.p
3.08.2009, 13:05:11
Moze wrzucisz to gdzies na serwer? Łatwiej będzie debugowac winksmiley.jpg
sebian
3.08.2009, 13:13:55
alez proszę Cie bardzo smile.gif
KLIK
adrian.p
3.08.2009, 14:14:07
Href linkow powinien wygladac nastepujaco:

Kod
javascript:blur2(100,100,10,'box');ajaxpage('strona.html', 'box');blur(0,100,10,'box');


badz tez stworz nowa funkcje np:

Kod
function open_link(href) {
blur2(100,100,10,'box');
ajaxpage(href, 'box');
blur(0,100,10,'box');
}


i wtedy href linku powinien wygladac nastepujaco:

Kod
javascript:open_link('strona.html');


I nie bede sie tu juz przyczepial ze pod hrefa nie powinnismy podczepiac zdarzej js winksmiley.jpg
sebian
4.08.2009, 19:40:21
Dodałem tą nową funkcje i te href zmieniłem... ale sa takie migniecia dziwne, nie zależnie od przegladarki...
nie działa to płynnie...
Aktualnie wyglada to tak: KLIK

Zastanawiam sie czy nie da sie tego KLIK przemielic tak aby działało pod tym menu, domyślam się ze wtedy siłą rzeczy będzie trzeba zastosować bibliotekę mintajax. Bo ja widzę tamte funkcje sa płynne i bez problemowe, no chyba ze te takze da sie tak dostosowac...

PS. To są moje początki z js także każda wskazówka dla mnie jest cenna... Cały czas miele rożne dokumentacje rożnych bibliotek i staram sie wyciagać
wnioski, ale jak każdy początek, taki i ten jest najtrudnieszy smile.gif

Dobra troche pokombinowałem i sie udało biggrin.gif
Oto kody:

Użyłem mintAjax:
Kod
<script type="text/javascript" src="mintAjax.js"></script>


Stworzyłem/przerobiłem funkcje:
Kod
<script type="text/javascript">
function OnLoad()
{
strona('ofirmie');
}
var req = null;
/*
function strona(cel) {
$('loader').style.display = 'block';
var req = mint.Request();
req.AddParam("parametr",cel);
req.OnSuccess = function () {
$('loader').style.display = 'none';
}
req.Send('../tresc.php','tresc_ajax');
}
*/

function ShowContent() {
   $("box").innerHTML = req.responseText;
    mint.fx.Fade("box", 100, 10, 500);

}

function strona(cel) {
//    $('loader').style.display = 'block';
        $('loader').style.visibility = 'visible';
   req = mint.Request();
   req.AddParam("parametr",cel);
    
   req.OnSuccess = function() {
//    $('loader').style.display = 'none';
    $('loader').style.visibility = 'hidden';
      mint.fx.Fade("box", 0, 10, 500, null, ShowContent);
   }
  
   req.Send("../tresc.php")
}
</script>


Wykozystałem funkcje tabów z minta:
Kod
function OnLoad() {  
    var tabs = mint.gui.CreateTabWidget("tabsContent");

    tabs.fading = true;
    tabs.activeClass = "active";
    tabs.hoverClass = "hover";
  
    tabs.AddItem("tab1", "tab1", "text", "tab1.html");
    tabs.AddItem("tab2", "tab2", "text", "tab2.html");
    tabs.AddItem("tab3", "tab3", "text", "tab3.html");
    
    mint.fx.Round("tabsContentOuter", "all", "small", true);
}


Dodałem w body aby tab1 się domyślnie ładował:
Kod
<body onload="OnLoad();">


Zmodyfikowane odnośniki menu:
Kod
<li id="tab1"><a href="#">HOME</a></li>
<li id="tab2"><a href="#">FORUM</a></li>
<li id="tab3"><a href="#">TOP 20</a></li>


I znaczniki w których pojawia mi się źródło tab1,2,3.html z efektem zamierzonym biggrin.gif
Kod
<div id="box">

<div id="tabsContentOuter">
    <div id="tabsContent"></div>
</div>


Tu podaje linka <<KILK KLIK>> do koncowego efektu, dokładnie takiego jaki chciałem osiagnac.. smile.gif

Także udało się dzięki nieprzespanej nocy i samozaparciu smile.gif
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.