|
-
Nov 18th, 2012, 06:52 PM
#1
Thread Starter
Frenzied Member
 [RESOLVED] Master page menu showing up behind content...
SO I download jqcalendar to include in my application as a starting point for a calendar (it is basically like Google calendar using JQuery/ASP.NET). I notice however when I click on a menu item on the master page, it shows up behind the content on the content page, as you can see here looking at the Maintenance menu:
Any thoughts on why this would happen? I figure it has something to do with how the JQuery is rendering the page, but honestly not sure how to fix it. Here is the Jquery and HTML for the page:
Code:
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Calendar.aspx.vb" Inherits="Admin_Calendar" Theme="jqCalendar" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<title>JQCalendar</title>
<script src="JS/wdCalendar/src/jquery.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/Common.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/datepicker_lang_US.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/jquery.datepicker.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/jquery.alert.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/wdCalendar_lang_US.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/Plugins/jquery.calendar.js" type="text/javascript"></script>
<script src="JS/wdCalendar/src/jquery.getQueryParam.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var view = "week";
var DATA_FEED_URL = "DataFeed.aspx";
var op = {
view: view,
theme: 3,
showday: new Date(),
EditCmdhandler: Edit,
DeleteCmdhandler: Delete,
ViewCmdhandler: View,
onWeekOrMonthToDay: wtd,
onBeforeRequestData: cal_beforerequest,
onAfterRequestData: cal_afterrequest,
onRequestDataError: cal_onerror,
autoload: true,
url: DATA_FEED_URL + "?method=list",
quickAddUrl: DATA_FEED_URL + "?method=add",
quickUpdateUrl: DATA_FEED_URL + "?method=update",
quickDeleteUrl: DATA_FEED_URL + "?method=remove"
};
var $dv = $("#calhead");
var _MH = document.documentElement.clientHeight;
var dvH = $dv.height() + 2;
op.height = _MH - dvH;
op.eventItems = [];
var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
$("#caltoolbar").noSelect();
$("#hdtxtshow").datepicker({ picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),
onReturn: function (r) {
var p = $("#gridcontainer").gotoDate(r).BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
}
});
function cal_beforerequest(type) {
var t = "Loading data...";
switch (type) {
case 1:
t = "Loading data...";
break;
case 2:
case 3:
case 4:
t = "The request is being processed ...";
break;
}
$("#errorpannel").hide();
$("#loadingpannel").html(t).show();
}
function cal_afterrequest(type) {
switch (type) {
case 1:
$("#loadingpannel").hide();
break;
case 2:
case 3:
case 4:
$("#loadingpannel").html("Success!");
window.setTimeout(function () { $("#loadingpannel").hide(); }, 2000);
break;
}
}
function cal_onerror(type, data) {
$("#errorpannel").show();
}
// function Edit(data) {
// var eurl = "edit.aspx?id={0}&start={2}&end={3}&isallday={4}&title={1}";
// if (data) {
// var url = StrFormat(eurl, data);
// OpenModelWindow(url, { width: 600, height: 400, caption: "Manage The Calendar", onclose: function () {
// $("#gridcontainer").reload();
// }
// });
// }
// }
// My Edit
function Edit(data) {
var eurl = "editevent.aspx?id={0}&start={2}&end={3}&isallday={4}&title={1}";
if (data) {
var url = StrFormat(eurl, data);
OpenModelWindow(url, { width: 600, height: 425, caption: "Edit Event", onclose: function () {
$("#gridcontainer").reload();
}
});
}
}
function View(data) {
var str = "";
$.each(data, function (i, item) {
str += "[" + i + "]: " + item + "\n";
});
alert(str);
//window.location = "http://www.financialfreedomservice.com?id=12345";
//alert(data[3]);
}
function Delete(data, callback) {
$.alerts.okButton = "Ok";
$.alerts.cancelButton = "Cancel";
hiConfirm("Are You Sure to Delete this Event", 'Confirm', function (r) { r && callback(0); });
}
function wtd(p) {
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$("#showdaybtn").addClass("fcurrent");
}
//to show day view
$("#showdaybtn").click(function (e) {
//document.location.href="#day";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//to show week view
$("#showweekbtn").click(function (e) {
//document.location.href="#week";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("week").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//to show month view
$("#showmonthbtn").click(function (e) {
//document.location.href="#month";
$("#caltoolbar div.fcurrent").each(function () {
$(this).removeClass("fcurrent");
})
$(this).addClass("fcurrent");
var p = $("#gridcontainer").swtichView("month").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
$("#showreflashbtn").click(function (e) {
$("#gridcontainer").reload();
});
//Add a new event
// $("#faddbtn").click(function (e) {
// var url = "add.aspx";
// OpenModelWindow(url, { width: 600, height: 400, caption: "Create Event", onclose: function () {
// $("#gridcontainer").reload();
// }
// });
// });
// My Add Event (Sean Grebey)
$("#faddbtn").click(function (e) {
var url = "addevent.aspx";
OpenModelWindow(url, { width: 600, height: 450, caption: "Schedule Event", onclosed: function (e) {
$("#gridcontainer").reload();
}
});
});
//go to today
$("#showtodaybtn").click(function (e) {
var p = $("#gridcontainer").gotoDate().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//previous date range
$("#sfprevbtn").click(function (e) {
var p = $("#gridcontainer").previousRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
//next date range
$("#sfnextbtn").click(function (e) {
var p = $("#gridcontainer").nextRange().BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(p.datestrshow);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<div>
<div id="calhead" style="padding-left:1px;padding-right:1px;">
<div class="cHead"><div class="ftitle">Calendar - ACS</div>
<div id="loadingpannel" class="ptogtitle loadicon" style="display: none;">Loading calendar...</div>
<div id="errorpannel" class="ptogtitle loaderror" style="display: none;">Sorry, could not load your calendar, please try again later</div>
</div>
<div id="caltoolbar" class="ctoolbar">
<div id="faddbtn" class="fbutton">
<div><span title='Click to Create New Event' class="addcal">
New Event
</span></div>
</div>
<div class="btnseparator"></div>
<div id="showtodaybtn" class="fbutton">
<div><span title='Click to back to today ' class="showtoday">
Today</span></div>
</div>
<div class="btnseparator"></div>
<div id="showdaybtn" class="fbutton">
<div><span title='Day' class="showdayview">Day</span></div>
</div>
<div id="showweekbtn" class="fbutton fcurrent">
<div><span title='Week' class="showweekview">Week</span></div>
</div>
<div id="showmonthbtn" class="fbutton">
<div><span title='Month' class="showmonthview">Month</span></div>
</div>
<div class="btnseparator"></div>
<div id="showreflashbtn" class="fbutton">
<div><span title='Refresh view' class="showdayflash">Refresh</span></div>
</div>
<div class="btnseparator"></div>
<div id="sfprevbtn" title="Prev" class="fbutton">
<span class="fprev"></span>
</div>
<div id="sfnextbtn" title="Next" class="fbutton">
<span class="fnext"></span>
</div>
<div class="fshowdatep fbutton">
<div>
<input type="hidden" name="txtshow" id="hdtxtshow" />
<span id="txtdatetimeshow">Loading</span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div style="padding:1px;">
<div class="t1 chromeColor">
</div>
<div class="t2 chromeColor">
</div>
<div id="dvCalMain" class="calmain printborder">
<div id="gridcontainer" style="overflow-y: visible;">
</div>
</div>
<div class="t2 chromeColor">
</div>
<div class="t1 chromeColor">
</div>
</div>
</div>
</asp:Content>
Sean
Some days when I think about the next 30 years or so of my life I am going to spend writing code, I happily contemplate stepping off a curb in front of a fast moving bus.
-
Nov 18th, 2012, 08:54 PM
#2
Re: Master page menu showing up behind content...
Probably some CSS issue with the menu.Try playing a little with position and z-index of the menu.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Nov 19th, 2012, 11:13 AM
#3
Thread Starter
Frenzied Member
Re: Master page menu showing up behind content...
 Originally Posted by sapator
Probably some CSS issue with the menu.Try playing a little with position and z-index of the menu.
Yeah I've been playing around with the z-index with no luck. I'm still kind of new to JScript, but I am kind of leaning toward it has an issue with how the content is dynamically rendered on that page maybe? The menu shows up correctly on all other pages.
Sean
Some days when I think about the next 30 years or so of my life I am going to spend writing code, I happily contemplate stepping off a curb in front of a fast moving bus.
-
Nov 19th, 2012, 07:05 PM
#4
Re: Master page menu showing up behind content...
Can help more because i've never used this calendar but if you show your CSS and the menu using the CSS someone that have used the control might be able to tell you what's going on.
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·
-
Nov 19th, 2012, 07:47 PM
#5
Thread Starter
Frenzied Member
Re: Master page menu showing up behind content...
It's a cool control how it works, but I kind of want to shoot the guy who wrote the JQuery for it. Almost zero comments and everything is abbreviated. Here is a quick sample. How the heck is anybody supposed to figure out how it works to modify it...
Code:
//for all-day events
for (var i = 0; i < l; i++) {
var de = deA[i];
if (de.length > 0) {
var x = [];
var y = [];
var D = [];
var dl = de.length;
var Ia;
for (var j = 0; j < dl; ++j) {
var ge = de[j];
for (var La = ge.st.p, Ia = 0; y[Ia] > La; ) Ia++;
ge.PO = Ia; ge.ne = []; //PO is how many events before this one
y[Ia] = ge.et.p || 1440;
x[Ia] = ge;
if (!D[Ia]) {
D[Ia] = [];
}
D[Ia].push(ge);
if (Ia != 0) {
ge.pe = [x[Ia - 1]]; //previous event
x[Ia - 1].ne.push(ge); //next event
}
for (Ia = Ia + 1; y[Ia] <= La; ) Ia++;
if (x[Ia]) {
var k = x[Ia];
ge.ne.push(k);
k.pe.push(ge);
}
ge.width = 1 / (ge.PO + 1);
ge.left = 1 - ge.width;
}
var k = Array.prototype.concat.apply([], D);
x = y = D = null;
var t = k.length;
for (var y = t; y--; ) {
var H = 1;
var La = 0;
var x = k[y];
for (var D = x.ne.length; D--; ) {
var Ia = x.ne[D];
La = Math.max(La, Ia.VL);
H = Math.min(H, Ia.left)
}
x.VL = La + 1;
x.width = H / (x.PO + 1);
x.left = H - x.width;
}
for (var y = 0; y < t; y++) {
var x = k[y];
x.left = 0;
if (x.pe) for (var D = x.pe.length; D--; ) {
var H = x.pe[D];
x.left = Math.max(x.left, H.left + H.width);
}
var p = (1 - x.left) / x.VL;
x.width = Math.max(x.width, p);
x.aQ = Math.min(1 - x.left, x.width + 0.7 * p); //width offset
}
de = null;
deA[i] = k;
}
Sean
Some days when I think about the next 30 years or so of my life I am going to spend writing code, I happily contemplate stepping off a curb in front of a fast moving bus.
-
Nov 20th, 2012, 09:31 PM
#6
Thread Starter
Frenzied Member
Re: Master page menu showing up behind content...
In case anybody is wondering, I resolved it by adding: RenderingMode="List" to the asp:menu control. Something to do with how VS2010 renders menus on the client versus how previous versions did.
Code:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" RenderingMode="List">
Sean
Some days when I think about the next 30 years or so of my life I am going to spend writing code, I happily contemplate stepping off a curb in front of a fast moving bus.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote