wamp - Html page is displayed well as file, but not on server -
i have weird problem: html page displayed if access in browser path, looks awful if access localhost. know large topic, cause of that? using wampserver. tried in chrome, firefox , ie , result same. can provide source code if needed, large (700 lines main code, plus lot of dependencies).
i want know if there usual reason might provoke behaviour
via path:
via server:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>calendar</title> <!-- include css jquery frontier calendar plugin (required calendar plugin) --> <link rel="stylesheet" type="text/css" href="css/frontiercalendar/jquery-frontier-cal-1.3.2.css" /> <!-- include css color picker plugin (not required calendar plugin. used example.) --> <link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" /> <!-- include css jquery ui (required calendar plugin.) --> <link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" /> <!-- include jquery core (required calendar plugin) ** our ie fix version enables drag-and-drop work correctly in ie. see readme file in js/jquery-core folder. ** --> <script type="text/javascript" src="js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script> <!-- include jquery ui (required calendar plugin.) --> <script type="text/javascript" src="js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script> <!-- include color picker plugin (not required calendar plu gin. used example.) --> <script type="text/javascript" src="js/colorpicker/colorpicker.js"></script> <!-- include jquery tooltip plugin (not required calendar plugin. used example.) --> <script type="text/javascript" src="js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script> <!-- (required plugin) dependancies jquery frontier calendar plugin. ** these must included before frontier calendar plugin. ** --> <script type="text/javascript" src="js/lib/jshashtable-2.1.js"></script> <!-- include jquery frontier calendar plugin --> <script type="text/javascript" src="js/frontiercalendar/jquery-frontier-cal-1.3.2.min.js"></script> </head> <body style="background: url(background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> <!-- css our example. (not required calendar plugin. used example.)--> <style type="text/css" media="screen"> /* default font-size on default themeroller theme set in ems, , value when combined body { font-size: 62.5%; } align pixels ems, 11px=1.1em, 14px=1.4em. if setting body font-size 62.5% isn't option, or not 1 want, can set font-size in themeroller 1em or set px. http://osdir.com/ml/jquery-ui/2009-04/msg00071.html */ body { font-size: 62.5%; } #mycal { opacity:0.9; } .shadow { -moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa; /* ie 8 */ -ms-filter: "progid:dximagetransform.microsoft.shadow(strength=4, direction=135, color='#aaaaaa')"; /* ie 5.5 - 7 */ filter: progid:dximagetransform.microsoft.shadow(strength=4, direction=135, color='#aaaaaa'); } </style> <script type="text/javascript"> $(document).ready(function(){ var clickdate = ""; var clickagendaitem = ""; /** * initializes calendar current year & month * specifies callbacks day click & agenda item click events * returns instance of plugin object */ var jfcalplugin = $("#mycal").jfrontiercal({ date: new date(), dayclickcallback: mydayclickhandler, agendaclickcallback: myagendaclickhandler, agendadropcallback: myagendadrophandler, agendamouseovercallback: myagendamouseoverhandler, applyagendatooltipcallback: myapplytooltip, agendadragstartcallback : myagendadragstart, agendadragstopcallback : myagendadragstop, draganddropenabled: true }).data("plugin"); /** * when dragging starts on agenda div */ function myagendadragstart(eventobj,divelm,agendaitem){ // destroy our qtip tooltip if(divelm.data("qtip")){ divelm.qtip("destroy"); } }; /** * when dragging stops on agenda div */ function myagendadragstop(eventobj,divelm,agendaitem){ //alert("drag stop"); }; 0 /** * custom tooltip - use tooltip library want display agenda data. * example use qtip - http://craigsworks.com/projects/qtip/ * * @param divelm - jquery object agenda div element * @param agendaitem - javascript object containing agenda data. */ function myapplytooltip(divelm,agendaitem){ // destroy currrent tooltip if present if(divelm.data("qtip")){ divelm.qtip("destroy"); } var displaydata = ""; var title = agendaitem.title; var startdate = agendaitem.startdate; var enddate = agendaitem.startdate; var allday = agendaitem.allday; var data = agendaitem.data; displaydata += "<br><b>" + title+ "</b><br><br>"; if(allday){ displaydata += "(all day event)<br><br>"; }else{ displaydata += "<b>starts:</b> " + startdate + "<br>" + "<b>ends:</b> " + enddate + "<br><br>"; } (var propertyname in data) { displaydata += "<b>" + propertyname + ":</b> " + data[propertyname] + "<br>" } // use user specified colors agenda item. var backgroundcolor = agendaitem.displayprop.backgroundcolor; var foregroundcolor = agendaitem.displayprop.foregroundcolor; var mystyle = { border: { width: 5, radius: 10 }, padding: 10, textalign: "left", tip: true, name: "dark" // other style properties inherited dark theme }; if(backgroundcolor != null && backgroundcolor != ""){ mystyle["backgroundcolor"] = backgroundcolor; } if(foregroundcolor != null && foregroundcolor != ""){ mystyle["color"] = foregroundcolor; } // apply tooltip divelm.qtip({ content: displaydata, position: { corner: { tooltip: "bottommiddle", target: "topmiddle" }, adjust: { mouse: true, x: 0, y: -15 }, target: "mouse" }, show: { when: { event: 'mouseover' } }, style: mystyle }); }; /** * make day cells 3/4th tall wide. makes our calendar wider tall. */ jfcalplugin.setaspectratio("#mycal",0.75); /** * called when user clicks day cell * use reference plugin object add agenda item */ function mydayclickhandler(eventobj){ // date of day clicked event object var date = eventobj.data.caldaydate; // store date in our global js variable access later clickdate = date.getfullyear() + "-" + (date.getmonth()+1) + "-" + date.getdate(); // open our add event dialog $('#add-event-form').dialog('open'); }; /** * called when user clicks , agenda item * use reference plugin object edit agenda item */ function myagendaclickhandler(eventobj){ // id of agenda item event object var agendaid = eventobj.data.agendaid; // pull agenda item calendar var agendaitem = jfcalplugin.getagendaitembyid("#mycal",agendaid); clickagendaitem = agendaitem; $("#display-event-form").dialog('open'); }; /** * called when user drops agenda item day cell. */ function myagendadrophandler(eventobj){ // id of agenda item event object var agendaid = eventobj.data.agendaid; // date agenda item dropped onto var date = eventobj.data.caldaydate; // pull agenda item calendar var agendaitem = jfcalplugin.getagendaitembyid("#mycal",agendaid); alert("you dropped agenda item " + agendaitem.title + " onto " + date.tostring() + ". here can make ajax call update database."); }; /** * called when user mouses on agenda item */ function myagendamouseoverhandler(eventobj){ var agendaid = eventobj.data.agendaid; var agendaitem = jfcalplugin.getagendaitembyid("#mycal",agendaid); //alert("you moused on agenda item " + agendaitem.title + " @ location (x=" + eventobj.pagex + ", y=" + eventobj.pagey + ")"); }; /** * initialize jquery ui datepicker. set date format yyyy-mm-dd easy parsing */ $("#dateselect").datepicker({ showothermonths: true, selectothermonths: true, changemonth: true, changeyear: true, showbuttonpanel: true, dateformat: 'yy-mm-dd' }); /** * set datepicker current date */ $("#dateselect").datepicker('setdate', new date()); /** * use reference plugin object specific year/month */ $("#dateselect").bind('change', function() { var selecteddate = $("#dateselect").val(); var dtarray = selecteddate.split("-"); var year = dtarray[0]; // jquery datepicker months start @ 1 (1=january) var month = dtarray[1]; // strip preceeding 0's month = month.replace(/^[0]+/g,"") var day = dtarray[2]; // plugin uses 0-based months subtrac 1 jfcalplugin.showmonth("#mycal",year,parseint(month-1).tostring()); }); /** * initialize previous month button */ $("#btnpreviousmonth").button(); $("#btnpreviousmonth").click(function() { jfcalplugin.showpreviousmonth("#mycal"); // update jquery datepicker value var caldate = jfcalplugin.getcurrentdate("#mycal"); // returns date object var cyear = caldate.getfullyear(); // date month 0-based (0=january) var cmonth = caldate.getmonth(); var cday = caldate.getdate(); // jquery datepicker month starts @ 1 (1=january) add 1 $("#dateselect").datepicker("setdate",cyear+"-"+(cmonth+1)+"-"+cday); return false; }); /** * initialize next month button */ $("#btnnextmonth").button(); $("#btnnextmonth").click(function() { jfcalplugin.shownextmonth("#mycal"); // update jquery datepicker value var caldate = jfcalplugin.getcurrentdate("#mycal"); // returns date object var cyear = caldate.getfullyear(); // date month 0-based (0=january) var cmonth = caldate.getmonth(); var cday = caldate.getdate(); // jquery datepicker month starts @ 1 (1=january) add 1 $("#dateselect").datepicker("setdate",cyear+"-"+(cmonth+1)+"-"+cday); return false; }); /** * initialize delete agenda items button */ $("#btndeleteall").button(); $("#btndeleteall").click(function() { jfcalplugin.deleteallagendaitems("#mycal"); return false; }); /** * initialize add event modal form */ $("#add-event-form").dialog({ autoopen: false, height: 400, width: 400, modal: true, buttons: { 'add event': function() { var = jquery.trim($("#what").val()); if(what == ""){ alert("please enter short event description \"what\" field."); }else{ var startdate = $("#startdate").val(); var startdtarray = startdate.split("-"); var startyear = startdtarray[0]; // jquery datepicker months start @ 1 (1=january) var startmonth = startdtarray[1]; var startday = startdtarray[2]; // strip preceeding 0's startmonth = startmonth.replace(/^[0]+/g,""); startday = startday.replace(/^[0]+/g,""); var starthour = jquery.trim($("#starthour").val()); var startmin = jquery.trim($("#startmin").val()); var startmeridiem = jquery.trim($("#startmeridiem").val()); starthour = parseint(starthour.replace(/^[0]+/g,"")); if(startmin == "0" || startmin == "00"){ startmin = 0; }else{ startmin = parseint(startmin.replace(/^[0]+/g,"")); } if(startmeridiem == "am" && starthour == 12){ starthour = 0; }else if(startmeridiem == "pm" && starthour < 12){ starthour = parseint(starthour) + 12; } var enddate = $("#startdate").val(); var enddtarray = enddate.split("-"); var endyear = enddtarray[0]; // jquery datepicker months start @ 1 (1=january) var endmonth = enddtarray[1]; var endday = enddtarray[2]; // strip preceeding 0's endmonth = endmonth.replace(/^[0]+/g,""); endday = endday.replace(/^[0]+/g,""); var endhour = jquery.trim($("#starthour").val()); var endmin = jquery.trim($("#startmin").val()); var endmeridiem = jquery.trim($("#startmeridiem").val()); endhour = parseint(endhour.replace(/^[0]+/g,"")); if(endmin == "0" || endmin == "00"){ endmin = 0; }else{ endmin = parseint(endmin.replace(/^[0]+/g,"")); } if(endmeridiem == "am" && endhour == 12){ endhour = 0; }else if(endmeridiem == "pm" && endhour < 12){ endhour = parseint(endhour) + 12; } //alert("start time: " + starthour + ":" + startmin + " " + startmeridiem + ", end time: " + endhour + ":" + endmin + " " + endmeridiem); // dates use integers var startdateobj = new date(parseint(startyear),parseint(startmonth)-1,parseint(startday),starthour,startmin,0,0); var enddateobj = new date(parseint(startyear),parseint(startmonth)-1,parseint(startday),starthour,startmin,0,0); // add new event calendar jfcalplugin.addagendaitem( "#mycal", what, startdateobj, enddateobj, false, { fname: "santa", lname: "claus", leadreindeer: "rudolph", mydate: new date(), mynum: 42 }, { backgroundcolor: $("#colorbackground").val(), foregroundcolor: $("#colorforeground").val() } ); $(this).dialog('close'); } }, cancel: function() { $(this).dialog('close'); } }, open: function(event, ui){ // initialize start date picker $("#startdate").datepicker({ showothermonths: true, selectothermonths: true, changemonth: true, changeyear: true, showbuttonpanel: true, dateformat: 'yy-mm-dd' }); // initialize end date picker /* $("#enddate").datepicker({ showothermonths: true, selectothermonths: true, changemonth: true, changeyear: true, showbuttonpanel: true, dateformat: 'yy-mm-dd' });*/ // initialize date clicked $("#startdate").val(clickdate); $("#enddate").val(clickdate); // initialize color pickers $("#colorselectorbackground").colorpicker({ color: "#333333", onshow: function (colpkr) { $(colpkr).css("z-index","10000"); $(colpkr).fadein(500); return false; }, onhide: function (colpkr) { $(colpkr).fadeout(500); return false; }, onchange: function (hsb, hex, rgb) { $("#colorselectorbackground div").css("backgroundcolor", "#" + hex); $("#colorbackground").val("#" + hex); } }); //$("#colorbackground").val("#1040b0"); $("#colorselectorforeground").colorpicker({ color: "#ffffff", onshow: function (colpkr) { $(colpkr).css("z-index","10000"); $(colpkr).fadein(500); return false; }, onhide: function (colpkr) { $(colpkr).fadeout(500); return false; }, onchange: function (hsb, hex, rgb) { $("#colorselectorforeground div").css("backgroundcolor", "#" + hex); $("#colorforeground").val("#" + hex); } }); //$("#colorforeground").val("#ffffff"); // put focus on first form input element $("#what").focus(); }, close: function() { // reset form elements when close fresh when dialog opened again. $("#startdate").datepicker("destroy"); $("#enddate").datepicker("destroy"); $("#startdate").val(""); $("#enddate").val(""); $("#starthour option:eq(0)").attr("selected", "selected"); $("#startmin option:eq(0)").attr("selected", "selected"); $("#startmeridiem option:eq(0)").attr("selected", "selected"); $("#endhour option:eq(0)").attr("selected", "selected"); $("#endmin option:eq(0)").attr("selected", "selected"); $("#endmeridiem option:eq(0)").attr("selected", "selected"); $("#what").val(""); //$("#colorbackground").val("#1040b0"); //$("#colorforeground").val("#ffffff"); } }); /** * initialize display event form. */ $("#display-event-form").dialog({ autoopen: false, height: 400, width: 400, modal: true, buttons: { cancel: function() { $(this).dialog('close'); }, 'edit': function() { alert("make own edit screen or dialog!"); }, 'delete': function() { if(confirm("are sure want delete agenda item?")){ if(clickagendaitem != null){ jfcalplugin.deleteagendaitembyid("#mycal",clickagendaitem.agendaid); //jfcalplugin.deleteagendaitembydataattr("#mycal","mynum",42); } $(this).dialog('close'); } } }, open: function(event, ui){ if(clickagendaitem != null){ var title = clickagendaitem.title; var startdate = clickagendaitem.startdate; var enddate = clickagendaitem.enddate; var allday = clickagendaitem.allday; var data = clickagendaitem.data; // in our example add agenda modal form put fake data in agenda data. can retrieve here. $("#display-event-form").append( "<br><b>" + title+ "</b><br><br>" ); if(allday){ $("#display-event-form").append( "(all day event)<br><br>" ); }else{ $("#display-event-form").append( "<b>starts:</b> " + startdate + "<br>" + "<b>ends:</b> " + enddate + "<br><br>" ); } (var propertyname in data) { $("#display-event-form").append("<b>" + propertyname + ":</b> " + data[propertyname] + "<br>"); } } }, close: function() { // clear agenda data $("#display-event-form").html(""); } }); /** * initialize our tabs */ $("#tabs").tabs({ /* * our calendar initialized in closed tab need resize when example tab opens. */ show: function(event, ui){ if(ui.index == 1){ jfcalplugin.doresize("#mycal"); } } }); }); </script> <div id="tabs-2"> <div id="example" style="margin: auto; width:80%;"> <div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;"> <button id="btnpreviousmonth">previous month</button> <button id="btnnextmonth">next month</button> date: <input type="text" id="dateselect" size="20"/> <button id="btndeleteall">delete all</button> </div> <br> <!-- can use pixel widths or percentages. calendar auto resize sub elements. height calculated aspect ratio. day cells tall wide. --> <div id="mycal"></div> </div> <!-- debugging--> <div id="caldebug"></div> <!-- add event modal form --> <style type="text/css"> //label, input.text, select { display:block; } fieldset { padding:0; border:0; margin-top:25px; } .ui-dialog .ui-state-error { padding: .3em; } .validatetips { border: 1px solid transparent; padding: 0.3em; } </style> <div id="add-event-form" title="add new event"> <p class="validatetips">all form fields required.</p> <form> <fieldset> <label for="name">what?</label> <input type="text" name="what" id="what" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/> <table style="width:100%; padding:5px;"> <tr> <td> <label>start date</label> <input type="text" name="startdate" id="startdate" value="" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/> </td> <td> </td> <td> <label>start hour</label> <select id="starthour" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="12" selected>12</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> </select> <td> <td> <label>start minute</label> <select id="startmin" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="00" selected>00</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> <td> <td> <label>start am/pm</label> <select id="startmeridiem" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="am" selected>am</option> <option value="pm">pm</option> </select> </td> </tr> <!-- <tr> <td> <label>end date</label> <input type="text" name="enddate" id="enddate" value="" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/> </td> <td> <label>end hour</label> <select id="endhour" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="12" selected>12</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> </select> <td> <td> <label>end minute</label> <select id="endmin" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="00" selected>00</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> </select> <td> <td> <label>end am/pm</label> <select id="endmeridiem" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"> <option value="am" selected>am</option> <option value="pm">pm</option> </select> </td> </tr>--> </table> <table> <tr> <td> <label>background color</label> </td> <td> <div id="colorselectorbackground"><div style="background-color: #333333; width:30px; height:30px; border: 2px solid #000000;"></div></div> <input type="hidden" id="colorbackground" value="#333333"> </td> <td> <label>text color</label> </td> <td> <div id="colorselectorforeground"><div style="background-color: #ffffff; width:30px; height:30px; border: 2px solid #000000;"></div></div> <input type="hidden" id="colorforeground" value="#ffffff"> </td> </tr> </table> </fieldset> </form> </div> <div id="display-event-form" title="view agenda item"> </div> </div> </body> </html> entire folder: https://www.dropbox.com/sh/8awy5jxzttlq2vz/t1zh5xvgnh
i afraid site loading in pc both wamp , without wamp. so, possible problem may browser or wamp. there few things can try solve problem
- clearing browser cache
- try using different browser or different version of existing one.
- checking if .htacess messing site. try disabling while.
- if using wamp old configuration, new 1 latest configuration.
Comments
Post a Comment