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>
Chapter 11 Using Basic Selectors
