我有一个按时间显示实时feed上显示的内容的时间表。我基本上没有java经验,但我需要活动div类根据时间改变,这样人们就知道哪个部分正在显示。我还需要活动div在菜单上居中。
我的HTML是:
<div class="schedule-container">
<div class="schedule-header">
<div class="scheduleLogo"><img style="width: 78px;" src="http://cdn2.hubspot.net/hub/160749/file-778730016-png/InSites/insites-logo-white.png" alt="insites-logo-white" width="78"></div>
<div class="scheduleTime">time</div>
</div>
<div class="schedule-list-container">
<div class="schedule-list-header">Time slot host Interview subject topic</div>
<div class="scrollPanel">
<div class="schedule-list">
<ul>
<li><a href="#">
<div class="time">10:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Espen Sivertsen Type A Machines"</div>
<div class="description">Tech - culture & ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">10:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Felix</div>
</a></li>
<li><a href="#">
<div class="time">10:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Cat Casut</div>
<div class="description">"Education - Hackathon Kaiser grantee & intern @ Type A</div>
</a></li>
<li><a href="#">
<div class="time">10:45</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole open</div>
</a></li>
<li><a href="#">
<div class="time">11:00am</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee "Sarah Kayle Robot Club"</div>
<div class="description">Education -</div>
</a></li>
<li><a href="#">
<div class="time">11:15</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
<div class="description">open</div>
</a></li>
<li><a href="#">
<div class="time">11:30</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee Calvin and Noah</div>
<div class="description">Minecraft Tech - programming?</div>
</a></li>
<li><a href="#">
<div class="time">11:45</div>
<span class="divider"> </span>
<div class="eventInfo">"OmNom video Sound Fit video"</div>
</a></li>
<li><a href="#">
<div class="time">12:00noon</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole</div>
</a></li>
<li><a href="#">
<div class="time">12:15</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
</a></li>
<li><a href="#">
<div class="time">12:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole "Barbara Hanna CEO/Founder, Cyant"</div>
<div class="description">Tech-art-nexus</div>
</a></li>
<li><a href="#">
<div class="time">12:45</div>
<span class="divider"> </span>
<div class="eventInfo">Derick Lee</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">1:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Greg DeLaune</div>
</a></li>
<li><a href="#">
<div class="time">1:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera Derick Lee</div>
<div class="description">Tech - Mobile Fab Lab</div>
</a></li>
<li><a href="#">
<div class="time">1:30</div>
<span class="divider"> </span>
<div class="eventInfo">Rena Nicole Deborah Acosta</div>
<div class="description">Innovation ecosystem</div>
</a></li>
<li><a href="#">
<div class="time">1:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
<div class="description">Lazer Racing Motorcycle</div>
</a></li>
<li><a href="#">
<div class="time">2:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta Corey Mcguire</div>
<div class="description">?</div>
</a></li>
<li><a href="#">
<div class="time">2:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera "Kofi and Allejandro last names?</div>
</a></li>
<li><a href="#">
<div class="time">2:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
<div class="description">Tech - inventing?</div>
</a></li>
<li><a href="#">
<div class="time">2:45</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastain Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:00pm</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
<li><a href="#">
<div class="time">3:15</div>
<span class="divider"> </span>
<div class="eventInfo">Sebastian Cabrera</div>
</a></li>
<li><a href="#">
<div class="time">3:30</div>
<span class="divider"> </span>
<div class="eventInfo">Debbie Acosta</div>
</a></li>
</ul>
</div>
</div>
</div>
</div>
我CCS :
/* Schedule */
.schedule-container{
width: 100%;
height: 100%;
padding: 3px;
}
.schedule-header{
background: #999;
padding: 5px;
height: 20px;
}
.scheduleLogo{
float: left;
vertical-align: top;
text-align: left;
}
.scheduleTime{
float: left;
text-align: right;
}
.schedule-list-container{
background: #666;
padding: 5px;
color: #fff;
font-size: .75em;
}
.schedule-list-header{
background: #666;
color: #999;
white-space: nowrap;
}
.scrollPanel{
overflow-x: auto;
overflow-y: scroll;
max-height: 400px;
}
.schedule-list ul{
padding-left: 0px;
}
.schedule-list li{
display: block;
list-style-type: none;
padding-left: 0px;
}
.schedule-list li a{
display: block;
padding: 10px;
color:#fff;
text-decoration: none;
border-top:thin solid #666;
border-bottom:thin solid #999;
background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
background: linear-gradient(#999, #666); /* Standard syntax */
}
.schedule-list li a:hover{
border-top:thin solid #999;
border-bottom:thin solid #666;
background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#666, #999); /* Standard syntax */
}
.active{
background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99ff66, #999); /* Standard syntax */
}
.time{
float: left;
padding-right: 5px;
font-weight: bold;
height: 100%;
width: 20%;
}
.divider{
width: 2px;
border-right: 1px;
border-color: #fff;
}
.event{
float: left;
padding-left:5px;
height: 100%;
width: 80%;
}
.eventInfo{
font-weight: bold;
}
.description{
font-weight: normal;
}
我已经添加了一些脚本和样式到你的代码,不确定这将帮助你与否。
CSS
/* Schedule */
.schedule-container{
width: 100%;
height: 100%;
padding: 3px;
}
.schedule-header{
background: #999;
padding: 5px;
height: 20px;
}
.scheduleLogo{
float: left;
vertical-align: top;
text-align: left;
}
.scheduleTime{
float: left;
text-align: right;
}
.schedule-list-container{
background: #666;
padding: 5px;
color: #fff;
font-size: .75em;
}
.schedule-list-header{
background: #666;
color: #999;
white-space: nowrap;
}
.scrollPanel{
overflow-x: auto;
overflow-y: scroll;
max-height: 400px;
}
.schedule-list ul{
padding-left: 0px;
}
.schedule-list li{
display: block;
list-style-type: none;
padding-left: 0px;
}
.schedule-list li a{
display: block;
padding: 10px;
color:#fff;
text-decoration: none;
border-top:thin solid #666;
border-bottom:thin solid #999;
background: -webkit-linear-gradient(#999, #666); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#999, #666); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#999, #666); /* For Firefox 3.6 to 15 */
background: linear-gradient(#999, #666); /* Standard syntax */
height: auto;
min-height: 20px;
}
.schedule-list li a:hover{
border-top:thin solid #999;
border-bottom:thin solid #666;
background: -webkit-linear-gradient(#666, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#666, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#666, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#666, #999); /* Standard syntax */
}
.active{
background: -webkit-linear-gradient(#99ff66, #999); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99ff66, #999); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99ff66, #999); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99ff66, #999); /* Standard syntax */
}
.time{
float: left;
padding-right: 5px;
font-weight: bold;
height: auto;
width: 20%;
}
.divider{
width: 2px;
border-right: 1px;
border-color: #fff;
}
.event{
float: left;
padding-left:5px;
height: 100%;
width: 80%;
}
.eventInfo{
font-weight: bold;
float: left;
}
.description{
font-weight: normal;
}
.active_time {
background: #FFF !important;
color: #000 !important;
margin-left: 0%;
}