JS - Div on center screen - javascript

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

Related

Calculating pixels from bottom of element

I'm trying to create a scroller which loads content when the user nears the bottom of an element however I'm struggling with calculating the current distance from the bottom of the element #grid when the user scrolls.
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scroll);
$('.scroll').html(bottom);
});
The .scroll element displays the value although it doesn't seem to be giving correct numbers. Any ideas, I've come to a stand still. I seem to be getting the distance from the top of the window to the bottom of the container, not from the current scroll position?
Top of page
Scrolled down
You need to add the height of the window too.
$(window).scroll(function (event) {
var scrollBottom = $(window).scrollTop() + $(window).height();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scrollBottom);
$('.scroll').html(bottom);
});
If bottom is negative by less than the window height, then the bottom of the #grid div is visible on the screen.

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

Arrows navigation based on which section are you in

Does anyone know if there exists a plugin or similar to achieve navigation like on this website: http://discover.store.sony.com/tablet/#entertainment
I am talking about up and down arrows that appear when hovering over top pr bottom part of the screen.
In theory, this shouldn't be too difficult to write yourself. Here's a starting point to achieve the arrows when hovering over certain parts of the page. You would just need to handle attaching specific links to the arrows depending on which section the user is currently looking at.
See the comments for more details.
Fiddle
Note that in the Fiddle I have used event.pageX and event.pageY to get the current mouse position, but in reality you should use event.screenX and event.screenY. Because the demo in the fiddle is embedded as a small window into the actual page, using the latter would not work.
// Define how wide the areas should be
// where the arrow appears
var top_nav_height = 70;
var bottom_nav_height = 70;
// Get some dimensions
var page_height = $(document).height();
var half_arrow_size = $('.uparrow').width() / 2;
// Listen to the user moving their mouse
$(document).mousemove(function(event) {
// Where is the mouse?
var pos_y = event.screenY; // Distance from top of the page
var pos_x = event.screenX; // Distance from left of the page
var in_area;
// Leave a 5px space to hide the arrows when
// the pointer moves outside of the page
if (pos_y <= top_nav_height
&& pos_y > 5) {
in_area = 'top_nav';
}
else if (page_height - pos_y <= bottom_nav_height
&& page_height - pos_y > 5) {
in_area = 'bottom_nav';
}
// Show the arrow when in a nav area
switch(in_area) {
// We are in the top nav area
case 'top_nav':
// Show the .uparrow and have it follow the mouse
$('.uparrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We are in the bottom nav area
case 'bottom_nav':
// Show the .bottomarrow and have it follow the mouse
$('.bottomarrow')
.show()
.css({
top: pos_y - half_arrow_size,
left: pos_x - half_arrow_size
});
break;
// We aren't in a nav area
default:
// Hide both arrows
$('.uparrow, .bottomarrow').hide();
}
// Decide where the arrow should link
});
To handle the links, I guess you could also have a separate set of arrows on each section of your page, so the targets they link to can pretty much be hardcoded.

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

Categories