jQuery popup resize on phone

I have a small problem with a popup image displaying on a mobile browser. The popup is displayed on a mouse click and then a resize function sets the size according to the viewport size.

This works fine and is centred in the viewport when opened, but when I tilt the phone to landscape I call a resize function but it doesn't seem to work properly as the newly resized image is off centre in the viewport, this is then repeated when the phone is returned to portrait mode. I have tested the code on android chrome browser.

The resize function I have used is as follows:

$(window).resize(function () {
    $(".dialogContent").css({
        position: 'absolute',
        left: ($(window).width() - $(".dialogContent").outerWidth()) / 2,
        top: ($(window).height() - $(".dialogContent").outerHeight()) / 2
    });
});

Answers


Sorry about posting as an answer but I still can't comment yet.

Based on what you have said I am a little confused about the mouse click portion of your code. Surly the resize function is not being called when the user clicks the button for the first time. so are you sure that it is working he way you want at all?

To answer your question with a limited amount of understanding of what your code looks like

it should be something like:

 $(".dialogContent").css({
    position: 'absolute',
    left: '50%',
    'margin-left': $(".dialogContent").outerWidth() / 2,
    'margin-top': $(".dialogContent").outerHeight() / 2,
    top: '50%'
});

From my understanding to centre align positioned absolute you set it's top and left to 50% and then offset the positioned absolute element by half.

Now that I'm home I can make you a fiddle here


Need Your Help

Incorrect syntax near '\'

c# sql

I need to write a program that iterates through a few SQL scripts at a specific path location and executes them. The progress will be incremented on a progress bar, which I still need to do, and the

android tesseract ocr force close

android ocr tesseract

I am developing an app that using tesseract android library functions. I succesfully compile the tesseract library and imported to my workspace. then I add the library reference to my app.But this ...