Thursday, March 8, 2012

Panel

Panel

Today I used for first time a panel. I have to "hide and show" some parts of my master-page. Usually developers construct 2 different master pages. I decided to have one and implement the panels. Here's my code:

HTML-page with 2 panels (code segment)

<asp:Panel ID="PanelBreadCrumb" runat="server">
<div id="breadcrumbDiv" class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" > " SiteMapProvider="Breadcrumb">
<CurrentNodeStyle Font-Bold="True" />
</asp:SiteMapPath>
</div>
</asp:Panel>

<asp:Panel ID="PanelRightSide" runat="server">
<td class="rightColumn2" valign="top">
<div style="padding: 10px;">
<ul class="ul_rightCol">
<li class="bullets">
<asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="http://www.sample1.html"
Target="_blank" AccessKey="a">Sample1</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypRates" runat="server" NavigateUrl="http://www.sample2.htm"
AccessKey="1" Target="_blank">Sample2</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypChapter" runat="server" NavigateUrl="http://www.sample3.htm"
Target="_blank" AccessKey="2">Sample3</asp:HyperLink>
</li>
<li class="bullets">
<asp:HyperLink ID="hypData" runat="server" NavigateUrl="http://www.sample4.htm"
Target="_blank" AccessKey="3">Sample4</asp:HyperLink>
</li>
</ul>
</div>
</asp>


Code behind in VB.NET on Page Load: (code segment)

Dim PanelBC As Panel
PanelBC = CType(Master.FindControl("PanelBreadCrumb"), Panel)
PanelBC.Visible = False

Dim PanelRS As Panel
PanelRS = CType(Master.FindControl("PanelRightSide"), Panel)
PanelRS.Visible = True

This trick is a quite comfortable to use and reuse one master page for different layout through the same site. I hope to use the trick more and more.

Tuesday, March 6, 2012

Div Align With CSS

Creating a nice look for section 508-complaint site, I found I need some ideas how to place my div (s) on a page. Researching the topic I found an interesting posting about it:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:
.center {   margin-left: auto;   margin-right: auto; } 
If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.
.right {   float: right; } .left {    float: left; } 
I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don't clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.
.clear {   clear: both; }" 
The advice came from http://juixe.com/techknow/index.php/2007/01/14/div-align-with-css/

Thursday, March 1, 2012

Accesskey and section 508

How different browsers handle the above accessKey letters for button and anchor elements


BrowserOperating SystemKey CombinationButton BehaviorAnchor Behavior
Chrome 7.0.517.41LinuxAlt + letterClicks the button (3)Clicks the anchor (3)
Chrome 7.0.517.41Mac OS XControl + Option + letterClicks the button (3)Clicks the anchor (3)
Chrome 7.0.517.41WindowsAlt + letterClicks the button (3)Clicks the anchor (3)
Firefox 1.5WindowsAlt + letterClicks the button (1)Unknown
Firefox 2LinuxAlt + Shift + letterClicks the button (1)Clicks the anchor
Firefox 2Mac OS XControl + letterClicks the button (1)Clicks the anchor
Firefox 2WindowsAlt + Shift + letterClicks the button (1)Unknown
Firefox 3LinuxAlt + Shift + letterClicks the button (1)Clicks the anchor
Firefox 3Mac OS XControl + letterClicks the button (1)Clicks the anchor
Firefox 3WindowsAlt + Shift + letterClicks the button (1)Clicks the anchor
Internet Explorer 6WindowsAlt + letterSets focus on the button (2)Unknown
Internet Explorer 7WindowsAlt + letterSets focus on the button (2)Sets focus on the anchor (2)
Internet Explorer 8WindowsAlt + letterClicks the button (3)Sets focus on the anchor (2)
Internet Explorer 9 (beta)WindowsAlt + letterClicks the button (3)Sets focus on the anchor (2)
Safari 3.1.2Mac OS XControl + Option + letterClicks the button (3)Clicks the anchor (3)
Safari 3.1.2WindowsAlt + letterClicks the button (3)Clicks the anchor (3)
Safari 5.0.2Mac OS XControl + Option + letterClicks the button (3)Clicks the anchor (3)
Safari 5.0.2WindowsAlt + letterClicks the button (3)Clicks the anchor (3)


•Red = Different behavior for buttons and anchors
•Comment 1 = To just set focus on the button/anchor, change your about:config setting for the “accessibility.accesskeycausesactivation” user preference.
•Comment 2 = Press Enter to click the button/anchor
•Comment 3 = There appears to be no built-in mechanism to just set focus on the button/anchor. The component handling the click event would be responsible for setting focus while handling the click.

The data comes from http://formattc.wordpress.com/2010/11/03/browsers-and-the-html-accesskey/ this table was really helpful to build my own system of accesskeys.