StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHtml page is displayed well as file, but not on server
primarykey
Id
17724909
data
AcceptedAnswerId
17726449
AnswerCount
4
ClosedDate
CommentCount
9
CommunityOwnedDate
CreationDate
2013-07-18T13:31:46.733
FavoriteCount
1
LastActivityDate
2017-02-13T16:52:14.537
LastEditDate
2017-02-13T16:52:14.537
LastEditorUserId
13302
OwnerUserId
1786117
ParentId
0
PostTypeId
1
Score
0
ViewCount
1065
LastEditorDisplayName
text
Body
<p>I have a really weird problem: a HTML page is displayed properly if I access it in my browser by path, however it looks awful if I access it from my localhost. I know this is a very large topic, but what could be the cause of something like that? I am using WampServer. I tried this in chrome, Firefox and IE and the result is the same. I can provide the source code if needed, however it is very large (700 lines the main code, plus a lot of dependencies).</p> <p>I just want to know if there is an usual reason that might provoke this behaviour</p> <p>Via path:<img src="https://i.stack.imgur.com/XGoPY.jpg" alt="The file via path"> Via server:<img src="https://i.stack.imgur.com/xkKIl.jpg" alt="The file via server"></p> <pre><code><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Calendar</title>  <link rel="stylesheet" type="text/css" href="css/frontierCalendar/jquery-frontier-cal-1.3.2.css" />  <link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" />  <link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" />  <script type="text/javascript" src="js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script>  <script type="text/javascript" src="js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>  <script type="text/javascript" src="js/colorpicker/colorpicker.js"></script>  <script type="text/javascript" src="js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script>  <script type="text/javascript" src="js/lib/jshashtable-2.1.js"></script>  <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;">  <style type="text/css" media="screen"> /* Default font-size on the default ThemeRoller theme is set in ems, and with a value that when combined with body { font-size: 62.5%; } will align pixels with ems, so 11px=1.1em, 14px=1.4em. If setting the body font-size to 62.5% isn't an option, or not one you want, you can set the font-size in ThemeRoller to 1em or set it to 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; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa')"; /* For 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 with current year & month * specifies the callbacks for day click & agenda item click events * then 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"); /** * Do something when dragging starts on agenda div */ function myAgendaDragStart(eventObj,divElm,agendaItem){ // destroy our qtip tooltip if(divElm.data("qtip")){ divElm.qtip("destroy"); } }; /** * Do something when dragging stops on agenda div */ function myAgendaDragStop(eventObj,divElm,agendaItem){ //alert("drag stop"); }; 0 /** * Custom tooltip - use any tooltip library you want to display the agenda data. * for this example we use qTip - http://craigsworks.com/projects/qtip/ * * @param divElm - jquery object for 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>"; } for (var propertyName in data) { displayData += "<b>" + propertyName + ":</b> " + data[propertyName] + "<br>" } // use the user specified colors from the 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 are inherited from 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 the day cells roughly 3/4th as tall as they are wide. this makes our calendar wider than it is tall. */ jfcalplugin.setAspectRatio("#mycal",0.75); /** * Called when user clicks day cell * use reference to plugin object to add agenda item */ function myDayClickHandler(eventObj){ // Get the Date of the day that was clicked from the event object var date = eventObj.data.calDayDate; // store date in our global js variable for access later clickDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate(); // open our add event dialog $('#add-event-form').dialog('open'); }; /** * Called when user clicks and agenda item * use reference to plugin object to edit agenda item */ function myAgendaClickHandler(eventObj){ // Get ID of the agenda item from the event object var agendaId = eventObj.data.agendaId; // pull agenda item from calendar var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); clickAgendaItem = agendaItem; $("#display-event-form").dialog('open'); }; /** * Called when user drops an agenda item into a day cell. */ function myAgendaDropHandler(eventObj){ // Get ID of the agenda item from the event object var agendaId = eventObj.data.agendaId; // date agenda item was dropped onto var date = eventObj.data.calDayDate; // Pull agenda item from calendar var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); alert("You dropped agenda item " + agendaItem.title + " onto " + date.toString() + ". Here is where you can make an AJAX call to update your database."); }; /** * Called when a user mouses over an agenda item */ function myAgendaMouseoverHandler(eventObj){ var agendaId = eventObj.data.agendaId; var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); //alert("You moused over agenda item " + agendaItem.title + " at location (X=" + eventObj.pageX + ", Y=" + eventObj.pageY + ")"); }; /** * Initialize jquery ui datepicker. set date format to yyyy-mm-dd for easy parsing */ $("#dateSelect").datepicker({ showOtherMonths: true, selectOtherMonths: true, changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'yy-mm-dd' }); /** * Set datepicker to current date */ $("#dateSelect").datepicker('setDate', new Date()); /** * Use reference to plugin object to a specific year/month */ $("#dateSelect").bind('change', function() { var selectedDate = $("#dateSelect").val(); var dtArray = selectedDate.split("-"); var year = dtArray[0]; // jquery datepicker months start at 1 (1=January) var month = dtArray[1]; // strip any preceeding 0's month = month.replace(/^[0]+/g,"") var day = dtArray[2]; // plugin uses 0-based months so we subtrac 1 jfcalplugin.showMonth("#mycal",year,parseInt(month-1).toString()); }); /** * Initialize previous month button */ $("#BtnPreviousMonth").button(); $("#BtnPreviousMonth").click(function() { jfcalplugin.showPreviousMonth("#mycal"); // update the 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 at 1 (1=January) so we add 1 $("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday); return false; }); /** * Initialize next month button */ $("#BtnNextMonth").button(); $("#BtnNextMonth").click(function() { jfcalplugin.showNextMonth("#mycal"); // update the 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 at 1 (1=January) so we add 1 $("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday); return false; }); /** * Initialize delete all 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 what = jQuery.trim($("#what").val()); if(what == ""){ alert("Please enter a short event description into the \"what\" field."); }else{ var startDate = $("#startDate").val(); var startDtArray = startDate.split("-"); var startYear = startDtArray[0]; // jquery datepicker months start at 1 (1=January) var startMonth = startDtArray[1]; var startDay = startDtArray[2]; // strip any 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 at 1 (1=January) var endMonth = endDtArray[1]; var endDay = endDtArray[2]; // strip any 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 to the 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 with the date that was 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 we close so they are fresh when the dialog is 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 your own edit screen or dialog!"); }, 'Delete': function() { if(confirm("Are you sure you want to delete this 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 we put some fake data in the agenda data. we can retrieve it 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>" ); } for (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 is initialized in a closed tab so we need to resize it when the 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>  <div id="mycal"></div> </div>  <div id="calDebug"></div>  <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 are 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>&nbsp;</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>  </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> </code></pre> <p>Entire folder: <a href="https://www.dropbox.com/sh/8awy5jxzttlq2vz/t1zH5XvgnH" rel="nofollow noreferrer">https://www.dropbox.com/sh/8awy5jxzttlq2vz/t1zH5XvgnH</a></p>
Tags
<html><wamp>
Title
Html page is displayed well as file, but not on server
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USmarc_s
UserOwnerUserId
1. USBujanca Mihai
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POHtml page is displayed well as file, but not on server
  UserUserId
  USVarun Agrawal
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.