How can I make a dialog box center in the window? - javascript

I resized my jQuery UI dialog box like this:
height: $(window).height(),
width: $(window).width(),
But now It's no longer in the center of the window. Is there some way I can make it become centered?

Try below function- change the variable as per requirement
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
console.log("The calculated position is:");
console.log(top,left);
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
console.log('A jQuery selection:');
console.log($('#lightbox'));
}

Specifies where the dialog should be displayed. Possible values:
1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).
Code examples
Initialize a dialog with the position option specified.
$( ".selector" ).dialog({ position: 'top' });
Get or set the position option, after init.
//getter
var position = $( ".selector" ).dialog( "option", "position" );
//setter
$( ".selector" ).dialog( "option", "position", 'top' );
position : 'center'

If the dialog box uses absolute positioning, you can try this after resizing:
$('#dialog').animate({
'top' : ($(window).height() - $('#dialog').outerHeight()) / 2 + $(document).scrollTop(),
'left': ($(window).width() - $('#dialog').outerWidth()) / 2 + $(document).scrollLeft()
});
this will move the dialog box to the center.
Otherwise, in case the dialog box uses fixed positioning you can omit the $(document).scrollTop() and $(document).scrollLeft() from the calculation

Related

Popup should display on top of element if no proper space in bottom

I want to display the popup on the top of element if there is no proper space on the top. Currently it hides inside the window as seen in the image below:
I can update the top position but I only want when there is no proper space otherwise it is ok.
Please let me know how to determine if the clicked position in near window edges.
JSFiddle Link :http://jsfiddle.net/g4g4negf/
Code I am using to get the position:
$(document).ready( function() {
$('.clickme').on('click', function(e) {
$('#popup').offset({ top: e.pageY, left: e.pageX}).fadeIn();
});
Check out this JSFiddle
To check if clicked position is near window edge, you have to get window's height ($(window).height()) and scroll position (window.pageYOffset). By adding these two values, you can find the scrolled position of the window. Then compare this sum with e.pageY+$("#popup").height() (this is the sum of the clicked position's height and the popup's height). If the latter is less than the former, it means the popup can be shown. If (e.pageY+$("#popup").height())>($(window).height()+window.pageYOffset) it means the popup will overflow the window's bottom border, then its top offset should be changed to e.pageY-$('#popup').height().
Here is the complete function:
$('.clickme').on('click', function(e) {
var h;
if((e.pageY+$('#popup').height())<($(window).height()+window.pageYOffset)) h=e.pageY;
else h=e.pageY-$('#popup').height();
$('#popup').offset({ top: h, left: e.pageX}).fadeIn();
});
Considering your popup height is 100px, you can try this...
$(document).ready( function() {
var h = window.innerHeight;
$('.clickme').on('click', function(e) {
alert(h + ", " + e.pageY);
if( h - e.pageY < 125) {
$('#popup').offset({ top: h-125, left: e.pageX}).fadeIn();
}
else {
$('#popup').offset({ top: e.pageY, left: e.pageX}).fadeIn();
}
});
});

Modal window slightly shifted on right side

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 set element alignment according to window size

I want to set the pop up according to window size , alignment like top-left ,top-right, center ,bottom-left ,bottom-right ,bottom-center .how can we set element according to browser window
but the these things fails if i want to select bottom left position .my pop up goes out of window .
example : top : 5% according to window size
left: 45% according to window size
$(id).css('top', '5%');
$(id).css('left', '45%');
i also want to know .what is the meaning of
winH/2-$(id).height()/2
You can do the following to change an elements css on resize:
winH is the window size
winH/2-$(id).height()/2 is window size divided by 2 subtract chosen div height divided by 2
$(window).resize(function()
{
var winH= $(window).height();
if (windowHeight > 400)
{
$(".testDiv").css({
"height" : "20%",
"width" : "20%",
"margin-left": "45%",
"margin-top" : "5%"
});
}
});
JSFIDDLE EXAMPLE

integrate jquery ui slider with my existing script that zooms image

i implemented this javascript that let's you zoom in and out an image into a fixed width div with overflow hidden. i initially implemented it with two simple buttons (increase/decrease) that, onclick, would increase or decrease the width of the contained image.
what i would like to do now is to substitute the buttons with the vertical jquery ui slider but i don't how to do it.
here's my starting point: http://jsfiddle.net/omegaiori/QWfHE/embedded/result/
basically the zoom in/out properties are obtained by this code:
function zoomIn() {
var imgElem = jQuery(".image");
width = width*1.1;
height = height*1.1;
imgElem.css({"width": width + "px", "height": height + "px"});
imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}
function zoomOut() {
var imgElem = jQuery(".image");
width = width/1.1;
height = height/1.1;
imgElem.css({"width": width + "px", "height": height + "px"});
imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}
can anybody help?? that would be so cool :)
thanks in advance
http://jsfiddle.net/bhilleli/QWfHE/1/
Your example was almost there. Just use this as your slide function:
slide: function( event, ui ) {
var prevVal=$( "#amount" ).val();
var newVal=ui.value;
if (prevVal>newVal) {
zoomOut();
} else {
zoomIn();
}
$( "#amount" ).val( ui.value );
}

How to reposition a relative DIV using left/top?

I have a div with the attribute position: relative;. Now, there are three of these divs. They all get a unique ID etc.
Now if I click a div, I want it to animate to a certain position in the document. Although I cannot determine the left/top values since if I use "top" and "left", it will relatively set the left to its parents position.
Maybe a bit unclear, but here is what I got.
The CSS of the clickable DIV that will move.
div#left_hldr .switch_project {
z-index: 1001;
position: relative;
margin: 10px 0px 0px 0px;
cursor: pointer;
}
// Open project.
$(".switch_project").live('click', function() {
// Get the ID value.
var More_Id = $(this).attr("id");
// Explode the Id.
var Id_Split = More_Id.split("_");
// Get the project ID.
var Project_Id = Id_Split[2];
/*
Replacement of the switch project div.
1 ) Define the current position.
2 ) Define the new position.
3 ) Replace the DIV to the new position.
4 ) Fade the new page in.
5 ) Put the DIV back to its original position.
*/
// Current Position.
var Ori_Left = $(this).offset().left;
var Ori_Top = $(this).offset().top;
// New Position. [ Based on the content_hldr container ]
var New_Top = $("div#content_hldr").offset().top;
var New_Left = $("div#content_hldr").offset().left;
// Define the current div.
var Div_Rep = $(this);
// Hide the More Info tab.
$(Div_Rep).children(".more_info").fadeOut("fast");
// Fade content out.
$("div#content_hldr").fadeOut("fast");
// Replace the div.
$(Div_Rep).animate({
top: New_Top,
left: New_Left
}, "slow", function() {
// Load Home page in.
$("div#content_hldr").load("content/content.projects.php?id=" + Project_Id, function() {
// Re-define Cufon.
Cufon.replace('h2');
});
// Fade in the content.
$("div#content_hldr").fadeIn("fast", function() {
// Hide the replaced div.
$(Div_Rep).hide();
// Replace it back to its position.
$(Div_Rep).css({
top: Ori_Top,
left: Ori_Left
});
// Show the More Info tab again.
$(Div_Rep).children(".more_info").show();
// Fade back in.
$(Div_Rep).fadeIn("medium");
});
});
});
...it will relatively set the left to its parents position.
Actually, no. If you use left and top with a position: relative element, they'll offset it from where it otherwise would be if it weren't positioned (e.g., in the static flow), while continuing to reserve its space in the static flow. A subtle but important distinction (and hugely useful for drag-and-drop).
If you want to animate it to the top left of the document, you can figure out its offset (via offset), and then provide those as negative numbers for left and top, since of course if it's at (say) [100,50], then positioning it at [-100,-50] compared to its default position will...put it at [0,0].
Like this:
$("selector_for_your_divs").click(function() {
var pos, $this;
$this = $(this);
pos = $this.offset();
$this.animate({
left: "-" + pos.left + "px",
top: "-" + pos.top + "px"
});
});
Live example
Similarly, if you want to move it to be where another element is, simply subtract its position from the other element's position — that gives you the delta to apply:
$("selector_for_your_divs").click(function() {
var mypos, otherpos, $this;
// Move to the target element
$this = $(this);
pos = $this.offset();
otherpos = $('selector_for_other_element').offset();
pos.left = otherpos.left - pos.left;
pos.top = otherpos.top - pos.top;
$this.animate({
left: pos.left + "px",
top: pos.top + "px"
});
});
Live example

Categories