SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy click to show number?

    hi guys

    im trying to recreate the last example (under EDIT) here:
    http://stackoverflow.com/questions/6...88244#11688244

    looks simple enough but i dont know what i am missing?

    Tried it here:
    http://www.bluecrushdesign.co.za/moc...onenumber.html

    what have i done wrong?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You are missing the call to the .ready() method, which will (as the name suggests) make your code fire as soon as the DOM is ready.
    As it is, your code just sits there and does nothing, because it is never called.

    I think this is what you're after.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script>
        $(document).ready(function() {
          $('#number').toggle(function() {
            $(this).find('span').text('XXXX');
          }, function() {
            $(this).find('span').text($(this).data('last'));
          }).click();
        });
      </script>
    </head>
    
    <body>
      <p>Click the number to reveal:</p>
      <div id="number" data-last="1234">949<span>1234</span></div>
    </body>
    </html>

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply!.. much appreciated!
    that worked with the 1st number..

    if i have a second number on the page..
    it doesnt work with the second number..
    http://www.bluecrushdesign.co.za/moc...nenumber2.html

    how do i get it to work with the 2nd number ( and any other numbers i add) to the page?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,097
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by escapedf View Post
    how do i get it to work with the 2nd number ( and any other numbers i add) to the page?
    That's not too hard.
    The problem with your code now is that you have assigned the id of "number" to two div elements.
    However, the id attribute specifies a unique id for an HTML element, i.e. you can't have two elements on the same page with the same id.
    To solve your problem, change "id" to "class" and modify the jQuery selector accordingly.

    This should do what you want:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script>
        $(document).ready(function() {
          $('.number').toggle(function() {
            $(this).find('span').text('XXXX');
          }, function() {
            $(this).find('span').text($(this).data('last'));
          }).click();
        });
      </script>
    </head>
    
    <body>
      <p>Click the number to reveal:</p>
      <div class="number" data-last="1234">949<span>1234</span></div>
       <div class="number" data-last="1234">949<span>1234</span></div>
    </body>
    </html>

  5. #5
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much Pullo!!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"


Bookmarks

Posting Permissions

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