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/
Related
I'm working on a responsive website and I'm so frustrated with finding a solution for this one.
this is the basic structure:
I used 'vh' sizes and when ever the URL bar slides up - the page changes the sizes of the elements and kinda "jumps", which makes a bad user experience especially when reading.
I changed the size of the second part (orange) to 'em's because I thought maybe it will not "jump" so at least where there are texts this will not happen - and I was wrong. it's still happening.
What I'm trying to get to is to make the first part (in baby-blue) opened on all of the screen no matter what screen size is displaying the page (but without making it "jump").
I'm very frustrated finding a solution to responsive pages, can you please help me solve this, or help me with some reading material that will help me solve this ?
Note: I found some codes to add that should remove the URL bars from iPhones and it didn't work :I
Since you've tagged Javascript/jQuery I'd suggest assigning the height by getting the height the specific element (eg: window, document or viewport) you want. A good comparison can be found here. From the looks of it, you might want window.outerHeight which may account for what's "under" the URL bar. On my desktop, it's the only value that's different from the rest but on mobile other values may be different as well.
document.querySelectorAll(".whatever").style.height=window.outerHeight;
Consider this scenario - I'm developing web applications for use on a tv, they will ALWAYS be in full screen. As you may or may not know, each TV has a different 'safe area', because most cut off a certain amount on one or both sides. I'd like to use a web page that displays some sort of visual ruler so that I could easily see a tv's 'visible' screen, to find this 'safe area'. Does a web page like this exist somewhere yet?
If not, what would be an easy way (I'm guessing javascript) to draw an on screen ruler that could be used to find the 'safe area'?
TV safe areas are approx 5% margin from the edge of the screen on new monitors.
When I do projects with this kind of resolution involved I simply add a generic 5% margin on the main container.
Not all monitors have the same safe area... but 5% is enough for all moderns one.
Edit:
Look at this as well: http://dev.opera.com/articles/view/creating-web-content-for-tv/#safe-areas
it say exactly what I wrote previously.
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.
My boss is running a laptop which has a setting which is resizing font sizes and making them larger by about a third. This is fine but we have a java app running on the site and the div tags are being pushed off of the page because of the increase in font size. Is there a way to stop font being resized, via code?
Thanks, R.
Depends on the browser, but most use zooming now: see this article: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html
I do not think you can stop this, nor should you. What about people who need to larger font size.
It sounds like the problem is in your DIVs, not in your fonts. Unless your text contains huge strings with no "breaking" characters in them, a DIV should merely set itself to its parent's width as default behavior.
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.