/    Sign up×
Community /Pin to ProfileBookmark

heeelp…. overlay loading page woes.

hi guys,

I have recently been tinkering with some freeware scripts, and came across this problem.

the url I’m using is : myi.net.au

as you can see I have a CSS’d scrollbar (still in the making).

however, i added an Overlay loading effect when the page is searching through the database. and when it loads, the scrollbar effect disappears. ? ….

if u click the logo on the top left of the page at the URL i mentioned above, you will see what i mean.

what is happening? any help would be greatly appreciated.

cheers,
suren

heres the source code if it will help:

[CODE]
/*
Tution Javascript File: Includes the Tution Object:
*/

var Tution = Class.create();

Tution.prototype = {

initialize: function() {

var fileLoadingImage = “images/loader.gif”;

var objMainContainer = document.getElementById(‘mainContainer’);

var objOverlay = document.createElement(“div”);
objOverlay.setAttribute(‘id’,’overlay’);
objOverlay.style.display = ‘none’;
objOverlay.onclick = function() { myTution.end(); }
objMainContainer.appendChild(objOverlay);

var objLoading = document.createElement(“div”);
objLoading.setAttribute(‘id’,’loading’);
objMainContainer.appendChild(objLoading);

var objLoadingLink = document.createElement(“a”);
objLoadingLink.setAttribute(‘id’,’loadingLink’);
objLoadingLink.setAttribute(‘href’,’#’);
objLoadingLink.onclick = function() { myTution.end(); return false; }
objLoading.appendChild(objLoadingLink);

var objLoadingImage = document.createElement(“img”);
objLoadingImage.setAttribute(‘src’, fileLoadingImage);
objLoadingLink.appendChild(objLoadingImage);
Element.hide(‘loading’);
Element.hide(‘overlay’);

/* May need to register a call back here for the code to work. Prototype provides an interface for this. LINES 2122 to 2163 seem to be the place to look*/
/* Use an event observer rather than the previous one (up the page a bit) the timed observer, however this may be useful.
Something like this might work: Event.observe(objScrollText, ‘change’, initSCrollBars, false);

*/
var objScrollText = document.getElementById(‘mycustomscroll’);
Event.observe(objScrollText, ‘change’, initScrollBars, false);
},

start: function() {
var overlayDuration = 0.3;
new Effect.Appear(‘overlay’, { duration: overlayDuration, from: 0.0, to: 0.5 });
Element.show(‘loading’);
Element.hide(‘contentContainer’);
Element.hide(‘contentHeader’);
var objScrollText = document.getElementById(‘mycustomscroll’);
objScrollText.style.overflow = ‘auto’;
objScrollText.style.display = ‘none’;
/* TODO: Remove all children of the objScrollText object before the system returns.*/

},

end: function() {

var objScrollText = document.getElementById(‘mycustomscroll’);
objScrollText.style.overflow = ‘auto’;
objScrollText.style.display = ”;
CSBfleXcroll(‘mycustomscroll’);

Element.hide(‘overlay’);
Element.hide(‘loading’);
Element.show(‘contentContainer’);
Element.show(‘contentHeader’);
}
}

/*
* Extend the Element object to include new methods to make using it easier.
*/
Object.extend(Element, {
getWidth: function(element) {
element = $(element);
return element.offsetWidth;
},
setWidth: function(element,w) {
element = $(element);
element.style.width = w +”px”;
},
setHeight: function(element,h) {
element = $(element);
element.style.height = h +”px”;
},
setTop: function(element,t) {
element = $(element);
element.style.top = t +”px”;
},
setSrc: function(element,src) {
element = $(element);
element.src = src;
},
setHref: function(element,href) {
element = $(element);
element.href = href;
},
setInnerHTML: function(element,content) {
element = $(element);
element.innerHTML = content;
}
});

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from – quirksmode.org
//
function getPageScroll(){

var yScroll;

if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}

arrayPageScroll = new Array(”,yScroll)
return arrayPageScroll;
}

// ———————————————————————————–

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from – quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}

function initTution()
{
myTution = new Tution();

}

function pause(ms){
var date = new Date();
curDate = null;
do{var curDate = new Date();}
while( curDate – date < ms);
}

function initScrollBars()
{
CSBfleXcroll(‘mycustomscroll’);
}

if (document.getElementById && document.getElementsByTagName)
{
if (window.addEventListener)
window.addEventListener(‘load’, initScrollBars, false);
else if
(window.attachEvent) window.attachEvent(‘onload’, initScrollBars);
}
Event.observe(window, ‘load’, initTution, false);

[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@theRatWonderApr 19.2007 — I can't test this but...

Isn't the reason you can't see a scroll-bar purely because there isn't enough data in the page? With the CSS "overflow: auto" command, which I'm assuming is what you're using, the scroll-bar only appears when it's necessary.

I can't see any way to get to a page with more than one page's worth of data after the first one. - and when you go back to the first page, you get the loading script, and then the scroll bar's there again.

I think what you're experiencing is simply the way it's supposed to behave. And I don't see why you'd want it any other way.

Robin.
Copy linkTweet thisAlerts:
@surenwauthorApr 19.2007 — I can't test this but...

Isn't the reason you can't see a scroll-bar purely because there isn't enough data in the page? With the CSS "overflow: auto" command, which I'm assuming is what you're using, the scroll-bar only appears when it's necessary.

I can't see any way to get to a page with more than one page's worth of data after the first one. - and when you go back to the first page, you get the loading script, and then the scroll bar's there again.

I think what you're experiencing is simply the way it's supposed to behave. And I don't see why you'd want it any other way.

Robin.[/QUOTE]


Thanks for your reply robin.

I think i forgot to mention it is not the visibility of the physical scrollbar, but the CSS styles applied to it. as you will notice on the home page. it has a yellow colour. when you click on the logo (top left img) the load screen comes up and goes away, then the scroller bar loses its style. This is what I was hoping you guys would be able to help me with. ?
Copy linkTweet thisAlerts:
@theRatWonderApr 20.2007 — Ah I see. Sorry.

Using Firebug to analyse the generated HTML, I see that on the initial page you arrive at the html around the text looks like this:
&lt;div id="contentContainer"&gt;
&lt;div id="mycustomscroll" style="border-width: 0px; padding: 15px; overflow: hidden; position: relative;" tabindex="0"&gt;
&lt;div id="mycustomscroll_mcontentwrapper" class="mcontentwrapper" style="border-bottom: 0px solid black; padding: 15px; overflow: hidden; width: 685px; height: 290px; top: -15px; left: -15px; position: relative; z-index: 2;"&gt;
&lt;div id="mycustomscroll_contentwrapper" class="contentwrapper" style="padding: 0px; position: relative; top: 0px; width: 100%; display: block; left: 0pt;"&gt;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pretium convallis neque. Aliquam malesuada urna a lorem faucibus interdum. Sed metus leo, feugiat ac, ullamcorper vitae, placerat non, arcu. Aliquam sit amet lacus vitae lorem sodales placerat. Aliquam facilisis sagittis nibh. Nunc vitae massa at nulla feugiat viverra. Nulla facilisi. Duis feugiat, erat a mattis mattis, purus est aliquam ligula, at condimentum felis justo vestibulum mi.


Whereas after you reload the page it looks like this:
&lt;div id="contentContainer" style=""&gt;
&lt;div id="mycustomscroll" style="border-width: 0px; padding: 15px; overflow: auto; position: relative;" tabindex="0"&gt;
&lt;p class="norm_j"&gt;Intuition Education Australia is rapidly gaining a reputation as the leading HSC specialist college in Sydney. &lt;/p&gt;


As in you're then missing the two divs "mycustomscroll_mcontentwrapper" and "mycustomscroll_contentwrapper". I'm afraid I can't be bothered to trawl through the javascript to find out the reason for this, but it should give you a starting point. Hope it helps.

Can I just say you seem to be doing a lot of stuff with javascript - when you're not actually generating any dynamic effects... All actual content should be contained in the actual html not generated with javascript, and fixed display settings should be in CSS, not javascript. Trying to browse that site without javascript is absolutely impossible.
Copy linkTweet thisAlerts:
@surenwauthorApr 20.2007 — thanks. ?
×

Success!

Help @surenw spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...