Am using Highslide with liquid layout. How can I change code to have popup size to a percentage of browser window?
You can’t use percentage for the size of a Highslide popup.
A regular Highslide image popup will show the image in its full size,
but the image will shrink to fit the viewport if the image is larger
than the viewport and allowSizeReduction is true (default
setting).
If useBox is true, you need a fixed width and height
(in px) for the image area.
HTML popups needs a fixed width. Default width is 400px.
Related
I Have a viewport and a scaled image inside like this:
both the images are scaled to 0.1 but the one inside the viewport is of less resolution
Is there anyway to fix this?
The Viewport has a size, that size sets the resolution at which the contents of the Viewport will be rendered. And it does not have to match the size at which it is displayed (it could be stretched/scaled).
With the ViewportContainer you can decide if it will automatically set the size of the Viewport or if it will stretch it (scaling the ViewportContainer will also result in stretchering). If you prefer to not use the ViewportContainer※, set the size of the Viewport in the Inspector or form code.
※: For example, you can display a ViewportTexture with a TextureRect, which will give you more control on how it is displayed. But it is less convinnient to setup.
I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
I have a storyboard with (among other things) a label. Its height is proportional to the screen height. But the text size in the label is always the same. I'd like to also have a proportional font size.
Does anyone know how to do this?
Thank you for your help.
Edit: Maybe I should specify that my label has both width and height proportional to the screen size (the bigger the screen is, the bigger the label is).
I did it programmatically but I'd like to know if it's possible to do it from the storyboard.
click the label and choose the size properties inspector on the right hand side and edit the font size. You can then choose a size of your choosing
The slider images that I use is not the same width and height as the NivoSlider div.
I want my images to scale into the exact width and height of the NivoSlider div, with no losing any part of the image. How can i do this?
I am using the v3.2 JQuery plugin, not Wordpress.
You could do this in photoshop, but its hard if its not the same ratio, you will lose pixels
what you could do is resize the slider or edit the photo's
tl;dr: When an image takes up 100% width and height and the user resizes their browser down, the width and the height of the document don't change because the image keeps it from shrinking.
I have a dynamically drawn SVG image (created by RaphaelJS) that takes up 100% of the screen width and height. The space it takes up includes space that is not visible but can be seen by scrolling (so it's not just viewport width and height, it is possible for it to go beyond that). I need to resize the SVG canvas to the size of the document so that scrollbars won't appear just for the image when the user resizes his browser smaller and so that the image won't appear to be cut-off when the user resizes the browser to be bigger.
The resizing up works fine, but there is a glitch in resizing down. When the user resizes from small to big, this works fine and the SVG expands to fit the window, but when the user resizes from big to small, the actual image keeps the document from becoming smaller because it is part of the document. The effect is that the image will grow but never shrink, causing scrollbars just for the image, even though the actual content all fits inside the screen.
Here is how I currently calculate the size of the SVG canvas:
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
function getDocWidth() {
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}
So how can I get the image not to keep the document from getting smaller? Basically the getDocWidth and -Height needs to ignore the dimensions of the image when it calculates the width and height of the document.
If it's the window you want the width of rather than the current width of the document (with your image in it, making it wider), why not just use that?