Chapter 11 Using Basic Selectors

JackBlack99 · July 18th, 2017, 11:55 AM

I am doing the Try It Out section: Using Basic Selectors and find that all but one of my selectors is animating correctly. It is the following line:

$('footer, header').slideUp('slow').slideDown('slow'); // Grouped

I have included the rest of the code below in case I have missed something. Can you help please?

BasicSelectors.aspx:

Code:

<%@ Page Title="Basic Selectors Demo" Language="C#" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="true" CodeFile="BasicSelectors.aspx.cs" Inherits="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 element.</div>
</asp:Content>

<asp:Content ID="Content3" runat="server" contentplaceholderid="cpClientScript">
    <script>
        $(function()
        {
            $('*').css('color', 'Green');                                 // Universal
            $('#Sidebar').css('border-bottom', '2px solid red');          // 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>

MasterPage.Master

Code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">f
    </asp:ContentPlaceHolder>
    <webopt:bundlereference runat="server" path="~/StyleSheets" />
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
            <Scripts>
                <%--<asp:ScriptReference Path="../Scripts/jquery-3.1.1.min.js" />--%>
                <asp:ScriptReference Name="jquery" />
            </Scripts>
        </asp:ScriptManager>
        <div id="PageWrapper">
            <div id="Header">
                <a class="HeaderLink" href ="~/" runat="server">Header Goes Here</a>
            </div>
            <div id="MenuWrapper">
                <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                    <DynamicHoverStyle CssClass="DynamicHoverStyle" />
                    <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" HorizontalPadding="70" />
                    <StaticHoverStyle CssClass="StaticHoverStyle" />
                    <StaticMenuItemStyle CssClass="StaticMenuItemStyle" HorizontalPadding="70" />
                    <StaticSelectedStyle CssClass="StaticSelectedStyle" />
                </asp:Menu>
                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowExpandCollapse="False"></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
                <asp:DropDownList ID="lstPreferredTheme" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstPreferredTheme_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">
                <asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}"/>
                <asp:LoginView ID="LoginView1" runat="server">
                    <LoggedInTemplate>
                        (<asp:LoginStatus ID="LoginStatus1" runat="server" />)
                    </LoggedInTemplate>
                    <RoleGroups>
                        <asp:RoleGroup Roles="Managers">
                            <ContentTemplate>
                                (<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Management/Default.aspx">Manage Site</asp:HyperLink>
                            or<asp:LoginStatus ID="LoginStatus2" runat="server" />)
                            </ContentTemplate>
                        </asp:RoleGroup>
                    </RoleGroups>
                </asp:LoginView>
            </div>
        </div>
        <asp:ContentPlaceHolder ID="cpClientScript" runat="server"></asp:ContentPlaceHolder>
    </form>
</body>
</html>

JackBlack99 · July 20th, 2017, 05:37 AM

Solution:

I fixed the problem by creating a class for each of the header and footer div elements. Referencing these instead of the divs directly solved this problem.

JackBlack99 · July 20th, 2017, 06:35 AM

Soultion2:

It also worked after I realised the typo with header and footer and then changed the function call to include the # symbol as follows:

$('#Footer, #Header').slideUp('slow').slideDown('slow');

Imar · August 4th, 2017, 03:32 PM

Hi there,

I think there's an issue with your HTML as it's missing the header and footer elements. The current jQuery code:

$('footer, header').slideUp('slow').slideDown('slow'); // Grouped

targets *elements* called footer or header. Your code doesn't have them, but in the book they exist:

Code:

<%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages_Frontend" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
  <script src="/Scripts/modernizr-2.7.1.js"></script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Path="~/Scripts/WebForms/WebUIValidation.js" />
      </Scripts>
    </asp:ScriptManager>
    <div id="PageWrapper">
      <header><a href="/"></a></header>
      <nav>
        <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" Orientation="Horizontal" DataSourceID="SiteMapDataSource1" 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" />
      </nav>
      <section id="MainContent">
        <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>
        <br />
        <br />
        <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
        </asp:ContentPlaceHolder>
      </section>
      <aside id="Sidebar">
        Select a theme
        <br />
        <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True">
          <asp:ListItem>Monochrome</asp:ListItem>
          <asp:ListItem>DarkGrey</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical" />
        <br />
      </aside>
      <footer>Footer Goes Here</footer>
    </div>
    <asp:ContentPlaceHolder ID="cpClientScript" runat="server">
    </asp:ContentPlaceHolder>
  </form>
</body>
</html>

Using classes, or ID selectors as you showed also works, but using semantically correct elements like header and footer is more appropriate.

Cheers,

Imar