Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4.5.1 > BOOK: Beginning ASP.NET 4.5.1 : in C# and VB
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4.5.1 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4.5.1: in C# and VB by Imar Spaanjaars; ISBN: 978-1-118-84677-3
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4.5.1 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old July 18th, 2017, 11:55 AM
Registered User
Points: 42, Level: 1
Points: 42, Level: 1 Points: 42, Level: 1 Points: 42, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2017
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default Chapter 11 Using Basic Selectors

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>
Reply With Quote
  #2 (permalink)  
Old July 20th, 2017, 05:37 AM
Registered User
Points: 42, Level: 1
Points: 42, Level: 1 Points: 42, Level: 1 Points: 42, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2017
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old July 20th, 2017, 06:35 AM
Registered User
Points: 42, Level: 1
Points: 42, Level: 1 Points: 42, Level: 1 Points: 42, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2017
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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');
Reply With Quote
  #4 (permalink)  
Old August 4th, 2017, 03:32 PM
Imar's Avatar
Wrox Author
Points: 71,164, Level: 100
Points: 71,164, Level: 100 Points: 71,164, Level: 100 Points: 71,164, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,948
Thanks: 79
Thanked 1,555 Times in 1,532 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Chapter 11 Using Basic Selectors JackBlack99 BOOK: Beginning ASP.NET 4.5.1 : in C# and VB 0 July 18th, 2017 11:50 AM
Chapter 15 - Action Names with Name Selectors cosmin BOOK: Professional ASP.NET MVC 5 0 May 23rd, 2016 07:31 AM
Ch. 11 - Basic Selectors hboswell BOOK: Beginning ASP.NET 4 : in C# and VB 5 February 19th, 2014 11:08 AM
Chapter 11 - Using Basic Selectors lzatony BOOK: Beginning ASP.NET 4 : in C# and VB 2 July 17th, 2012 05:12 AM
Chapter 11 - All jQuery selectors return a collection ? Antonius Block BOOK: Beginning ASP.NET 4 : in C# and VB 1 March 17th, 2012 04:17 PM



All times are GMT -4. The time now is 05:59 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.