Ch11 p378 Step 7

ken evans · October 18th, 2010, 01:19 PM

My banner isn't fading!
Can't find the error.

I tried the book's source code for frontend.master and BasicSelector,aspx but it still doesn't fade.

Where might I have made the error?
Thanks
Ken

BasicSelectors.aspx

Code:

<%@ Page Title="Basic Selectors Demo" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="BasicSelectors.aspx.cs" Inherits="Demos_BasicSelectors" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="Server">
  <h1>Basic Selectors</h1>
  <div class="SampleClass">I am a div.</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
  <script type="text/javascript">
    $(function ()
    {
      $('*').css('color', 'Green');                                 // Universal
      $('#Footer').css('border-bottom', '2px solid black');         // ID
      $('h1').bind('click', function () { alert('Hello World') });  // Element
      $('.SampleClass').addClass('PleaseWait').hide(5000);          // Class
      $('#Footer, #Header').slideUp('slow').slideDown('slow');      // Grouped
      $('#Sidebar img').fadeTo(5000, 0.1);                          // Combined
    });
  </script>
</asp:Content>

FrontendMaster

Code:

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


<!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 href="~/" runat="server">Header goes here</a> </div>
      <div id ="MenuWrapper">
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
          Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
          <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowExpandCollapse="False">
        <LevelStyles>
          <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
        </LevelStyles>
      </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">This is default text that shows up in content pages that don't explicitly override it.</asp:ContentPlaceHolder></div>
      
      <div id ="SideBar">Select a Theme <br /><asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ThemeList_SelectedIndexChanged">
        <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> 
    </div>
    <asp:ContentPlaceHolder ID="cpClientScript" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

Frontend.master.cs

Code:

protected void Page_Load(object sender, EventArgs e)
    {
      if (!Page.IsPostBack)
      {
        string selectedTheme = Page.Theme;
        HttpCookie preferredTheme = Request.Cookies.Get("PreferredTheme");
        if (preferredTheme != null)
        {
          selectedTheme = preferredTheme.Value;
        }
        if (!string.IsNullOrEmpty(selectedTheme) && ThemeList.Items.FindByValue(selectedTheme) !=null) 
        { 
          ThemeList.Items.FindByValue(selectedTheme).Selected = true;
        }
      }


      switch (Page.Theme.ToLower())
      {
        case "darkgrey":
          Menu1.Visible = false;
          TreeView1.Visible = true;
          break;
        default:
          Menu1.Visible = true;
          TreeView1.Visible = false;
          break;
      }

    }
    protected void ThemeList_SelectedIndexChanged(object sender, EventArgs e)
    {
      HttpCookie preferredTheme = new HttpCookie("PreferredTheme");
      preferredTheme.Expires = DateTime.Now.AddMonths(3);
      preferredTheme.Value = ThemeList.SelectedValue;
      Response.Cookies.Add(preferredTheme);
      Response.Redirect(Request.Url.ToString());
    }
}

Imar · October 19th, 2010, 04:14 AM

Hi there,

The ID of the Sidebar in your Master Page is spelled as SideBar, while your jQuery code uses Sidebar with a lower case b. Always check the spelling of the controls you're addressing when you find that your jQuery code doesn't run as the code is case sensitive. Just change SideBar to Sidebar in the Master Page (to stick with how the book does it)and I think it should work.

Cheers,

Imar

ken evans · October 19th, 2010, 04:33 AM

Hi Imar,
Thanks for taking the time to find this mistake of mine.
It works OK now.

Now to Ch 12!
Thanks
Ken