Ok, so I'm trying to build a website in which a large picture is the background. I want to be able to load a different size picture based on the user's window size so they (hopefully) don't see any blank space. I want to use JavaScript to measure the size of the current screen. Then, based on the size of the window, I would like to load in an image that corresponds to that resolution.
However, when looking online, I could not find a standard way to get the window size in all browsers. Any help is very appreciated! Also, if you have another idea of how to implement this, let me know!
A user's window is unlikely to vary hugely in size during use. It's best to only provide one image, and then scale it depending on the size. This can be achieved through CSS alone.
img#my-big-background-image {
width: 100%;
}
jQuery, YUI, and other JavaScript frameworks have solved this problem. Take a look at their solutions, even if you don't want to plug in a full framework.
Use jQuery
var height = $(window).height();
var width = $(window).width();
That will work in all major browsers.
Related
Just wondering if theirs a more efficient means of doing this?
$(window).resize(function()
{
$('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');
$('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');
$('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');
}); `
I'm doing this to get my web applicatiion (cordova/phonegap) to resize properly for all devices. I've tried using viewport and had mixed results especially when it came to getting text to scale relative to dpi and screen dimensions.
There are a few ways of doing this.
There are some pre-made libraries such as BootStrap for mobile view.
You can use percentage instead modifying the css through jquery.
For some help a nice tutorial site for css is w3Schools css tutorial page.
Each result has different results.
Now on your example code you are using window.width* 0.5 or window.width / 2 which is half. If you are in the root element with no width settings you could use 50% instead of pixels to easily achieve the effect you are looking for.
However it is most likely not like that. You may have to specify widths of parent elements to achieve this.
have you considered using css #media .
it is more neat , and doesnt require javascript event to be triggered.
more info can be found here
http://www.w3schools.com/css/css_mediatypes.asp
You can use #media queries to serve the purpose.
can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet
Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo
Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.
The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/
Has anyone built anything using the new "fluid canvas"?
Besides the sample code not working in IE 8, are there any other problems with doing this?
I'm wondering if I would be nuts to build an application using this? I mean, what would I do, check the available width of the screen and do different things for every user?
Isn't this prone to error? Any thoughts?
Thanks!
even for "fluid" canvas, it is very likely that we are not going to check the available width of the screen (as the screen/browser window can be resize dynamically by the user).
instead, as it is an iframe, it is exactly the same way how we should built the canvas / web page that meet our needs or show best to the user by making use of the full width of the browser window.
I have a wordpress site that is set to 970px wide and i built it on my mac that has a resolution set to 1920 X 1080 but when my client views it on his computer it cuts off some of the site. Below is a pic of what it looks like on his computer and what i want it to look like. I did some research and i found this code but it doesn't seem to work
<script language="javascript">
X = screen.width;
Y = screen.height;
window.moveTo(0,0);
window.resizeTo(X,Y)
</script>
I tried to explain to him that this is a variable that is hard to control since every computer could be set differently. Any Ideas or suggestions would be great.
Unfortunatly, this is a key design element that is normally done in the very first stages of making a website. a Fixed width (and if so what desired size) or a fluid (percentile) website.
You will run into no end of issues if wordpress plugin's are set to pixels, and you try to rearrange it to %'s.
The short answer to your question is that its not just as simple as bunging in one line of code which would give a variable to yoru css width for some element. Its going to be a process of testing the site against many different browser resolutions, and adjusting to suit.
Best of luck!
That line of code resizes the browser to match the screen size. You should still code a website for 1024x768 if you want it reachable by the widest audience. Either that or learn about fluid designs, but make sure it doesn't get too big for large screens like yours.
http://css-tricks.com/138-the-perfect-fluid-width-layout/
I have a pretty simple question, but with an answer that I am unable to find. I was wondering if it is possible to lock a web browser (sticking with IE for now is fine) from being resized under (or past or smaller than) a certain set of dimensions.
For example, a new pop up window that starts at 500px by 500px, but can be enlarged to any size, but cannot shrink below 400px by 400px. So, when the user tries to go below these boundaries, the browser simply locks, not allowing the user to go any further.
A javascript/css/html solution would be preferred.
Thanks!
Jaime
You may find this link to be useful. Essentially, he describes his issues with doing exactly what you're wanting to do. It SHOULD be simple; simply (within Javascript) trap the resize event, and check the size; if below the minimum size, force a resize to your minimum size. Sadly, it appears to not be that simple, but he describes a reasonable workaround.
Never tried it, but this site gives a pretty good overview of the technique.
Short answer: Not reliably.
Long answer: You might be able to, under certain circumstances, but many users will disable JavaScript window resizing and similar functionality.
What you require is not very user friendly but here is how you achieve this easily:
add the following function to your script tag :
function DonchaResizeThatThing() {
window.resizeTo(550, 450);
}
and then add the following event handler to your body tag
<body onresize="DonchaResizeThatThing();">
I hope this helps.