Develop Reference

How to get sum of many div height using javascript?

HTML div contain dynamic data, For calculate div height i used
var pageSize = 990;
var clientHeight = 300;
clientHeight = document.getElementById('testing1').clientHeight;
var selector_classes = ['career_sum', 'exp_cal', 'ref_cal', 'port_cal', 'curri_cal', 'certi_cal'];
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
});
Testing is same id for div
That working fine. My question is how can i set style for those div which position greater than pagesize?
Can anyone help me?

You can check clientWidth of body
let pageWidth = document.body.clientWidth;
selector_classes.forEach(function(element) {
clientHeight = document.getElementById('testing').clientHeight + clientHeight;
if(clientHeight > pageWidth) element.style.color = "red";
});

Keep ratio of a div when the font size changes

I have a div with a fixed width and height and a font size of 16px like the following
<div id="mydiv" style="font-size:16px;height:40px;line-height:40px;width:160px;background:orange;text-align:center;">
hello world
</div>
I have an input text that allow changing the font size
<input type="text" id="input">
<button> change size </button>
JS :
$('button').on('click', function(){
var value = $('#input').val();
$('#mydiv').css('font-size', value + 'px');
});
If you enter a size of 30 for example the text will be out of the div, what I want to achieve is to keep the ratio, so when the font-size changes I want the div to change dimension keeping the aspect ratio. How I can do that ?
https://jsfiddle.net/mody5/x6t2dn3e/1/

You need to re-calculate the div width, height and line-height when you change its font-size. By updating just its font-size alone, nothing else will be changed.
$('button').on('click', function() {
var div = $('#mydiv');
// These methods return the value unit-less, so they'll be integers
// if defined.
var currentWidth = div.width();
var currentHeight = div.height();
// Parsing the values to make sure you got integers.
var currentFontSize = parseInt(div.css('font-size'), 10);
var currentLineHeight = parseInt(div.css('line-height'), 10);
var value = parseInt($('#input').val(), 10);
var newFontSize = value + 'px';
// Here we keep the ratio between width and height, considering
// the current and new font-size.
var newWidth = ((currentWidth * value) / currentFontSize) + 'px';
var newHeight = ((currentHeight * value) / currentFontSize) + 'px';
var newLineHeight = ((currentLineHeight * value) / currentFontSize) + 'px';
// Applying all the styles at once.
div.css({
fontSize: newFontSize,
width: newWidth,
height: newHeight,
lineHeight: newLineHeight
});
});
Demo

Why don't you just use em values ? This is exactly what it's used for: apply values relatively to a font-size…
.test {
font-size:16px;
height:2.5em;
line-height:2.5em;
width:10em;
background:orange;
text-align:center;
}
<div class="test">
hello world
</div>
Try change the font-size, you'll see all the div is growing. Use this website to help you calculate the good em values: http://pxtoem.com/
(And here's your update jsfiddle: https://jsfiddle.net/x6t2dn3e/9/ )

You could use a combination of inline-block and padding in your style.
Something like this:
display:inline-block;padding:15px
See updated fiddle here: https://jsfiddle.net/donal/p3hrctsf/2/
$('button').on('click', function(){
var value = $('#input').val();
$('#mydiv').css('font-size', value + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style="display: inline-block; font-size:16px;padding: 15px;background:orange;text-align:center;">
hello world
</div>
<br>
<input type="text" id="input">
<button>Change Font Size</button>

Accurate jQuery x y mouse click on image

I have a div with a background image - the div is set to the exact size of the image and my pointer is set to a crosshair over the div.
I want to mark each click with its x and y positions in the div over the image background. This I can do but the mark on the div is always lower and to the left of the actual cursor why is this?
function showClick(x,y)
{
$('.clickable').append('<span id="'+x+y+'_span" style="position: absolute;top:'+y+'px;left:'+x+'px;" class="red">+</span>');
}
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var offset = $div.offset();
var xMargin = ($div.outerWidth() - $div.width()) / 2;
var yMargin = ($div.outerHeight() - $div.height()) / 2;
var x = (ev.pageX + xMargin) - offset.left;
var y = (ev.pageY + yMargin) - offset.top;
showClick(x,y);
});
working example: https://jsfiddle.net/b94ypmae/3/

You are not taking into account the size of the span (and the character inside it).
Your code is working properly, in that a span is being placed in your div at the position of your cursor, but that position is based on the upper left corner
If you put a border around your span you can see it is a perfect alignment of your upper left corner: JSFiddle showing border
You could fix this by taking into account the size of the placed span(if you know it will always be the same you could hard code it as well). Here's an example of getting the size of the placed span and moving it by half it's width and height: Fixed JSFiddle
var placedSpan = $("#" + x + y + "_span");
var width = placedSpan.width();
var height = placedSpan.height();
placedSpan.css('left', x - width / 2 + 'px');
placedSpan.css('top', y - height / 2 + 'px');

Adapt width of texture to its content

I need to adapt the width of a textarea (='#overlay') to its content. The minimum width should be 100px:
'input #overlay': function(e) {
var overlay = $('#overlay'),
element = document.getElementById('overlay'),
pos = overlay.position(),
width = 100;
if (element.scrollWidth > element.clientWidth) {
var diff = Math.ceil((element.scrollWidth - element.clientWidth)/20)*20,
left = pos.left - (diff/2);
width = element.scrollWidth + diff;
overlay.css({left: left, width: width});
}
This code works to expand the textarea if there is a long line. But it can't be used to make it smaller if you delete some characters of the line.

You have to set the minimum value before the if-part:
overlay.css({ width: 100 });
Then the height will always be adapted to the needed height.

Centering via offset math doesn't work in non-webkit browsers

The code: http://jsfiddle.net/LPF85/6/
In FF, IE7, and IE9 (the only browsers I've tested that don't run WebKit), it seems that the left attribute is either always set to 0, or, in IE's case, negative.
My positioning code is all based off the dimensions of the document.
function open_img_in_face_box(id, width){
max_width = $j(document).width();
max_height = $j(document).height();
padding = 150;
passed_width = width || (max_width - (2 * padding));
var img = $j('#' + id);
dom_img = document.getElementById(id);
$j(document).bind('reveal.facebox', function() {
$j("#facebox .image img").width(passed_width);
})
// display
jQuery.facebox({
image: img.attr('src')
});
// center and adjust size
var aspect_ratio = img.width() / img.height();
var img_width = passed_width;
var img_height = passed_width / aspect_ratio;
window_center_y = max_height / 2;
window_center_x = max_width / 2;
offset_y = window_center_y - (img_height / 2);
offset_x = window_center_x - (img_width / 2);
var fbx = $j('#facebox');
fbx.css('position', 'absolute');
fbx.css('left', offset_x + 'px !important');
fbx.css('top', offset_y + 'px !important');
fbx.css('margin-left', 'auto');
fbx.css('margin-right', 'auto');
}
margin-left and margin-right don't appear to do anything here, which I'm fine with, because the left math should work across all browsers, right? (It is just math)
The goal of the facebox / lightbox, is to be centered both horizontally and vertically.

Why would you even programatically calculate the position in the first place? What if the user resizes the page? This can easily be done in pure CSS.
I don't really understand your jsFiddle (or am I not seeing the same thing?) so I'll just give you this script: http://jsfiddle.net/minitech/8U4Ke/ that can be modified however you like. It's commented. ;)
Now it's easy to hide and show - to hide, fade out .overlay. To show, fade it in. To change the contents, replace the HTML in .popup. Add close boxes and whatnot liberally.