www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help with Learning jQuery Third Edition - Chaffer,Swedberg chapter 3:Handling Events

  1. #1
    Join Date
    May 2012
    Posts
    79

    Help with Learning jQuery Third Edition - Chaffer,Swedberg chapter 3:Handling Events

    I am currently reading Learning jQuery Third Edition - Chaffer, Swedberg and even after reading Chapter 3: Handling Events - I am unable to solve question #three which is very frustrating!

    I am trying to figure out how to using jQuery's toggle() or toggleClass() Method along with passing an event through a click function to make the chapter text hide and visible. Can anyone help me with this problem? Thanks in advance.

    Here is the question.
    3.) When a chapter title (<h3 class="chapter-title">) is double-clicked,
    toggle the visibility of the chapter text.

    HTML code:
    Code:
    <body>
    <style>
            .hidden {display:none;}
        	.hover {cursor: pointer; background-color: #afa;}
    </style> 
    
    <div id="header">
            <h2>A Christmas Carol</h2>
            <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
            <div class="author">by Charles Dickens</div>
          </div>
    
          <div class="chapter" id="chapter-preface">
            <h3 class="chapter-title">Preface</h3>
            <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
            <p>Their faithful Friend and Servant,</p>
            <p>C. D.</p>
            <p>December, 1843.</p>
          </div>
    
          <div class="chapter" id="chapter-1">
            <h3 class="chapter-title">Stave I: Marley's Ghost</h3>
            <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>
    
    </body>
    my jQuery code (not working):

    Code:
                    $(function(){ 
            		$(".chapter-title h3").click(function(){
            			$('.chapter-title p').toggle('hidden');
            			$(this).addClass('hover')
         			       }
    			});// end

  2. #2
    Join Date
    Nov 2010
    Posts
    1,036
    too many problems to explain. Here's one approach - you can ask if you have questions...

    Code:
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <style>
            .hidden {display:none;}
        	.hover {cursor: pointer; background-color: #afa;}
    </style>
      </head>
    <body>
     
    
    <div id="header">
            <h2>A Christmas Carol</h2>
            <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
            <div class="author">by Charles Dickens</div>
          </div>
    
          <div class="chapter" id="chapter-preface">
            <h3 class="chapter-title">Preface</h3>
            <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
            <p>Their faithful Friend and Servant,</p>
            <p>C. D.</p>
            <p>December, 1843.</p>
          </div>
    
          <div class="chapter" id="chapter-1">
            <h3 class="chapter-title">Stave I: Marley's Ghost</h3>
            <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>
    </div>
    
    <script type="text/javascript">
     $(function(){ 
            		$("h3.chapter-title").dblclick(function(){
            			$(this).nextAll("p").toggle('hidden');
            			$(this).addClass('hover')
         			       });
    			});// end
    </script>
    
    </body>
    Last edited by xelawho; 06-04-2012 at 09:19 PM.

  3. #3
    Join Date
    May 2012
    Posts
    79
    I am make some progress the chapter text is hiding however the problem now is that both of the chapter texts are hiding at the same time... which is not what i want. I would like the happen is when the h3 class ".chapter-title" is double clicked the corresponding chapter text to hidden.

    Any suggestions are appreciated and welcome.

    Code:
    $(function(){ 
            			$(".chapter-title").dblclick(function(event){
            			
            			var hClass = event.target.id.split('-')[1];
            		$('.chapter').addClass('hClass').addClass('hover'); 
            		
            		if(!$(event.target).is('hClass')){
        			$('.chapter').toggleClass('hidden');
        			}
      				
            			});
         			});// end

  4. #4
    Join Date
    Nov 2010
    Posts
    1,036
    it's almost as if you didn't see my post at all...

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by xelawho View Post
    it's almost as if you didn't see my post at all...
    :d:d:d
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    May 2012
    Posts
    79
    Hi xelawho - Thank you for response to my post. I'm sorry I did not see that you responded to my post for some reason.

    Your code works perfect!:) I am able to follow you code somewhat but i do have a few questions.

    In chapter 3 the author mentioned using event objects to keep track of the .click handler? However I don't understand when to pass and event object. The solution you wrote did not call for an event to be pass to the .click handler function requires less coding and works perfectly.

    My question is when i should pass an event to the .click function?

    below is an example of code the author used to demonstrate how to use event objects and stop event Propagation.

    jQuery code:
    Code:
     
    
    $(document).ready(function() {
        $('#switcher').click(function(event) {
        $('#switcher button').toggleClass('hidden');
        });
    });
       $(document).ready(function() {
          $('#switcher-default').addClass('selected');
          $('#switcher button').click(function(event) {
              var bodyClass = this.id.split('-')[1];
              $('body').removeClass().addClass(bodyClass);
              $('#switcher button').removeClass('selected');
              $(this).addClass('selected');
              event.stopPropagation();
         });
    });
    HTML code:
    Code:
    <body>
        <div id="container">
    
          <div id="switcher" class="switcher">
            <h3>Style Switcher</h3>
            <button id="switcher-default">
              Default
            </button>
            <button id="switcher-narrow">
              Narrow Column
            </button>
            <button id="switcher-large">
              Large Print
            </button>
          </div>
    
          <div id="header">
            <h2>A Christmas Carol</h2>
            <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
            <div class="author">by Charles Dickens</div>
          </div>
    
          <div class="chapter" id="chapter-preface">
            <h3 class="chapter-title">Preface</h3>
            <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
            <p>Their faithful Friend and Servant,</p>
            <p>C. D.</p>
            <p>December, 1843.</p>
          </div>
    
          <div class="chapter" id="chapter-1">
            <h3 class="chapter-title">Stave I: Marley's Ghost</h3>
            <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>
       
            </div>
        </div>
      </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles