CodingForums.com - View Single Post

jmrker · 11-07-2012, 09:01 PM

Not sure of your desired output, but it appears you might simplify JS portion by doing this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
#highlights {
  width:	100%;
  font-family: arial, georgia, sans-serif;
  font: normal 14px/17px Arial, sans-serif;
  height: 329px;
  float:left;
  padding: 0;
  background-color: #FFFFFF;
  position: relative;
}

#highlights #blogs {
  background-color: #bf2626;
  height: 35px;
  padding-left: 46px;
  width: 100%;
  float: left;
}

#highlights #blogs .blog {
  display: block;
  float:left;
  padding: 8px 15px;
  color: #fff;
  cursor: pointer;
}

#highlights #blogs .blog_selected {
  background: #dd5959; 
  border-top: 1px solid black;
  color: #FFFFFF;
  padding: 8px 20px;
  float: left;
  display: block;
  margin-top: -5px;
  height: 40px;
  cursor: pointer;
}

#highlights #latestnews {
  float:left;
  height: 400px;
  width: 750px;
  background-color: red;
  padding-top: 10px;
  border-radius: 8px;
  clear: both;
}

.left-box { 
  float: left;
  width: 220px;
  height: 300px;
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  background-color: red;
 }
 
.right-box { 
float: left;
  width: 500px;
  background-color: purple;
  height: 300px; 
  padding-bottom: 1000px;
  margin-bottom: -1000px;
  background-color: purple;
}
</style>

</head>
<body>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=281453

/* <![CDATA[ */

var current = null;

function showresponddiv(info){
  for (var i=1; i<=4; i++) { document.getElementById("respond-"+i).style.display = 'none'; }
  document.getElementById("respond-"+info).style.display = 'block';
}

function changeClass(info) {
  for (var i=1; i<=4; i++) { document.getElementById("message-"+i).className = "blog"; }
  document.getElementById("message-"+info).className = "blog_selected";
}

/* ]]> */
</script>
<div id="highlights">
 <div id="blogs">
  <div id="message-1" class="blog_selected" onclick="showresponddiv(1); changeClass(1)">News</div>
  <div id="message-2" class="blog" onclick="showresponddiv(2); changeClass(2)">Blogs</div>
  <div id="message-3" class="blog" onclick="showresponddiv(3); changeClass(3)">Newshour</div>
  <div id="message-4" class="blog" onclick="showresponddiv(4); changeClass(4)">Days of Dust</div>
 </div>

 <div id="respond-1" style=" padding-top: 10px;" class="latestnews">
  <div class="left-box">
   <a target="_blank" href="http://straight2jackie.blogspot.com/">
    <img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie"
     title="Straight 2 Jackie" src="/filecabinet/folder48/1300802705blog.jpg"/>
   </a>
  </div>
  <div class="right-box">
   <h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
   <p>&nbsp;</p>
   PBS is rerunning their excellent look at the candidates tonight
   ...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
   <p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">
       Straight to Jackie--Continue Reading</a>
   </p>
   <p>&nbsp;</p>
  </div>
  <hr />
 </div>

 <div id="respond-2" style="display:none; background-color: #FFFFFF;">
  <div class="left-box"> </div>
  <div class="right-box"></div>
 </div>

 <div id="respond-3" style="display:none; background-color: #FFFFFF;">
  <p><!-- Tier 1 NewsHour Video MODULE BEGIN -->
<script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script>
<!--Tier 1 NewsHour Video MODULE END --></p>
<!-- Tier 2 NewsHour Video MODULE BEGIN -->
<script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script>
<!--Tier 2 NewsHour Video MODULE END --> 
<!-- Tier 3 NewsHour Video MODULE BEGIN --> 
<script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/3.js"></script>
<!--Tier 3 NewsHour Video MODULE END -->
 </div>

 <div id="respond-4" style="display:none; background-color: #FFFFFF;">
  <div class="left-box">
   <p>Hello</p>
  </div>
  <div class="right-box"></div>
  <hr />
 </div>
</div>

</body>
</html>