I am trying to add a scroll bar when the image zoom in.
The problem I am facing now is my image is not intact with the canvas I can move the image around even if its not zoomed in or scaled.
I want the image to be intact to the canvas and when its zoom in, the scroll bar should appear.
I have added the overflow to auto in the CSS.
#container
{
position: relative;
overflow:auto;
}
http://jsfiddle.net/ndYdk/21/
Sometimes the image doesnt appear at first so just click zoom in/out and it will appear.
Any Help is really appreciated
Are you familiar with the code in the jsfiddle? It explicit has "event listeners to handle screen drag." If you want the image to not move around, disable that when you are zoomed in.
However, the thing with the scrollbar is a bit trickier. The correct solution would be having the overflow: scroll and a set height/width in your <div id="container"> itself, however this would add a scrollbar if the canvas size itself got bigger, not if the contents in the canvas changed size, as they do know.
You could try to add scrollbars manually when you detect your image is larger than your canvas. one way to do that is here: Canvas Scrollbar not working
However, an easier way may be to just put the size constraints and overflow on your parent div as I said above and then change the actual size of the canvas.
It looks like the canvas tag does not support the overflow CSS rule since this does not force the browser's scroll to appear:
<canvas id="myCanvas" style="overflow:scroll;" "></canvas>
There are interesting topics in Google that could help you with your task:
https://www.google.com/search?q=show+scroll+inside+canvas+tag
Related
When the webpage is on the big screen everything is perfect. All 3 blocks of text are inline and the white footer comes right after the background picture.
But when I resize the window webpage automatically adds space after the picture.
Not sure what I should do: have my picture repeated? But that won't look good. Leave it as it is? Not sure what to do? What is a good solution for this?
If you have a background image, you can set the background-size to cover to ensure that it always covers the whole element.
See example here: https://jsfiddle.net/ut04htu0/
If the background is an image(tag), through jquery set the height to window height in resize function.(jquery).
$(window).resize(function(){
$(".img").height($(window).height());
});
Here img is the class used for image tag.
Hopefully this solves your problem
I'm creating a quote-generator page which is also responsive. Here's the link to quote-generator. That's a canvas that dynamically resizes as the page gets smaller or bigger while keeping the image ratio fixed.
What I'd like to do is for the text to follow the image in staying in the center. I'm not trying to get a piece of code that does it, but even if you have the logic behind it, then I can figure how to do it, because at the moment I'm really not sure where to start from.
Thank you.
In this case, put both of that <canvas> and the <div> preceding it into one higher<div> and then you just have to set the relative width and height of the highest div to percentages. Something like this:
<div id="higherDiv" style="width: 80%, height: 80%">
<canvas>...</canvas>
<div>...</div>
</div>
In this way you get a scalable top container relative to user's screen dimensions. If the percentages don't work, you can try this new relative dimensions introduced in >HTML5, here: https://snook.ca/archives/html_and_css/vm-vh-units
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I'd like to center an image in the browser window and apply a 3D transformation to it. This all works fine until the image is larger than the browser window, in which case I lose the parts of the image that would be off the screen, even though after the transformation, the entire image would fit in the browser window. I don't want to show scrollbars. If I make it a background image, I can transform the div, but I lose the parts of the image that would be off the screen if it was not transformed.
Is it possible to show an image larger than the browser window without getting scrollbars?
Have you tried using the CSS3 Background Size property?
You can read about it here. I believe that if you use the property
background-size:cover;
Along with it's webkit and moz-webkit, you should get the result you're looking for. Try it and let me know, and if not that link there should be useful.
Hope it helps! :D
I started from scratch with a small example and managed to get it working by using overflow: hidden; on a div that contained a div that contained the image.