Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<style type="text/css" media="screen">
.chapters {
margin-top: 50px;
}
.chapterLinker {
float: left;
width: 215px;
}
.chapterLinker li {
margin-bottom: 0px;
}
.chapterLinker li li {
list-style-type: disc;
color: #7CA60A;
margin-bottom: 10px;
}
.chapterLinker li ul {
/* margin-top: 20px;*/
}
.chapterLinker li li .timeLabel {
display: none;
}
.chapterLinker h4 {
}
.chapterLinker .timeLabel {
display:none;
font-size: 14px;
}
p.caption a{
display:block;
margin:4px 5px 0 0;
text-align:right;
}
</style>
<script type="text/javascript">
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "myytplayer-1" };

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer-1");
ytplayer.pauseVideo();
}
$(function(){
$('.chapterLinker a').click(function(e){
e.preventDefault();
var secondsToJumpTo = $(this).attr('rel');
secondsToJumpTo = secondsToJumpTo.replace(',','');
ytplayer.stopVideo();
ytplayer.seekTo(secondsToJumpTo, false);
ytplayer.playVideo();
});
});
</script>
<div><div style="float:left; margin-right: 20px;">
<object type="application/x-shockwave-flash" id="myytplayer-1" data="https://www.youtube.com/e/uhWCMlcY_Zw?enablejsapi=1&amp;playerapiid=ytplayer-1" width="640" height="390"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"></object>
</div>
<div class="chapters">
<div class="chapterLinker">
<h4>Confluence Overview</h4>
<ul>
<li><a rel="189" href="#">Introduction</a> <span class="timeLabel">(@3:09)</span></li>
<li><a rel="207" href="#">What is Confluence?</a> <span class="timeLabel">(@3:27)</span></li>
<li><a rel="239" href="#">System Architecture</a> <span class="timeLabel">(@3:59)</span></li>
<li><a rel="306" href="#">Basic Concepts</a> <span class="timeLabel">(@5:06)</span></li>
</ul>
</div>
<div class="chapterLinker">
<h4>Create Content</h4>
<ul>
<li><a rel="738" href="#">Introduction</a> <span class="timeLabel">(@12:18)</span></li>
<li><a rel="770" href="#">Basic Editing</a> <span class="timeLabel">(@12:50)</span></li>
<li><a rel="1,257" href="#">Advanced Editing</a> <span class="timeLabel">(@20:57)</span></li>
<li><a rel="1,340" href="#">Blueprints and User Adoption</a> <span class="timeLabel">(@22:20)</span></li>
<li><a rel="2,905" href="#">Using Labels</a> <span class="timeLabel">(@48:25)</span></li>
</ul>
</div>
<div class="chapterLinker">
<h4>Discover Content</h4>
<ul>
<li><a rel="1,553" href="#">Introduction</a> <span class="timeLabel">(@25:53)</span></li>
<li><a rel="2,393" href="#">Search</a> <span class="timeLabel">(@39:53)</span></li>
<li><a rel="2,178" href="#">Sharing Files</a> <span class="timeLabel">(@36:18)</span></li>
<li><a rel="3,174" href="#">Comments and Likes</a> <span class="timeLabel">(@52:54)</span></li>

</ul>
</div>
</div>
</div>
</div>
<div style="clear:both">

Commenttitlereplace
TitleAny specific questions? Go ahead and ask!