SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CAn someone guide me to a script that does this....?

    The FAQ section on this website where you click on a link and the text appears and then you can make it dissapear? Does anyone have a link to tutorial or easy to modify script to do this?

    http://www.microsoft.com/windows/pro...r/default.mspx

    Thanks you very much

    Rodent

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump*

  3. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to change the element's style.display property.

    Here's a simple example:

    Code:
    <script>
    function hide(element) {
      element.style.display = 'none';
    }
    </script>
    
    <div onclick="hide(this)">Click to hide</div>
    You can set the style.display to 'block' to show the div again. You can learn more about the CSS styles by searching for "javascript style display block" on Google.

    hth,
    Douglas
    Hello World

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is how far i have got with some code snippets.

    The problem i have is that the para are visible and what i would like to do is have the links "minimised" from the start and so when you click on a link then the information is displayed.

    PHP 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>

    <
    STYLE TYPE="text/css">
    <!--
    .
    para {
        
    margin-bottom10px;
        
    visibilityvisible;
        
    positionrelative;}
    -->
    </
    STYLE>
    <
    SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    <!--
    function 
    blocking(nr)
    {
        if (
    document.layers)
        {
            
    current = (document.layers[nr].display == 'none') ? 'block' 'none';
            
    document.layers[nr].display current;
        }
        else if (
    document.all)
        {
            
    current = (document.all[nr].style.display == 'none') ? 'block' 'none';
            
    document.all[nr].style.display current;
        }
        else if (
    document.getElementById)
        {
            
    vista = (document.getElementById(nr).style.display == 'none') ? 'block' 'none';
            
    document.getElementById(nr).style.display vista;
        }
    }
    // -->
    </SCRIPT>
    </head>

    <body>


    <A CLASS="page" HREF="#" onClick="blocking('number1'); return false;">Toggle display block/none</A><br />
    <P CLASS="para" ID="number1">This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
    This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1.
    This is paragraph 1.</P>
    <A CLASS="page" HREF="#" onClick="blocking('number2'); return false;">Toggle display block/none</A><br />
    <P CLASS="para" ID="number2">This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
    This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph 2.
    This is paragraph 2.</P>
    <A CLASS="page" HREF="#" onClick="blocking('number3'); return false;">Toggle display block/none</A>
    <P CLASS="para" ID="number3">This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3.
    This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3.
    This is paragraph 3.</P>

    </body>
    </html> 
    any help would be great!

    Thanks

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That code looks a bit old-fashioned, I wouldn't recommend learning from it. Modern HTML is always in lowercase, if you see a Javascript example with HTML all in uppercase, and it doesn't say specifically that it is HTML 4, then it is probably going to be an example of old-fashioned Javascript.

    A couple of the old-fashioned things about the code:

    It does browser detection, by checking for document.all and document.layers. There is no need to do that for modern browsers, that's a throw back to the browser wars which we don't need to worry about anymore. Stick to the W3C standards and you'll be fine. (It could be worse, it could check the userAgent string to do this detection, but it is still useless today.)

    Also, it uses element IDs more than it needs to. You can access the elements you want through the DOM, and just pass them to the toggle function. I've used parentNode in the example below to do just this. (If you don't know what parentNode does, google it to learn more.) This is trying to be more "unobtrusive", and you can use the same code for all the paragraphs, not worrying about making new IDs.

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Sample Paragraphs</title> 
    
    <style type="text/css" media="screen">
      /* This makes the content hidden by default */
      .toggle-content {
        display: none;
      }
    </style>
    
    <script type="text/javascript" charset="utf-8">
      
      function toggleDisplay(element) {
        
        // Toggle the display of the first div
        var content = element.getElementsByTagName("div")[0];
        
        if (content.style.display == "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
        
        // disable the link action
        return false;
      }
      
    </script>
    
    </head>
    <body>
    
      <div class="toggle-block">
        <p><a href="#" onclick="return toggleDisplay(this.parentNode.parentNode)">Toggle part one</a></p>
        <div class="toggle-content">
          <p>This is some content.</p>
        </div>
      </div>
    
      <div class="toggle-block">
        <p><a href="#" onclick="return toggleDisplay(this.parentNode.parentNode)">Toggle part two</a></p>
        <div class="toggle-content">
          <p>This is some more content.</p>
        </div>
      </div>
    
    </body> 
    </html>
    Take a look in the <style> set in the header for the toggle-content class. That's how you make the content hidden by default.

    One thing you could do to improve my code above, would be to remove the onclick handlers from the HTML, and instead set them up in the document.onload event for all elements with a toggle-block className.

    hth,
    Douglas
    Hello World

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help...Very much appriciated

    Are there any good Javascript books that you would recommend me reading as i would like to properly get into javascript

    Thanks

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing i would love for you to explain for me..

    Can you explain the whole parent.node thing. and how the html part of the code works i understand the basic if statement just not how the other part works.

    For example..i would love to have a button which can open all the blocks on the page and one that can close all on the page!

    Thanks again

  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by enormousrodent View Post
    Are there any good Javascript books that you would recommend me reading as i would like to properly get into javascript
    I can't do you a book, but I can do you a video or two: http://developer.yahoo.com/yui/theater/

    I'd start by watching the "Douglas Crockford — The JavaScript Programming Language" on the middle of that page, it's a good introduction to the language itself.

    The Douglas Crockford videos explain Javascript. To understand parentNode and things like that, you also have to learn about the DOM: the Document Object Model, so take a look at the DOM videos further down the page.

    Here's a good reference for the DOM: http://developer.mozilla.org/en/docs..._DOM_Reference

    To make your "expand all" button, you want to make a new function which loops through all of the divs in the page (get them into an array with document.getElementsByTagName("div")), check to see whether their className is "toggle-content" (element.className == "toggle-content"), and if so, set their style.display to "block". Easy

    Douglas
    Hello World


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
  •