Chapter 11, page 378

janilane · October 16th, 2012, 10:46 PM

Hi Imar,

I've skipped some chapters and went to JQuery as my work project needs a bit of JQuery animation.

I followed all steps, run the page and I got a bit of animation, but the PleaseWait.gif didn't show. It's in the image folder in my project. Also, I got a warning as below:

Warning 1 Error updating JScript IntelliSense: C:\Test\Scripts\jquery-1.4.1.min.js: Object doesn't support this property or method @ 32:399 C:\Test\Demos\BasicSelectors.aspx 1 1 C:\Test\

in file BasicSelectors.aspx

Below is the markup:

Code:

 
<%@ Page Title="" 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">This is div.</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" contentplaceholderid="cpClientScript">
<script type="text/javascript">
$(function() {
$('*').css('color', 'Green');
$('#Footer').css('border-bottom', '2px solid black');
$('h1').bind('click', function() { alert('Hello World') });
$('.SampleClass').addClass('PleaseWait').hide(5000);
$('#Footer, #Header').slideUp('slow').slideDown('slow');
$('#sidebar img').fadeTo(5000, 0.1);
});
</script>
</asp:Content>

Hope to hear from you. Thanks

Edit: Only 1 warning, sorry. everything works, except the gif not showing, I might have missed something?

Imar · October 17th, 2012, 03:52 PM

Hi there,

The PleaseWait selector (and image) is added to the site in Chapter 10. You could grap a copy of the CSS file and paste it into your theme folders (one for each theme). In that case you also need to copy the image PleaseWait.gif from the theme's Images folder. You could also just copy the images and the .PleaseWait selector.

Alternatively, you can use the source code of Chapter 10 as the starting point for the exercises of Chapter 11.

Cheers,

Imar

janilane · October 17th, 2012, 04:12 PM

Btw, I'm using asp.net 4 of your book, not 3.5. I might have posted on the wrong forum.

cheers

Imar · October 17th, 2012, 04:14 PM

Not sure I understand. This is the 4.0 forum.

Did you resolve the issue?

Imar

Liamsacc · January 5th, 2015, 06:17 PM

Hi, looking to see if anyone else experienced the same problem Im getting and this is the one! but the solution didn't work for me (as maybe for the original Post)
I cant get the PleaseWait.gif to display.
My page slides up and down, the sidebar fades, the click function fires the'Hello World' and the red footer is working (I tested it by increasing the footer px size)
I still cant get the gif to display and I also copied the Themes from chapter 11 and 12..
Im probably missing something but Im missing it somewhere, please put me out of my frustration

BasicSelectors.aspx

Code:

<%@ Page Title="" 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 Selector</h1>
    <div>I am a Div</div>
</asp:Content>

<asp:Content ID="Content3" runat="server" contentplaceholderid="Cp1ClientScript">
    <script type="text/javascript">
        $(function () {
            $('*').css('color', 'green');
            $('#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>

Master Page

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" 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.6.2.js"></script>
</head>
<body>
  <form id="form1" runat="server">
      <asp:ScriptManager runat="server" EnablePageMethods="true">

          <Scripts>
              <asp:ScriptReference Path="../Scripts/jquery-2.1.1.min.js" />
          </Scripts>
      </asp:ScriptManager>
          
      <div id="PageWrapper">
      <header><a href="/"></a></header>
      <nav>
          <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 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>
          <br />
          <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>
          </div>
      <aside 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 />
          <Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical" />    
          <asp:ContentPlaceHolder ID="Cp1ClientScript" runat="server"></asp:ContentPlaceHolder>
          </form>
</body>
</html>

and finally my css:

Code:

*
{
  /* 
    Defines the main font used throughout the entire site.
  */
  font-family: Arial, Sans-Serif;
}

body
{
  /* 
    Clears white space around the body and gives it a grey background color.
  */
  margin: 0;
  background-color: #cccccc;
}

a
{
  /*
    Clears the underline on normal links, and gives them a different text color.
  */
  text-decoration: none;
  color: #0760B2;
}

  a:hover
  {
    /*
    Underlines links when the user hovers the mouse over them.
  */
    text-decoration: underline;
  }

h1
{
  /*
    Makes h1 elements smaller than their browser default.
  */
  font-size: 20px;
}

h2
{
  /* 
    Gives h2 elements a different background color and size, 
    and adds a bit of margin at the top to create room between the heading and the preceding element.
  */
  font-size: 14px;
  color: #7773A1;
  margin-top: 10px;
}

#PageWrapper
{
  /*
    Sets the total width for the entire page. Also sets the background color
    which is used to fill the background of the Sidebar in case the MainContent section is taller than the Sidebar.
    Uses margin: auto to center the entire page in the middle of the browser's window.
  */
  width: 844px;
  background-color: #5487c0;
  margin: auto;
}

header
{
  /*
    Gives the header the same width as the PageWrapper. The height creates some room for the logo
    that is set with the background-image.
  */
  background-image: url(Images/Header.jpg);
  width: 844px;
  height: 86px;
}

  header a
  {
    /*
    The header a is a link nested in header. It provides a link back to the homepage.
    The size of the link is the same as the header, so the entire header is clickable.
  */
    width: 844px;
    height: 86px;
    display: block;
  }

nav
{
  /*
    The menu spans the page width, right below the header.
    At the top and left a few pixels padding is applied to create some room.
  */
  background-image: url(Images/MenuBackground.jpg);
  width: 827px;
  height: 36px;
  padding-top: 7px;
  padding-left: 17px;
}

  nav a
  {
    /*
    Links in the Menu are white. This gets overriden by styles in chapter 7.
  */
    color: #fff;
  }

.MainMenu
{
  /*
    The Menu gets a white border on all four sides.
  */
  border: 1px solid #999999;
  width: 814px;
  height: 19px;
  background-color: #555555;
}

  .MainMenu ul li
  {
    /*
    Gives the four menu items in the main menu a width of 200px each.
  */
    width: 200px;
  }

section#MainContent
{
  /*
    Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
    The font-size is 80% of its parent element, which in this case comes down to 80% of the font
    the user has specified as the default font in the browser.
  */
  font-size: 0.8em;
  width: 659px;
  border-left: 1px solid white;
  border-right: 2px solid white;
  float: left;
  background-color: #e1e1e1;
  min-height: 500px;
  padding: 10px;
}

aside#Sidebar
{
  /*
    The Sidebar is positioned to the right of the MainContent section. It gets the same font-size as the 
	#MainContent section and gets a background image called Sidebar.jpg. 
	To ensure the image is visible in (most) browsers on a small page, the element gets a minimum 
	height of 500px. This is ignored by IE 6.
  */
  font-size: 0.8em;
  color: White;
  background-image: url(Images/Sidebar.jpg);
  background-repeat: no-repeat;
  background-color: #7773A1;
  width: 142px;
  min-height: 500px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  float: left;
}

footer
{
  /*
    The footer is positioned below all other content (yet still within PageWrapper).
    clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
  */
  width: 844px;
  clear: both;
  height: 37px;
  background-color: #A8D5FE;
  color: White;
  text-align: center;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 37px;
}

.Introduction
{
  font-style: italic;
  color: #3e3e3e;
}

.MyButton
{
  color: White;
}

ul.level1
{
  /* Defines the appearance of main menu items. */
  font-size: 14px;
  font-weight: bold;
  height: 19px;
  line-height: 19px;
}

  ul.level1 .selected
  {
    /* Defines the appearance of active menu items. */
    background-color: #509EE7;
  }

a.level1
{
  /* Adds some white space to the left of the main menu item text.
!important is used to overrule the in-line CSS that the menu generates */
  padding-left: 5px !important;
}

a.level2
{
  /* Defines the appearance of the sub menu items. */
  background-color: #555555;
  padding-left: 8px;
}

  a.level1:hover, a.level2:hover
  {
    /* Defines the hover style for the main and sub items. */
    background-color: #509EE7;
  }

img
{
  border: 0;
}

.ErrorMessage
{
  color: Red;
}

.PleaseWait
{
  height: 32px;
  width: 500px;
  background-image: url(Images/PleaseWait.gif);
  background-repeat: no-repeat;
  padding-left: 40px;
  line-height: 32px;
}

.Attention
{
  border: 4px solid red;
  padding: 10px 0;
  width: 100px;
  margin: auto;
  display: block;
  text-align: center;
}

Imar · January 6th, 2015, 04:06 AM

Hi there,

Maybe this is a cache issue? Have you tried reload the page with Ctrl+F5 t force a fresh copy of the CSS file from the server?

Imar

Liamsacc · January 6th, 2015, 09:38 AM

I pressed F5 a few times, I'll clear history and try again tonight..
I was thinking there would be some niggling typo that I keep missing thanks for the reply,

Liam

Imar · January 6th, 2015, 09:46 AM

I just looked at the code again, and it seems you forgot to assign the SampleClass. E.g. this:

div>I am a Div</div>

should be

<div class="SampleClass">I am a Div</div>

Hope this helps,

Imar

Liamsacc · January 11th, 2015, 06:15 PM

Quote:

Originally Posted by Imar

I just looked at the code again, and it seems you forgot to assign the SampleClass. E.g. this:

div>I am a Div</div>

should be

<div class="SampleClass">I am a Div</div>

Hope this helps,

Imar

! thanks !!!! another lesson learned for me