Dear All Users
I really need your help on this, I have a loader in my edge animate that i picked up from http://www.gayadesign.com/diy/queryloader-preload-your-website-in-styl e/
and this is the Only loader that works very well on Edge and Load anything Completely, loader had some bugs so i google it and find fixes for, and now i have this loader without any bug except One bug that loader has with Maxthon, IE, Chrome and Safari browsers, i'm going Crazy right Now and dont know what to do with this Bug, The bug is only at last seconds of loading, after load complete a symbol that created in the loading Script wont remove !!
if you try this on any edge Project you will see after loading is complete you just see a 0% in a black screen but if you zoom out your Browser you will see your project is there...
and the point is this is happen only with Maxthon, IE, Chrome and Safari, and works very well with FireFox ... !!!
i really need this loading, Here is the Final Script and CSS file that Loader Needs :
CSS File Link : http://www.mediafire.com/?kb11s474aipt39w
Script :
var QueryLoader = {
overlay: "",
loadBar: "",
preloader: "",
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: "body",
ieLoadFixTime: 2000,
ieTimeout: "",
init: function() {
if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
//break if IE6
return false;
}
if (QueryLoader.selectorPreload == "body") {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
} else {
$(document).ready(function() {
QueryLoader.spawnLoader();
QueryLoader.getImages(QueryLoader.selectorPreload);
QueryLoader.createPreloading();
});
}
//help IE drown if it is trying to die 
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
},
ieLoadFix: function() {
if(jQuery.browser.msie){
if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
}
}
},
imgCallback: function() {
QueryLoader.doneNow ++;
QueryLoader.animateLoader();
},
getImages: function(selector) {
var everything = $(selector).find("*:not(script)").each(function() {
var url = "";
if ($(this).css("background-image") != "none") {
var url = $(this).css("background-image");
} else if (typeof($(this).attr("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img") {
var url = $(this).attr("src");
}
url = url.replace("url(\"", "");
url = url.replace("url(", "");
url = url.replace("\")", "");
url = url.replace(")", "");
if (url.length > 0) {
QueryLoader.items.push(url);
}
});
},
createPreloading: function() {
QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
$(QueryLoader.preloader).css({
height: "0px",
width: "0px",
overflow: "hidden"
});
var length = QueryLoader.items.length;
QueryLoader.doneStatus = length;
for (var i = 0; i < length; i++) {
var imgLoad = $("<img></img>");
$(imgLoad).attr("src", QueryLoader.items[i]);
$(imgLoad).unbind("load");
$(imgLoad).one('load', function() { //IE Cache Fix
QueryLoader.imgCallback();
}).each(function() {
if(this.complete) $(this).load();
});
$(imgLoad).appendTo($(QueryLoader.preloader));
}
},
spawnLoader: function() {
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
var width = $(window).width();
var position = "fixed";
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
var width = $(QueryLoader.selectorPreload).outerWidth();
var position = "absolute";
}
var left = $(QueryLoader.selectorPreload).offset()['left'];
var top = $(QueryLoader.selectorPreload).offset()['top'];
QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
$(QueryLoader.overlay).addClass("QOverlay");
$(QueryLoader.overlay).css({
position: position,
top: top,
left: left,
width: width + "px",
height: height + "px"
});
QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadBar).addClass("QLoader");
$(QueryLoader.loadBar).css({
position: "relative",
top: "50%",
width: "0%"
});
QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));
$(QueryLoader.loadAmt).addClass("QAmt");
$(QueryLoader.loadAmt).css({
position: "relative",
top: "50%",
left: "50%"
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadAmt).html("100%");
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() {
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 500, "linear", function() { });
$(QueryLoader.loadAmt).html(Math.floor(perc)+"%");
}
},
doneLoad: function() {
//prevent IE from calling the fix
clearTimeout(QueryLoader.ieTimeout);
//determine the height of the preloader for the effect
if (QueryLoader.selectorPreload == "body") {
var height = $(window).height();
} else {
var height = $(QueryLoader.selectorPreload).outerHeight();
}
//The end animation, adjust to your likings
$(QueryLoader.loadAmt).hide();
$(QueryLoader.loadBar).animate({
height: height + "px",
top: 0
}, 500, "linear", function() {
$(QueryLoader.overlay).fadeOut(800);
$(QueryLoader.preloader).remove();
});
}
}
yepnope({nope:[
'queryLoader.css',
],complete: initialize});
function initialize (){
QueryLoader.init();
}
Note : when you are in the Edge and hit ctrl+enter the project loads very well in IE, Chrome, and Safari without any problems !! but when save and run HTML file the problem would appear !!
but if you run that HTML file in Firefox everything works like a charm...
i really don't know what can i do, i used all of my knowledge that i had in java Programming but no luck :'(
Please Help Me...
Note : you have to use this code inside of Preloader > Loading
& place CSS file in the main folder of your Edge Project
Zaxist