Chapter 11

Tulsi · April 26th, 2012, 01:02 PM

Hi Imar,

I'm having trouble getting this to run smoothly. The solution for the problem (p.743) in the appendix A works, but it doesn't run smoothly.

For example, when I click hide banner, a series of "Show banner" texts are left as (and after) the banner slides up. Also, when clicking show banner, the "hide Banner" text is cut off after the banner is shown.

What should I do to fix this?

Thanks.
Tulsi

Imar · April 27th, 2012, 02:25 AM

Quote:

What should I do to fix this?

Post the relevant pieces of code (including that of the banner and maybe the maste rpage) so I can take a look ;-)

Imar

Tulsi · April 27th, 2012, 11:21 AM

Okay....

Here's the markup for Banner control:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Banner.ascx.cs" Inherits="Controls_Banner" %>

<% if (false) { %>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% } %>

<asp:Panel ID="VerticalPanel" runat="server" ClientIDMode="Static">
<a href="http://p2p.wrox.com" target="_blank" runat="server" id="VerticalLink">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Banner120x240.gif" AlternateText="This is a sample banner." />
</a>
</asp:Panel>

<span id="HideBanner" style="cursor: pointer;" runat="server" ClientIDMode="Static" >Hide Banner</span>

<asp:Panel ID="HorizontalPanel" runat="server">
<a href="http://p2p.wrox.com" target="_blank" runat="server" id="HorizontalLink">
<asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Banner468x60.gif" AlternateText="This is a sample banner." />
</a>
</asp:Panel>

<script type="text/javascript">
$(function ()
{
$('#HideBanner').bind('click', function ()
{
$('#VerticalPanel').slideToggle();
if ($(this).css('display')=='block')
{
$('#HideBanner')[0].innerText = "Hide Banner";
}
else
{
$('#HideBanner')[0].innerText = "Show Banner";
}
});
});
</script>

Master page markup:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="FrontEnd.master.cs" Inherits="MasterPages_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title></title>

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

<body>
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
</Scripts>
</asp:ScriptManager>

<div id="PageWrapper">
<div id="Header"><a id="A1" href="~/" runat="server"></a></div>

<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" cssclass="MainMenu"
DataSourceID="SiteMapDataSource1" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
onmenuitemclick="Menu1_MenuItemClick">
</asp:Menu>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ShowExpandCollapse="False">
<LevelStyles>
<asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
</LevelStyles>
<NodeStyle BackColor="White"/>
</asp:TreeView>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
ShowStartingNode="False" />
</div>

<div id="MainContent">

<asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath><br /><br />

<asp:ContentPlaceHolder ID="cpMainContent" runat="server">

</asp:ContentPlaceHolder>

</div>
<div id="Sidebar">
Select a Theme: <br />
<asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True"
onselectedindexchanged="ThemeList_SelectedIndexCha nged">
<asp:ListItem>Monochrome</asp:ListItem>
<asp:ListItem>DarkGrey</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical" />
<br />
</div>
<div id="Footer">
Footer goes here.
</div>

<asp:ContentPlaceHolder ID="cpClientScript" runat="server">
</asp:ContentPlaceHolder>

</div>
</form>
</body>

</html>

Thanks.

Tulsi

Imar · April 29th, 2012, 06:32 AM

Hi Tulsi,

There's an updated version of the code available in the errata for the book (http://www.wrox.com/WileyCDA/WroxTit...Cd-ERRATA.html):

Code:

$(function ()
{
  $('#HideBanner').bind('click', function ()
  {
    $('#VerticalPanel').slideToggle('fast', function ()
    {
      if ($(this).css('display') == 'block')
      {
        $('#HideBanner').text('Hide Banner');
      }
      else
      {
        $('#HideBanner').text('Show Banner');
      }
    });
  });
});

With this code, the animation works OK. I do see the behavior you're describing in IE 9, where the text Hide Banner gets repeated in IE. Looks like a rendering bug to me; as soon as you click it or resize the browser window things look OK again. It also looks fine in other browsers.

Cheers,

Imar