How can I get the value in % relative div - javascript

i write function which output top and left all div within div id=container
var main = $('#container'),
res = $('#result'),
bw = parseInt(main.css('border-left-width'), 10),
mT = main.offset().top + bw,
mL = main.offset().left + bw;
$('#btn1').on('click', function () {
var allCoords = $('div', main).map(function () {
return getCoords(this);
}).get().join('<br>');
res.html(allCoords); });
function getCoords(el) {
var $that = $(el),
pos = $that.offset(),
posTop = pos.top - mT,
posLeft = pos.left - mL;
var pos = el.id + ' top: ' + posTop + 'px; left: ' + posLeft + 'px;';
return pos;}
How can I get the value(left and top) in % relative div id container
please help me.Thank

Use math formula 100*yoursreensize/yourelementdivorsomething, like this:
var width = $(window).width();
var left = $('#me').position().left;
var percent = parseInt(100*left/width);
alert(percent);
#me{
position:relative;
left:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="me">Me</div>

Related

How to position a circle at a specific point?

I'm currently learning JS and I'm doing this canvas exercise, the task is to "draw" circles on a rectangle by the parameters that the user enters (x and y for positioning the first circle, the radius of the circles and the amount of circles), each circle's x should grow by 1 each time and be positioned accordingly.
The thing is I just can't position the circles no matter what I do! I'm pretty sure it's related to my CSS(which I suck at).
Does anyone know how to position the circle at a specific point?
var container = document.getElementById('container');
var rectangle = document.createElement('div');
rectangle.setAttribute('id', 'rectangle');
container.appendChild(rectangle);
var style = document.createElement('style');
style.innerHTML = "#rectangle {height:300px; width: 400px; background-color: #e1c699; position: relative;}";
document.head.appendChild(style);
var formElement = document.createElement('div');
formElement.setAttribute('id', 'form');
var xInput = createInput("x", "Please enter x");
var yInput = createInput("y", "Please enter y");
var radius = createInput("radius", "Please enter radius");
var numOfCircles = createInput("numOfCirc", "Please enter number of circles");
formElement.appendChild(xInput);
formElement.appendChild(yInput);
formElement.appendChild(radius);
formElement.appendChild(numOfCircles);
var submitBtn = createBtn('submit', 'Submit');
formElement.appendChild(submitBtn);
container.appendChild(formElement);
submitBtn.onclick = function() {
var numOfCirc = document.getElementById('numOfCirc').value;
var raidus = document.getElementById('radius').value;
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
for (var i = 1; i <= numOfCirc; i++) {
drawCircle(x, y, raidus, i);
x = parseInt(x) + 1;
}
}
function drawCircle(x, y, raidus, id) {
var circle = document.createElement('div');
circle.setAttribute('class', 'circle');
circle.setAttribute('id', id);
var style = document.getElementsByTagName('style')[0];
if (id == 1) {
var circleSize = ".circle {height: " + radius.value + "px; width: " + radius.value + "px; background-color: #555; border-radius: 50%;}";
var position = "#" + id + " {position: absolute; left: " + x + "px; top: " + y + "px;}"
style.insertAdjacentHTML('beforeend', circleSize);
style.insertAdjacentHTML('beforeend', position);
} else {
var position = "#" + id + " {position: absolute; left: " + x + "px; top: " + y + "px;}"
style.insertAdjacentHTML('beforeend', position);
}
rectangle.appendChild(circle);
}
function createInput(id, displayName) {
var input = document.createElement("input");
input.setAttribute("id", id);
input.setAttribute("placeholder", displayName);
return input;
}
function createBtn(id, displayName) {
var btn = document.createElement("button");
btn.setAttribute("id", id);
btn.innerText = displayName;
return btn;
}
<div id="container">
Also, if you have any general propositions for improvements I'd love to hear them!

Function not get called from dynamically created html code

I'am changing the html code from javascript and want to call same function from created "div"s. but it is not called.
As you can see 'html' which is formed after function invoke also has class="screen" but created 'div's doesn't support it.
var i;
var clear = 2;
$("#container").click(function() {
var clickid = $(this).attr('id');
var left = document.getElementById(clickid).offsetLeft;
var top = document.getElementById(clickid).offsetTop;
var height = document.getElementById(clickid).offsetHeight;
var width = document.getElementById(clickid).offsetWidth;
var x = document.getElementById(clickid).value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
document.getElementById(clickid).outerHTML = html;
//document.getElementById(clickid).unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>
Replace '$("#container").click(function() {' this line with '$("html").on('click', '[id*=container]', function() {'.
It will work for you.
var i;
var clear = 2;
$("html").on('click', '[id*=container]', function() {
var clickid = $(this).attr('id');
var left = this.offsetLeft;
var top = this.offsetTop;
var height = this.offsetHeight;
var width = this.offsetWidth;
var x = this.value;
orient = prompt("vertical or horizontal ?");
numdiv = prompt("How many divisions should be created ?");
var divsper = [];
var html = "";
for (i = 0; i < numdiv; i++) {
per = prompt("Percentage of " + (i + 1) + "th division ?");
divsper.push(per);
}
if (orient == "vertical") {
for (i = 0; i < numdiv; i++) {
l = Math.floor(left + ((i * divsper[i] * width) / 100));
w = Math.floor((divsper[i] * width) / 100);
html = html + "<div id=" + clickid + (i + 1) + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
}
this.outerHTML = html;
//this.unwrap();
}
});
* {
padding: 0px;
margin: 0px;
}
body {}
#container {
background-color: pink;
top=0%;
left=0%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="screen">
</div>
Try using $('#container').on('click') instead. Dynamically generated html event handling is slightly different.

Popup/panel does not appear at the right position through javascript

I have created a page where a list of members is shown. I created a Javascript function which shows the details of a user in a panel with id divpreview with position:absolute and z-index:100 the popup/panel does but I am not able to show it right above the the member.
<div runat="server" id="divpreview" class="preview">
</div>
<script type="text/javascript" language="javascript">
function showdiv(id, m, pos) {
var arr = new Array(7);
arr = id.split("###");
var divhtml = "";
divhtml += "<table border='1' style='background-color:#1C5E55;color:white;absolute' cellpadding='3' cellspacing='0'><tr><td>Sponsor Id</td><td>" + arr[0] + "</td></tr>";
divhtml += "<tr><td>Total Left Point</td><td>" + arr[1] + "</td></tr>";
divhtml += "<tr><td>Total Right Point</td><td>" + arr[2] + "</td></tr>";
divhtml += "<tr><td>Total Left Investment</td><td>" + arr[3] + "</td></tr>";
divhtml += "<tr><td>Total Right Investment</td><td>" + arr[4] + "</td></tr>";
divhtml += "<tr><td>Self Point </td><td>" + arr[5] + "</td></tr>";
divhtml += "<tr><td>Expiry Date</td><td>" + arr[6] + "</td></tr>";
divhtml += "</table>";
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").innerHTML = divhtml;
var left = m.clientX + 10;
if (pos == 1) {
left = m.clientX - 230;
}
else {
left = m.clientX + 10;
}
debugger;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "block";
var top = 0;
top = document.documentElement.scrollTop + m.clientY - 50;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
}
function hidediv() {
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.display = "none";
}
function movediv(m, pos) {
var left = m.clientX + 05;
if (pos == 1) {
left = m.clientX - 200;
}
else {
left = m.clientX + 10;
}
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.left = left.toString() + 'px';
var top = 0;
top = document.documentElement.scrollTop + m.clientY - 50;
document.getElementById("ctl00_ContentPlaceHolder1_divpreview").style.top = top.toString() + 'px';
}
</script>
I want the panel to appear near the stars. What should I do.
Use
position: relative;
to the parent div. Position absolute element will "stop" when finding the closest positioned relative or positioned absolute element.
use this style on divpreview
<div runat="server" id="divpreview" class="preview" style="position:absolute;z-index:999;">
</div>
position: absolute;
parent div Position 'absolute'.

Optimize part of javascript code

Could someone help me, how to best optimize below part of javacript code?
I want to make it lightest for browser, but I have no idea - I haven't huge knowledge about javascript.
if ($(window).width() > 1200) {
(function() {
var parallaxTop = document.querySelectorAll(".parallax-top");
if ($(".parallax-center").length) {
var parallaxCenter = document.querySelectorAll(".parallax-center");
var centerPosition = $(".parallax-center").position().top;
}
if ($(".parallax-bottom").length) {
var parallaxBottom = document.querySelectorAll(".parallax-bottom");
var bottomPosition = $(".parallax-bottom").position().top;
}
var speed = 0.4;
window.onscroll = function() {
[].slice.call(parallaxTop).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "center " + "-" + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
if ($(".parallax-center").length)
[].slice.call(parallaxCenter).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "center " + "" + ((windowYOffset - centerPosition) * speed + 1700) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
if ($(".parallax-bottom").length)
[].slice.call(parallaxBottom).forEach(function(el, i) {
var windowYOffset = window.pageYOffset,
elBackgrounPos = "center " + "" + ((windowYOffset - bottomPosition) * speed + 1400) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
}

Kinetic JS: Zoom an image and keep self build arrow (lines) at same position

Im trying to zoom an kinetic object(image) in and out (this works).
The problem is i also have an arrow (custom built consits of three lines).
So on the first step i move the arrow to a certain point of the image and when i hit the zoom in action, the image zooms (or sets its scale) corresponing to the zoom factor.
Problem: the tip of the arrow should stay on the same point as it was before the zoom action(on the image) but the arrow object itself shouldnt be zoomed.
Here is the code for my zoom action:
--//ZOOM IN
htp.p(q'! document.getElementById('P10005_ZOOM_IN').addEventListener('click', function() {
zoom_factor = document.getElementById('P10005_ZOOM_FACTOR').value;
console.log('zoom factor: ' +zoom_factor);
var scale = image.getScale();
console.log('scale: ' +scale);
console.log('whole ' + parseFloat(image.getScale().x)+parseFloat(zoom_factor));
//layer get x and y offset
var x;
var y;
var arrow_layer1 = stage.get('.ARROW');
arrow_layer1.each(function(arr) {
x = arr.getX();
y = arr.getY();
});
//arrow object
arrow_layer = stage.get('.arrow');
if(parseFloat(image.getScale().x)+parseFloat(zoom_factor) < 10)
{
console.log('image x before ' + image.getX());
x_coord = image.getX() + (image.getWidth()*image.getScale().x)/2;
y_coord = image.getY() + (image.getHeight()*image.getScale().y)/2;
var old_x = image.getX();
var old_y = image.getY();
var oldWidth = image.getWidth();
var oldHeigth = image.getHeight();
image.setScale((image.getScale().x)+parseFloat(zoom_factor),(image.getScale().y)+parseFloat(zoom_factor));
image.setPosition(
x_coord-image.getWidth()/2*image.getScale().x,
y_coord-image.getHeight()/2*image.getScale().y);
var x_pos;
var y_pos;
//inserting new arrow positions
arrow_layer.each(function(arr) {
console.log(arr);
console.log(arr.getPoints());
console.log(arr.getPoints()[3]);
console.log(x + ' ' + y);
var image_x = old_x;
var image_x_arrow = x;
var image_x_end = old_x+ oldWidth;
var image_y = old_y;
var image_y_arrow = y;
var image_y_end = old_y+oldHeigth;
console.log('x settings: ' + image_x + ' ' + image_x_arrow + ' ' + image_x_end);
console.log('y settings: ' + image_y + ' ' + image_y_arrow + ' ' + image_y_end);
var ratio = image_x_arrow-image_x;
console.log('x ratio: ' + ratio);
var rat = oldWidth/ratio;
console.log('x ratio: ' + rat);
var ratio_y = image_y_arrow-image_y;
var rat_y = oldHeigth/ratio_y;
var new_image_x = image.getX();
console.log('new x position: ' + new_image_x);
var new_image_x_end = image.getX() + image.getWidth()*image.getScale().x;
console.log('new image end: ' + new_image_x_end);
var new_image_y = image.getY();
var new_image_y_end = image.getY() + image.getHeight()*image.getScale().y;
var new_x = image.getWidth()*image.getScale().x/rat;
console.log('x len end: ' + new_x);
var new_y = image.getHeight()*image.getScale().y/rat_y;
x_pos = new_image_x+new_x;
// x_pos = new_image_x+ ratio*image.getScale().x;
console.log('new coordoinate: ' + x_pos);
y_pos = new_image_y+new_y;
// y_pos = new_image_y+ratio_y*image.getScale().y;
console.log(x_pos);
});
arrow_layer1.each(function(arr) {
arr.setX(x_pos);
arr.setY(y_pos);
});
document.getElementById('P10005_ZOOM_CURRENT').value = (image.getScale().x)*100;
stage.draw();
}
}, false); !');
Im trying to read the offset from the ARROW layer and store its variables.
Then .arrow will give me the arrow object.
I want to go with the relation of the distances from to "old" image and update it to the ztoomed image, but i think it doesn´t work
any suggestions?

Categories

Resources