We built a broadcast player that pops-up with the window.open script:
onclick="window.open('Media-player.html','player','scrollbars=0,width=360,height=655')"
The problem is, when someone zooms into the the player (or the parent frame for that matter) the pop-up window does not resize with it and the player overlaps within the window and some parts become hidden.
Is there any way to resize the window to fit it's contents when users zoom in? Would like to avoid enabling the scroll bars or just making the dimensions bigger. Thanks.
There is no way to know if a user has zoomed the browser, but there are some tricks to try to detect it.
See this thread: Catch browser's "zoom" event in JavaScript
Related
I have an idea for a layout. When users first load a page. The content will be display full window height. But when users resize the window, it will add a vertical scroll bar to view the full window height.
To put into another, it is like I want to keep the full height window when users resize the window.
Example, initially the window full height is 1600px, and then when users use a mouse to resize the window to 1000px for example, I want the content still 1600px and a scroll bar is added to help users view the content.
And if users open the window initially at let's say the smaller screen 800px height. I want it first make full height but then when users resize the content will fit the resize window.
Am I confused about my idea but is it possible to do so?
If you mean zoom when you say resize and mouse. You can use
window.resize = function() {
//will be called whenever the window changes size. I.E zooming in or changing the window size manually
}
To pick up that behaviour, but the best approach I believe would be the place the content you wish to have this property into a div wrapper. As that way you can set the size manually.
Hope that helps
Let's do it by steps:
are you using any framework ?, Frameworks generally use the window's resizing base, the percentage of the window used, so it will adapt whenever the user decreases or enlarges the screen, if you want the static screen when resizing, change the css attributes of your framework, or create your layout with pixel or hexadecimal from scratch. To create an adaptive window on the first access and then leave it static, first you have to put your highest value DOM element (html, or window) in css, and the other elements you leave in pixel values, if you need , also use the "position: fixed" attribute.
We want to change the position and height of the chrome extension window when we click the extension icon in the browser.
The extension is not popup window.
We are going to do it using Javascript. Can you give me some codes please on how to do this?
Not sure why if the popup window isn't in use at all, you'd care about its dimensions and location. Why show it?
That being said, height and width can be changed. Simply set them in css for html and body elements. If by changing position you mean that upon click the popup would open in the center of the screen (for example), as far as I know, this cannot be done. It must point to the extension's icon.
I am developing a widget for mobile web - that contains several elements, like images icons and texts.
I am looking for a way to assure all stay in the same size when screen is in focus.
is there a way to tell have 20px icon have the same relative size on every zoom in?
You could use window.onresize, recalculate the target elements dimensions when the window dimensions change
JavaScript window resize event
so I have a set of images that on a big screen are not using the image slider. And when the screen goes below a certain width, the image slider is initiated.
At the moment, when I resize the window manually and play around dragging the size around it works well.
But, if I resize the window to a small size and hit F5 then what should happen is that the page automatically recognises that it needs to initiate the image slider. What does happen is that the images load like this below and not an interactive image slider.
So the problem is that if the page is already under 939 then the bxSlider functionality doesn't work. It will put the images into a bullet-pointed list as below without actually adding the interactivity. It will also not deactivate the bxSlider when the screen is resized to above 939.
It sounds like you're using the resize event to trigger your code. The reason that doesn't work when you refresh at a small size is that after the page loads, you don't resize it again, so the resize event doesn't fire.
Resizing only triggers when you manually grow/shrink the browser, without refreshing the page.
To fix it, just trigger your current function on first page load (I can't see the code here, but presumably it checks the current browser dimensions and updates the page accordingly? If so, entirely safe and sensible to run at the start of page load).
try changing this
$(window).resize(checkWidth);
to
$window.on('resize', function() {
checkWidth();
});
When I open a popup window with large content in IE, the popup window comes with a scrollbar to fit the content. But when I maximize the page in that case it also remains the same. It is a page with frameset and frames. So is it possible the resize the frame?
Check the below link. its very useful your question
Resizing an iframe based on content
Here Frame Resize the depends upon the content. Then you can make it
window.onresize
The popup is shown wanted size. May be you feel complex to give particular size of window.
Try to make resize same time of frame resizing.
I Hope its helps to you