SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How display additional info on same page.

    I want to use a functionality I've seen that allows the viewer to display additional information on a page by clicking on (for example) a link "Help" thus displaying hidden content driving the rest of the page content further down when this content appears. I'm not talking about a "pop up." What am I talking about, and where can I find more information about how to do it?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can toggle the CSS property display to hide and show things on a webpage.

  3. #3
    SitePoint Enthusiast Nick Karpov's Avatar
    Join Date
    Jan 2007
    Location
    Toronto Ontario
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe you are thinking of AJAX, which will allow you to load content into the page without reloading the entire page, is that you're looking for?

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you both are right. Can you point me to good tutorials on the specifics of each?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are tons of Ajax tutorials. Google it and you'll find many. I personally like apples tutorial. Google "apple xmlhttprequest" to find that one.

    About showing and hiding, that is something very basic that you can also found on Google.

    I don't know how good your JavaScript skills are, but whatever they are, I strongly recommend you the "JavaScript Bible" (new edition coming out in april) book.

  6. #6
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pepejeria.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a good tutorial here:
    http://www.netlobo.com/div_hiding.html
    and implemented the code on one of my pages to display "More information" help for visitors. However, I can only use this code once per page. I want to modify the code to use it for more than one "More information" link on a page.

    In the code below I tried changing the ID to a class so the CSS can be used more than once on a page, but the JavaScript didn't like it.

    Also, I see no way of distinguishing one set of links and divs from another so that any given link knows which Div to reference when there is more than one.

    The JavaScript is:
    Code:
    <script type="text/javascript" >
    //show-hide function
    function toggleLayer(whichLayer)
    {
    if (document.getElementById)
    {
    // this is the way the standards work
    var style2 = document.getElementById(whichLayer).style;
    style2.display = style2.display? "":"block";
    }
    else if (document.all)
    {
    // this is the way old msie versions work
    var style2 = document.all[whichLayer].style;
    style2.display = style2.display? "":"block";
    }
    else if (document.layers)
    {
    // this is the way nn4 works
    var style2 = document.layers[whichLayer].style;
    style2.display = style2.display? "":"block";
    }
    }
    </script>
    The CSS is:
    Code:
    div#commentForm
    {
    padding: 10px;
    margin: 20px;
    display: none;
    background-color: #CCCCCC;
    color: #000000;
    }
    The HTML is:
    HTML Code:
    <p><a href="javascript:toggleLayer('commentForm');" title="More information">
    Show more information
    </a></p>
    
    <div id="commentForm">
    <p><em>This is where the help information goes.......</em></p>
    <input type="reset" name="reset" value="Hide more information"
    onclick="javascript:toggleLayer('commentForm');" />
    </div>
    Any thoughts?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this way is a bit cleaner and easier to use:
    Code:
    <html>
    <head>
    <title>Show/Hide multi example</title>
    <style type="text/css">
    .additionalInfo {
    	border: 1px dashed black;
    	padding: 5px;
    	margin: 5px;
    }
    </style>
    <script type="text/javascript">
    function showHide(link) {
    	var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
    	if (link.innerHTML == "Show") {
    		// we need to show the div
    		theDiv.style.display = "";
    		link.innerHTML = "Hide";
    	} else {
    		// we need to hide the div
    		theDiv.style.display = "none";
    		link.innerHTML = "Show";
    	}
    }
    </script>
    </head>
    <body>
    <div class="additionalInfo">
    	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about fish.
    	<div style="display:none;">
    		mmm..fish
    	</div>
    </div>
    <div class="additionalInfo">
    	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about sheep.
    	<div style="display:none;">
    		At least half of a sheep in Scotland is black.
    	</div>
    </div>
    <div class="additionalInfo">
    	<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about chickens.
    	<div style="display:none;">
    		Some chickens lay eggs.
    	</div>
    </div>
    
    </body>
    </html>

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'll give it a try.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  10. #10
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jimfraser,

    I gave your Show and Hide mark up a try, and it works great on an .html page.
    http://www.kripalu.org/show_hide_multi_example.html

    However, the content of many other pages on my site are database driven with a CMS. When I load this same mark up via the CMS on one of these pages,
    http://www.kripalu.org/article/398/
    the link does not work.

    From the above page the linkgoes to http://www.kripalu.org/article/398/nojavascript.html, which just shows the same page with "Hide," not the "Show."
    Perhaps that's because the markup is displayed within a variable of the page template.

    I'd appreciate any thoughts on how to get around this.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  11. #11
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have
    <script src="/js/show_hide.js" language="JavaScript" type="text/javascript"></script>

    but it looks like the show_hide.js file is not in that folder.

  12. #12
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oooops! You are right. I just uploaded the file, but the function still doesn't work.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  13. #13
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Question: How does the url work?
    href="nojavascript.html"
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  14. #14
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind. I see:
    Code:
    onclick="showHide(this);return false;
    I still don't understand why it doesn't work on the database generated page unless it has something to do with the template.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  15. #15
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check the JavaScript console for errors.

  16. #16
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It says "showHide" is not defined
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  17. #17
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, then it means it can't find the showHide function

  18. #18
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulcj2 View Post
    Question: How does the url work?
    href="nojavascript.html"
    That link will get activated if the user doesn't have javascript enabled, or the function showHide throws an error (like it is doing now).

  19. #19
    SitePoint Member gmn17's Avatar
    Join Date
    Jan 2004
    Location
    Los Angeles
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.kripalu.org

    you should google spam api or 9 rules bs, same thing.

  20. #20
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gmn17,

    you should google spam api or 9 rules bs, same thing.
    I do not understand. Please explain your meaning.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  21. #21
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jimfraser,

    Your show and hide script works great now winthin my CMS as long as I upload the javascript as part of the content. I know this is not the best practice, but it works.

    Now onto more challenges. My Designer wants me to style it in such a way that:
    a) The "show" & "hide" is part of an h4 header,
    b) Instead of "show" the link says "read more..." as part of the header
    c) An image (circle with arrow) points to the words "read more.." when the content is hidden and points downward when the hidden part is displayed.

    Here is my javascript and mark-up so far. My questions are below.
    HTML Code:
    <script type="text/javascript">
    function showHide(link) {
        var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
        if (link.innerHTML == "Show") {
            // we need to show the div
            theDiv.style.display = "";
            link.innerHTML = "Hide";
        } else {
            // we need to hide the div
            theDiv.style.display = "none";
            link.innerHTML = "Show";
        }
    }
    </script>
    
    <div class="elena_additionalInfo">
        <h4 style="display:inline">Yoga and fulfillment</h4> <img src="/images/nav/dot_wi_arrow.gif" alt="go" class="circ_ctr"  /> <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a>
        <div style="display:none;">
    <br />
    <p>Human beings want to live fully. We feel an inner urge to create, to love, to express, to master the complexities of life-to feel fulfilled in and by our lives...</p>
    
        </div>
    </div>
    Concerning a) The "show" & "hide" is part of an h4 header:

    The script would not work when the line:
    HTML Code:
    <h4>Yoga and fulfillment <img src="/images/nav/dot_wi_arrow.gif" alt="go" class="circ_ctr"  /> <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a></h4>
    was incorporated entirely within an h4 tag. That's why I made the h4 come at the head of the line (as in the first script above) and then switched its display to "inline." This seems to work. I can also style the "Show" similarly within the link.

    Concerning b) Instead of "show" the link should say "read more..." as part of the header

    I have tried to style "Show" and "Hide" withing the JavaScript without success. Any styles I apply break the script. Question: Is there some way to use "read more..." and "hide" styled like my h4 without breaking the script.

    Concerning c) An image (circle with arrow) should point to "read more.." and point downward when the hidden part is displayed.

    I have two .gifs, one of the arrow pointing to the right and one pointing down. How can I get these to replace one another depending on the state of the show and hide?
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •