I am using two tab panels on an INTRAnet web site (can't give access to you, sorry). It's been working great. Only I just discovered there is a bug when viewing in Safari. It appears that the first panel on the page will not render the contents of any
of the tabs other than the first. What is strange is the the right hand tab panel (see picture) DOES render all of it's tabs contents.
function init() {
detectSafari();
showLatestNews();
checkScreen();
checkEmail();
}
// if the screen size is smaller than 801, then make sure that the width gets set to 900
// note: this is an IE 6 hack.
function checkScreen() {
if (screen.width < 801) {
var standardWidth = "900px";
$get('intranet-wrapper').style.width = standardWidth;
$get('intranet-global-header').style.width = standardWidth;
}
}
function detectSafari() {
if (BrowserDetect.browser == 'Safari') {
if (BrowserDetect.version < 313) {
document.getElementById("warning").style.display = "block";
document.getElementById("warning").innerHTML = 'You are running an unsupported version of Safari. This page will not render correctly. Please <a href=\'http://www.apple.com/support/downloads/safariupdate201.html\'>upgrade</a> to the latest version. If you cannot upgrade Safari then please install Firefox - <a href=\'http://www.mozilla.com/en-US/firefox/\'>click here</a>. You can access your e-mail by <a href=\'https://mail.roberts.edu\'>clicking here</a>.';
}
}
}
function checkEmail() {
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("AJAX_Callbacks/ajaxEmail.aspx");
wRequest.set_httpVerb("GET");
wRequest.add_completed(showEmailNumber);
wRequest.invoke();
}
function showEmailNumber(e) {
var content = $get('number_of_emails');
if (e._xmlHttpRequest.responseText > 0) {
content.innerHTML = '(' + e._xmlHttpRequest.responseText + ')';
}
}
// TAB MANAGEMENT ////////////////////////////////////////////////////
function ActiveTabChangedMain(sender, e) {
//alert(sender.get_activeTabIndex());
var CurrentTab = $get('<%=MainTab.ClientID%>');
CurrentTab.innerHTML = sender.get_activeTabIndex();
}
function ActiveTabChangedSub(sender, e) {
//alert(sender.get_activeTabIndex());
var CurrentTab = $get('<%=SubTab.ClientID%>');
CurrentTab.innerHTML = sender.get_activeTabIndex();
}
function selectMainTab(id) {
var tabBehavior = $get('<%=tcMain.ClientID%>').control;
if (tabBehavior.get_activeTabIndex() != id) { tabBehavior.set_activeTabIndex(id); }
}
// CALENDAR POPUP MANAGEMENT ////////////////////////////////////////////////////
function showEvent(event_id) {
// set to the calendar tab
var tabBehavior = $get('<%=tcSide.ClientID%>').control;
if (tabBehavior.get_activeTabIndex() != 2) { tabBehavior.set_activeTabIndex(2); }
// call the popup
getCalendarEvent(event_id);
}
function getCalendarEvent(event_id) {
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("AJAX_Callbacks/ajaxCalendarOutput.aspx?event_id=" + event_id);
wRequest.set_httpVerb("GET");
wRequest.add_completed(showCalendarEvent);
wRequest.invoke();
}
function showCalendarEvent(e) {
var extender = $find('<%=CampusCalendar1.FindControl("mpeCalendarEvent").ClientID%>');
var content = $get('<%=CampusCalendar1.FindControl("lblEventContent").ClientID%>');
content.innerHTML = e._xmlHttpRequest.responseText;
extender.show();
}
function updateCalendar(e) {
var content = $get('<%=CampusCalendar1.FindControl("lblCalendarResults").ClientID%>');
content.innerHTML = '<img src="images/ajax-loader.gif"> Loading...';
}
// NEWS POPUP MANAGEMENT ////////////////////////////////////////////////////
function showNews(id) {
// set to the calendar tab
var tabBehavior = $get('<%=tcSide.ClientID%>').control;
if (tabBehavior.get_activeTabIndex() != 1) { tabBehavior.set_activeTabIndex(1); }
// call the popup
getNewsItem(id)
}
function getNewsItem(id) {
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("AJAX_Callbacks/ajaxNewsOutput.aspx?id=" + id);
wRequest.set_httpVerb("GET");
wRequest.add_completed(showNewsItem);
wRequest.invoke();
}
function showNewsItem(e) {
var extender = $find('<%=CampusNews1.FindControl("mpeNewsEvent").ClientID%>');
var content = $get('<%=CampusNews1.FindControl("lblNewsContent").ClientID%>');
content.innerHTML = e._xmlHttpRequest.responseText;
extender.show();
}
// PHOTO POPUP MANAGEMENT ////////////////////////////////////////////////////
function showPhoto(id) {
getPhotoItem(id)
}
function getPhotoItem(id) {
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("AJAX_Callbacks/ajaxPhotos.aspx?id=" + id);
wRequest.set_httpVerb("GET");
wRequest.add_completed(showPhotoItem);
wRequest.invoke();
}
function showPhotoItem(e) {
var content = $get('<%=RWCPhotosTab1.FindControl("lblPhotoContent").ClientID%>');
// wait 500 ms to show the image so that it can download
setTimeout("showPhotoAfterWait()", 500);
}
function showPhotoAfterWait() {
var panel = $get('<%=RWCPhotosTab1.FindControl("pnlPhoto").ClientID%>');
var extender = $find('<%=RWCPhotosTab1.FindControl("mpePhoto").ClientID%>');
var photo = $get('photo-popup-picture');
var newImg = new Image();
newImg.src = photo.src;
<%-- <asp:Panel ID="pnlFeedback" runat="server" Height="175px" Width="350px" CssClass="feedback-popup">
<h1>Give us some Feedback</h1>
<p>What do you like about the Intranet? What could be enhanced or improved? Are there any additional features you'd like to see?</p>
<asp:TextBox ID="txtFeedback" runat="server" Height="60px" Width="300px" TextMode="MultiLine" ></asp:TextBox>
<asp:Button ID="btnFeedbackSend" runat="server" Text="Send Feedback" />
<asp:Button ID="btnFeedbackCancel" runat="server" Text="Cancel" />
</asp:Panel>
Dim myLogin As New edu.roberts.its.LoginManagement
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'Check these regardless of postback
'If username is not set then load it in. If Not (Session("username") <> "") Then Session("username") = myLogin.FormattedUserName(Request.ServerVariables("LOGON_USER")) End If
Dim dbIntranet As New IntranetHandler(Session("username"))
'If account type is not set then load it in. If Not (Session("accounttype") <> "") Then 'Get Student/Faculty information If dbIntranet.AccountType = 1 Then Session("accounttype") = "employee" Else Session("accounttype") = "student" End If End If
If Not IsPostBack Then
'CheckCompatability()
If Session("accounttype") = "employee"Then 'If they are an employee check to see if they have impsonation rights Me.tpTools.Enabled = dbIntranet.canImpersonate(Session("username")) End If
'Dim strCalendarResponse As String 'Dim strEmailResponse As String 'Dim myExchange As New IntranetExchangeAccess
Me.lblLogin.Text = "Logged in as <strong>" & dbIntranet.Name & "</strong>"
' Disable certain features for Guest Account If dbIntranet.Name = "Guest Account"Then Me.tpPhotos.Enabled = False Me.tpLinks.Enabled = False Me.tpCMS.Enabled = False End If
LoadUserSettings()
'Get Personal Calendar 'strCalendarResponse = myExchange.getUserCalendar(Session("username"), 5) 'Me.lblPersonalCalendar.Text = strCalendarResponse ''If the reponse starts with Sorry then disable the tab 'If (Left(strCalendarResponse, 5) = "Sorry") Then ' Me.tpPersonalCalendar.Enabled = False 'End If
'Get Personal Email 'strEmailResponse = myExchange.getUserInbox(myLogin.FormattedUserName(Request.ServerVariables("LOGON_USER"))) 'Me.lblPersonalEmail.Text = strEmailResponse ''Me.tpEmail.HeaderText = "Email (" & myExchange.intUnreadMessages & ")" 'this must be called AFTER getUserInbox ''If the reponse starts with Sorry then disable the tab 'If (Left(strEmailResponse, 5) = "Sorry") Then ' Me.tpEmail.Enabled = False 'End If
'Activate the right tab If Request.QueryString("goto") = "courses"Then Me.tcMain.ActiveTabIndex = 1 If Request.QueryString("goto") = "blog"Then Me.tcMain.ActiveTabIndex = 4 If Request.QueryString("goto") = "links"Then Me.tcMain.ActiveTabIndex = 5
DetectImpersonation()
SetTabs()
' Me.tpPhotos.enabled = False
End If
End Sub
Private Sub SetTabs() If IsNumeric(Request.QueryString("maintab")) Then Me.tcMain.ActiveTabIndex = Request.QueryString("maintab") Me.MainTab.Text = Request.QueryString("maintab") End If
If IsNumeric(Request.QueryString("subtab")) Then Me.tcSide.ActiveTabIndex = Request.QueryString("subtab") Me.SubTab.Text = Request.QueryString("subtab") End If
It might be easier to tell what's going on with a simplified example - please try to remove everything that's not needed to demonstrate the problematic behavior.
rwc_chris
Member
34 Points
28 Posts
Possible Bug in TabPanel in Safari?
Jun 22, 2007 03:19 PM|LINK
I am using two tab panels on an INTRAnet web site (can't give access to you, sorry). It's been working great. Only I just discovered there is a bug when viewing in Safari. It appears that the first panel on the page will not render the contents of any of the tabs other than the first. What is strange is the the right hand tab panel (see picture) DOES render all of it's tabs contents.
Here's all the code:
David Anson
Star
8728 Points
1847 Posts
AspNetTeam
Re: Possible Bug in TabPanel in Safari?
Jun 22, 2007 08:18 PM|LINK
It might be easier to tell what's going on with a simplified example - please try to remove everything that's not needed to demonstrate the problematic behavior.
http://dlaa.me/
http://blogs.msdn.com/b/delay/
This posting is provided "AS IS" with no warranties, and confers no rights.
rwc_chris
Member
34 Points
28 Posts
Re: Possible Bug in TabPanel in Safari?
Jun 26, 2007 01:28 PM|LINK
I found the problem. Believe it or not is was an unclosed Div tag that was causing the entire problem. Added the div and the problem disappeared.