Solved

Change content of div on click

Posted on 2007-11-27
17
559 Views
Last Modified: 2008-02-01
Hello everyone,

I have been working with this for a while now and can't seem to get it right. I am a hack when it comes to JavaScript and usually can find a pre-made script that I can adjust to what I need but this one is giving me issues. Seems like it should be easy...?

I need to be able to change the contents of a div tag when links within that tag are clicked. It should work like a tabbed "recipe card" type of navigation. I have attached the code that should show up on page load within the div id="home_recipe". When the links labeled recipe_* are clicked, the whole content should change.

Here is the CSS I am using for this area as well:

            /* recipe cards */
#home_recipe {
      width: 350px;
      color: #FFFFFF;
      text-align: left;
}
      #home_recipe ul {
      line-height: 1.4em;
      list-style-image:  url(../images/home_recipe/bullet_blue.gif);
      margin-left: -10px;
      text-indent: 2px;
      }
.recipe_hide {
      display:none;
}
#home_recipe1 {
      background-image: url(../images/home_recipe/recipe_prospective.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe2 {
      background-image: url(../images/home_recipe/recipe_current.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe3 {
      background-image: url(../images/home_recipe/recipe_faculty.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}      
#home_recipe4 {
      background-image: url(../images/home_recipe/recipe_community.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#home_recipe5 {
      background-image: url(../images/home_recipe/recipe_parents.gif);
      padding-top: 11px;
      padding-left: 16px;
      height: 330px;
}
#recipe_subtitles_top {
      font: bold 0.9em Arial, Helvetica, sans-serif;
      width: 329px;
      height: 21px;
      vertical-align: middle;
}
#recipe_subtitles_bottom {
      font: bold 0.9em Arial, Helvetica, sans-serif;
      color: #FFFFFF;
      width: 329px;
      height: 20px;
      vertical-align: middle;
}
      #recipe_subtitles_top a, #recipe_subtitles_top a:visited {color:#fff; text-decoration:none; }
      #recipe_subtitles_top a:hover, #recipe_subtitles_top a:active {color:#fff; text-decoration:underline; }
      #recipe_subtitles_bottom a, #recipe_subtitles_bottom a:visited {color:#fff; text-decoration:none; }
      #recipe_subtitles_bottom a:hover, #recipe_subtitles_bottom a:active {color:#fff; text-decoration:underline; }
#recipe_faculty {
      width: 83px;
      float: left;
}
#recipe_community {
      width: 120px;
      margin-left: 10px;
      float: left;
}
#recipe_parents {
      width: 107px;
      margin-left: 9px;
      float: left;
}
#recipe_prospective {
      width: 129px;
      float: left;
}
#recipe_current {
      width: 192px;
      margin-left: 8px;
      float: left;
}

#recipe_content {
      margin-right: 12px;
      font-size: 8pt;
}
      #recipe_content a, #recipe_content a:visited {color:#036; text-decoration:none; }
      #recipe_content a:hover, #recipe_content a:active {color:#369; text-decoration:underline; }
      /* end recipe cards */

Please let me know if you need anything else from me. Thank you SO much!
<div id="home_recipe">

					<div id="home_recipe1">					  

					  <div id="recipe_subtitles_top">

					    <div id="recipe_faculty"><a href="#">Faculty &amp; Staff</a></div>

				        <div id="recipe_community"><a href="#">Community &amp; Church</a></div>

					    <div id="recipe_parents"><a href="#">Parents &amp; Friends</a></div>

					  </div>

					  <div id="recipe_subtitles_bottom">

					    <div id="recipe_prospective"><a href="#">Prospective Students</a></div>

					    <div id="recipe_current"><a href="#">Current Students</a></div>

					  </div>

					<div id="recipe_content">

				      <p>Welcome to Hope International University, a Christian institution of higher learning. <em>Hope</em> is devoted to providing you with a challenging and rewarding educational experience that equips you well for both your chosen career path and a life of service. Take a few moments to explore our degree programs, campus and community. There&rsquo;s a lot to love at Hope International University. We think you&rsquo;ll agree.</p>

					    <table width="95%" border="0" align="center" cellpadding="0" cellspacing="2">

                          <tr>

                            <td width="50%" valign="top"><ul>

                              <li> <a href="#">Undergraduate</a></li>

                              <li> <a href="#">Graduate</a></li>

                              <li> <a href="#">Professional</a></li>

                              <li> <a href="#">Parents</a></li>

                              <li> <a href="#">Counselors</a></li>

                              <li> <a href="#">Youth Leaders</a></li>

                              <li> <a href="#">Institutes</a></li>

                            </ul></td>

                            <td width="50%" valign="top"><ul>

                              <li> <a href="#">Online Learners</a></li>

                              <li> <a href="#">Apply Now</a></li>

                              <li> <a href="#">Get More Information</a></li>

                              <li> <a href="#">Scholarship Calculator</a></li>

                              <li> <a href="#">Visit Campus</a></li>

                              <li> <a href="#">Accepted Students</a></li>

                              <li> <a href="#">Orientation</li>

                            </ul></td>

                          </tr>

                        </table>

					    <p>&nbsp;</p>

					  </div>

					</div>

				</div>

Open in new window

0
Comment
Question by:maxms
  • 10
  • 5
17 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 20361177
OK, I took a look at the information you provided, but I don't see how you want the contents to change when the links are clicked.

You have the following links defined.

- Faculty & Staff
- Community & Church
- Parents & Friends
- Prospective Students
- Current Students
- Undergraduate
- Graduate
- Professional
- Parents
- Counselors
- Youth Leaders
- Institutes
- Online Learners
- Apply Now
- Get More Information
- Scholarship Calculator
- Visit Campus
- Accepted Students
- Orientation

  What you need to decide, and explain, is what you want the page to look like when each link is clicked.  The general technique is to have an onclick event associated with each link, and have a function invoked to perform the specific changes appropriate for that link.

  It is quite common to have a small number of "general" routines that have parameters to identify the specific portion of the page that should be changed.  This is frequently done by passing the id attribute for the DIV to be hidden or displayed.

0
 

Author Comment

by:maxms
ID: 20361452
Actually if you look at the link for the page, you will see the tabbed links that will be used to change the div contents:
http://www.maxms.com/hiu/test

Does that make more sense?

Would I use innerHTML? makediv?
0
 

Author Comment

by:maxms
ID: 20361487
Also, I already have separate divs created for each of those links. These are what will populate the main div which is "home_recipe". I guess what I need is the JavaScript and HTML for the links to make it work. Maybe some CSS to hide the divs that aren't active?
0
 

Author Comment

by:maxms
ID: 20361494
One more thing - the links that should change the content are part of the div that should change... is that an issue?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20362384
I took a look at your page.  It is a very nice start.

Q: Would you use innerHTML?
A: Maybe, it depends upon what you want to do.  You may be able to do something much easier though.

Code to Show/Hide a div (using it's id attribute) is shown below.  It is really quite straightforward.

  //------------------------------------------------------------

  // Name: showHide()

  // Role: Used to show or hide a portion of the document

  //  Use: onclick='showHide("idAttribute",true);'

  //       to have the portion of the document made visible when

  //       the item is clicked.

  //------------------------------------------------------------

  function showHide( id, show ) {

    var div = document.getElementById( id );

    if ( div ) {

      div.style.display = ( show ) ? 'block' : 'none';

    }

  }

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20362390
The links to be clicked can appear anywhere on the page.
Just be sure that the like to "show" a section occurs someplace where the link can be seen when the section (div) is hidden.  By that I mean, don't have the link to show the div only occur within the div itself.
0
 

Author Comment

by:maxms
ID: 20378622
OK now I'm just more confused. When the page first loads, one of the divs should be visible. When one of the links are clicked, that div should be hidden and the new div shown.

I am also wondering if I need to have the divs in an array? That seems to be a pain with the html. Or do they just reside in within the body of the document?

I have been trying to tweak existing scripts that I have found to no avail. Here is one that I experimented with:

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("home_recipe"+inc)){
document.getElementById("home_recipe_"+inc).style.display="none"
inc++
}
}


function expandone(){
var selectedDivObj=document.getElementById("home_recipe"+selectedDiv)
contractall()
document.getElementById("home_recipe").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
}

Could I get this to work with what I am trying to do? I'm willing to bump up the points on this one for some additional dumbed down answers. ;)
0
 

Author Comment

by:maxms
ID: 20386305
Alright - I am desperate... I can't get anything to work. Someone please help! Tell me truthfully if there is a better way to do this.  I need for the client to be able to insert new HTML when they want to change the content so maybe a solution where the interchangeable divs are located in the HTML with some kind of hide/show function? Here is the script I am currently failing with:

var str1 = "<div id='home_recipe1'>                               
                                <div id='recipe_subtitles_top'>
                                  <div id='recipe_faculty'><a href='#' onclick='setInnerHTML('home_recipe',str3);'>Faculty &amp; Staff</a></div>
                                <div id='recipe_community'><a href='#' onclick='setInnerHTML('home_recipe',str4);'>Community &amp; Church</a></div>
                                  <div id='recipe_parents'><a href='#' onclick='setInnerHTML('home_recipe',str5);'>Parents &amp; Friends</a></div>
                                </div>
                                <div id='recipe_subtitles_bottom'>
                                  <div id='recipe_prospective'><a href='#' onclick='setInnerHTML('home_recipe',str1);'>Prospective Students</a></div>
                                  <div id='recipe_current'><a href='#' onclick='setInnerHTML('home_recipe',str2);'>Current Students</a></div>
                                </div>
                              <div id='recipe_content'>
                              <p>Welcome to Hope International University, a Christian institution of higher learning. <em>Hope</em> is devoted to providing you with a challenging and rewarding educational experience that equips you well for both your chosen career path and a life of service. Take a few moments to explore our degree programs, campus and community. There&rsquo;s a lot to love at Hope International University. We think you&rsquo;ll agree.</p>
                                  <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
                          <tr>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Undergraduate</a></li>
                              <li> <a href='#'>Graduate</a></li>
                              <li> <a href='#'>Professional</a></li>
                              <li> <a href='#'>Parents</a></li>
                              <li> <a href='#'>Counselors</a></li>
                              <li> <a href='#'>Youth Leaders</a></li>
                              <li> <a href='#'>Institutes</a></li>
                            </ul></td>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Online Learners</a></li>
                              <li> <a href='#'>Apply Now</a></li>
                              <li> <a href='#'>Get More Information</a></li>
                              <li> <a href='#'>Scholarship Calculator</a></li>
                              <li> <a href='#'>Visit Campus</a></li>
                              <li> <a href='#'>Accepted Students</a></li>
                              <li> <a href='#'>Orientation</a></li>
                            </ul></td>
                          </tr>
                        </table>
                                  <p>&nbsp;</p>
                                </div>
                              </div>
                              </div>";
var str2 = "<div id='home_recipe2'>                               
                                <div id='recipe_subtitles_top'>
                                  <div id='recipe_faculty'><a href='#' onclick='setInnerHTML('home_recipe',str3);'>Faculty &amp; Staff</a></div>
                                <div id='recipe_community'><a href='#' onclick='setInnerHTML('home_recipe',str4);'>Community &amp; Church</a></div>
                                  <div id='recipe_parents'><a href='#' onclick='setInnerHTML('home_recipe',str5);'>Parents &amp; Friends</a></div>
                                </div>
                                <div id='recipe_subtitles_bottom'>
                                  <div id='recipe_prospective'><a href='#' onclick='setInnerHTML('home_recipe',str1);'>Prospective Students</a></div>
                                  <div id='recipe_current'><a href='#' onclick='setInnerHTML('home_recipe',str2);'>Current Students</a></div>
                                </div>
                              <div id='recipe_content'>
                              <p>Whether you&rsquo;re a current student at <em>Hope</em> or a prospective one wanting to check out what it&rsquo;s like to attend, this is your page to keep tabs on what&rsquo;s happening on campus. There&rsquo;s always something going on, so check back often or you&rsquo;re sure to miss some of the fun. </p>
                                  <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
                          <tr>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Current Events/Activities</a></li>
                              <li><a href='#'>Student Activities and Organizations</a></li>
                              <li> <a href='#'>Bookstore</a></li>
                              <li> <a href='#'>Library</a></li>
                              <li> <a href='#'>Fitness Center </a></li>
                              <li> <a href='#'>Campus Ministry</a></li>
                              <li> <a href='#'>WebMail</a></li>
                            </ul></td>
                            <td width='50%' valign='top'><ul>
                              <li><a href='#'>Register for Classes</a></li>
                              <li><a href='#'>International Students </a></li>
                              <li> <a href='#'>Directory</a></li>
                              <li> <a href='#'>Current Student Feature </a></li>
                              <li><a href='#'> Academic, Career and Personal Support Services</a></li>
                              <li> <a href='#'>Hope Online Login</a></li>
                              <li><a href='#'><em>More...</em></a></li>
                            </ul></td>
                          </tr>
                        </table>
                                  <p>&nbsp;</p>
                </div>
                          </div>";
var str3 = "<div id='home_recipe3'>                               
                                <div id='recipe_subtitles_top'>
                                  <div id='recipe_faculty'><a href='#'>Faculty &amp; Staff</a></div>
                                <div id='recipe_community'><a href='#'>Community &amp; Church</a></div>
                                  <div id='recipe_parents'><a href='#'>Parents &amp; Friends</a> </div>
                                </div>
                                <div id='recipe_subtitles_bottom'>
                                  <div id='recipe_prospective'><a href='#'>Prospective Students</a> </div>
                                  <div id='recipe_current'><a href='#'>Current Students</a></div>
                                </div>
                              <div id='recipe_content'>
                              <p><em>Hope&rsquo;s</em> greatest asset is its faculty and staff. Each is deeply committed to the Lord, to the mission of the university and to helping each student reach his or her dream. In this Web site section, parents, students and friends will find information about these men and women who are the backbone of the university. And, faculty and staff can access information and resources here to assist them in their important roles in the life of the university. </p>
                                  <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
                          <tr>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Current Events/Activities</a></li>
                              <li><a href='#'>Directory</a></li>
                              <li> <a href='#'>Employment<br />
                              Opportunities</a></li>
                              <li> <a href='#'>Human Resources</a></li>
                              </ul></td>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Featured Faculty/Staff Member </a></li>
                              <li><a href='#'>WebMail</a></li>
                              <li><a href='#'><em>More...</em></a></li>
                              </ul></td>
                          </tr>
                        </table>
                                  <p>&nbsp;</p>
                </div>
                          </div>";
var str4 = "<div id='home_recipe4'>                               
                               <div id='recipe_subtitles_top'>
                                  <div id='recipe_faculty'><a href='#'>Faculty &amp; Staff</a></div>
                                <div id='recipe_community'><a href='#'>Community &amp; Church</a></div>
                                  <div id='recipe_parents'><a href='#'>Parents &amp; Friends</a></div>
                </div>
                                <div id='recipe_subtitles_bottom'>
                                  <div id='recipe_prospective'><a href='#'>Prospective Students</a></div>
                                  <div id='recipe_current'><a href='#'>Current Students</a></div>
                                </div>
                              <div id='recipe_content'>
                              <p>Hope International University is more than sprawling buildings and degrees earned. It is a close-knit community built on faith, fellowship and commitment that includes every person who has attended this institution. And, in a very real sense, it encompasses the church and spiritual community that supports us. You will find many resources on this Website to connect you to <em>Hope</em> and to the friends you made here. Check back regularly, there&rsquo;s always something new. </p>
                                  <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
                          <tr>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'> Current Events/ Activities</a></li>
                              <li><a href='#'>Alumni Resources</a></li>
                              <li><a href='#'> Church Relations</a></li>
                              <li><a href='#'>Media Resources</a> </li>
                            </ul></td>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'>Featured Alumnus/Alumni </a></li>
                              <li><a href='#'>Giving to Hope</a></li>
                              <li><a href='#'><em>More...</em></a></li>
                              </ul></td>
                          </tr>
                        </table>
                </div>
                          </div>";
var str5 = "<div id='home_recipe5'>                               
                               <div id='recipe_subtitles_top'>
                                  <div id='recipe_faculty'><a href='#'>Faculty &amp; Staff</a></div>
                                <div id='recipe_community'><a href='#'>Community &amp; Church</a></div>
                                  <div id='recipe_parents'><a href='#'>Parents &amp; Friends</a></div>
                </div>
                                <div id='recipe_subtitles_bottom'>
                                  <div id='recipe_prospective'><a href='#'>Prospective Students</a></div>
                                  <div id='recipe_current'><a href='#'>Current Students</a></div>
                                </div>
                              <div id='recipe_content'>
                              <p>Parents, friends and families of our students &mdash; welcome to the Hope website. You have placed great trust in us by sending your son or daughter to our campus and we do not take that trust lightly. We are in a partnership to serve your child and we encourage you to return to this page often for updates and news from campus. Also, please consider visiting <em>Hope</em> to see first hand the extraordinary, close-knit community of which your child is a part. </p>
                                  <table width='95%' border='0' align='center' cellpadding='0' cellspacing='2'>
                          <tr>
                            <td width='50%' valign='top'><ul>
                              <li> <a href='#'> Current Events/ Activities</a></li>
                              <li><a href='#'>Parent/Student Feature</a></li>
                              <li><a href='#'>Directory </a></li>
                              <li><a href='#'>Safety and Security Visit</a></li>
                              <li><a href='#'>Campus</a></li>
                              <li><a href='#'>Maps/Directions</a></li>
                            </ul></td>
                            <td width='50%' valign='top'><ul>
                              <li><a href='#'>Church Relations</a></li>
                              <li><a href='#'>Couselors</a> </li>
                              <li><a href='#'>Parents of Prospective Students</a></li>
                              <li><a href='#'><em>More...</em></a></li>
                              </ul></td>
                          </tr>
                        </table>
                </div>
                          </div>";
var setInnerHTML = function( id, str ){
      if(!document.getElementById) return; // Not Supported
      if(document.getElementById){
            document.getElementById(id).innerHTML = str;
      }
}    

Here is the html where it needs to work:

<!-- BEGIN RECIPE CARDS -->
                        <div id="home_recipe">
                        <div id="home_recipe1">                               
                                <div id="recipe_subtitles_top">
                                  <div id="recipe_faculty"><a href="#" onclick="setInnerHTML('home_recipe',str3);">Faculty &amp; Staff</a></div>
                                <div id="recipe_community"><a href="#" onclick="setInnerHTML('home_recipe',str4);">Community &amp; Church</a></div>
                                  <div id="recipe_parents"><a href="#" onclick="setInnerHTML('home_recipe',str5);">Parents &amp; Friends</a></div>
                                </div>
                                <div id="recipe_subtitles_bottom">
                                  <div id="recipe_prospective"><a href="#" onclick="setInnerHTML('home_recipe',str1);">Prospective Students</a></div>
                                  <div id="recipe_current"><a href="#" onclick="setInnerHTML('home_recipe',str2);">Current Students</a></div>
                                </div>
                              <div id="recipe_content">
                              <p>Welcome to Hope International University, a Christian institution of higher learning. <em>Hope</em> is devoted to providing you with a challenging and rewarding educational experience that equips you well for both your chosen career path and a life of service. Take a few moments to explore our degree programs, campus and community. There&rsquo;s a lot to love at Hope International University. We think you&rsquo;ll agree.</p>
                                  <table width="95%" border="0" align="center" cellpadding="0" cellspacing="2">
                          <tr>
                            <td width="50%" valign="top"><ul>
                              <li> <a href="#">Undergraduate</a></li>
                              <li> <a href="#">Graduate</a></li>
                              <li> <a href="#">Professional</a></li>
                              <li> <a href="#">Parents</a></li>
                              <li> <a href="#">Counselors</a></li>
                              <li> <a href="#">Youth Leaders</a></li>
                              <li> <a href="#">Institutes</a></li>
                            </ul></td>
                            <td width="50%" valign="top"><ul>
                              <li> <a href="#">Online Learners</a></li>
                              <li> <a href="#">Apply Now</a></li>
                              <li> <a href="#">Get More Information</a></li>
                              <li> <a href="#">Scholarship Calculator</a></li>
                              <li> <a href="#">Visit Campus</a></li>
                              <li> <a href="#">Accepted Students</a></li>
                              <li> <a href="#">Orientation</a></li>
                            </ul></td>
                          </tr>
                        </table>
                                  <p>&nbsp;</p>
                                </div>
                              </div>
                              </div>
<!-- END RECIPE CARDS -->                  

As you can see, the links that need to change the content of the div are themselves within the same div. Is that possible?

Full code examples would be appreciated. Thank you!
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 41

Expert Comment

by:HonorGod
ID: 20389728
I've read, and re-read your updates, and I'm still trying to figure things out.

The "contractall" routine that you have above is will work, but only if you have all of your "home_recipe" elements numbered properly.  Note that the expression in the while loop doesn't have an underscore after "recipe", whereas the one within the while loop does.

It might be much better if you provided/passed the prefix in as a parameter.  For example:

----------------------------------------------------------------------
function contractall( idPrefix ) {
  var inc = 0;
  field = document.getElementById( idPrefix + inc );
  while ( field ){
    field.style.display = "none";
    inc++;
    field = document.getElementById( idPrefix + inc );
  }
}
----------------------------------------------------------------------

This way, you could invode the routine using something like:

contractall( "home_recipe_" );

The other routine (expandone) could then also have this same parameter passed.
In general, it is best to avoid depending upon global variables (e.g., selectedDiv) if possible.

----------------------------------------------------------------------
function expandone( idPrefix ) {
  var divId = idPrefix + selectedDiv;
  var selectedDivObj = document.getElementById( divId );
  contractall( divId );
  document.getElementById( divId ).innerHTML = selectedDivObj.getAttribute( "subject" );
  selectedDivObj.style.display="block";
  selectedDiv = ( selectedDiv < totalDivs - 1 ) ? selectedDiv + 1 : 0;
}
----------------------------------------------------------------------

  In spite of this though, why do you want the the innerHTML of the specified (selected) ID to be assigned the value of the subject attribute?
0
 

Author Comment

by:maxms
ID: 20409502
Yeah, here's the thing... I don't know what I want as far as the script itself. That is why I need you.  :)  I just know what I want the end result to be as far functionality. Can you give me some code to work with using the actual values from my divs? I'm so lost that I think I just need a fresh start.
0
 

Author Comment

by:maxms
ID: 20413211
OK - let's start over.

1. The part that is challenging me on this is that the tab structure for the links on these "recipe cards" are stacked. So, when one of the top tabs is clicked, the whole top tab row needs to move down to the bottom row in order to make the current link tab active. To do that within the CSS, I created each link row as it's own div. Along with changing the background and html content of the div, I also need the position of the 2 tab link rows to change position. I haven't been able to find anything where someone has done this with the links that change the div contents being inside that same div.

2. I also am struggling with how to call the large amount of content that needs to change for each link. If I place it within the JavaScript it needs to have a bunch of code adjustments because of all of the quotes, correct? Is there a way to use a separate file to store this info and call it from there?

OK - I think that might be more clear. Please let me know if it is not. Here is the test link again:
http://www.maxms.com/hiu/test
------------------Within the HTML body:
 

<div id="home_recipe">

				<div id="home_recipe1">					  

					  <div id="recipe_subtitles_top">

					    <div id="recipe_faculty"><a href="#"/>Faculty &amp; Staff</div>

				        <div id="recipe_community"><a href="#">Community &amp; Church</a></div>

					    <div id="recipe_parents"><a href="#">Parents &amp; Friends</a></div>

					  </div>

					  <div id="recipe_subtitles_bottom">

					    <div id="recipe_prospective"><a href="#">Prospective Students</a></div>

					    <div id="recipe_current"><a href="#">Current Students</a></div>

					  </div>

					<div id="recipe_content">

				      <p>Welcome to Hope International University, a Christian institution of higher learning. <em>Hope</em> is devoted to providing you with a challenging and rewarding educational experience that equips you well for both your chosen career path and a life of service. Take a few moments to explore our degree programs, campus and community. There&rsquo;s a lot to love at Hope International University. We think you&rsquo;ll agree.</p>

					    <table width="95%" border="0" align="center" cellpadding="0" cellspacing="2">

                          <tr>

                            <td width="50%" valign="top"><ul>

                              <li> <a href="#">Undergraduate</a></li>

                              <li> <a href="#">Graduate</a></li>

                              <li> <a href="#">Professional</a></li>

                              <li> <a href="#">Parents</a></li>

                              <li> <a href="#">Counselors</a></li>

                              <li> <a href="#">Youth Leaders</a></li>

                              <li> <a href="#">Institutes</a></li>

                            </ul></td>

                            <td width="50%" valign="top"><ul>

                              <li> <a href="#">Online Learners</a></li>

                              <li> <a href="#">Apply Now</a></li>

                              <li> <a href="#">Get More Information</a></li>

                              <li> <a href="#">Scholarship Calculator</a></li>

                              <li> <a href="#">Visit Campus</a></li>

                              <li> <a href="#">Accepted Students</a></li>

                              <li> <a href="#">Orientation</a></li>

                            </ul></td>

                          </tr>

                        </table>

					  </div>

					</div>

					</div>
 

------------------The CSS so far for this area:
 

#home_recipe {

	width: 350px;

	color: #FFFFFF;

	text-align: left;

}

#home_recipe ul {

	line-height: 1.4em;

	list-style-image:  url(../images/home_recipe/bullet_blue.gif);

	margin-left: -10px;

	text-indent: 2px;

	}

#home_recipe1 {

	background-image: url(../images/home_recipe/recipe_prospective.gif);

	padding-top: 11px;

	padding-left: 16px;

	height: 330px;

}

#home_recipe2 {

	background-image: url(../images/home_recipe/recipe_current.gif);

	padding-top: 11px;

	padding-left: 16px;

	height: 330px;

}

#home_recipe3 {

	background-image: url(../images/home_recipe/recipe_faculty.gif);

	padding-top: 11px;

	padding-left: 16px;

	height: 330px;

}	

#home_recipe4 {

	background-image: url(../images/home_recipe/recipe_community.gif);

	padding-top: 11px;

	padding-left: 16px;

	height: 330px;

}

#home_recipe5 {

	background-image: url(../images/home_recipe/recipe_parents.gif);

	padding-top: 11px;

	padding-left: 16px;

	height: 330px;

}

#recipe_subtitles_top {

	font: bold 0.9em Arial, Helvetica, sans-serif;

	width: 329px;

	height: 21px;

	vertical-align: middle;

}

#recipe_subtitles_bottom {

	font: bold 0.9em Arial, Helvetica, sans-serif;

	color: #FFFFFF;

	width: 329px;

	height: 20px;

	vertical-align: middle;

}

	#recipe_subtitles_top a, #recipe_subtitles_top a:visited {color:#fff; text-decoration:none; }

	#recipe_subtitles_top a:hover, #recipe_subtitles_top a:active {color:#fff; text-decoration:underline; }

	#recipe_subtitles_bottom a, #recipe_subtitles_bottom a:visited {color:#fff; text-decoration:none; }

	#recipe_subtitles_bottom a:hover, #recipe_subtitles_bottom a:active {color:#fff; text-decoration:underline; }

#recipe_faculty {

	width: 83px;

	float: left;

}

#recipe_community {

	width: 120px;

	margin-left: 10px;

	float: left;

}

#recipe_parents {

	width: 107px;

	margin-left: 9px;

	float: left;

}

#recipe_prospective {

	width: 129px;

	float: left;

}

#recipe_current {

	width: 140px;

	margin-left: 8px;

	float: left;

}
 

#recipe_content {

	margin-right: 12px;

	font-size: 8pt;

}

	#recipe_content a, #recipe_content a:visited {color:#036; text-decoration:none; }

	#recipe_content a:hover, #recipe_content a:active {color:#369; text-decoration:underline; }

Open in new window

0
 

Author Comment

by:maxms
ID: 20413222
0
 

Author Comment

by:maxms
ID: 20417170
I solved my own issue. It only took a week....
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 20426934
Sorry for the delay in getting back to you.  For some reason, my employer wanted some of my time... can you believe it?  ;-)

Anyway, I took another look at your site (http://www.maxms.com/hiu/test/main.htm), and am trying to find out what changes you want to make.

I see that the tabs appear to be working correctly:

- Faculty & Staff
- Community & Church
- Parents & Friends
- Prospective Students
- Current Students

i.e., the text, and bulleted list of links change based upon the selection.

What kind of change are you requesting?
0
 

Accepted Solution

by:
maxms earned 0 total points
ID: 20444870
I figured it out on my own using the following:

All divs that will change with the links are placed within the HTML:
Sample link:
 <div id="recipe_faculty"><a href="javascript:void[0];" onclick="switch1('home_recipe3');">Faculty &amp; Staff</a></div>

JavaScript below...
function switch1(div) {

var option=['home_recipe1','home_recipe2','home_recipe3','home_recipe4','home_recipe5'];

for(var i=0; i<option.length; i++) {

if (document.getElementById(option[i])) {

obj=document.getElementById(option[i]);

obj.style.display=(option[i]==div)? "block" : "none";

}

}

}
 

window.onload=function () {switch1('home_recipe1');}

Open in new window

0
 
LVL 1

Expert Comment

by:Vee_Mod
ID: 20620275
Closed, 500 points refunded.
Vee_Mod
Community Support Moderator
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now