Updating one div with other div content

sourabh1989 · 09-17-2012, 10:17 AM

Here is my code below. I wanted two div adjacent two each other. One div contains table of content. What i want to do is that when i click on any of the table of content from 1st div its output should be displayed into the div adjacent to it..

any help will be very important...

Code:

<html>
  <head>
  <script src="Report_functions1.js"></script>
  <link rel='stylesheet' type='text/css' href='default_style_sheet.css'>
  </head>
  <body>
    <div class="col">
    <h1>Data Checks</h1>
    <h2>Existence Checks</h2>
    <ul>
      <li><a onclick="lib(FRS_existance_lib);"><h3><u>Library Data</u></h3></a> </li>
      <li><a onclick="tech(FRS_existance_tech);"><h3><u>Technology Data</u></h3></a></li>
    </ul>
    <h2>Syntax Checks</h2>
    <ul>
      <li><a onclick="lib(FRS_syntax_lib);"><h3><u>Library Data</u></h3></a></li>
      <li><a onclick="tech(FRS_syntax_tech);"><h3><u>Technology Data</u></h3></a></li>
    </ul>
    <h2>POK Checks</h2>
    <ul>
      <li><a onclick="html_table(FRS_ccs);"><h3><u>CCS POK Cells Summary</u></h3></a></li>
      
      <li><a onclick="html_table(FRS_nldm);"><h3><u>NLDM POK Cells Summary</u></h3></a></li>
    </ul>
  </div>
  </body>
</html>

Above is my html code having table of contents.

Assume my two div's are:

Code:

.col {
    float: left;  
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
    margin-bottom: none;
    border-top: 8px solid #00ccff;
    background-color: green;
    text-align:center;
}

.row {
    float: left;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
    margin-bottom: none;
    border-top: 8px solid #00ccff;
    background-color: red;
}

VIPStephan · 09-17-2012, 10:28 AM

You would create an HTML page for each content (and with the table of contents) and link these pages in the TOC. That’s what Tim Berners-Lee originally invented HTML for.

sourabh1989 · 09-17-2012, 11:31 AM

Quote:

Originally Posted by VIPStephan

You would create an HTML page for each content (and with the table of contents) and link these pages in the TOC. That’s what Tim Berners-Lee originally invented HTML for.

Thanks for reply but i want that output of my function is to displayed in other div. Is it possible that i click on table of contents from 1st div and output is displayed in other div..??

LearningCoder · 09-17-2012, 11:51 AM

Go to my contact.php page here: http://labtec.0fees.net/Gardenable/contact.php

You see the div at the top of the content area with tabs: "Phone/Fax", "Email", "Post"?

Click them, and you see that the content changes within the div.

If this is what you want I can always give you the code. I remember I was given this code from old pedant I think quite a while ago when I had this same issue.

Kind regards,

LC.

sourabh1989 · 09-17-2012, 11:56 AM

Quote:

Originally Posted by LearningCoder

Go to my contact.php page here: http://labtec.0fees.net/Gardenable/contact.php

You see the div at the top of the content area with tabs: "Phone/Fax", "Email", "Post"?

Click them, and you see that the content changes within the div.

If this is what you want I can always give you the code. I remember I was given this code from old pedant I think quite a while ago when I had this same issue.

Kind regards,

LC.

Yup, it seems that it is mostly similar to what i want to do. Can u please give me the it will be very helpful for me....Thanks in advance

LearningCoder · 09-17-2012, 12:08 PM

No problem.

HTML:

Code:

<div id="ALL">
         <div id="TAB1" class="tabHead" onclick="front(1);"><p>Phone/Fax</p></div>
         <div id="TAB2" class="tabHead" onclick="front(2);" style="left: 255px;"><p>Email</p></div>
         <div id="TAB3" class="tabHead" onclick="front(3);" style="left: 395px;"><p>Post</p></div>

         <div id="TABBODY1" class="tabBody">
			 
         </div>
         <div id="TABBODY2" class="tabBody">
             
         </div>
         <div id="TABBODY3" class="tabBody">
             
         </div>
     </div>

CSS:

Code:

div#ALL {width: 40%;
       position: relative;
	   left: 11em;
	   height: 9em;
       margin-top: 3em;}
	   
div#ALL p {margin-top: 0.15em;}
	   
div.tabBody {position: absolute; 
           top: 0px; 
		   left: 5em; 
           width: 100%; 
		   height: 100%;
           z-index: 1; 
           background-color: #8d581d; 
		   border: 1px solid #000; 
           padding: 20px;
		   -moz-border-radius-topright: 20px;
           border-top-right-radius: 20px;
           -moz-border-radius-topleft: 20px;
           border-top-left-radius: 20px;
		   -moz-border-radius-bottomleft: 20px;
           border-bottom-left-radius: 20px;
		   -moz-border-radius-bottomright: 20px;
           border-bottom-right-radius: 20px;}
		   
div.tabHead {position: absolute; 
           top: -20px; 
		   left: 7em; 
           width: 100px; 
		   height: 22px;
           z-index: 2;
           text-align: center; 
           background-color: #fff; 
		   border: 1px solid #000; 
		   border-bottom: none;
		   cursor: pointer;
		   -moz-border-radius-topright: 10px;
           border-top-right-radius: 10px;
           -moz-border-radius-topleft: 10px;
           border-top-left-radius: 10px;}
		   
#TABBODY2 span a:link {color: #fff;
                    font-family: tahoma;
					font-size: 10pt;
					letter-spacing: 2px;}

#TABBODY2 span a:visited {color: #3f9c3f;
                       font-family: tahoma;
					   font-size: 10pt;
					   letter-spacing: 2px;}

#TABBODY2 span a:hover {color: #000;
                     text-decoration: underline;
					 font-family: tahoma;
					 font-size: 10pt;
					 letter-spacing: 2px;}

JS:- put in the head section of your html.

Code:

<script type="text/javascript">
         function front(which)
         {
             for ( var t = 1; t < 9999; ++t )
             {
                 var dv = document.getElementById("TABBODY"+t);
                 if ( dv == null ) return;
                     dv.style.zIndex = t == which ? 5 : 1;
                 var tab = document.getElementById("TAB"+t);
                 tab.style.backgroundColor = t == which ? "#8d581d" : "white";
				 tab.style.textDecoration = t == which ? "underline" : "none";
                 tab.style.zIndex = t == which ? 7 : 1;
             }
         }
      </script>

Brilliant code. Obviously, have a look through the concept of the javascript and it's quite simple really, but a really good script. You can see the basics of how it works so you should really be able to edit it to suit yourself.

Kind regards,

LC.

sourabh1989 · 09-17-2012, 12:36 PM

Quote:

Originally Posted by LearningCoder

No problem.

HTML:

Code:

<div id="ALL">
         <div id="TAB1" class="tabHead" onclick="front(1);"><p>Phone/Fax</p></div>
         <div id="TAB2" class="tabHead" onclick="front(2);" style="left: 255px;"><p>Email</p></div>
         <div id="TAB3" class="tabHead" onclick="front(3);" style="left: 395px;"><p>Post</p></div>

         <div id="TABBODY1" class="tabBody">
			 
         </div>
         <div id="TABBODY2" class="tabBody">
             
         </div>
         <div id="TABBODY3" class="tabBody">
             
         </div>
     </div>

CSS:

Code:

div#ALL {width: 40%;
       position: relative;
	   left: 11em;
	   height: 9em;
       margin-top: 3em;}
	   
div#ALL p {margin-top: 0.15em;}
	   
div.tabBody {position: absolute; 
           top: 0px; 
		   left: 5em; 
           width: 100%; 
		   height: 100%;
           z-index: 1; 
           background-color: #8d581d; 
		   border: 1px solid #000; 
           padding: 20px;
		   -moz-border-radius-topright: 20px;
           border-top-right-radius: 20px;
           -moz-border-radius-topleft: 20px;
           border-top-left-radius: 20px;
		   -moz-border-radius-bottomleft: 20px;
           border-bottom-left-radius: 20px;
		   -moz-border-radius-bottomright: 20px;
           border-bottom-right-radius: 20px;}
		   
div.tabHead {position: absolute; 
           top: -20px; 
		   left: 7em; 
           width: 100px; 
		   height: 22px;
           z-index: 2;
           text-align: center; 
           background-color: #fff; 
		   border: 1px solid #000; 
		   border-bottom: none;
		   cursor: pointer;
		   -moz-border-radius-topright: 10px;
           border-top-right-radius: 10px;
           -moz-border-radius-topleft: 10px;
           border-top-left-radius: 10px;}
		   
#TABBODY2 span a:link {color: #fff;
                    font-family: tahoma;
					font-size: 10pt;
					letter-spacing: 2px;}

#TABBODY2 span a:visited {color: #3f9c3f;
                       font-family: tahoma;
					   font-size: 10pt;
					   letter-spacing: 2px;}

#TABBODY2 span a:hover {color: #000;
                     text-decoration: underline;
					 font-family: tahoma;
					 font-size: 10pt;
					 letter-spacing: 2px;}

JS:- put in the head section of your html.

Code:

<script type="text/javascript">
         function front(which)
         {
             for ( var t = 1; t < 9999; ++t )
             {
                 var dv = document.getElementById("TABBODY"+t);
                 if ( dv == null ) return;
                     dv.style.zIndex = t == which ? 5 : 1;
                 var tab = document.getElementById("TAB"+t);
                 tab.style.backgroundColor = t == which ? "#8d581d" : "white";
				 tab.style.textDecoration = t == which ? "underline" : "none";
                 tab.style.zIndex = t == which ? 7 : 1;
             }
         }
      </script>

Brilliant code. Obviously, have a look through the concept of the javascript and it's quite simple really, but a really good script. You can see the basics of how it works so you should really be able to edit it to suit yourself.

Kind regards,

LC.

Thanks for so much help.. Can you help me a bit more. I wanna know how one div function output can be shown in another div adjasent to it..??/

LearningCoder · 09-17-2012, 01:12 PM

I've never done that before to be honest and I don't know how to without actually sitting down and spending some time figuring it out. I'm sure someone can help you from here though. I don't think you would have to edit that javascript or css much neither.

Regards,

LC.

VIPStephan · 09-17-2012, 01:55 PM

Since we’re in the HTML/CSS forum the HTML/CSS solution is the way for which HTML was originally invented and what I described in my first post: Create a page for each content section (where the different contents are in the same place) and link to it from the table of contents.

It is dangerous to even think about JavaScript at this point if you don’t know exactly what you’re doing. If the site becomes more complex JavaScript is not an ideal solution. And JavaScript is not a reliable prerequisite, therefore you shouldn’t rely on it. And you should especially not rely on a JS snippet that someone who themselves don’t know much about gave to you when you are very new to this.

I stay with my opinion: Use HTML the way it was meant to be used.