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
Related
Feel like I have explored every option on this and without resulting in a lot of javascript work I wanted to see if there was another way around this.
I have a main container that is 100vh and fixed. The aim for this client is to not allow any scrolling. Inside this container I have a number of image layouts, the images need to remain the same ratio and sizing no matter what width / height the browser.
Here is 2 example layouts, the black boxes being images:
I thought it was simple at first, just give the images a width percentage and they will be responsive however they also need to respond to the height.
An example site is here: http://geordiewood.com/projects/meetka/2
If you resize the browser you can see the images remaining in ratio to the broswer spacing around them etc. Inspecting the elements I can see they have dynamicly adjusting heights and width but im looking for a purely css way if possible?
Example html markup:
<div class="layout">
<div class="image-wrapper">
<img src="img1.png/><img src="img1.png/>
</div>
</div>
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Read these docs I think they may help
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
I am trying to create a web page. It has two regions left and right content. Till now i am testing it on a particular window size where it is lying in center and size is exact fit. But as soon as i minimise it or open it on monitor of different size it is not getting resized based on it. How can i do it. here is the web link i am working on.
http://jsfiddle.net/efyJF/.
If you see, right now the content in side is fixed size. So, i need to scroll all the way to the right to see the end of right content border.
I feel like this is not the way the normal web pages work. How can i fix this.
Thanks
You can define your css value using percentage like width: 20% instead using fixed value. Or try to use css framework like Blueprint or 960 Grid System.
If I understand right, you are looking for something like this
The container has a property of margin: 0 auto; which puts it in the centre, and then the children divs take up a percentage of that parent div. The parent (#container) can be resized and the children will fill it up appropriately.
The mistake you made was using absolute positioning, this will perfectly align it for your screen, but other screens won't look the same.
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 used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.
I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.
First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.
You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.