XMLHTTPRequest + Efekt fade Opcje

[sebian]

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]

Proponuje zapoznać się z jQuery. Oczekiwany efekt uzyskasz minimalnym nakładem pracy a przy okazji nauczysz się czegoś użytecznego

[sebian]

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]

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]

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 Wielkie dzieki o to mi chodziło

Osiagnąłem połowę celu Zdało by sie jeszcze aby to płynnie znikalo

Ten post edytował sebian 3.08.2009, 08:56:40

[adrian.p]

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...

Ten post edytował adrian.p 3.08.2009, 11:53:30

[sebian]

Gdzies jest błąd, bo nie dziła, strona sie wczytuje ale bez efektu...

[adrian.p]

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.

Ten post edytował adrian.p 3.08.2009, 12:30:53

[sebian]

nie no spoko dziaała Ale nie z taki sposob jak bym chciał 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]

Moze wrzucisz to gdzies na serwer? Łatwiej będzie debugowac

[sebian]

alez proszę Cie bardzo
KLIK

[adrian.p]

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

[sebian]

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

Dobra troche pokombinowałem i sie udało
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

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..

Także udało się dzięki nieprzespanej nocy i samozaparciu

Ten post edytował sebian 3.08.2009, 15:19:48