Is it possible to scale the FONT SIZE of a textarea and maintain its ratio when a browser window is resized?
My requirement: There is an image on the background and on the foreground I'm having a textarea where the user is allowed to add their text. I need to maintain the textarea's position and ratio when the bowser window is resized.
If you use jQuery, then the following code will adjust both the size of the textarea and the size of the font based on the resizing of the window.
Before executing the code, make sure that the size of the textarea and the font size are set (i.e. anything that will change the size of those has loaded and executed).
The font size (including unit) is read from CSS, and updated based on changes in the height of the window; the width is ignored. I doubt you were planning on changing the font aspect ratio.
There are optimisations that could be made (only resizing the dimensions that changed; only changing the font when the window height changes), but I'll leave those to you.
Assumptions:
the initial size of the font is set in CSS
the textarea the ratio of which you want to maintain has an id 'mytextarea'.
function startResizeHandling(){
var textarea = $('#mytextarea');
var initialHeight = textarea.height(),
widthRatio = textarea.width()/$(window).width(),
heightRatio = initialHeight/$(window).height(),
cssFontSize = textarea.css('font-size');
var fontRatio = parseFloat(cssFontSize.match(/^([0-9.]+)/)[1]) / initialHeight,
fontUnit = cssFontSize.match(/^[0-9.]+([a-z]+)$/i)[1];
function handleWindowResize() {
var newWidth = widthRatio * $(window).width(),
newHeight = heightRatio * $(window).height();
textarea.width(newWidth);
textarea.height(newHeight);
textarea.css('font-size', fontRatio * newHeight + fontUnit);
}
$(window).on('resize', handleWindowResize);
};
Edit:
Having re-read the question, it isn't clear to me whether you want to:
scale the font size of a textarea and maintain the ratio of the textarea, or
scale the font size of a textarea and maintain the ratio of the font (i.e. actually distort the font)
This answer addresses the first, not the second.
Related
I am trying to make a "flip book" using jquery and have started with a plugin that I bought.
I customized the JS to get the book to resize to 100% of the window when the browser is resized, and set max sizes because I do not want the images to grow larger than their original size.
With all that said, I have been trying to get the images to retain their aspect ratio when resized. I looked around online but couldn't find anything to help me with this. Does anyone have any ideas on how to accomplish this? Please let me know if you need more info or clarification.
EDIT:
The book element is resized with JS up to the max size of the images.
When the book is resized to anything smaller than its max size, the book's height and width become 100% of the window.
I need some JS to make the book keep its aspect ratio.
EX- window is resized to be very wide (large width) but very short (small height).
Currently the book will stretch and fill the very large width which distorts the image because the height is too small.
How do I make the width scale down to compensate for the small height (and vice versa)?
Thanks to everyone in advance!
Here is the Fiddle
#mybook {
margin:0 auto;
}
body {
overflow:hidden;
}
img {
max-height:300px;
max-width:300px;
}
Look at this code: http://ericjuden.com/2009/07/jquery-image-resize/
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
Or you could do it with css:
<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>
There is not really enough technical information in your question to be able to give you a good answer, but this is typically a problem that can be solved using CSS. It shouldn't require any JS/jQuery.
The tag naturally keeps the aspect ratio of the image if you set something like:
img {
width: 100%;
height: auto;
}
Alternatively, you could set the image as a background image and use the CSS property
.image {
background-size: contain;
}
to make sure the image uses the most of the available width and height.
As I see, you are resizing with JavaScript the container div of the images. So, you can set the following CSS to make the image always fit in that div and maintain their aspect ratio.
img {
max-height:100%;
max-width:100%;
}
Here is a fiddle.
I have the background of a section with the ID named home set as an image. The image has an aspect ratio of 1.5. I've written some very basic javascript to ensure that when the window size is changed, the section scales per the aspect ratio of the image. Inside of that section I have content in a div with the class container. This content is of a certain vertical height. The basic javascript I have written doesn't allow the height of the section to be less then that of the content. Hence, at that point the section stops scaling with the window size. The problem I am having is that when you scale the window past that point and then back, the section doesn't scale back up.
I've created a fiddler to help explain. http://jsfiddle.net/Chadimoglou/Bpryg/ I recommend testing it in mobile mode. To recreate what I'm doing, have the window go full screen. Grab a bottom corner and resize a little to see the background resize with the aspect ratio. Then resize so it's smaller then the height and width of the red content box. After that, pull back out again and you should see the issue I'm having. Below is a snippet of my javascript.
$(document).ready(function() {
var theWindow = $(window),
aspectRatio = 1920 / 1280;
function resizeBg() {
$("#home").width(theWindow.width);
if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() ) {
$("#home").width( $("#home > .container").height()*aspectRatio );
}
$("#home").height($("#home").width()/aspectRatio);
}
theWindow.resize(resizeBg);
window.onload=resizeBg();
});
Thanks kindly in advance for any help.
http://jsfiddle.net/Bpryg/3/
$(function() {
var $w = $(window),
$h = $('#home'), // CACHE YOUR SELECTORS
aspectRatio = 1920 / 1280;
function resizeBg() {
$h.width($w.width()); // YOUR ERROR ( should be width() )
if( ( $h.width()/aspectRatio ) <= $("> .container", $h).height() ) {
$h.width( $(" > .container", $h).height()*aspectRatio );
}
$h.height( $h.width()/aspectRatio);
}
$w.resize(resizeBg);
$w.onload=resizeBg();
});
I'm not a good JS coder, but going with the logic :
To keep the aspect ratio you could modify the CSS with JS : How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
To know whether you should set the height or the width on auto, you'll need to know if the screen size is larger than your image or taller than you image on the aspect ratio. Just compare the two aspect ratio, then you'll know which one will be on auto. Like that, you image will never leave an unfilled part on your background and will expand to it's full width or it's full height, depending on the client aspect ratio and your image aspect ratio.
You can use :
document.documentElement.clientWidth
and
document.documentElement.clientHeight
to get the client window size and calculate the aspect ratio.
I've created a page using squares. The squares combine to make a particular word. But when I resize the window, the squares disrupt their place in a haphazard way. How I can change my CSS or javascript so that the squares retain their original positions on window resize?
You can view the page at : http://www.tryst-iitd.com/13/beta
I've included the following code to take care of the resizing, still the problem remains unsolved.
<script type="text/javascript">
$(function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
$(window).resize( function () {
var screenWidth = $(window).width() + "px";
var screenHeight = $(window).height() + "px";
$("#container").css({
width: screenWidth,
height:screenHeight,
});
});
});
</script>
The square is disrupted because the width of the container is adjusted automatically whenever you resize your window. Set a fix value or set a minimum width for the square and container should fix the problem. The square width is in %.
Also, the window resize event itself is useless because the div (id=container) is adjusted according to the width of the body tag
Set the position and size of your squares in percentages and your resize code will works fine.
Also, set the min-width/min-height CSS properties will prevent your squares from being too small.
Your problem is that your css margins are fixed width, so even if squares width are in %, margins causes this issues.
As an example, try disabling wrap1 and wrapalphabet css classes, you will see that your design will be much more responsive.
You probably have to rethink the way you deal with margin/padding to get the results you expect.
I have a DIV element in my page, that I want to resize when the window is resized, but maintain a square aspect ratio. I want to set the width to be 50% of the browser width, and the height to be equal to the width. How can I do this?
If the solution requires Javascript that's fine but I'd prefer not to use jQuery.
Use width:50% in css and window.onresize event for resize. Have a look
http://jsfiddle.net/536UJ/
You can set the width to be 50% of the window in css;
you just need to adjust the height-
window.onresize=function(){
var who= document.getElementById('divtoresize');
who.style.height=who.offsetWidth+'px';
}
I'm not sure you can make one property (height) equal to other property (width) in CSS... well, at least in CSS 2.
But you of course can do this in JavaScript.
<div id = "myDiv"></div>
<script>
document.onresize = function() {
var element = document.getElementById('myDiv'); // the element
var size = Math.floor(window.innerWidth / 2) + 'px'; // 50% window width
element.style.width = size; // set the width
element.style.height = size; // set the height
};
</script>
Note that the window.innerWidth property is not present in IE. There, you'll have to use document.documentElement.clientWidth.
Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those values. But then the content gets very jumpy and hectic as I resize the window or container because the scrollbars (which I want if it gets too small) flash in and out of existence.
Is this the proper way to bind Raphael's canvas to the full size of a container? I'd also like to provide the option to make the Raphael canvas "full screen" taking up the entire browser window.
If you are using a div then you could use CSS to set that to 100% of the width and height. You then use the Raphael("container", "100%", "100%")
As for making it full screen, most browsers have a command to do this. So if you really are doing 100% then when you press the command button e.g. (F11 in firefox) it will become FULL screen.
Raphael("container", "100%", "100%"); will fill the canvas to width/height of the DIV container. This works fine in Chrome and Safari. To get Firefox on board you'll need to give body and html 100% width/height in the css, otherwise the vector will be clipped.
A little bit late on this one but I'll post here for other people searching.
var h = $('container').height(); //get the container height into variable h
var w = $('container').width(); //get the container width into variable w
//set your Raphael canvas to the variables
var contpaper = Raphael("container", w, h);
var doit;
//function to reload the page and/or do other adjustments
function resizedw(){
document.location.reload()
}
//call function 200 ms after resize is complete.
$(window).resize(function(){clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
}, 200)});
This solution is cross browser and mobile safe so you can use this to incorporate responsive design. By adding caveats for viewport width or height to your javascript in the form of if statements, you can define all of your shapes based on the same variables.