JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

make div appear when you click a link

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: May 2009
Posts: 74
Reputation: billymcguffin is an unknown quantity at this point 
Solved Threads: 1
billymcguffin billymcguffin is offline Offline
Junior Poster in Training

make div appear when you click a link

 
0
  #1
May 10th, 2009
ok. i am having trouble with this code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.     <head>
  2.     <script type="text/javascript">
  3.     <!--
  4.     function switchPic(picID)
  5.     {
  6.     document.getElementById(picID).style.display="none";
  7.     }
  8.     //-->
  9.     </script>
  10.     </head>
  11.     <body>
  12.     <a href="" onclick="switchPic(_1)">Click Here</a>
  13.     </body>

when you click the link, it gets the id from the info provided in the link and makes it disappear (thats how its supposed to work). but it doesn't do that. i have seen the same code work on an different site.

thanks,
billy
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: make div appear when you click a link

 
0
  #2
May 11th, 2009
Assuming you have this div in your page, initially set as div1 for its id.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <div id="div1">Link 1</div>
  2. <a href="javascript:void(0);" onclick="showPic('div1');">Hide Div</a>
it seems that your created function is used for hiding images.
Anyway you can easily create another function that will handle element's inside your page (showing/hiding).
Last edited by essential; May 11th, 2009 at 12:21 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: make div appear when you click a link

 
0
  #3
May 11th, 2009
Here's a little demo that will show different div's depending on what link's you will click.
javascript Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Page Template</title>
  11. <meta name="author" content="DANI-USER : essential" />
  12. <style type="text/css">
  13. /* <![CDATA[ */
  14. html, body {
  15.   background-color : #f0f0f0;
  16.   border : none;
  17.   color : #696969;
  18.   font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  19.   height : auto;
  20.   min-height : 600px;
  21.   min-width : 800px;
  22.   text-align : center;
  23.   vertical-align : baseline;
  24.   width : auto; }
  25.  
  26. h2 {
  27.   background-color : #ccc;
  28.   border-bottom : 1px solid #708090;
  29.   border-top : 1px solid #708090;
  30.   font : 700 160% "Bernard MT Condensed";
  31.   line-height : 2ex;
  32.   margin-top : 0;
  33.   min-height : 2ex;
  34.   padding : .100em 0em .100em 1em;
  35.   white-space : nowrap; }
  36.  
  37. div {
  38.   border : none;
  39.   margin : 0%;
  40.   padding : 0%; }
  41.  
  42. div#main {
  43.   margin : 0% auto;
  44.   text-align : left;
  45.   height : 100%;
  46.   overflow : hidden;
  47.   width : 98%;
  48.    }
  49.  
  50. div.show {
  51.   border : 2px solid;
  52.   margin-bottom : .200em;
  53.   padding : .300em; 
  54.   background-color : #fff;
  55.   font : 700 160% Verdana, Arial, sans-serif;
  56.   width : auto;
  57. }
  58. div.tube {
  59.   border : 1px solid #ccc;
  60.   height : 600px;
  61.   margin : 1% auto 1% auto;
  62.   padding : 1.200em; }
  63.  
  64. .hide { display : none; }
  65. .show { display : block; }
  66.  
  67. /* ]]> */
  68. </style>
  69. <script type="text/javascript">
  70. // <![CDATA[
  71. var showElem;
  72. showElem = function( showID ) {
  73.    div = (( document.getElementById ) ? document.getElementById( showID ) : document.all[ showID ] );
  74.    try {
  75.    div.className = (( div.className === "hide" ) ? "show" : "hide" );
  76.    } catch( e ) {
  77.    div.style.display = (( div.style.display === "none" ) ? "block" : "none" );
  78.    }
  79. };
  80. // ]]>
  81. </script>
  82. </head>
  83. <body>
  84. <div id="main">
  85. <div class="tube">
  86. <h2>JavaScript Live DEMO!</h2>
  87. <div id="div1" class="hide">DIV 1</div>
  88. <div id="div2" class="hide">DIV 2</div>
  89. <div id="div3" class="hide">DIV 3</div>
  90. <p>
  91. <!-- First Format -->
  92. <a href="javascript:void(0);" onclick="showElem('div1');">Show DIV 1</a><br />
  93. <!-- Second Format -->
  94. <a href="javascript:void(showElem('div2'));">Show DIV 2</a><br />
  95. <a href="javascript:void(0);" onclick="showElem('div3');">Show DIV 3</a><br /></p>
  96. </div>
  97. </div>
  98. </body>
  99. </html>
Last edited by essential; May 11th, 2009 at 1:31 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 74
Reputation: billymcguffin is an unknown quantity at this point 
Solved Threads: 1
billymcguffin billymcguffin is offline Offline
Junior Poster in Training

Re: make div appear when you click a link

 
0
  #4
May 11th, 2009
thanks for the help essential, but it just turned out to be me forgetting some quotes.

silly me.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array beta browser captchaformproblem cart checkbox child class close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software toggle unicode w3c web windowofwords wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC