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);