SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
-
Mar 18, 2007, 08:21 #1
- 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?
-
Mar 18, 2007, 08:48 #2
- 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.
-
Mar 18, 2007, 08:49 #3
- 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?
-
Mar 18, 2007, 10:44 #4
- 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?
-
Mar 18, 2007, 11:24 #5
- 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.
-
Mar 19, 2007, 07:29 #6
- Join Date
- Jul 2000
- Location
- Western Massachusetts, USA
- Posts
- 1,389
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Pepejeria.
-
Mar 19, 2007, 09:24 #7
- 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>
Code:div#commentForm { padding: 10px; margin: 20px; display: none; background-color: #CCCCCC; color: #000000; }
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>
-
Mar 19, 2007, 09:47 #8
- 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>
-
Mar 19, 2007, 10:27 #9
- 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.
-
Mar 28, 2007, 04:51 #10
- 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.
-
Mar 28, 2007, 09:00 #11
- 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.
-
Mar 28, 2007, 10:08 #12
- 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.
-
Mar 28, 2007, 10:17 #13
- 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"
-
Mar 28, 2007, 10:22 #14
- 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;
-
Mar 28, 2007, 10:32 #15
- 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.
-
Mar 28, 2007, 11:39 #16
- 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
-
Mar 28, 2007, 11:46 #17
- 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
-
Mar 28, 2007, 14:01 #18
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 28, 2007, 23:47 #19
- 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.
-
Mar 29, 2007, 05:11 #20
- 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.
-
Apr 11, 2007, 11:55 #21
- 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>
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>
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?
Bookmarks