Develop Reference

Dynamic bottom value based on element position in browser

I am attempting to adapt this JS solution to keep a floating element above the footer of my site.
The adaption I am attempting is instead of changing the element position to absolute, I would have a dynamic bottom px value based on the position of the top of the footer, relevant to the client window.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el){
var rect = el.getBoundingClientRect();
return rect.top;
}
if((getRectTop(onlineFloat) + document.body.scrollTop) + onlineFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 20)
var newBottom = ((getRectTop(footer) + document.body.scrollTop) - 40).toString().concat('px');
onlineFloat.style.bottom = newBottom;
if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
onlineFloat.style.bottom = '20px';// restore when you scroll up
}
document.addEventListener("scroll", function(){
checkOffset();
});
The output of newBottom is currently a px value which changes on scroll, however, I am having issues setting this position to the element.
Where am I going wrong? Thanks.

With your approach (changing the bottom property), you can just calculate where the "float" should be if the footer's top position is in view (as in window.innerHeight) on scroll.
function checkOffset() {
var onlineFloat = document.querySelector('#online-ceo');
var footer = document.querySelector('.site-footer');
function getRectTop(el) {
var rect = el.getBoundingClientRect();
return rect.top;
}
var newBottom = 10 + (getRectTop(footer) < window.innerHeight ? window.innerHeight - getRectTop(footer) : 0) + 'px';
onlineFloat.style.bottom = newBottom;
}
document.addEventListener("scroll", function () {
checkOffset();
});

tool-tip positioning inside the canvas

I am trying to position tool-tip inside the canvas
.this is the code i have got for postion and displaying.
`var position = this._chart.canvas.getBoundingClientRect();
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = (position.left + window.pageXOffset + tooltipModel.caretX) + 'px';
tooltipEl.style.top = (position.top + window.pageYOffset + tooltipModel.caretY) + 'px';`

Offset fixed div from top and bottom

I have a fixed div on the right side of my page. I have it set up to scroll with the page and not overlap the footer and it works great. The problem is that it overlaps the nav when scrolling up. Is there any way to have it work for both? I tried to create a new function
function checkOffset() {
var a = $(document).scrollTop() + window.innerHeight;
var b = $('#footer').offset().top;
if (a < b) {
$('#social-float').css('bottom', '10px');
} else {
$('#social-float').css('bottom', (10 + (a - b)) + 'px');
}
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);
<nav class="nav">Nav Sample</nav>
<div id="social-float">
<div class="sf-twitter">twitter</div>
<div class="sf-facebook">facebook</div>
</div>
<div id="footer">footer sample</div>

Here checkout this fiddle for the solution.
I have added debug text on the page and also considered the fact that nav-bar might be offset due to other divs at the top.
/**
* This function checks for both top and bottom edges to position itself
* on the page
*/
function checkOffset() {
var documentTop = $(document).scrollTop();
var currentScrollOffset = documentTop + window.innerHeight;
var footerOffset = $('#footer').offset().top;
var navbarEffectiveHeight = $('.nav').outerHeight() + $('.nav').offset().top;
var $fixedElem = $('#social-float');
var fixedElemHeight = $fixedElem.outerHeight();
// until page scroll crosses navbar bottom edge (offset)
if (currentScrollOffset < navbarEffectiveHeight) {
$fixedElem.css('top', (currentScrollOffset + 10) + 'px');
$fixedElem.css('bottom', 'unset');
// page scroll crossed navbar bottom edge but not to extend of the height of fixed div
// including the top and bottom spacing for it which is 20px
} else if (currentScrollOffset < navbarEffectiveHeight + fixedElemHeight + 20) {
$fixedElem.css('top', (window.innerHeight - (currentScrollOffset - navbarEffectiveHeight) + 10) + 'px');
$fixedElem.css('bottom', 'unset');
// page scroll hasn't crossed footer top edge (offset)
} else if (currentScrollOffset < footerOffset) {
$fixedElem.css('bottom', '10px');
$fixedElem.css('top', 'unset');
// page scroll crossed footer top edge (offset)
} else {
$fixedElem.css('bottom', (10 + (currentScrollOffset - footerOffset)) + 'px');
$fixedElem.css('top', 'unset');
}
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

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');

Move background-position x px to left/right according to mouse movements (starting from background-position:center)

I'm trying to create a jQuery script that changes background-position x px to the left or right according to mouse movements (starting from background-position:center).
Here's what I have so far: http://jsfiddle.net/multiformeingegno/KunZ4/530/
$("#salone").bind('mousemove', function (e) {
$(this).css({
backgroundPosition: e.pageX + 'px ' + e.pageY + 'px'
});
});
Problem is it doesn't start from background-position:center and when I move the mouse the background-image starts from mouse position and reveals the white background.
I'd like it to move from the center to the left/right according to mouse movements. And also adjust the speed of the background-position change (animate?).

Just subtract the position you want to start from:
backgroundPosition: (e.pageX-650) + 'px ' + (e.pageY-410) + 'px'
to change the speed adjust the factor for the mouse position:
backgroundPosition: (e.pageX*2-650) + 'px ' + (e.pageY*2-410) + 'px'
Is double as fast.
http://jsfiddle.net/KunZ4/538/
For the calculation of the background center you could just take the image path, append it to an invisible image and get the width and height.
var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
scope = this;
bgImg.bind('load', function()
{
scope.height = $(this).height();
scope.width = $(this).width();
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
var centerX = scope.width/2;
var centerY = scope.height/2;
No you can use centerX and centerY to center your image.
Took the center calculation from here:
How do I get background image size in jQuery?