CODEWITHSUNDEEP
javascriptjquery
Gokhan Arik
Gokhan Arik

Reputation: 2766

Setting size of popup page to the size of selected div

I am opening new popup page using window.openand I want to make size of new page same size of a specific div and I want my page to focus on this div.

For example I have this structure,

<html>
<head></head>
<body>
    <div id="main"> 
        <div id="top"></div>  
        <div id="bottom"></div>
    </div>
</body>
</html>

When I open my new popup page, I want new window just show the div with the id=top

I can do that calculating size of div and scrolling page to div I guess, I want to ask if there is easier way.

Thanks for your time

Upvotes: 1

Views: 2480

Answers (1)

Sorter
Sorter

Reputation: 10220

var divHeight = $("#top").height();
var divWidth = $("#top").width();

var w=window.open('','', 'width=0,height=0');
w.resizeTo(divWidth, divHeight);
w.focus();

Here's the demo: http://jsfiddle.net/deepakpmishra/KaAas/3/

Resize the result window and the popup window size changes.

EDIT

You can resize the div to fit the window, but cannot do it other way around.

The div that needs to be created inside popup, its dimensions should be predefined. So that the popup window size and div size can be of the same size. Make top div fit screen in the popup.

#top
{
width: 100%;
height: 100%;
}

And specify a suitable size of the popup when creating it. Lets say,

var w=window.open('','', 'width=100,height=200');

You have to use $("#top").focus in the popup for focusing on the div. And the popup contain the address of the html code you have provided in the question.

Upvotes: 1

Related Questions