PDA

View Full Version : Change div content from link within that div



marymak
12-05-2007, 06:22 PM
Hi everyone. I am a hack with JavaScript but can usually tweak an existing script to work for me. This one has me completely stumped.

I am trying to do a "recipe card" tab-style navigation on a div in the middle of the home page of this site and cannot get it to work as it should.

Here is my test page:
http://www.maxms.com/hiu/test/main.htm

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?

I have isolated the HTML and the CSS related to this area below... any help with a script that will work would be GREATLY appreciated!

------------------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; }