Just nu i M3-nätverket
Gå till innehåll

"Var god vänta"


Mentor

Rekommendera Poster

Hur gör man om jag har en söksida och vill visa "Var god vänta" på sidan, om en användare gör en sökning, tills resultatet kommer.

 

Om ni går in på http://195.67.69.169/kocny/ och gör en sökning på t ex kabel så förstår ni vad jag menar

 

[inlägget ändrat 2004-02-25 11:37:25 av Mentor]

Länk till kommentar
Dela på andra webbplatser

Glenn Larsson

Gör bara en till sida som visas innan du gör sökningen, gör så att den tar variablerna och skickar dom vidare till söksidan.

 

Mvh

G

 

Länk till kommentar
Dela på andra webbplatser

Ja, man kan använda session eller <input type="hidden"..

men jag förstår ändå inte hur man ska få "Var god vänta" att visas tills värderna hämtats från databasen och sen försvinna och datan visas.

 

Länk till kommentar
Dela på andra webbplatser

Så här har de gjort på sidan du länkade till:

 

Allra först i bodyn skapar de ett lager mha javascript, detta skall vara placerat först och täcka upp i stort sett hela sidan.

Det är egentligen inga konstigheter alls, när sidan laddats klart göms det lagret och sökresultaten visas.

 

Så egentligen visas resultatet hela tiden, men den korta stund det tar att ladda sidan placeras ett lager överst så att bara det är synligt.

 

Problem kan uppstå om man länkar till tex externa bilder som tar tid att ladda, eforum länkar tex till se.sitestat.com längst ner på sidan, vilket fördröjde laddningstiden med flera sekunder för mig, om eforum skulle ha haft en väntafunktion som ovan skulle man uppleva det som att sidan vore seeeeeeg även fast den egentligen inte är det.

 

Numera blockar jag bl. a. sitestat-domänen i Mozilla vilket leder till att eforum laddas mkt snabbare än tidigare :)

 

Länk till kommentar
Dela på andra webbplatser

Hur kombinerar man så att "Var god vänta" göms precis när när resultatet ska visas.

Kanske du kan exemplera så jag förstår bättre.

 

 

Länk till kommentar
Dela på andra webbplatser

Mjo, det fungerar som så här:

 

 

<script type="text/javascript">
function doneLoading() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}
</script>

 

Sedan bygger du din sida på detta vis:

<body onload="doneLoading();">
<div id="loading">Sidan laddas...</div>

<div id="content" style="display:none;">
din html här som vanligt...
</div>

 

Vad detta gör är att visa "Sidan laddas..." fram tills dess att sidan laddats klart, då visas dess innehåll istället och det tidigare meddelandet tas bort. Man kan göra på flera olika sätt, både bättre och sämre.

 

Säg till om du vill ha det bättre förklarat.

 

Länk till kommentar
Dela på andra webbplatser

Ja jag förstår vad du menar, kajn inte testa det just nu men ska göra det så fort jag kan. Kommer med vidare svar om hur det funkade.

 

Länk till kommentar
Dela på andra webbplatser

  • 2 years later...

Har problem att få det att fungera tillsamman med en scroll function

 

i JS-filen

function verifyCompatibleBrowser(){ 
   this.ver=navigator.appVersion 
   this.dom=document.getElementById?1:0 
   this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
   this.ie4=(document.all && !this.dom)?1:0; 
   this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 

   this.ns4=(document.layers && !this.dom)?1:0; 
   this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
   return this 
} 
bw=new verifyCompatibleBrowser() 


var speed=50 

var loop, timer 

function ConstructObject(obj,nest){ 
   nest=(!nest) ? '':'document.'+nest+'.' 
   this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
   this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
   this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
   this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
   this.up=MoveAreaUp;this.down=MoveAreaDown; 
   this.MoveArea=MoveArea; this.x; this.y; 
   this.obj = obj + "Object" 
   eval(this.obj + "=this") 
   return this 
} 
function MoveArea(x,y){ 
   this.x=x;this.y=y 
   this.css.left=this.x 
   this.css.top=this.y 
} 

function MoveAreaDown(move){ 
if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
   this.MoveArea(0,this.y-move) 
   if(loop) setTimeout(this.obj+".down("+move+")",speed)
return; 
} 
} 
function MoveAreaUp(move){ 
if(this.y<0){ 
   this.MoveArea(0,this.y-move) 
   if(loop) setTimeout(this.obj+".up("+move+")",speed)
return; 
} 
} 

function PerformScroll(speed){ 
if(initialised){ 
	loop=true; 
	if(speed>0) objScroller.down(speed) 
	else objScroller.up(speed) 
	return;
} 
} 

function CeaseScroll(){ 
   loop=false 
   if(timer) clearTimeout(timer)
return; 
} 
var initialised; 
function InitialiseScrollableArea(){ 
   objContainer=new ConstructObject('divContainer') 
   objScroller=new ConstructObject('divContent','divContainer') 
   objScroller.MoveArea(0,0) 
   objContainer.css.visibility='visible' 
   initialised=true;
return; 
} 
// end absolutely positioned scrollable area object scripts 
function doneLoading() {
document.getElementById("loading").style.display = "none";
document.getElementById("divContainer").style.display = "block";
return;
}

 

Och i HTML-filen


<body onLoad="InitialiseScrollableArea(), verifyCompatibleBrowser(), doneLoading()">

<div id="loading">Sidan laddas...</div>

<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl" style="top: 95px; left: 510px; width: 20"> <a href="javascript:scroll.js;" onMouseOver="PerformScroll(-29)" onMouseOut="CeaseScroll()"><img src="temp_img/arrow.big.up.gif" width="32" height="38" border="0"></a></div>
<div id="divDownControl" style="left: 510; top: 365; width: 20; z-index: 1"> <a href="javascript:scroll.js;" onMouseOver="PerformScroll(29)" onMouseOut="CeaseScroll()"><img src="temp_img/arrow.big.down.gif" width="32" height="38" border="0"></a> </div>
<div id="divContainer" style="display:none;"> 
 <div id="divContent"> 
   <!-- Start pa sidan -->
...........................
   <!-- slut pa sidan -->
 </div>
</div>
<!-- end absolutely positioned scrollable area object -->
</body>

 

Scrolllningen hänger sig, om man plokar bort "doneLoading()" så fungerar allt som det ska... :-/

 

Någon som har en idé om vad som skapar konflikt?

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...