What I would like to do something like http://mountaintheme.com/themeforest/mountain/home.html and I'm not sure at all how to go about this. I've tried some methods utilizing CSS, but failed miserably. This seems to be a simple fix I'd imagine...
This is my current code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sound Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body {
background-color: rgb(255, 255, 255);
color: #000;
}
a {
color: #fff;
}
a:hover {
color: #fff;
}
hr {
border-top-color: #fff;
}
.main {
opacity: 0.6;
max-width: 640px;
margin: 150px auto;
padding: 0px 15px;
height:2048px;
}
.page-header {
border-bottom: 3px #fff solid;
}
footer .accr {
text-align: right;
}
#media (max-width: 767px) {
.clearfix div {
width: 100%;
}
.rgb, .accr {
text-align: center !important;
}
}
</style>
</head>
<body>
<div class="main">
<h1 class="page-header"></h1>
<p style="font-family:'Helvetica'"></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script id="colorScroll" data-colors="255, 255, 255:255, 255, 204:204, 255, 255">
var colors = $("#colorScroll").data("colors");
var colors_array = colors.split(":");
var numcolors = colors_array.length;
var RGBs = [];
for(var i = 0; i < numcolors; i++) {
RGBs[i] = [];
var c = colors_array[i].split(",");
RGBs[i][0] = c[0];
RGBs[i][1] = c[1];
RGBs[i][2] = c[2];
}
var dRGBs = [];
for(var i = 0; i < (numcolors - 1); i++) {
dRGBs[i] = [];
dRGBs[i][0] = RGBs[i][0] - RGBs[i+1][0];
dRGBs[i][1] = RGBs[i][1] - RGBs[i+1][1];
dRGBs[i][2] = RGBs[i][2] - RGBs[i+1][2];
}
$(window).scroll(function() {
var position = $(this).scrollTop();
var view = $(this).height();
var height = $(document).height();
var travel = height - view;
var percent = position / travel;
var level = Math.floor(percent * (numcolors - 1));
var plevel = percent * (numcolors - 1);
var dlevel = Math.floor(level);
if(Math.floor(level) == (numcolors - 1)) {
dlevel = Math.floor(level) - 1;
}
if(plevel > 1) {
plevel = plevel - dlevel;
}
var nRed = (RGBs[dlevel][0] - Math.round(dRGBs[dlevel][0] * plevel));
var nGreen = (RGBs[dlevel][1] - Math.round(dRGBs[dlevel][1] * plevel));
var nBlue = (RGBs[dlevel][2] - Math.round(dRGBs[dlevel][2] * plevel));
$(".rgb span").text(nRed + ", " + nGreen + ", " + nBlue);
$("body").css("background-color", "rgb(" + nRed + "," + nGreen + "," + nBlue + ")");
});
</script>
</body>
</html>
This is gif image you can download it through google crome.
You can download it from here. Click Here
It is jpeg picture as you can see from there page resources - http://mountaintheme.com/themeforest/mountain/demo/bg.jpg The Dotted effect was probably made with-in photoshop or something and then just saved.
Related
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>
var rows = 55;
var cols = 140;
var rowsInput = document.getElementById("rowsId");
var colsInput = document.getElementById("colsId");
//initialize 2dim arrays
var arr;// current generation array
var nextArr; // next generation array
function drawGrid() {
let grid = document.getElementById("container");
let table = document.createElement("table");
table.setAttribute("class", "center");
for (let i = 0; i < rows; i++) {
let tr = document.createElement("tr");
for (let j = 0; j < cols; j++) {
let cell = document.createElement("td");
cell.setAttribute("id", i + "_" + j);
cell.setAttribute("class", "dead");
tr.appendChild(cell);
cell.addEventListener("click", function () {
if (cell.classList.contains("live")) {
cell.setAttribute("class", "dead");
arr[i][j] = 0;
}
else
cell.setAttribute("class", "live");
arr[i][j] = 1;
});
}
table.appendChild(tr);
}
grid.appendChild(table);
}
function make2DArr() {
arr = new Array(rows);
nextArr = new Array(rows);
for (let i = 0; i < rows; i++) {
arr[i] = new Array(cols);
nextArr[i] = new Array(cols);
}
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
arr[i][j] = 0;
nextArr[i][j] = 0;
}
}
}
var generateBtn = document.getElementById("generateBtnId");
generateBtn.addEventListener("click", function () {
rows = rowsInput.value;
cols = colsInput.value;
remove();
make2DArr();
drawGrid();
});
function remove() {
var tb = document.querySelector("table");
tb.outerHTML = "";
}
function init() {
make2DArr();
drawGrid();
}
init();
body {
background-color: rgba(76, 77, 62, 0.514);
}
.center {
margin: auto;
width: 70rem;
height: 30rem;
padding: 0.5rem;
}
#container {
position: relative;
border:1px rgb(26, 51, 192) solid;
margin: 0;
overflow: auto;
display: flex;
}
table {
border:1px rgb(241, 241, 241) solid;
border-spacing: 0;
flex:1;
}
.live {
background-color:rgba(0, 0, 0, 0.685);
}
.dead {
background-color:rgba(228, 228, 241, 0.829);
}
td {
flex:1;
position: relative;
border:1px rgb(29, 182, 29) solid;
width: 0.5rem;
height: 0.5rem;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 0.5rem 0.5rem;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover {
background-color: rgba(144, 180, 145, 0.596);
color: rgb(54, 59, 54)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel=stylesheet type="text/css" href="game.css">
</head>
<body>
<div class="center">
<div id="container">
</div>
<button id="startBtnId"><span>Start</span></button>
<button id="clearBtnId"><span>Clear</span></button>
<button id="randomBtnId"><span>Random</span></button>
<button id="generateBtnId"><span>Generate</span></button>
<input type="text" id="rowsId" value="rows">
<input type="text" id="colsId" value="cols">
<select id="sizeId">
<option value="Big">Big</option>
<option value="Medium">Medium</option>
<option value="Small">Small</option>
</select>
</div>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
I would like to enter a number of rows and columns manually and the new table will be contained in the fixed container size.
For example, when I weigh 20 rows and 20 columns the container will be the same size as the one where 50 lines and 50 columns are balanced.
Enter the number of rows and columns, and then click generate
Since you have specified container as flex so if you add as many colum it will fit in to container, remove the flex and give width manual and check.
I am using Aptana Studio 3 text editor and working on Windows 7 Enterprise OS. I have the following AJAX code which is not working on the local system to fetch JSON files kept on an https website. This example is taken from the Youtube video:
JSON and AJAX Tutorial: With Real Examples
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</header>
<body>
<script src="main.js"></script>
<button type="button" onclick="function()" id="btn">Fetch Info for 3 New Animals</button>
<div id="animal-info"> </div>
</body>
</html>
Styles.css:
html, body {
padding: 0;
margin: 0;
}
.hide-me {
visibility: hidden;
opacity: 0;
transform: scale(.75);
}
h1 {
margin-top: 0;
font-size: 2.4em;
font-weight: normal;
display: inline-block;
}
body {
font-family: Helvetica, sans-serif;
padding: 50px 10%;
}
button {
background-color: #046380;
color: #FFF;
border: none;
padding: 10px 15px;
font-size: 15px;
border-radius: 4px;
cursor: pointer;
outline: none;
box-shadow: 2px 2px 0 #034154;
margin-bottom: 10px;
margin-left: 18px;
transition: opacity .4s ease-out, transform .4s ease-out, visibility .4s ease-out;
position: relative;
top: -10px;
}
button:hover {
background-color: #034F66;
}
button:active {
background-color: #034154;
box-shadow: none;
position: relative;
top: -8px;
left: 2px;
}
p {
padding: 4px 0 2px 8px;
line-height: 1.7;
border-bottom: 1px dotted #DDD;
list-style: none;
margin: 0;
}
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("onClick", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
//ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
}
This code doesn't seem to work on my local machine. I tried running it by installing an http-server using NodeJs on my local machine, but still no joy!
Another JSON AJAX code on ww3Schools.com
though seems to work fine. This is an inline javascript code in the html file. Initially i thought onReadyStateChange was the culprit not working on IE, FF, CH etc., but this website code also has onReadyStateChange but it works fine!
Or is it the Button click event handler the cause why it is not working?
btn.addEventListener("onClick", function() {
My code is not inline, could that be the reason? If not, what am i missing or doing wrong?
I modified html file by moving "div" above "script" tag:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<button type="button" onclick="function()" id="btn">Fetch Elements</button>
<div id="animal-info"> </div>
</header>
<body>
<script src="main.js"></script>
</body>
</html>
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
// function LoadJSON() {
if (window.XMLHttpRequest) {
// code for modern browsers
var ourRequest = new XMLHttpRequest();
} else {
//code for IE6, IE5
var ourRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// ourRequest.onLoad = function() {
ourRequest.onreadystatechange = function() {
if (this.readyState = 4 && (this.status >= 200 && this.status < 400)) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
// ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.send();
ourRequest.onerror = function() {
console.log("Connection error");
};
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
animalContainer.innerHTML=htmlString;
}
This works now!
The only problem i am facing is if i have more json files on the server, how do i hide ("hide-me") the button based on the number of json files processed, when button is clicked a no of times?
Right now, it hides button if pageCounter exceeds 3.
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
The other issue i see is if i enable "insertAdjacentHTML", it displays each json twice. Why is this happening?
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
Use this:
btn.style.visibility = "hidden";
On any given application, is there a way, maybe in dev tools where I can check the pixel location of my mouse hover?
Use javascript to get cursor location.
document.addEventListener("mouseover", function( event ) {
console.log(event.screenX, event.screenY);
}, false);
Getting the Mouse Click Position :
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
width: 550px;
height: 350px;
border: 5px black solid;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
position: relative;
left: 50px;
top: 50px;
transition: left .5s ease-in, top .5s ease-in;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="//www.kirupa.com/images/smiley_red.png">
</div>
<script src="//www.kirupa.com/prefixfree.min.js"></script>
<script>
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
</script>
</body>
</html>
Refer : MouseEvent clientX Property & Getting the Mouse Click Position
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>