121 lines
No EOL
4.8 KiB
HTML
121 lines
No EOL
4.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
|
|
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
|
|
<!-- Le javascript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="bootstrap/js/bootstrap.js"></script>
|
|
|
|
<style type="text/css">
|
|
.definition {
|
|
border-bottom: 1px dotted black;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<div id="backcolor1" style="color: red; z-index: -2; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; background-image: none; background-position: center center; background-repeat: no-repeat;">
|
|
</div>
|
|
|
|
<div id="backcolor2" style="color: red; z-index: -1; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: white; background-image: none; background-position: center center; background-repeat: no-repeat;">
|
|
</div>
|
|
|
|
|
|
<div class="contentpages" id="activepage" style="-webkit-transition: font-color 400ms linear">
|
|
<input type="button" value="background 1" onclick="setBackground('white.png', 'white', 'black')"><br>
|
|
<input type="button" value="background 2" onclick="setBackground('back2.jpg', 'black', 'white')"><br>
|
|
<input type="button" value="background 3" onclick="setBackground('back1.jpg', 'white', 'black')"><br>
|
|
|
|
<h1>Lorem Ipsum dolor sit</h1>
|
|
|
|
<p>Porta Nam porta luctus mi, ac euismod risus dignissim sed. Aliquam pretium facilisis malesuada. Pellentesque in orci leo. Aliquam vulputate, sapien eu auctor rutrum, ante massa convallis libero, eget pellentesque quam velit et lectus. Proin condimentum sapien at est pharetra sed tristique elit sagittis. Cras ultricies tortor et nibh sodales vel semper nisl volutpat. Praesent turpis velit, pulvinar ac malesuada ornare, bibendum et mauris. Morbi condimentum suscipit orci, eget tempus leo cursus ut. Pellentesque non quam molestie tortor suscipit eleifend vel mollis justo. Aenean eget pulvinar orci. Curabitur non malesuada leo. Integer commodo ipsum eget odio viverra mollis.</p>
|
|
|
|
<h1>Consectetur adipiscing</h1>
|
|
|
|
<p>Duis ac sem eu nunc porta ullamcorper rutrum. Morbi arcu sapien, mollis sit amet sodales et, volutpat sit amet dolor. Donec sit amet lacus massa. Integer eget nisl id tortor condimentum cursus quis id odio. Nullam ut quam ac mi malesuada auctor. In hac habitasse platea dictumst. Nullam at libero non orci aliquet luctus. Mauris metus diam, convallis vitae tristique non, molestie vitae massa. Quisque scelerisque, nunc a consectetur tempus, sem neque ultricies urna, nec tempus urna lectus vitae sapien. Proin sit amet massa metus, quis dictum sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
var definitions = [ { "term": ["Porta", "risus"], "description": "<b>Porta</b> is a door." },
|
|
{ "term": ["SempeR"], "description": "<b>Semper</b> means always." }
|
|
];
|
|
|
|
|
|
function setBackground(pic, col, textcol)
|
|
{
|
|
// set the background layer to the current picture
|
|
document.getElementById("backcolor1").style.backgroundColor = document.getElementById("backcolor2").style.backgroundColor;
|
|
document.getElementById("backcolor1").style.backgroundImage = document.getElementById("backcolor2").style.backgroundImage;
|
|
|
|
// show the background layer
|
|
$("#backcolor2").hide();
|
|
|
|
// fade to the new picture with the foreground layer
|
|
document.getElementById("backcolor2").style.backgroundColor = col;
|
|
if(pic == '')
|
|
pic = 'white.png';
|
|
document.getElementById("backcolor2").style.backgroundImage = "url(./img/" + pic + ")";
|
|
|
|
$("#backcolor2").fadeIn("slow");
|
|
$(".contentpages").css('color', textcol);
|
|
}
|
|
|
|
function addExplanations(obj)
|
|
{
|
|
for(def in definitions)
|
|
{
|
|
definitions[def]["replaced"] = 0
|
|
}
|
|
|
|
obj.find("p").each(function() {
|
|
var ct = $(this).html();
|
|
var ctlower = ct.toLowerCase();
|
|
|
|
for(def in definitions)
|
|
{
|
|
for(term in definitions[def]["term"])
|
|
{
|
|
if(definitions[def]["replaced"] == 0)
|
|
{
|
|
var t = definitions[def]["term"][term];
|
|
pos = ctlower.indexOf(t.toLowerCase());
|
|
if(pos != -1)
|
|
{
|
|
ct = ct.substr(0, pos) + "<a href='#' class='definition def_" + definitions[def]["term"][0].toLowerCase() + "' rel='popover' data-content='" + definitions[def]["description"] + "' data-original-title='" + definitions[def]["term"][0] + "'>" + ct.substr(pos, t.length) + "</a>" + ct.substr(pos+t.length);
|
|
ctlower = ct.toLowerCase();
|
|
definitions[def]["replaced"] = 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
$(this).html(ct);
|
|
|
|
});
|
|
|
|
for(def in definitions)
|
|
{
|
|
if(definitions[def]["replaced"] == 1)
|
|
{
|
|
obj.find(".def_"+definitions[def]["term"][0]).popover({"placement": "bottom"});
|
|
}
|
|
}
|
|
};
|
|
|
|
addExplanations($("#activepage"));
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</html> |