i have an image and i have placed markers on it.
problem is that when the browser window resizes, the image size also changes and thus the marker comes to a different position than where it was before.
so, i want to find out the new positions and dimensions of the image after the browser window size changes.
I want to find out the new dimensions of the image, but nothing has worked till now.
i have used clientWidth , offsetWidth, naturalWidth and it all shows the same width before and after the window resize.
(I actually have a zoom property too and it shows the same width even after using zoom), so I am not sure what's wrong?
how do I find out the new image height width and positions after it is zoomed or after the browser window size is changed?
Trigger an event on window resize and find the image height
window.addEventListner("resize",function(){
var img = document.getElementById("img1");
console.log(img.clientWidth);
}
Related
I am trying to show a diagram of products with the image to scale. I have the image element sized with a width and min-width set to the correct width for the image.
I have an 'resize' event listener triggering my zoom on the image element to equal a correction factor:
const ratio = (window.innerWidth / window.outerWidth)
This works acceptably except when the browser vertical sidebar is open.
I searched here and could not find a property to show me sidebar width or to accurately detect zoom level in all browsers. I can use window.devicePixelRatio but that is not working in mac safari.
Would a canvas or svg element offer me some opportunities here i don't see?
Perhaps the best is just to have a input type='range' element next to the image to allow calibration to common object such as a credit card or coin.
Am I mistaken in thinking that if my picture is correct at 600px on my machine that it can be rendered universally in the browser with css width settings?
Thanks alot for any reflections
I'm working on an AIR desktop project.
I have a scrollPane with a container assigned to it...
mainScrollPane.source = mainContainer;
The scrollPane is resized whenever the window is resized, in order to keep things fluid (it fits under a header container, and to the right of a left container)...
mainScrollPane.setSize(Math.round(stageWidth - leftContainer.width), Math.round(stageHeight - headerContainer.height));
mainScrollPane.source = mainContainer;
I'm dynamically creating movieclips and adding each one to the container...
mainContainer.addChild(boxMC);
In my library, boxMC is set to 400 pixels wide, yet I'm finding that each boxMC is displayed much wider than that.
When I resize the window, each boxMC doesn't scale in size (good).
I'm clearly not understanding the process for creating a fluid scrollPane that can be resized while having it's contents remain the size that I've created them at in the library. Can sometime please enlighten me?
Thank you.
The solution was not to give mainContainer width and height settings. So instead of mainContainer.graphics.drawRect(0,0,100,100); mainContainer.width = 500; mainContainer.height = 200; I just made it mainContainer.graphics.drawRect(0,0,100,100); then added movieclip don't scale their size when mainScrollPane is resized.
I have a table view where each cell contains a WKWebView of HTML content. Initially the content has its size to fit a prescribed width and height.
What I want to do is allow users to zoom in and out of the WKWebView and while adjusting the height of the cell view.
To give some context what I did was attach a Javascript (WKUserScript) to the WKWebView and in the script it contains
window.onload = function () {
window.webkit.messageHandlers.sizeNotification.postMessage({width:
document.body.scrollWidth, height: document.body.scrollHeight});
}
What this does is when the HTML content is loaded, it will send the message with name "sizeNotification" to a UIViewController conforming to the WKScriptMessageHandler. The message contains the scrollHeight which is what I use to set the frame of the WKWebView by adjusting a height constraint.
I also save that scrollHeight value which will be important later.
After the user zooms in the WKWebView the delegate method scrollViewDidEndZooming gets called which contains the current scaled information of the WKWebView's scrollView. I set the new height constraint constant of the WKWebView's frame by
webViewHeightConstraint.constant = initialHeight * scale
The height of the WKWebView increases and since I used dynamic sizing cells, the table cell height will also adjust accordingly.
That is UNTIL the zoom scale reaches a value close to 1.0
If it gets higher than this value, the content inside the WKWebView/scrollView gets white padding at the bottom.
I suspect that this has to do with the Width/Height ratio of the WebView's frame being changed, since if the initial height of the WebView is greater than content height this will also happen. Another example would be if you open a webpage in Safari that has a content height of 300px but you stretched out the window to have a height of 100px, there would be white space at the bottom (or whatever is set to)
My questions is if there's a fix/workaround for the white bottom padding issue? If you look at an email thread in Mail on iOS you can zoom in and out of the emails and the cell heights adjust accordingly.
I have a scrolled window, which contains a drawing area in pygtk. I would like to change the size of the drawing area, and keep the scrolled window as it is. I don't find a function that works on widgets. I can get the size and so on, but I can't set it. Could someone give me a pointer to the solution?
Thanks,
v923z
It sounds like .set_size_request() is what you need. An example would be:
drawingarea.set_size_request(400, 400)
The values are the width and height of the canvas. Assuming you're ScrolledWindow is setup correctly, the scrollbars should adjust automatically to the size of the DrawingArea.
I think similar questions have been answered, but none really seem to have helped me out that much.
I have a table that is set to width="100%" with a cell on the top row.
This cell contains an image which is fairly wide.
When I resize the window, and therefore the table, the image does not resize below 100% of its original size.
Is there a way to get this image to reduce in size as the table shrinks?
Set image width to 100% as well.
If this doesn't help set it to auto!
#img{width:100%;}
or
#img{width:auto;}
If you want it to actually get smaller than the specified width/height (or the original width/height) of the image, you need to do some scripting. This means you can hook up the resize event of the browser and reset the width/height of the image equally while resizing.
Another option is to wrap the image in a div with an overflow:hidden specified. So if the div gets to large for the window, it will hide the pieces of the image that fall outside the window.