Hi,
I use display:none/display:block to switch to 2 others ‘pages’ (called reports and settings).
When I switch between reports or settings and go back to the scheduler, the scheduler has jumped to the start of the day (instead of were we leave it). This only occures in IE (I have tested IE8 and IE9). FireFox and chrome are oke.
Can I call a method of the scheduler to restore its scroll position?
Here is the code:
<!DOCTYPE html>
<head>
<title>Scheduler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control", content="no-store, no-cache, must-revalidate"/>
<meta http-equiv="Expires" content="-1"/>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_dhx_terrace.css" type="text/css" charset="utf-8"/>
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_expand.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
font-family: Tahoma;
font-size: 8pt;
}
#content{
margin:8px 8px 8px 8px;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
border: 2px solid rgb(13, 98, 178);
border-radius: 5px;
}
#header {
padding: 8px;
height:44px;
font-size: 20pt;
color:rgb(13, 98, 178);
}
#nav {
margin-left:12px;
width:150px;
overflow:auto;
border: 1px solid #CECECE;
background-color: rgb(233,242,255);
}
#nav a {
color: #454544;
font-size: 10pt;
font-weight:bold;
display: block;
text-decoration: none;
height:44px;
vertical-align:middle;
padding-top:10px;
padding-left:10px;
}
#nav a:hover{
color: #fff;
background-color: rgb(13, 98, 178);
}
#nav a.nav_active{
color: #fff;
background-color: rgb(13, 98, 178);
}
#right {
position:absolute;
top:60px;
left:180px;
bottom:40px;
right:16px;
border: 1px solid #CECECE;
}
</style>
<script type="text/javascript" charset="utf-8">
dhtmlxError.catchError("ALL", function(type, desc, data)
{
var msg = data[0].responseText;
alert(msg);
});
var getById = function(id) { return document.getElementById(id); }; //just a helper
function changePage(elem)
{
getById('nav_scheduler').setAttribute("class", "");
getById('nav_reports').setAttribute("class", "");
getById('nav_settings').setAttribute("class", "");
getById('scheduler_here').style.display = "none";
getById('reports_here').style.display = "none";
getById('settings_here').style.display = "none";
elem.setAttribute("class", "nav_active");
if (elem == getById('nav_scheduler')) {
getById('scheduler_here').style.display = "block";
// can I do something here to force the scheduler to the right position??
}
else if (elem == getById('nav_reports')) {
getById('reports_here').style.display = "block";
}
else if (elem == getById('nav_settings')) {
getById('settings_here').style.display = "block";
}
}
function show_minical(){
if (scheduler.isCalendarVisible())
scheduler.destroyCalendar();
else
scheduler.renderCalendar({
position:"dhx_minical_icon",
date:scheduler._date,
navigation:true,
handler:function(date,calendar){
scheduler.setCurrentView(date);
scheduler.destroyCalendar()
}
});
}
function init() {
scheduler.config.scroll_hour = 9;
scheduler.xy.min_event_height = 21;
scheduler.config.hour_size_px = (60/15)*21;
scheduler.config.time_step = 15
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2010,0,10),"week");
scheduler.load("./data/events.xml");
}
</script>
</head>
<body onload="init();">
<div id="content">
<div id="header">TimeWriter</div>
<div id="nav">
<a href="#" id="nav_scheduler" onclick="changePage(this);" class="nav_active">Scheduler</a>
<a href="#" id="nav_reports" onclick="changePage(this);" >Reports</a>
<a href="#" id="nav_settings" onclick="changePage(this);" >Settings</a>
</div>
<div id="right">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button" style="left:50px"> </div>
<div class="dhx_cal_today_button" style="left:97px; border-radius:0px; width:70px;"></div>
<div class="dhx_minical_icon" id="dhx_minical_icon" style="left:168px; width:70px; border: 1px solid #CECECE; background-position:50% 50%;" onclick="show_minical()"> </div>
<div class="dhx_cal_next_button" style="left:239px"> </div>
<div class="dhx_cal_date" style="left:300px; text-align:left"></div>
<div class="dhx_cal_tab" name="week_tab" style="display:none"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div id="reports_here" style="display:none">reports</div>
<div id="settings_here" style="display:none">settings</div>
</div>
</div>
</body>