I am working on a prototype of a project in which I need to adjust the look and feel of site content according to the browser window size.
Now for the prototype I am using a sample image and I want to adjust the height and width of the image as per window's height and width.
Here's the code that I am using:
$(window).resize(function() {
document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});
The above code doesn't work properly. I want to dynamically change the image height and width as user resizes the window. I also tried implementing this solution. But that didn't work either. Any ideas how can I solve this?
Well, since this is needed for testing purposes only, and it seems that you use jQuery, try this code:
<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">
<script>
var resize = function() {
$("img").width($(window).width()).height($(window).height());
};
$(window).resize(function() {
resize();
});
resize();
</script>
DEMO: http://jsfiddle.net/GvRJ7/
Otherwise, myself and other guys here strongly recommend you using good HTML/CSS markup to make your design fit any resolution.
Instead of window.innerHeight and window.innerWidth you can try using percentage.That Will Resize your image accordingly to windows height andwidth.
document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");
Think of how often window.resize() fires (if you have any doubt, console.log() it). Only inexpensive operations should be performed inside it, like incrementing a counter, or calculating a position.
In your particular case, I think a 100% width/height image will work using just CSS (or CSS generated with JavaScript if needed). Of course, this will look bad as the image gets beyond its real size, and waste bandwidth when it is below its real size, but it will have the equivalent effect to your code at a fraction of the expense.
As a side note, document.write() should rarely be used. Use DOM manipulation functions instead.
Related
I'm attempting to use the following design on a responsive website. I'm curious if there's a way to set up some sort of inverse resizing method through jQuery / Javascript because as the viewport gets smaller, the copy will respond and get larger.
I've tried using jQuery to modify the image size, but I only know enough to manually resize it at different breakpoints
Here's my attempt at a solution:
var viewportWidth = $(window).width();
if (viewportWidth <= 768) {
$("#curlybrace").css("width", "80px");
}
Is there a way to set up a dynamic scaling image?
Try looking into CSS and media queries, seems like it would be a neater solution than trying to do this with JS.
You would use something like this:
function resizeFn() {
var width = window.width();
// ...
}
$(function() {
$(window).resize(resizeFn).trigger('resize');
});
Not possible to do an inverse with CSS, I don't think (I thought maybe through calc(), but I don't think it lets you do unit manipulations like that).
Fair warning, this doesn't sound like a good design unless you're trying to make it look nuts.
i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:
<script type="text/javascript">
$(document).ready(function() {
while(true) {
document.getElementById("text").style.fontSize = $("container").height();
}
});
</script>
(the "while" is to re-size it constantly, considering that the user might re-size the window)
I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong?
Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.
Thanks in advance,
Luca
Thanks to the answers, but nothing working.
I guess that the script is not running, what can be wrong??? Please help!
http://jsfiddle.net/AyRMC/
You can use viewport units:
.vw{
font-size:3vw;
color:red;
}
.vh{
font-size:3vh;
color:green;
}
.vmin{
font-size:3vmin;
color:blue;
}
Doesn't have full support quite yet, but IE10, Chrome, Firefox, and Safari all support it.
One downside (or possible upside) is that, at least in chrome, the text doesn't scale as the viewport is resized.
Compatibility: http://caniuse.com/viewport-units
You should try something like this instead (if I understand correctly what you want to do):
$(".container").each(function(){ //if container is a class
$('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});
or something more like this
$(window).resize(function(){
$('.text').css({'font-size': $('#container').height()+"px"});
});
If you mean that you are making a responsive site, then you can change the font-size based on document.documentElement.clientWidth inside of the window resize handler.
Also, you can use em units instead of pixels which are scalable and mobile-friendly.
CSS3 also has a new interesting "root em" unit :
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works.
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
http://snook.ca/archives/html_and_css/font-size-with-rem
Try this:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
document.getElementById("text").style.fontSize = $(".container").height();
// let container is a class
});
});
</script>
You can use the .resize() event handler which will only fire when the window is resized
var constant = [Some magic number]
$(window).resize(function() {
var fontSize = $(this).height()*$(this).width()*constant;
$(html).css("font-size",fontSize)
}
Using a constant to calculate the font size based on the new width/height
I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.
To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});
You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}
CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.
Can u show me completed html code where it is some rectangle in it with "height=75% of my screen" and "widtht=4/3 of height". So, it should be 3:4 reсtangle where height depends of my screenheight, but width do not depends of my screenwidth. Only of screenheight.
i thought i understood previus time, but it was not so.
I have this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
});
</script>
And i dont know what to do with the width.
You'll need JavaScript for computing the width, it's not possible to do this only with HTML.
The relevant property is window.innerHeight; multiply that by (3/4) to get height, and since (3/4)*(4/3) == 1, window.innerHeight is (incidentally) equal to your desired width.
Then set the element's .height and .width properties.
Note: I'm assuming that you wish to have a rectangle proportional to the browser window, not the user's screen. If you actually want the screen size, use window.screen.height instead of window.innerHeight; beware though: with widescreens and multi-monitor configurations on the rise, the browser may report quite outlandish dimensions.
HTML doesn't dictate this. CSS can, but CSS doesn't have any direct internal math logic. So, what you need to do is use javascript.
When the page loads, grab the width of the object, do your math, and then set the height.
If you're new to JS, I'd suggest learning one of the libraries, such as jQuery. In jQuery, it'd look something like this:
$('#myDiv').width($(this).height()*.75);
I have a swf with loads text into a Sprite that resizes based on the content put into - I'd like though for the ones that are longer than the page to have the browser use its native scroll bars rather than handle it in actionscript (very much like http://www.nike.com/nikeskateboarding/v3/...)
I did have a look at the stuff nike did but just wasn't able to pull it off. Any idea's?
The trick is to use some simple JavaScript to resize the Flash DOM node:
function resizeFlash( h ) {
// "flash-node-id" is the ID of the embedded Flash movie
document.getElementById("flash-node-id").style.height = h + "px";
}
Which you call from within the Flash movie like this:
ExternalInterface.call("resizeFlash", 400);
You don't actually need to have the JavaScript code externally, you can do it all from Flash if you want to:
ExternalInterface.call(
"function( id, h ) { document.getElementById(id).style.height = h + 'px'; }",
ExternalInterface.objectID,
400
);
The anonymous function is just to be able to pass in the ID and height as parameters instead of concatenating them into the JavaScript string.
I think that the JavaScript is fairly cross-platform. If you want to see a live example look at this site: talkoftheweather.com. It may not look as though it does anything, but it automatically resizes the Flash movie size to accommodate all the news items (it does this just after loading the news, which is done so quickly that you don't notice it happening). The resize forces the browser to show a vertical scroll bar.
I've never done it that way around but I think swffit might be able to pull it off.
I halfway looked at swffit but the height (and width sometimes but mainly height) would be dynamic - swffit let's you declare a maxHeight but that number would be constantly changing...maybe I could figure out how to set it dynamically. A great place for me to start though - thanks!
What I've mostly been using if for is to limit how small you can make a "fullbrowser" flash, and for that it works great.
Happy hacking!
(and don't forget to post your findings here, I might need that too soon ;))
SWFSize
See here for more details.
Intuitsolutions.ca