Po watku dostalem kilka prosb o udostepnienie tego co udalo mi sie zrobic wiec jest.
Najpierw kilka informacji:
skrypt nie nadaje sie do wiekszych zastosowan poniewaz:
trzeba dodac obsluge bledow [narazie jest generalna]
trzeba dodac cos co bedzie przechwytywac linki
rozwinac dzialanie poza divy
i wiele innych
[prosba do moderatorow: jezeli to zle forum - w sumie chce byscie ocenili jak to sie sprawuje i czy komus sie przyda - prosze przeniesc do wlasciwego]
kod:
loader.js
Kod
// Author: orson [Grzegorz Drozd]
// Test script created ONLY for www.php.pl
// You may use this script to bulid Your OWN but You must include info
// about me if you use anything from it.
// this is VERY PRE ALPHA. NO WARRANTY
// ver. 0.43 [2004.02.14]
//
// to do:
// use it :)
// unique div name [now is 10 last chars - not good]
// make it work not only with div [displaying etc.]
// global flag
var isIE = false;
// global request and XML document
var req;
//new, lodaded document
var loadedDoc;
//save result [by create new div] or discard every time. bool.
var saveResult = true;
//name of main result container
var result = 'result';
//display "loading..." msg in the result container
bool.
//this is different than next option
var tempDisplayMsg = false;
//what to display
var tempMsg = 'Loading ...';
//what to do when document is loading ...
//could be with:
// progres - show progres bar
// screen - loading screen
// percent - display percent
// none - do nothing
var loadingAction = 'progres';
// and id to display
var loadingID = 'progres';
//display or not errors
var showError = true;
//where display errors
var showErrorIn = 'errors';
// script begins ... do not edit it ... make Your own
var totalBytes;
var responseLength;
var responsePer;
var divId;
var getResult = false;
var foo = 0;
function loadDoc(evt,url) {
_hideAll();
// W3C/IE event models to get event object
// to do
if (saveResult == true){
if (document.getElementById(url.substring(parseInt(url.length)-10,parseInt(url.length))) != null){
document.getElementById(url.substring(parseInt(url.length)-10,parseInt(url.length))).style.display = 'block';
getResult = false;
}else{
getResult = true;
}
}
// i know this is strange but if div isn't loaded yet we should be able
// to get to load branch and this is the fastest way
if (saveResult == false || getResult == true){
evt = (evt) ? evt : ((window.event) ? window.event : null);
if (evt) {
//W3C/IE models to get event target reference
try {
_getDoc(url);
}
catch(e) {
if (showError){
var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
document.getElementById(showErrorIn).innerHTML = "Unable to get XML data:\n" + msg;
}
return;
}
}
}
}
function _getDoc(url) {
// branch for native XMLHttpRequest object
divId = url.substring(parseInt(url.length)-10,parseInt(url.length));
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = _reqStatus;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = _reqStatus;
req.open("GET", url, true);
req.send();
}else{
alert("error creating activex object");
}
}
}
// handle onreadystatechange event of req object
function _reqStatus() {
// only if req is valid
if (req.readyState == 4) {
//loaded
if (req.status == 200) {
//loaded - print
if (saveResult == true){
// create new div and fill it with document content
loadedDocument = document.createElement("div");
var divName = document.createAttribute('name');
divName.value='resultDiv';
loadedDocument.setAttributeNode(divName)
loadedDocument.id = divId;
loadedDocument.innerHTML = req.responseText;
// ADD div to result container
document.getElementById(result).appendChild(loadedDocument);
}else{
// REPLACE all in result container
document.getElementById(result).innerHTML = req.responseText;
}
// if loading screen is displayed hide it to be sure or do smth else wih it.
if (document.getElementById(loadingID) != null){
if (document.getElementById(loadingID).style.display == "block"){
document.getElementById(loadingID).style.display = "none";
}
}
} else {
//error
if (showError){
document.getElementById(showErrorIn).innerHTML = "There was a problem retrieving the XML data:\n" + req.statusText;
}
}
}else {
//still loading document
if (tempDisplayMsg == true){
if (req.readyState > 2) {
document.getElementById(result).innerHTML = tempMsg;
}
}
}
// from here script don't work in ie ... i'm working on it ...
// problem is that if doc isn't loaded ie get error on:
// req.getResponseHeader("Content-Length") and req.responseText
// about reposne data.
if (!isIE && req.responseText != '') {
//more actions or some combo
switch (loadingAction){
case 'progres':
totalBytes = parseInt(req.getResponseHeader("Content-Length"));
responseLength = parseInt(req.responseText.length);
responsePer = (100/totalBytes)*responseLength;
document.getElementById(loadingID).style.width = Math.round(parseFloat(responsePer))+"%";
break;
case 'screen':
document.getElementById(loadingID).style.display = "block";
break;
case 'percent':
totalBytes = parseInt(req.getResponseHeader("Content-Length"));
responseLength = parseInt(req.responseText.length);
responsePer = Math.round((100/totalBytes)*responseLength);
document.getElementById(loadingID).value = responsePer +" %";
break;
}
}
}
//hide all divs with name = resultDiv
function _hideAll(){
var divs = document.getElementsByTagName('div');
var i=0;
for (i=0; i < divs.length; i++){
if (divs.item(i).getAttribute('name') == 'resultDiv'){
divs.item(i).style.display = 'none';
}
}
}
// Test script created ONLY for www.php.pl
// You may use this script to bulid Your OWN but You must include info
// about me if you use anything from it.
// this is VERY PRE ALPHA. NO WARRANTY

// ver. 0.43 [2004.02.14]
//
// to do:
// use it :)
// unique div name [now is 10 last chars - not good]
// make it work not only with div [displaying etc.]
// global flag
var isIE = false;
// global request and XML document
var req;
//new, lodaded document
var loadedDoc;
//save result [by create new div] or discard every time. bool.
var saveResult = true;
//name of main result container
var result = 'result';
//display "loading..." msg in the result container

//this is different than next option
var tempDisplayMsg = false;
//what to display
var tempMsg = 'Loading ...';
//what to do when document is loading ...
//could be with:
// progres - show progres bar
// screen - loading screen
// percent - display percent
// none - do nothing
var loadingAction = 'progres';
// and id to display
var loadingID = 'progres';
//display or not errors
var showError = true;
//where display errors
var showErrorIn = 'errors';
// script begins ... do not edit it ... make Your own
var totalBytes;
var responseLength;
var responsePer;
var divId;
var getResult = false;
var foo = 0;
function loadDoc(evt,url) {
_hideAll();
// W3C/IE event models to get event object
// to do
if (saveResult == true){
if (document.getElementById(url.substring(parseInt(url.length)-10,parseInt(url.length))) != null){
document.getElementById(url.substring(parseInt(url.length)-10,parseInt(url.length))).style.display = 'block';
getResult = false;
}else{
getResult = true;
}
}
// i know this is strange but if div isn't loaded yet we should be able
// to get to load branch and this is the fastest way
if (saveResult == false || getResult == true){
evt = (evt) ? evt : ((window.event) ? window.event : null);
if (evt) {
//W3C/IE models to get event target reference
try {
_getDoc(url);
}
catch(e) {
if (showError){
var msg = (typeof e == "string") ? e : ((e.message) ? e.message : "Unknown Error");
document.getElementById(showErrorIn).innerHTML = "Unable to get XML data:\n" + msg;
}
return;
}
}
}
}
function _getDoc(url) {
// branch for native XMLHttpRequest object
divId = url.substring(parseInt(url.length)-10,parseInt(url.length));
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = _reqStatus;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = _reqStatus;
req.open("GET", url, true);
req.send();
}else{
alert("error creating activex object");
}
}
}
// handle onreadystatechange event of req object
function _reqStatus() {
// only if req is valid
if (req.readyState == 4) {
//loaded
if (req.status == 200) {
//loaded - print
if (saveResult == true){
// create new div and fill it with document content
loadedDocument = document.createElement("div");
var divName = document.createAttribute('name');
divName.value='resultDiv';
loadedDocument.setAttributeNode(divName)
loadedDocument.id = divId;
loadedDocument.innerHTML = req.responseText;
// ADD div to result container
document.getElementById(result).appendChild(loadedDocument);
}else{
// REPLACE all in result container
document.getElementById(result).innerHTML = req.responseText;
}
// if loading screen is displayed hide it to be sure or do smth else wih it.
if (document.getElementById(loadingID) != null){
if (document.getElementById(loadingID).style.display == "block"){
document.getElementById(loadingID).style.display = "none";
}
}
} else {
//error
if (showError){
document.getElementById(showErrorIn).innerHTML = "There was a problem retrieving the XML data:\n" + req.statusText;
}
}
}else {
//still loading document
if (tempDisplayMsg == true){
if (req.readyState > 2) {
document.getElementById(result).innerHTML = tempMsg;
}
}
}
// from here script don't work in ie ... i'm working on it ...
// problem is that if doc isn't loaded ie get error on:
// req.getResponseHeader("Content-Length") and req.responseText
// about reposne data.
if (!isIE && req.responseText != '') {
//more actions or some combo

switch (loadingAction){
case 'progres':
totalBytes = parseInt(req.getResponseHeader("Content-Length"));
responseLength = parseInt(req.responseText.length);
responsePer = (100/totalBytes)*responseLength;
document.getElementById(loadingID).style.width = Math.round(parseFloat(responsePer))+"%";
break;
case 'screen':
document.getElementById(loadingID).style.display = "block";
break;
case 'percent':
totalBytes = parseInt(req.getResponseHeader("Content-Length"));
responseLength = parseInt(req.responseText.length);
responsePer = Math.round((100/totalBytes)*responseLength);
document.getElementById(loadingID).value = responsePer +" %";
break;
}
}
}
//hide all divs with name = resultDiv
function _hideAll(){
var divs = document.getElementsByTagName('div');
var i=0;
for (i=0; i < divs.length; i++){
if (divs.item(i).getAttribute('name') == 'resultDiv'){
divs.item(i).style.display = 'none';
}
}
}
i przykladowy plik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body { background-color: white; font-family: verdana; font-size:12px; margin-left:15%; margin-right:15%; padding:15px } h1 { text-align:left; font-size: 130%; font-weight:bold } #loadingWindow{ display: none; border: 1px solid black; background-color: red; width: 50%; height: 100px; } </style> </head> <body> <hr> <div style="float: left; width: 150px; height: 450px; margin-right: 10px; padding: 5px; overflow: show"> progres bar:<br /> <div style="border:1px solid black; width: 100%;"> </div> <br /> percent:<br /> links<br /> </div> <div style="border: 1px solid black; width: 460px; height: 400px; overflow:auto" id="result"> </div> <div style="border: 1px solid black; width: 460px; height: 40px; overflow:auto" id="errors"> </div> </body> </html>
lekka edycja loader.js pozwala zobaczyc z tym plikiem rozne akcje dla ladowania dokumentu ...
pozdrawiam