table with height 100% doesn't fit parent size

table with height 100% doesn't fit parent size - html

I've a table inside a div inside the main.
all of this have width = 100% but when i make the window smaller just the div ant the main gets smaller but the table dosent resize. all other elements below the table change position and size and starts lay over it. the table has 25 records and if the window is full-size everything matches perfect.
The div im talkin about has the id home
The html:
<DOCTYPE! html>
<html>
<head>
<meta charset="UTF-8">
<title>Admin Panel | Please Login</title>
<link href='../css/admin.css' type='text/css' rel='stylesheet'>
<meta http-equiv="refresh" content="60">
</head>
<body>
<main>
<div id='container'>
<img src="../img/ipw_quer_rgb.jpg" alt="IPW Logo" id="logo" width="15%">
<header>
<ul id='menu'>
<div id="links">
<li>Home</li>
<li>Schüler verwalten</li>
<li>History</li>
</div>
</ul>
</header>
<div id="home">
<h2 id="date"></h2>
<table id="table">
</table>
</div>
<div id="dropdown" class="dropdown">
<select id="select">
<option value="Nothing">Nichts ausgewählt</option>
<option value="Extern">Extern</option>
<option value="Termin">Termin</option>
<option value="Schule">Schule</option>
</select>
</div>
<div id="legend" class="legend">
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#D3D3D3;" />
</svg>
<a>Extern</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFAEB9;" />
</svg>
<a>Termin</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#FFFF00;" />
</svg>
<a>Schule</a>
<br>
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" style="fill:#00FF00;" />
</svg>
<a>Visiert</a>
<br>
<button id="edit">Editieren</button>
</div>
</div>
</main>
the css:
*{
margin: 0;
padding: 0;
font-family: monospace;
box-sizing: border-box;
}
main{
height: 100%;
width: 100%;
}
label{
font: 13px Helvetica, Arial, sans-serif;
}
html, body{
background-color: #006975;
overflow-y:auto;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
h3{
margin-right:50%;
}
table{
width:100%;
height:calc(100% -50px);
}
ul {
width:100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #006975;
}
li {
width:25%;
float: left;
}
h1{
text-align:center;
}
li a {
display: block;
color: white;
font-size: 120%;
text-align: center;
padding: 14px 16px;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
color: #006975;
background-color: #fff;
}
button:hover{
color:#fff;
background-color:#84afb8;
}
#container{
position:absolute;
margin: 4% 4% 4% 4%;
padding: 2%;
width: 90%;
height: 90%;
background-color: #fff;
}
#home{
height:60%;
}
#dropdown{
width:100%;
height:2%;
visibility:hidden;
}
.cell {
height: 4%;
width:10%;
text-align: center;
background-color: #D3D3D3;
}
.cell.on {
height: 4%;
width: 10%;
background-color: #00FF00;
}
.cell.les {
height: 4%;
width: 10%;
background-color: #FFFF00;
}
.cell.term {
height: 4%;
width: 10%;
background-color: #FFAEB9;
}
.cell.ext{
height: 4%;
width: 10%;
background-color: #D3D3D3;
}
.cell.spacer {
height: 4%;
width: 10%;
background-color:white;
}
.name {
border: 1px solid black;
}
if you also need the javascript please ask
EDIT:
javascript:
getDataUser('logGLAUSB');
var names = ["Zebra","Benj", "Nico", "Timon","Miro", "Leo"];
var longpresstimer = null;
getData();
window.addEventListener('click', function(){
});
window.addEventListener('load', function () {
var clickcount = 0;
var singleClickTimer;
document.getElementById('table').addEventListener('click', function (event) {
clickcount++;
if(clickcount==1){
if(event.target.tagName != "INPUT" && event.target.classList != 'cell spacer'){
singleClickTimer = setTimeout(function() {
clickcount = 0;
var cell = event.target;
var selected = getSelected();
if(selected == 3){
cell.classList.remove("ext");
cell.classList.remove("term");
cell.classList.remove("les");
cell.classList.add("on");
}else{
cell.classList.remove("ext");
cell.classList.remove("term");
cell.classList.remove("les");
cell.classList.remove("on");
switch(selected){
case 0: cell.classList.add("ext"); break;
case 1: cell.classList.add("les"); break;
case 2: cell.classList.add("term"); break;
}
}
var x = "get";
x += getString(event.target.parentNode.cells[0].childNodes[0].innerHTML);
getData(x);
}, 300);
}
}else if (clickcount == 2){
if(event.target.classList != "name"){
clearTimeout(singleClickTimer);
clickcount = 0;
toInput(event.target);
}
}
});
});
document.getElementById("edit").addEventListener('click', function(){
var legend = document.getElementById("legend");
var dropdown = document.getElementById('dropdown');
var select = document.getElementById('select');
legend.style.visibility = 'hidden';
dropdown.style.visibility = 'visible';
var button = document.createElement('button');
button.innerHTML= "Fertig";
dropdown.appendChild(button);
button.onclick = function(){
legend.style.visibility = 'visible';
dropdown.style.visibility = 'hidden';
dropdown.removeChild(button);
select.value = "Nothing";
}
});
function reset(){
var rows = Array.from(document.getElementsByClassName('row'));
var table = document.getElementById('table');
rows.forEach(function (row){
var cells = Array.from(document.getElementsByClassName('cell'));
for(var i = 0;i< cells.length;i++){
var cell = cells[i]
cell.classList.remove('on');
cell.classList.remove('les');
cell.classList.remove('term');
cell.classList.remove('ext');
}
});
var x = "rep";
x += getResetString();
getData(x);
}
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
function getData(str) {
var requestURL = "http://adopraesenz.ipwin.ch/data/students.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
loadJson(request);
}
};
request.open("GET", requestURL, true);
request.send();
}
function getDataHistory(str) {
var requestURL = "http://adopraesenz.ipwin.ch/data/history.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
if(request.responseText != ""){
loadDate(request);
}
}
};
request.open("GET", requestURL, true);
request.send();
}
function getDataUser(str){
var requestURL = "http://adopraesenz.ipwin.ch/data/login.php?q=" +str;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(this.readyState === 4 && this.status === 200){
if(request.responseText != ""){
loadDate(request);
} }
};
request.open("GET", requestURL, true);
request.send();
}
function getSelected(cell) {
var value = document.getElementById("select").value;
switch(value){
case "Extern": return 0; break;
case "Schule": return 1; break;
case "Termin": return 2; break;
default: return 3;
}
}
function loadDate(request){
var newDate = new Date();
newDate.setDate(newDate.getDate() -1);
newDate.setHours(0,0,0,0);
var days = request.responseText.split(".");
var oldDate = new Date(days[1]+"."+days[0]+"."+days[2]);
if(newDate > oldDate){
var date = new Date();
date.setDate(date.getDate() - 1);
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yyyy = date.getFullYear();
if(dd < 10) {
dd = '0' +dd;
}
if(mm < 10) {
mm = '0' +mm;
}
var yesterday = dd+"."+mm+"."+yyyy;
getDataHistory('add' + yesterday);
reset();
}
newDate = new Date().toLocaleDateString('de-CH', {
weekday: 'long',
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
document.getElementById('date').innerHTML = newDate;
}
getDataHistory('new');
function loadJson(request){
createTable(request.responseText);
}
function createHeader(array){
var header = document.createElement("thead");
var hRow = document.createElement('tr');
hRow.classList.add('header');
for(var i = 0; i < array.length; i++){
var div = document.createElement('div');
var th = document.createElement('th');
div.innerHTML = array[i];
th.appendChild(div);
hRow.appendChild(th);
}
header.appendChild(hRow);
return header;
}
function createTable(json){
var obj = JSON.parse(json);
var oldBody = document.getElementsByTagName('tbody')[0];
console.log(oldBody);
var oldHeader = document.getElementsByTagName('thead')[0];
var body = document.createElement('tbody');
var header = createHeader(["Name","09:00 – 09:45","10:15 – 11:00","11:00 – 11:45"," ","14:00 – 14:45","15:00 - 15:45","16:00 – 16:45"]);
for (var j = 0; j < obj.length; j++) {
var row = addRow(obj[j],body);
row.classList.add('row');
}
console.log(body);
replaceTable(body, oldBody, header ,oldHeader);
if(obj.length > 25){
var view = document.getElementById('home');
view.setAttribute("style", "overflow-y:scroll");
}
}
function toInput(cell){
var input = document.createElement('input');
setTimeout(function() { input.focus(); }, 200);
cell.appendChild(input);
window.addEventListener('keypress', function(e){
if(e.keyCode == '13'){
var text = input.value;
if(input.parentNode != null){
input.parentNode.removeChild(input);
}
cell.innerHTML = text;
getData("get"+getString(cell.parentNode.cells[0].childNodes[0].innerHTML));
}
}, false);
}
function replaceTable(body, oldBody, header, oldHeader){
if(typeof oldHeader == 'undefined'){
table.appendChild(header);
}else if(oldHeader.parentNode == table){
table.replaceChild(header, oldHeader);
}else{
table.appendChild(header);
}
if(typeof oldBody == 'undefined'){
table.appendChild(body);
}else if(oldBody.parentNode == table){
table.removeChild(oldBody);
table.appendChild(body);
//table.replaceChild(body, oldBody);
}else{
table.appendChild(body);
}
}
function addRow(val,body) {
var rest = val.split(";");
var tr = document.createElement('tr');
for( var i = 0; i < 8; i++){
if(i==0){
var name = rest[0];
addCell(tr, null,name);
}else{
var value = rest[i];
addCell(tr, value, name);
}
}
body.appendChild(tr);
return tr;
}
function addCell(tr, val, name) {
var name;
var cell = document.createElement('td');
var value = "get";
if(val == null){
var input = document.createElement('label');
cell.classList.add("name")
input.innerHTML = name;
input.readOnly = true;
cell.appendChild(input);
}else{
cell = document.createElement('td');
cell.classList.add('cell');
var content = val.split(":");
switch(content[0]){
case '0': cell.classList.add('ext'); break;
case '1': cell.classList.add('les'); break;
case '2': cell.classList.add('term'); break;
case '3': cell.classList.add('on'); break;
case '4': cell.classList.add('spacer'); break;
}
if(val.length > 1){
cell.innerHTML = content[1];
}
}
tr.appendChild(cell);
}
window.onclick = function(event) {
if (!event.target.matches('.dropA')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function getString(name){
var x = "";
var names = document.getElementsByClassName('name');
var values = document.getElementsByClassName('cell');
for(var i = 0;i<names.length;i++){
if(names[i].childNodes[0].innerHTML == name){
x+= names[i].childNodes[0].innerHTML + ";";
for(var j = (7 * i); j < (7 * i) + 7 ; j++){
switch(""+values[j].classList){
case 'cell': x += "0"; break;
case 'cell ext': x += "0"; break;
case 'cell les': x += "1"; break;
case 'cell term': x += "2"; break;
case 'cell on': x += "3"; break;
case 'cell spacer': x += "4"; break;
}
if(values[j].innerHTML != "" && values[j].innerHTML != null){
x+= ":" + values[j].innerHTML
}
x += ";";
}
}
}
return x;
}
function getResetString(){
var names = document.getElementsByClassName('name');
var x = "";
for(var i = 0; i < names.length; i++){
x += names[i].value +";";
for (var j = 0; j < 7 ; j++){
if(j == 3){
x += "4";
}else{
x += "0";
}
x += ";";
}
if(i < names.length-1){
x+="|";
}
}
return x;
}

it seems a tiny problem. on your css, you have to add an space on the calc statement:
height:calc(100% - 50px);
I was able to make it work in here
https://codesandbox.io/s/vibrant-http-ty85k

You can add display: table; to #container
and add:
#legend {
display: table-row;
}
This should work, but I think you should refactor (simplify) the whole page and styles.

Related

How to achive this timeline look only using html and css maybe some bootstrap

So far i only can achieve to this point. I am using example code from w3school
I trying to figure out to get year in the same position like in the picture but no luck and also tried to insert image background for circle but only manage to color fill
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: ' ';
position: absolute;
width: 6px;
background-color: #ffc200;
top: 0;
bottom: 0;
left: 50%;
margin-left: -5px;
}
/* Container around content */
.contaiment {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.contaiment::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -11px;
background-color: #ffc200;
border: 4px solid #ffc200;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
/* .left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
} */
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="contaiment left">
<div class="content">
<p>2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment right">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment left">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
</div>

I know you want to do something with only HTML and CSS, but take a look at this JQuery library. It's very easy to use.
https://github.com/musclesoft/jquery-connections/wiki/API
You just need to set the 2 elements you want to connect.
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<p style="width: 50px;height: 50px;border: 1px solid black;" id="div1">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 50px;border: 1px solid black;" id="div2">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 200px;border: 1px solid black;" id="div3">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 300px;border: 1px solid black;" id="div4">TEST</p>
<!-- Script retrieved from https://raw.githubusercontent.com/musclesoft/jquery-connections/gh-pages/jquery.connections.js -->
<script>
(function($) {
$.fn.connections = function(options) {
if (options === "update") {
return processConnections(update, this);
} else if (options === "remove") {
return processConnections(destroy, this);
} else {
options = $.extend(
true,
{
borderClasses: {},
class: "connection",
css: {},
from: this,
tag: "connection",
to: this,
within: ":root"
},
options
);
connect(options);
return this;
}
};
$.event.special.connections = {
teardown: function(namespaces) {
processConnections(destroy, $(this));
}
};
var connect = function(options) {
var borderClasses = options.borderClasses;
var tag = options.tag;
var end1 = $(options.from);
var end2 = $(options.to);
var within = $(options.within);
delete options.borderClasses;
delete options.tag;
delete options.from;
delete options.to;
delete options.within;
within.each(function() {
var container = this;
var done = new Array();
end1.each(function() {
var node = this;
done.push(this);
end2.not(done).each(function() {
createConnection(
container,
[node, this],
tag,
borderClasses,
options
);
});
});
});
};
var createConnection = function(
container,
nodes,
tag,
borderClasses,
options
) {
var css = $.extend({ position: "absolute" }, options.css);
var connection = $("<" + tag + "/>", options).css(css);
connection.appendTo(container);
var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;
if (border_w <= 0 && border_h <= 0) {
border_w = border_h = 1;
}
var data = {
borderClasses: borderClasses,
border_h: border_h,
border_w: border_w,
node_from: $(nodes[0]),
node_to: $(nodes[1]),
nodes_dom: nodes,
css: css
};
if ("none" === connection.css("border-top-style")) {
data.css.borderStyle = "solid";
}
$.data(connection.get(0), "connection", data);
$.data(connection.get(0), "connections", [connection.get(0)]);
for (var i = 0; i < 2; i++) {
var connections = connection.add($.data(nodes[i], "connections")).get();
$.data(nodes[i], "connections", connections);
if (connections.length == 1) {
$(nodes[i]).on("connections.connections", false);
}
}
update(connection.get(0));
};
var destroy = function(connection) {
var nodes = $.data(connection, "connection").nodes_dom;
for (var i = 0; i < 2; i++) {
var connections = $($.data(nodes[i], "connections"))
.not(connection)
.get();
$.data(nodes[i], "connections", connections);
}
$(connection).remove();
};
var getState = function(data) {
data.rect_from = data.nodes_dom[0].getBoundingClientRect();
data.rect_to = data.nodes_dom[1].getBoundingClientRect();
var cached = data.cache;
data.cache = [
data.rect_from.top,
data.rect_from.right,
data.rect_from.bottom,
data.rect_from.left,
data.rect_to.top,
data.rect_to.right,
data.rect_to.bottom,
data.rect_to.left
];
data.hidden =
0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3]) ||
0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]);
data.unmodified = true;
if (cached === undefined) {
return (data.unmodified = false);
}
for (var i = 0; i < 8; i++) {
if (cached[i] !== data.cache[i]) {
return (data.unmodified = false);
}
}
};
var update = function(connection) {
var data = $.data(connection, "connection");
getState(data);
if (data.unmodified) {
return;
}
var border_h = data.border_h;
var border_w = data.border_w;
var from = data.rect_from;
var to = data.rect_to;
var b = (from.bottom + from.top) / 2;
var r = (to.left + to.right) / 2;
var t = (to.bottom + to.top) / 2;
var l = (from.left + from.right) / 2;
var h = ["right", "left"];
if (l > r) {
h = ["left", "right"];
var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
r = l + border_w / 2;
l = x;
} else {
l -= border_w / 2;
r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
}
var v = ["bottom", "top"];
if (t > b) {
v = ["top", "bottom"];
var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
b = t + border_h / 2;
t = x;
} else {
b = Math.min(b, Math.max(from.top, to.top));
t -= border_h / 2;
}
var width = r - l;
var height = b - t;
if (width < border_w) {
t = Math.max(t, Math.min(from.bottom, to.bottom));
b = Math.min(b, Math.max(from.top, to.top));
l = Math.max(from.left, to.left);
r = Math.min(from.right, to.right);
r = l = (l + r - border_w) / 2;
}
if (height < border_h) {
l = Math.max(l, Math.min(from.right, to.right));
r = Math.min(r, Math.max(from.left, to.left));
t = Math.max(from.top, to.top);
b = Math.min(from.bottom, to.bottom);
b = t = (t + b - border_h) / 2;
}
width = r - l;
height = b - t;
width <= 0 && (border_h = 0);
height <= 0 && (border_w = 0);
var style =
"border-" +
v[0] +
"-" +
h[0] +
"-radius: 0;" +
"border-" +
v[0] +
"-" +
h[1] +
"-radius: 0;" +
"border-" +
v[1] +
"-" +
h[0] +
"-radius: 0;";
(border_h <= 0 || border_w <= 0) &&
(style += "border-" + v[1] + "-" + h[1] + "-radius: 0;");
if (data.hidden) {
style += "display: none;";
} else {
data.css["border-" + v[0] + "-width"] = 0;
data.css["border-" + h[0] + "-width"] = 0;
data.css["border-" + v[1] + "-width"] = border_h;
data.css["border-" + h[1] + "-width"] = border_w;
var current_rect = connection.getBoundingClientRect();
data.css.left = connection.offsetLeft + l - current_rect.left;
data.css.top = connection.offsetTop + t - current_rect.top;
data.css.width = width - border_w;
data.css.height = height - border_h;
}
var bc = data.borderClasses;
$(connection)
.removeClass(bc[v[0]])
.removeClass(bc[h[0]])
.addClass(bc[v[1]])
.addClass(bc[h[1]])
.attr("style", style)
.css(data.css);
};
var processConnections = function(method, elements) {
return elements.each(function() {
var connections = $.data(this, "connections");
if (connections instanceof Array) {
for (var i = 0, len = connections.length; i < len; i++) {
method(connections[i]);
}
}
});
};
})(jQuery);
</script>
<script defer type="text/javascript">
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
</script>
</body>
</html>

I want my Game to be at the bottom not at the top?

I have a school project where i want to programm a Gaming site but the game i copied from another website is always at the top can you help me to bring it down ?
I want the Game to be in the Center of the Website under the Hotbar :)
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Games</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/nav.css">
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<div class="nav">
<ul>
<li>Aventure Games</li>
<li>1vs1 Games</li>
<li id="logo"><img src="src/logogif.gif" style="width:300px;"></li>
<li>Other Categories</li>
<li>About us</li>
</ul>
</div>
<article>
<h1>Games</h1>
<p>content bla bla</p>
</article>
<p class="flappybird">
<script>
var myGamePiece;
var myObstacles = [];
var myScore;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>
CSS CODE:
*{
margin: 0px;
background-color:darkred;
}
.nav{
height: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
/*padding-left: 30%;
padding-right: 30%;*/
/*overflow: hidden;*/
background-color: gray;
height:70px;
}
li {
/*float: left;*/
display: inline-block;
vertical-align: top;
margin: 0 -2px;
}
li a {
display: block;
font-family: Verdana, Helvetica, sans-serif;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: darkred;
}
#logo {
/*display: block;*/
font-family: Verdana, Helvetica, sans-serif;
background-color: black;
text-align: center;
padding: 10px;
text-decoration: none;
}
#logo img{
display: block;
}
li a:hover {
background-color: black;
color: white;
}
}
p{font-family:Tahoma;}
article {
padding-left: 12px;
}

You've got to define the correct place you want to insert your new element, in your case the canvas.
In your code snippet below, you tell the canvas to be placed before the first child node of the document body.
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
You need to specify an element to place it before, below it's looking for the first element with the class name flappybird.
document.body.insertBefore(this.canvas, document.getElementsByClassName("flappybird")[0]);

Is there any way to add a tooltip which will show a textbox containing a link which the user can click?

I have tried to enter a tooltip to explain the different payment methods offered to customers. However, I need the tooltip to stay open so the customer can mouseover the area to click a hyperlink. I also need the tooltip icon to be some for of question mark.
This is all I have so far...
<h6 class="right">Preferred Payment Method<span class="question">?</span></h6>
CSS for the question mark...
span.question {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background-color: #89A4CC;
line-height: 16px;
color: White;
font-size: 13px;
font-weight: bold;
border-radius: 8px;
text-align: center;
position: relative;
}
span.question:hover {
background-color: #3D6199;
}

You'll need to use JavaScript to provide this functionality. Below is the minimal code that is used by Bootstrap to achieve this. Bootstrap Documentation :
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
/*!
* Generated using the Bootstrap Customizer (https://getbootstrap.com/customize/?id=009d6e1c8360baaa5978)
* Config saved to config.json and https://gist.github.com/009d6e1c8360baaa5978
*/
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery')
}
+function ($) {
'use strict';
var version = $.fn.jquery.split(' ')[0].split('.')
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) {
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3')
}
}(jQuery);
/* ========================================================================
* Bootstrap: tooltip.js v3.3.6
* http://getbootstrap.com/javascript/#tooltip
* Inspired by the original jQuery.tipsy by Jason Frame
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// TOOLTIP PUBLIC CLASS DEFINITION
// ===============================
var Tooltip = function (element, options) {
this.type = null
this.options = null
this.enabled = null
this.timeout = null
this.hoverState = null
this.$element = null
this.inState = null
this.init('tooltip', element, options)
}
Tooltip.VERSION = '3.3.6'
Tooltip.TRANSITION_DURATION = 150
Tooltip.DEFAULTS = {
animation: true,
placement: 'top',
selector: false,
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
trigger: 'hover focus',
title: '',
delay: 0,
html: false,
container: false,
viewport: {
selector: 'body',
padding: 0
}
}
Tooltip.prototype.init = function (type, element, options) {
this.enabled = true
this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.$viewport = this.options.viewport && $($.isFunction(this.options.viewport) ? this.options.viewport.call(this, this.$element) : (this.options.viewport.selector || this.options.viewport))
this.inState = { click: false, hover: false, focus: false }
if (this.$element[0] instanceof document.constructor && !this.options.selector) {
throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!')
}
var triggers = this.options.trigger.split(' ')
for (var i = triggers.length; i--;) {
var trigger = triggers[i]
if (trigger == 'click') {
this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
} else if (trigger != 'manual') {
var eventIn = trigger == 'hover' ? 'mouseenter' : 'focusin'
var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
}
}
this.options.selector ?
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
this.fixTitle()
}
Tooltip.prototype.getDefaults = function () {
return Tooltip.DEFAULTS
}
Tooltip.prototype.getOptions = function (options) {
options = $.extend({}, this.getDefaults(), this.$element.data(), options)
if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay,
hide: options.delay
}
}
return options
}
Tooltip.prototype.getDelegateOptions = function () {
var options = {}
var defaults = this.getDefaults()
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
})
return options
}
Tooltip.prototype.enter = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
}
if (self.tip().hasClass('in') || self.hoverState == 'in') {
self.hoverState = 'in'
return
}
clearTimeout(self.timeout)
self.hoverState = 'in'
if (!self.options.delay || !self.options.delay.show) return self.show()
self.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
Tooltip.prototype.isInStateTrue = function () {
for (var key in this.inState) {
if (this.inState[key]) return true
}
return false
}
Tooltip.prototype.leave = function (obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
$(obj.currentTarget).data('bs.' + this.type, self)
}
if (obj instanceof $.Event) {
self.inState[obj.type == 'focusout' ? 'focus' : 'hover'] = false
}
if (self.isInStateTrue()) return
clearTimeout(self.timeout)
self.hoverState = 'out'
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
var $tip = this.tip()
var tipId = this.getUID(this.type)
this.setContent()
$tip.attr('id', tipId)
this.$element.attr('aria-describedby', tipId)
if (this.options.animation) $tip.addClass('fade')
var placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
var autoToken = /\s?auto?\s?/i
var autoPlace = autoToken.test(placement)
if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
.addClass(placement)
.data('bs.' + this.type, this)
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
this.$element.trigger('inserted.bs.' + this.type)
var pos = this.getPosition()
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
var orgPlacement = placement
var viewportDim = this.getPosition(this.$viewport)
placement = placement == 'bottom' && pos.bottom + actualHeight > viewportDim.bottom ? 'top' :
placement == 'top' && pos.top - actualHeight < viewportDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > viewportDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < viewportDim.left ? 'right' :
placement
$tip
.removeClass(orgPlacement)
.addClass(placement)
}
var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(calculatedOffset, placement)
var complete = function () {
var prevHoverState = that.hoverState
that.$element.trigger('shown.bs.' + that.type)
that.hoverState = null
if (prevHoverState == 'out') that.leave(that)
}
$.support.transition && this.$tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
complete()
}
}
Tooltip.prototype.applyPlacement = function (offset, placement) {
var $tip = this.tip()
var width = $tip[0].offsetWidth
var height = $tip[0].offsetHeight
// manually read margins because getBoundingClientRect includes difference
var marginTop = parseInt($tip.css('margin-top'), 10)
var marginLeft = parseInt($tip.css('margin-left'), 10)
// we must check for NaN for ie 8/9
if (isNaN(marginTop)) marginTop = 0
if (isNaN(marginLeft)) marginLeft = 0
offset.top += marginTop
offset.left += marginLeft
// $.fn.offset doesn't round pixel values
// so we use setOffset directly with our own function B-0
$.offset.setOffset($tip[0], $.extend({
using: function (props) {
$tip.css({
top: Math.round(props.top),
left: Math.round(props.left)
})
}
}, offset), 0)
$tip.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (placement == 'top' && actualHeight != height) {
offset.top = offset.top + height - actualHeight
}
var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
if (delta.left) offset.left += delta.left
else offset.top += delta.top
var isVertical = /top|bottom/.test(placement)
var arrowDelta = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight'
$tip.offset(offset)
this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
}
Tooltip.prototype.replaceArrow = function (delta, dimension, isVertical) {
this.arrow()
.css(isVertical ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
.css(isVertical ? 'top' : 'left', '')
}
Tooltip.prototype.setContent = function () {
var $tip = this.tip()
var title = this.getTitle()
$tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
$tip.removeClass('fade in top bottom left right')
}
Tooltip.prototype.hide = function (callback) {
var that = this
var $tip = $(this.$tip)
var e = $.Event('hide.bs.' + this.type)
function complete() {
if (that.hoverState != 'in') $tip.detach()
that.$element
.removeAttr('aria-describedby')
.trigger('hidden.bs.' + that.type)
callback && callback()
}
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$tip.removeClass('in')
$.support.transition && $tip.hasClass('fade') ?
$tip
.one('bsTransitionEnd', complete)
.emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
complete()
this.hoverState = null
return this
}
Tooltip.prototype.fixTitle = function () {
var $e = this.$element
if ($e.attr('title') || typeof $e.attr('data-original-title') != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
}
}
Tooltip.prototype.hasContent = function () {
return this.getTitle()
}
Tooltip.prototype.getPosition = function ($element) {
$element = $element || this.$element
var el = $element[0]
var isBody = el.tagName == 'BODY'
var elRect = el.getBoundingClientRect()
if (elRect.width == null) {
// width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093
elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
}
var elOffset = isBody ? { top: 0, left: 0 } : $element.offset()
var scroll = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null
return $.extend({}, elRect, scroll, outerDims, elOffset)
}
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
var delta = { top: 0, left: 0 }
if (!this.$viewport) return delta
var viewportPadding = this.options.viewport && this.options.viewport.padding || 0
var viewportDimensions = this.getPosition(this.$viewport)
if (/right|left/.test(placement)) {
var topEdgeOffset = pos.top - viewportPadding - viewportDimensions.scroll
var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
if (topEdgeOffset < viewportDimensions.top) { // top overflow
delta.top = viewportDimensions.top - topEdgeOffset
} else if (bottomEdgeOffset > viewportDimensions.top + viewportDimensions.height) { // bottom overflow
delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
}
} else {
var leftEdgeOffset = pos.left - viewportPadding
var rightEdgeOffset = pos.left + viewportPadding + actualWidth
if (leftEdgeOffset < viewportDimensions.left) { // left overflow
delta.left = viewportDimensions.left - leftEdgeOffset
} else if (rightEdgeOffset > viewportDimensions.right) { // right overflow
delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
}
}
return delta
}
Tooltip.prototype.getTitle = function () {
var title
var $e = this.$element
var o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
Tooltip.prototype.getUID = function (prefix) {
do prefix += ~~(Math.random() * 1000000)
while (document.getElementById(prefix))
return prefix
}
Tooltip.prototype.tip = function () {
if (!this.$tip) {
this.$tip = $(this.options.template)
if (this.$tip.length != 1) {
throw new Error(this.type + ' `template` option must consist of exactly 1 top-level element!')
}
}
return this.$tip
}
Tooltip.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
}
Tooltip.prototype.enable = function () {
this.enabled = true
}
Tooltip.prototype.disable = function () {
this.enabled = false
}
Tooltip.prototype.toggleEnabled = function () {
this.enabled = !this.enabled
}
Tooltip.prototype.toggle = function (e) {
var self = this
if (e) {
self = $(e.currentTarget).data('bs.' + this.type)
if (!self) {
self = new this.constructor(e.currentTarget, this.getDelegateOptions())
$(e.currentTarget).data('bs.' + this.type, self)
}
}
if (e) {
self.inState.click = !self.inState.click
if (self.isInStateTrue()) self.enter(self)
else self.leave(self)
} else {
self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
}
}
Tooltip.prototype.destroy = function () {
var that = this
clearTimeout(this.timeout)
this.hide(function () {
that.$element.off('.' + that.type).removeData('bs.' + that.type)
if (that.$tip) {
that.$tip.detach()
}
that.$tip = null
that.$arrow = null
that.$viewport = null
})
}
// TOOLTIP PLUGIN DEFINITION
// =========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tooltip')
var options = typeof option == 'object' && option
if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.tooltip
$.fn.tooltip = Plugin
$.fn.tooltip.Constructor = Tooltip
// TOOLTIP NO CONFLICT
// ===================
$.fn.tooltip.noConflict = function () {
$.fn.tooltip = old
return this
}
}(jQuery);
/* ========================================================================
* Bootstrap: popover.js v3.3.6
* http://getbootstrap.com/javascript/#popovers
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// POPOVER PUBLIC CLASS DEFINITION
// ===============================
var Popover = function (element, options) {
this.init('popover', element, options)
}
if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
Popover.VERSION = '3.3.6'
Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
placement: 'right',
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})
// NOTE: POPOVER EXTENDS tooltip.js
// ================================
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
Popover.prototype.constructor = Popover
Popover.prototype.getDefaults = function () {
return Popover.DEFAULTS
}
Popover.prototype.setContent = function () {
var $tip = this.tip()
var title = this.getTitle()
var content = this.getContent()
$tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
$tip.find('.popover-content').children().detach().end()[ // we use append for html objects to maintain js events
this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
](content)
$tip.removeClass('fade top bottom left right in')
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
}
Popover.prototype.hasContent = function () {
return this.getTitle() || this.getContent()
}
Popover.prototype.getContent = function () {
var $e = this.$element
var o = this.options
return $e.attr('data-content')
|| (typeof o.content == 'function' ?
o.content.call($e[0]) :
o.content)
}
Popover.prototype.arrow = function () {
return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
}
// POPOVER PLUGIN DEFINITION
// =========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.popover')
var options = typeof option == 'object' && option
if (!data && /destroy|hide/.test(option)) return
if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.popover
$.fn.popover = Plugin
$.fn.popover.Constructor = Popover
// POPOVER NO CONFLICT
// ===================
$.fn.popover.noConflict = function () {
$.fn.popover = old
return this
}
}(jQuery);
$(function () {
$('[data-toggle="popover"]').popover()
})
$('#example').popover({html:true})
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-break: auto;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
font-size: 14px;
background-color: #ffffff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.popover.top {
margin-top: -10px;
}
.popover.right {
margin-left: 10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover.left {
margin-left: -10px;
}
.popover-title {
margin: 0;
padding: 8px 14px;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover > .arrow {
border-width: 11px;
}
.popover > .arrow:after {
border-width: 10px;
content: "";
}
.popover.top > .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
.popover.top > .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.popover.right > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999999;
border-right-color: rgba(0, 0, 0, 0.25);
}
.popover.right > .arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
.popover.bottom > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom > .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
.popover.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999999;
border-left-color: rgba(0, 0, 0, 0.25);
}
.popover.left > .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="example" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's <a href='#'>a link</a>. It's very engaging. Right?">Click to toggle popover</button>

You can do it with HTML/CSS, the following example might need a bit of styling and enhancements to markup but should achieve what you want.
HTML:
<a class="tooltip" href="">Tooltip</a>
<span>Tooltip with link</span>
CSS:
span {
position: relative;
width: 140px;
color: #fff;
background: #000;
visibility: hidden;
display: block;
left: 30px;
top: -15px;
padding: 25px;
opacity: .8;
}
a:hover + span,
span:hover {
visibility: visible;
z-index: 999;
}
http://codepen.io/williamjamesclark/pen/xZJJXb

Fix div position with respect to another div when zoom

I have the following HTML. The problem is that I can not make the div with id="ladder" have the same position with respect to its parent div with id="grid" when I zoom in or out. here is the code snakes and Ladders
var gameBoard = {
createBoard: function(dimension, mount) {
var mount = document.querySelector(mount);
if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
return false;
} else {
dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
var table = document.createElement('table'),
row = document.createElement('tr'),
cell = document.createElement('td'),
rowClone,
cellClone;
var output;
for (var r = 0; r < dimension; r++) {
rowClone = row.cloneNode(true);
table.appendChild(rowClone);
for (var c = 0; c < dimension; c++) {
cellClone = cell.cloneNode(true);
rowClone.appendChild(cellClone);
}
}
mount.appendChild(table);
output = gameBoard.enumerateBoard(table);
}
return output;
},
enumerateBoard: function(board) {
var rows = board.getElementsByTagName('tr'),
text = document.createTextNode(''),
rowCounter = 1,
size = rows.length,
cells,
cellsLength,
cellNumber,
odd = false,
control = 0;
for (var r = size - 1; r >= 0; r--) {
cells = rows[r].getElementsByTagName('td');
cellsLength = cells.length;
rows[r].className = r % 2 == 0 ? 'even' : 'odd';
odd = ++control % 2 == 0 ? true : false;
size = rows.length;
for (var i = 0; i < cellsLength; i++) {
if (odd == true) {
cellNumber = --size + rowCounter - i;
} else {
cellNumber = rowCounter;
}
cells[i].className = i % 2 == 0 ? 'even' : 'odd';
cells[i].id = cellNumber;
cells[i].appendChild(text.cloneNode());
cells[i].firstChild.nodeValue = cellNumber;
rowCounter++;
}
}
var lastRow = rows[0].getElementsByTagName('td');
lastRow[0].id = '100';
var firstRow = rows[9].getElementsByTagName('td');
firstRow[0].id = '1';
return gameBoard;
}
};
gameBoard.createBoard(10, "#grid");
function intialPosition() {
$("#1").append($("#player1"));
$("#1").append($("#player2"));
var currentPosition = parseInt($("#1").attr('id'));
return currentPosition;
}
var start = intialPosition();
var face1 = new Image();
face1.src = "http://s19.postimg.org/fa5etrfy7/image.gif";
var face2 = new Image();
face2.src = "http://s19.postimg.org/qb0jys873/image.gif";
var face3 = new Image();
face3.src = "http://s19.postimg.org/fpgoms1vj/image.gif";
var face4 = new Image();
face4.src = "http://s19.postimg.org/xgsb18ha7/image.gif";
var face5 = new Image();
face5.src = "http://s19.postimg.org/lsy96os5b/image.gif";
var face6 = new Image();
face6.src = "http://s19.postimg.org/4gxwl8ynz/image.gif";
function rollDice() {
var status = document.getElementById("status");
var random = Math.floor(Math.random() * 6) + 1;
document.images["mydice"].src = eval("face" + random + ".src")
status.innerHTML = "You rolled " + random;
//if (random == 6) {
// status.innerHTML += "! You get a free turn!!";
//}
return random;
}
var currentPosition = start;
var random1;
function move() {
var m = 1;
random1 = rollDice();
destination = currentPosition + random1;
$('#' + destination).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
$('#' + destination).append($('#player' + m));
if (destination == 36) {
destination = 55;
$('#' + destination).append($('#' + "player" + m));
}
if (destination == 96) {
destination = 57;
$('#' + destination).append($('#' + "player" + m));
}
if (destination >= 100) {
destination = 100;
$('#' + destination).append($('#' + "player" + m));
alert("You Won!!!!!!!");
}
currentPosition = parseInt($('#' + destination).attr('id'));
return currentPosition;
}
/*body {
background-image: url('snakesandladder2.png');
background-repeat: no-repeat;
background-size: 100%;
background-color: #4f96cb;
}*/
#game {
width: 80%;
margin-left: auto;
margin-right: auto;
display: table;
}
#gameBoardSection {
border: 3px inset #0FF;
border-radius: 10px;
width: 65%;
display: table-cell;
position: relative;
/*margin: 5px;*/
/*margin: auto;*/
}
/*#grid{
position:relative;
}*/
table {
width: 100%;
position: relative;
}
td {
border-radius: 10px;
width: 60px;
height: 60px;
line-height: normal;
vertical-align: bottom;
text-align: left;
border: 0px solid #FFFFFF;
position: relative;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
/*color: #FF0000 ;*/
background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
background-color: SkyBlue;
}
#100 {
background-image: url('rotstar2_e0.gif');
background-repeat: no-repeat;
background-size: 100%;
}
#ladder {
position: absolute;
top: 300px;
left: 470px;
-webkit-transform: rotate(30deg);
z-index: 1;
opacity: 0.7;
}
#bigSnake {
position: absolute;
top: 20px;
left: 200px;
opacity: 0.7;
z-index: 1;
}
#playerAndDiceSection {
background-color: lightpink;
border: 1px;
border-style: solid;
display: table-cell;
/*margin: 2px;*/
border-radius: 10px;
border: 3px inset #0FF;
width: 35%;
margin: 2%;
}
<body>
<div id="game">
<div id="gameBoardSection">
<div id="grid"></div>
<div id="ladder">
<img src="http://s19.postimg.org/otai9he2n/oie_e_RDOY2iqd5o_Q.gif" />
</div>
<div id="bigSnake">
<img src="http://s19.postimg.org/hrcknaagz/oie_485727s_RN4_KKBG.png" />
</div>
<div id="player1" style="position:absolute; top:10px; left:10px;">
<!--style="position: absolute; top: 597px; z-index: 1;"-->
<img src="http://s19.postimg.org/t108l496n/human_Piece.png" />
</div>
<div id="player2" style="position:absolute; top:15px; left:5px;">
<img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" />
</div>
</div>
<div id="playerAndDiceSection">
<div id="playerSection">
<div id="player1">
<img src="http://s19.postimg.org/t108l496n/human_Piece.png" />Player1
<!--<p>Player1</p>-->
</div>
<div id="player2">
<img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" />Player2
</div>
</div>
<div id="diceSection">
<img src="http://s19.postimg.org/fa5etrfy7/image.gif" name="mydice" onclick="move()" style="background-color: white;">
<h2 id="status"></h2>
</div>
</div>
</div>
</body>

my script is working on jfiddle only but not on local machine

I have a codes on Jsfiddle but not showing on realtime project i have consider external resources. Jfiddle has a tab menu and each tab is showing different chart on it like bar chart or pie chart or line chart.
I put both the css and js files on same page and also on the different page than also its not showing the js function on other tab.
Please let me know the solution i am trying from very long but its not working.
Jsfiddle
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="jQueryVisualizeChart1"></div>
<br />
<table id="table1">
<caption>2010 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
</div>
<div class="TabbedPanelsContent">
<div id="jQueryVisualizeChart2"></div>
<br />
<table id="table2">
<caption>2010 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
(function () { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function (element, opts) {
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
if (typeof (this.defaultTab) == "number") {
if (this.defaultTab < 0) this.defaultTab = 0;
else {
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count) this.defaultTab = (count > 1) ? (count - 1) : 0;
}
this.defaultTab = this.getTabs()[this.defaultTab];
}
if (this.defaultTab) this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
};
Spry.Widget.TabbedPanels.prototype.getElement = function (ele) {
if (ele && typeof ele == "string") return document.getElementById(ele);
return ele;
};
Spry.Widget.TabbedPanels.prototype.getElementChildren = function (element) {
var children = [];
var child = element.firstChild;
while (child) {
if (child.nodeType == 1 /* Node.ELEMENT_NODE */ ) children.push(child);
child = child.nextSibling;
}
return children;
};
Spry.Widget.TabbedPanels.prototype.addClassName = function (ele, className) {
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.TabbedPanels.prototype.removeClassName = function (ele, className) {
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
Spry.Widget.TabbedPanels.setOptions = function (obj, optionsObj, ignoreUndefinedProps) {
if (!optionsObj) return;
for (var optionName in optionsObj) {
if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue;
obj[optionName] = optionsObj[optionName];
}
};
Spry.Widget.TabbedPanels.prototype.getTabGroup = function () {
if (this.element) {
var children = this.getElementChildren(this.element);
if (children.length) return children[0];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getTabs = function () {
var tabs = [];
var tg = this.getTabGroup();
if (tg) tabs = this.getElementChildren(tg);
return tabs;
};
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function () {
if (this.element) {
var children = this.getElementChildren(this.element);
if (children.length > 1) return children[1];
}
return null;
};
Spry.Widget.TabbedPanels.prototype.getContentPanels = function () {
var panels = [];
var pg = this.getContentPanelGroup();
if (pg) panels = this.getElementChildren(pg);
return panels;
};
Spry.Widget.TabbedPanels.prototype.getIndex = function (ele, arr) {
ele = this.getElement(ele);
if (ele && arr && arr.length) {
for (var i = 0; i < arr.length; i++) {
if (ele == arr[i]) return i;
}
}
return -1;
};
Spry.Widget.TabbedPanels.prototype.getTabIndex = function (ele) {
var i = this.getIndex(ele, this.getTabs());
if (i < 0) i = this.getIndex(ele, this.getContentPanels());
return i;
};
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function () {
return this.currentTabIndex;
};
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function (ele) {
return Math.min(this.getTabs().length, this.getContentPanels().length);
};
Spry.Widget.TabbedPanels.addEventListener = function (element, eventType, handler, capture) {
try {
if (element.addEventListener) element.addEventListener(eventType, handler, capture);
else if (element.attachEvent) element.attachEvent("on" + eventType, handler);
} catch (e) {}
};
Spry.Widget.TabbedPanels.prototype.cancelEvent = function (e) {
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabClick = function (e, tab) {
this.showPanel(tab);
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function (e, tab) {
this.addClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function (e, tab) {
this.removeClassName(tab, this.tabHoverClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabFocus = function (e, tab) {
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.prototype.onTabBlur = function (e, tab) {
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
};
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function (e, tab) {
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true;
var tabs = this.getTabs();
for (var i = 0; i < tabs.length; i++)
if (tabs[i] == tab) {
var el = false;
if (key == this.previousPanelKeyCode && i > 0) el = tabs[i - 1];
else if (key == this.nextPanelKeyCode && i < tabs.length - 1) el = tabs[i + 1];
if (el) {
this.showPanel(el);
el.focus();
break;
}
}
return this.cancelEvent(e);
};
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function (root, func) {
var stopTraversal = false;
if (root) {
stopTraversal = func(root);
if (root.hasChildNodes()) {
var child = root.firstChild;
while (!stopTraversal && child) {
stopTraversal = this.preorderTraversal(child, func);
try {
child = child.nextSibling;
} catch (e) {
child = null;
}
}
}
}
return stopTraversal;
};
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function (tab, panel) {
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function (e) {
return self.onTabClick(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function (e) {
return self.onTabMouseOver(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function (e) {
return self.onTabMouseOut(e, tab);
}, false);
if (this.enableKeyboardNavigation) {
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function (node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */ ) {
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr) {
tabIndexEle = node;
return true;
}
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a") tabAnchorEle = node;
}
return false;
});
if (tabIndexEle) this.focusElement = tabIndexEle;
else if (tabAnchorEle) this.focusElement = tabAnchorEle;
if (this.focusElement) {
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function (e) {
return self.onTabFocus(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function (e) {
return self.onTabBlur(e, tab);
}, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function (e) {
return self.onTabKeyDown(e, tab);
}, false);
}
}
};
Spry.Widget.TabbedPanels.prototype.showPanel = function (elementOrIndex) {
var tpIndex = -1;
if (typeof elementOrIndex == "number") tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount()) return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++) {
if (i != tpIndex) {
if (tabs[i]) this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i]) {
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
}
}
}
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
};
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function (element) {
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
};
})();
$(function () {
$('#table1').visualize({
type: 'bar',
height: '260px',
width: '420px',
appendTitle: true,
lineWeight: 4,
colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744']
}).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh1');
});
$(function () {
$('#table2').visualize({
type: 'line',
height: '300px',
width: '420px',
appendTitle: true,
lineWeight: 4,
colors: ['#be1e2d', '#666699', '#92d5ea', '#ee8310', '#8d10ee', '#5a3b16', '#26a4ed', '#f45a90', '#e9e744']
}).appendTo('#jQueryVisualizeChart').trigger('visualizeRefresh2');
});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
.dwpeAd {
color: #333;
background-color: #F4F3Ea;
position:fixed;
right: 20px;
top: 20px;
padding: 5px;
}
.visualize {
margin: 20px 0 0 30px;
}
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
}
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsTabHover {
background-color: #CCC;
}
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels {
overflow: hidden;
zoom: 1;
}
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}
/* Styles for Printing */
#media print {
.TabbedPanels {
overflow: visible !important;
}
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
}
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
}
}

I think you did not copy the 'external resources' on left menu.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

table with height 100% doesn't fit parent size - html

it seems a tiny problem. on your css, you have to add an space on the calc statement: height:calc(100% - 50px); I was able to make it work in here https://codesandbox.io/s/vibrant-http-ty85k

You can add display: table; to #container and add: #legend { display: table-row; } This should work, but I think you should refactor (simplify) the whole page and styles.

Related

How to achive this timeline look only using html and css maybe some bootstrap

I want my Game to be at the bottom not at the top?

Is there any way to add a tooltip which will show a textbox containing a link which the user can click?

Fix div position with respect to another div when zoom

my script is working on jfiddle only but not on local machine

Categories

Resources