chapter 11 exercise 1(page401)

Imar · September 6th, 2010, 07:40 AM

One is used to assign plain text, the other to assign HTML. However, innerText is not supported by all browsers. For more info:

http://www.webdeveloper.com/forum/ar...p/t-10354.html

jQuery fixes the absence of innerText with the text() method.

Cheers,

Imar

Notso · December 27th, 2011, 01:06 AM

Hello,
I have been trying this exercise (ch. 11 ex 1) with the .toggle method instead of the slide toggle. It causes the banner to disappear just fine, but as the earlier poster mentioned, the code for switching the link's text does not work. So, I am trying Imar's new code in this thread with the Toggle method, and it is not working. I am guessing that is likely because the toggle method works differently and can't do the callback the same way?
Side question: Where can I find some reference/reminder on what a callback is in this case?

Here is the whole banner.aspx code as I am trying it now with the main part I am working on bolded (if this forum text editor will allow it):

Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Banner.ascx.cs" Inherits="Controls_Banner" %>
<script runat="server">

</script> 
<span id="HideTest" style='cursor:pointer'>click to hide</span>
<asp:Panel ID="VerticalPanel" runat="server" ClientIDMode="Static">
    <a href="http://p2p.wrox.com" target="_blank" runat="server"  id="VerticalLink">
    <asp:Image ID="Image1" runat="server" AlternateText="This is a sample banner" 
        ImageUrl="~/Images/Banner120x240.gif" />
    </a>
</asp:Panel>

<asp:Panel ID="HorizontalPanel" runat="server">
    <a href="http://p2p.wrox.com" target="_blank" runat="server"  id="HorizontalLink">
    <asp:Image ID="Image2" runat="server" AlternateText="This is a sample banner" 
        ImageUrl="~/Images/Banner468x60.gif" />
    </a>
</asp:Panel>

    <script type="text/javascript">
        $(function ()
        {
            $('#HideTest').bind('click',
                function ()
                {
                    //This commented out below is how I had it before trying the new way of getting the text change to work.
                    // $('#VerticalPanel').toggle();

/* this is the new way I have tried. The one thing I notice is that slidetoggle has .slideToggle('slow', function... and mine, of course, does not have the 'slow' part first. I guess what it comes down to is I don't understand how the callback works and, thus, don't understand how to build the syntax for it. */
                    $('#VerticalPanel').toggle(function ()
                    {
                        if ($(this).css('display') == 'block')
                        {
                            $('#HideTest').text = 'Click here to Hide Banner';
                        }
                        else
                        {
                            $('#HideTest').text = 'Show Banner';
                        }
                    });
                });
        });
    </script>

Imar · December 27th, 2011, 08:30 PM

Hi there,

text() is a method, not a property. Does it work when you assign the text like this instead (twice):

Code:

$('#HideTest').text('Click here to Hide Banner');

Cheers,

Imar

Notso · December 28th, 2011, 12:30 AM

Thanks, Imar. That works great.