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
});
Related
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
I try to center a modal window into browser window (I am doing test on Firefox, Chrome and Opera).
You can test it by clicking on this link and after clicking one more time on image at the center: the modal window should appear (it is empty, I removed the components into this modal window).
To center the modal window into browser window, I did :
// Width and Height of WebGL window : 90% of browser window width
var mainWidth = 0.9*$(window).width();
// Height deduced from starting image : 490/900 is the ratio of starting image, so I keep proportions.
// image
var mainHeight = mainWidth*(490/900);
And after :
// Padding and Margin
var paddingLeft = parseInt($('.popup_block').css('paddingLeft'));
var paddingTop = parseInt($('.popup_block').css('paddingTop'));
var borderLeft = parseInt($('.popup_block').css('borderLeftWidth'));
var borderTop = parseInt($('.popup_block').css('borderTopWidth'));
// Compute x and y limits for pop up
var xPop = ($(window).width() - (mainWidth + paddingLeft + borderLeft))/2;
var yPop = ($(window).height() - (mainHeight + paddingTop + borderTop))/2;
Finally, I make appear modal window with :
// Make appear pop-up and add closing button
$('#'+popID).fadeIn().css({'width': mainWidth, 'height': mainHeight, 'top': yPop, 'left': xPop}).prepend('<img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
// Display background
$('body').append('<div id="fade"></div>');
// Working only for background
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
with '#'+popID the jQuery id of modal window.
I need help about this slight shift on the right (empty space is larger on right side than on left side): did I forget another parameter (padding, margin, border ...) to take into account?
.popup_block has full padding and borders all around, but you're only grabbing the left padding/border and top padding/border values and using that to absolutely position the element using top and left properties, so the element will actually display a little wide on the right/bottom sides since the right/bottom padding/border weren't accounted for when positioning the element.
Since the padding/border is uniform all around, you can just double the paddingLeft, borderLeft, paddingTop, borderTop values.
var xPop = ($(window).width() - (mainWidth + (paddingLeft * 2) + (borderLeft * 2)))/2;
var yPop = ($(window).height() - (mainHeight + (paddingTop * 2) + (borderTop * 2)))/2;
How do I center a loading icon on a page that contains an iframe ?
The iframe height is variable and it contains a table with some editing buttons such as Edit Delete. When one of the buttons is pressed, while the ajax call is working, I want to center the loading icon on the center of the screen, but instead it is centered on the center of the iframe, that depending on the data available ,the height could be anywhere between 1024px to 6000px. I'm using blockUI - jQuery for the loading icon. My CSS is the following :
var topOffset = $(window).height() / 2;
var leftOffset = $(window).width() / 2;
var style = {
position: 'fixed',
top: topOffset,
left: leftOffset
};
I'm setting it to the the blockUI via jQuery.
Any thoughts ?
Update
Found the answer:
var topOffset = screen.height / 2;
var leftOffset = screen.width / 2;
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);
I want to achieve something like this:
I have a div, which width is not specified, so it changes basing on the content it has. First of all, I want to calculate that div's width. After that, I would like to add css style with jquery, which will margin that div left half of its width. So, if the div's width is 300px, I want this css added to the same div:
margin-left: -150px;
I hope I was clear. Thanks a lot.
use this code:
// get div width
var width = $('div').width();
// calculate margin size
var marginLeft = width / 2;
// set css
$('div').css('margin-left', -marginLeft);
var w = $("#left-shunted-div").width();
var left_mar = -(w/2);
$("#left-shunted-div").css("margin-left",left_mar);
You could simply do it like so:
// After dom load
$(function(){
// Select the div
var div = $('#myDiv');
// Get the width;
var width = div.outerWidth();
// Change the margin-left to half negative
div.css({'marginLeft' : -(width / 2) + 'px'});
});