javascript - Script not working in localhost -
javascript - Script not working in localhost -
i found site/tutorial/demo question here on so.
very nice , clean code. having problems when running localhost test changes sites. running pretty much exact same code (i have mine in /lib not /js).
i've stepped through code in firebug , inspected generated source , adding script tags, breakpoint on loaded function never triggers.
to test whether files beingness loaded , not registered, loading jquery , in standard $(document).ready() function have simple alert firebug gives error of $ not defined means while loading.js updates html file, browser (firefox, ie8 exhibits same behaviour) isn't loading files.
update: i've enabled net tab. when page hard reloaded (via ctrl+f5) there 9 requests, 8 of 304 , 404 (which phone call load logo.png never copied), rest colorbox css files. none of objects listed js files should loaded via loading.js file beingness loaded. of times in low milliseconds , nil seems out ordinary.
update2: here's source:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>yensdesign.com - how create stylish loading bar gmail in jquery</title> <link rel="stylesheet" href="css/loading.css" type="text/css" media="screen" /> <script src="lib/loading.js" type="text/javascript"></script> </head> <body onload="start()"> <div id="restart"> <a href="http://www.yensdesign.com"><img src="logo.jpg" alt="go yensdesign.com"/></a> <div id="button" onclick="restart()"><input type="submit" value="restart me please!" /></div> </div> <div id="loadingzone"> <div id="loadingsms">loading</div> <div id="infoprogress">0%</div> <br class="clear" /> <div id="loadingbar"> <div id="progressbar"> </div> </div> <div id="infoloading"></div> </div> </body> </html> note alter in name general.css loading.css. loading.css apart name alter identical general.css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size:100%; font-style:inherit; font-weight:inherit; margin:0pt; padding:0pt; vertical-align:baseline; } body{ background:#fff none repeat scroll 0%; font-size: 12px; font-family:tahoma,arial,sans-serif; margin:0pt; height:100%; } table { border-collapse:separate; border-spacing:0pt; } caption, th, td { font-weight:normal; text-align:left; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a{ cursor: pointer; text-decoration:none; } .clear{ clear:both; } #button{ text-align:center; margin:50px 50px 150px 50px; } #restart{ display:none; text-align:center; } #loadingzone{ margin:0 auto; width:410px; text-align:center; } #loadingbar{ border:1px solid #c2c2c2; height:2px; text-align:left; line-height:0; margin:0; padding:0; overflow:hidden; /*fix ie 6*/ } #progressbar{ height:2px; line-height:0; margin:0; padding:0; background:#b3f83d; width:0%; } #loadingsms{ color:#6ea1fa; float:left; padding:10px 2px; } #infoprogress{ color:#6ea1fa; float:right; padding:10px 2px; } #infoloading{ padding:10px; color:#b9b9b9; font-size:10px; } and loading.js. note changes line adds creates script tag has been modified reflect directory layout.
/***************************/ //@author: adrian "yens" mato gondelle & ivan guardado castro //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: sense free utilize it, maintain credits please! /***************************/ var loadbar = function(){ this.value = 0; this.sources = array(); this.sourcesdb = array(); this.totalfiles = 0; this.loadedfiles = 0; }; //show loading bar interface loadbar.prototype.show = function() { this.locate(); document.getelementbyid("loadingzone").style.display = "block"; }; //hide loading bar interface loadbar.prototype.hide = function() { document.getelementbyid("loadingzone").style.display = "none"; }; //add scripts dom loadbar.prototype.run = function(){ this.show(); var i; (i=0; i<this.sourcesdb.length; i++){ var source = this.sourcesdb[i]; var head = document.getelementsbytagname("head")[0]; var script = document.createelement("script"); script.type = "text/javascript"; script.src = source head.appendchild(script); } }; //center in screen remember old tutorials? ;) loadbar.prototype.locate = function(){ var loadingzone = document.getelementbyid("loadingzone"); var windowwidth = document.documentelement.clientwidth; var windowheight = document.documentelement.clientheight; var popupheight = loadingzone.clientheight; var popupwidth = loadingzone.clientwidth; loadingzone.style.position = "absolute"; loadingzone.style.top = parseint(windowheight/2-popupheight/2) + "px"; loadingzone.style.left = parseint(windowwidth/2-popupwidth/2) + "px"; }; //set value position of bar (only 0-100 values allowed) loadbar.prototype.setvalue = function(value){ if(value >= 0 && value <= 100){ document.getelementbyid("progressbar").style.width = value + "%"; document.getelementbyid("infoprogress").innerhtml = parseint(value) + "%"; } }; //set bottom text value loadbar.prototype.setaction = function(action){ document.getelementbyid("infoloading").innerhtml = action; }; //add specified script list loadbar.prototype.addscript = function(source){ this.totalfiles++; this.sources[source] = source; this.sourcesdb.push(source); }; //called when script loaded. increment progress value , check if files loaded loadbar.prototype.loaded = function(file) { this.loadedfiles++; delete this.sources[file]; var pc = (this.loadedfiles * 100) / this.totalfiles; this.setvalue(pc); this.setaction(file + " loaded"); //are files loaded? if(this.loadedfiles == this.totalfiles){ settimeout("mybar.hide()",300); //load reset button seek 1 more time! document.getelementbyid("restart").style.display = "block"; } }; //global var reference other scripts var mybar = new loadbar(); //checking resize window recenter :) window.onresize = function(){ mybar.locate(); }; //called on body load start = function() { mybar.addscript("lib/jquery-min.js"); mybar.addscript("lib/jquery.colorbox-min.js"); mybar.addscript("lib/jquery.pan-min.js"); mybar.addscript("lib/raphael-min.js"); mybar.addscript("lib/map.js"); mybar.run(); }; //called on click reset button restart = function(){ window.location.reload(); }; any ideas of how create script plainly works online work in localhost? or similar method loading screen work in localhost?
you said moved code /lib instead of /js. did alter code reflect this? hardcoded on line 34 assume files there: script.src = "js/" + source. also, if firebug net tab disabled, click tab , arrow should show next it. click arrow , select enable.
edit in response update:
i set on localhost , found out 2 things. first, script kinda cheats seems. each of scripts loads has phone call "loaded" function notify loader loading has been completed, you're going have edit scripts include phone call function if want progress bar work right. aside, loading files. in firebug command line, $ returns function part of jquery.min.js file, loading files.
you said set alert in $(document).ready. depending on set that, makes sense you'd error. if script run before loading.js has loaded jquery, you'll error. i'm not quite sure why want or need javascript loader, since going create harder on this, if want utilize jquery after loading complete, might want set jquery dependant code in script , load loading.js. tried out , worked fine.
javascript localhost
Comments
Post a Comment