www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with Learning jQuery 3rd Edition -Chaffer,Swedberg chap 5:Manipulating The DOM

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    81

    Help with Learning jQuery 3rd Edition -Chaffer,Swedberg chap 5:Manipulating The DOM

    Hello,

    I am reading Learning jQuery 3rd Edition by Chaffer, I have completed chapter 5 and working on the chapter 5 questions. I have completed all the questions except one question#2.

    Can anyone help me figure out how to achieve the following task?

    "2.) When a back to top link is clicked, add a new paragraph after the link,
    containing the message You were here. Ensure that the link still works."

    Thanks, JB

    jQuery code:
    Code:
    $(function(){
    	$('<a id="top"></a>').prependTo('body');
    	$('<a href="#top">back to top</a>').insertAfter('div.chapter p')	
    	var $clonedCopy = $(this).clone();
    		$clonedCopy
    		.insertAfter('<a href="#top">back to top</a>')
    			.find('#top')
    			.text('You were here')
    			.end();
                         });
    HTML code:
    Code:
     
    <body>
        <div id="container">
          <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
          <div id="f-author">by Edwin A. Abbott</div>
          <h2>Part 1, Section 3</h2>
          <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
          <div id="excerpt">an excerpt</div>
    
          <div class="chapter">
            <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p>
    
            <p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>.</p>
    
            <p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p>
    </body></html>

  2. #2
    Join Date
    Nov 2010
    Posts
    1,085
    Code:
    $(function(){
    	$('<a id="top"></a>').prependTo('body');
    	$('<a href="#top">back to top</a>').insertAfter('div.chapter p').click(function(){
    	$('<div>You were here</div>').insertAfter($(this));
    			});	
    	    });

  3. #3
    Join Date
    May 2012
    Posts
    81
    Hi Xelawho - Thank you for your help. The code you provided is placing "You were here" after "back to top" is clicked. What I would like to do is have "You were here" removed when "back to top" is clicked and then placed next to the "back to top" link that was pressed rather than having "You were here" next to all the "back to top" links that were clicked.

    I have expanded on the code you have provided but unfortunately the code is not working. I have tried .remove() .detach() as well as .after() none of which are working for me.

    Code:
     
    $(function(){
    	$('<a id="top"></a>').prependTo('body');
    	$('<a href="#top">back to top</a>').insertAfter('div.chapter p').click(function(){
    		$(this).toggle(function(){
    			$('<div>You were here</div>').insertAfter($(this));
    				}, function(){
    					$('<a href="#top">back to top</a>').remove('<div>You were here</div>');
    				});
    			});

  4. #4
    Join Date
    Nov 2010
    Posts
    1,085
    the problem is that the jquery is creating a new div each time the function runs. if I understand you, you are better off hardcoding the div, hiding it to begin with then showing it and moving it with the function...
    Code:
    <body>
    <div id="more" style="display:none">You were here</div>
        <div id="container">
          <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
          <div id="f-author">by Edwin A. Abbott</div>
          <h2>Part 1, Section 3</h2>
          <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
          <div id="excerpt">an excerpt</div>
    
          <div class="chapter">
            <p class="square">Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or <a href="http://en.wikipedia.org/wiki/Pentagon">Pentagons</a>.</p>
    
            <p class="nobility hexagon">Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or <a href="http://en.wikipedia.org/wiki/Hexagon">Hexagons</a>, and from thence rising in the number of their sides till they receive the honourable title of <a href="http://en.wikipedia.org/wiki/Polygon">Polygonal</a>.</p>
    
            <p><span class="pull-quote">It is a Law of Nature <span class="drop">with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.</p>
    <script type="text/javascript"> 
    $(function(){
    	$('<a id="top"></a>').prependTo('body');
    	$('<a href="#top">back to top</a>').insertAfter('div.chapter p').click(function(){
    	$('#more').show().insertAfter($(this));
    			});	
    	    });</script>
    </body>

  5. #5
    Join Date
    May 2012
    Posts
    81
    That work perfectly thank you. One more question unrelated to this one. Have you work with RestFUL web services? If so can you tell me if RestFUL is the same as node.js and backbone.js?

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