We Keep Coding

JS - Div on center screen

I have this problem I have a hidden div in css. when i click a button the div is shown. But I would like it to be shown in the center of the screen, and in the position I am in. Let me explain, if I am in the middle of the page I would like to show it in the middle of the page and in the center (vertical and horizontal), if I am at the end of the page, I want to show it at the end of the page in the center.
I need to do this in js.
With this function I can do something, but the div is shown in the center of the page and I am moved to the center, while I would not want to move from the position I am in, and open the div in the center of the screen
function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){
parentWidth = $(parent).width();
parentHeight = $(parent).height();
elementWidth = $(element).width();
elementHeight = $(element).height();
if(!ignoreWidth)
$(element).css('left', parentWidth/2 - elementWidth/2);
if(!ignoreHeight)
$(element).css('top', parentHeight/2 - elementHeight/2);
}
Can you help me?
Thank you

try this solution, Francesco
let centerY = $(window).scrollTop() + ($(window).height() - element.height())/2;
let centerX = $(window).scrollLeft() + ($(window).width() - element.width())/2;
element.offset({top:centerY, left:centerX});
in my case it works in a similar task as it should

How to get height from the top of the div (not window) for each item and apply to another div

I want to apply margin top based on tab click. When TAB 4 is clicked the content need to be in same position from top.

You should get the to position of the clicked tab. When you have that, you can apply a style to the content. You can obtain the position of the tab with Element.getBoundingClientRect(). That will return the left, top, right, bottom, x, y, width and height properties of the element.
One ceavat:
Properties other than width and height are relative to the top-left of
the viewport.
So you should take the scroll position into account. You can obtain that by Window.scrollY.
The position of the element from the top would be:
element.getBoundingClientRect().top + window.scrollY
With that information you can apply a style like:
var tabTopOffset = myTabElement.getBoundingClientRect().top + window.scrollY;
// var myContent = document.getElementById('#my-tab');
var myContent = document.querySelector('.my-tab');
myContontent.style = tabTopOffset + 'px';

This works perfectly
$(document).ready(function(){
// Select and loop the container element of the elements you want to equalise
$('.tabs').each(function(){
$('.tab', this).click(function(){
var fromTop = $(this).offset().top;
var href = $(this).children('a').attr('href');
var newhref = href.substring(1);
$('#'+ newhref).css('margin-top', fromTop);
});
});
});

Updating (style.top) position of a floating menu with Javascript

I'm doing a floating menu with JavaScript, is suppose to stay in the same position no mater if the user scrolls down or resize the window.
So far it is working just fine with X position. However, I can't find a way to make it stick to a position relative to the visible top of the window. The problem is when I scroll down the menu disappear because it keeps its distance related to the window size.
my code is:
menuPosition : function (){
var windowHeight = document.body.clientHeight;
var windowWidth = document.body.clientWidth;
var xPosFloatingMenu = (windowWidth) - (fMenuWidthGlobal + fMenuXPosGlobal);
var yPosFloatingMenu = (windowHeight) - (windowHeight - fMenuYPosGlobal);
document.getElementById("floating_menu").style.left = (xPosFloatingMenu) + "px";
document.getElementById("floating_menu").style.top = (yPosFloatingMenu) + "px";
},
updateMenuPosition : function () {
var menuPositionInterval = setInterval(gala.create.menuPosition,1);
}
Is there a way to keep the menu position update relative to the visible top of the window?

You have to update the style properties of your floating_menu element on the window scroll Event .
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

How to display element on screen but not at the top of the screen in html/css?

I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!

var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.

I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);

jQuery .height() not functioning correctly

I am trying to center a Modal Window on the screen (Which works completely fine), apart from when I'm adding content to it via jQuery and THEN getting it's width & height to center, it will always output the height as 0 instead of it's intended height. Here's my code:
// Now to use the Data and add it to the Modal Window...
$('#portfolioModal .inner .data').html('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '');
var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height
alert(modalHeight);
var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment
$('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
'left': left,
'top': top
});
Modal HTML:
<div id="portfolioMask">
<div id="portfolioModal">
<div class="inner">
<div id="portfolioModalClose">Close</div>
<span class="data"></span>
</div>
</div>
</div>
Any help is appreciated!

If the div is hidden (display:none) when you fire the jQuery height() - it will always return a height of 0. I believe this is due to it not actually taking up space on your page - meaning its not really a part of it without being displayed. If you want to keep the div hidden, but want to get the height I recommend using the following CSS:
position:absolute;
visibility: hidden;
Using visibility hidden will make the element take up space in the dom but keep it from being visible - so it will have a height. Using position of absolute will pop it out of your actual page, so its not forcing content on your page to get pushed around by its height / width.
I personally also like to add a
left: -30000px;
I've found that some older IE's don't play well with this work around and floating the divs off the page ensures they're not visible.

IS the dialog in a div? If it's a span, it will always return 0.

Try $('#portfolioModal').css('height');
Update:
// Now to use the Data and add it to the Modal Window...
$('#portfolioModal .inner .data').append('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '', function(){
var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height
alert(modalHeight);
var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment
$('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
'left': left,
'top': top
});
});

You have to specify pixel in left and top variable.
var left = (1024 / 2) - (modalWidth / 2) + "px";
var top = (768 / 2) - (modalHeight / 2) + "px";
$('#portfolioModal').css({
'margin-left': left,
'margin-top': top
});