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.
Related
I'm currently pulling my hair out with this one. Im a new web developer using bootstrap themes and templates just to get a feel for the industry, and have hit a bump in the road that needs an experienced input
Ive got a website that Ive created at the minute, where certain parts of the screens don't resize properly when the aspect ratio is lower than mine (1920px). However zooming out on the browser corrects this issue. For instance 1440px needs to be zoomed out to 75% in order for everything to be correct. A number of images have fallen out of the bootstrap framework due to a positioning request from my friend, although ive used #media queries to correct a number of these issues but thats clearly where the problems have arisen.
I'm aware that I should go back and fix this bugs from scratch but I seriously will go crazy if I have to do that. I do know that it is possible to resize the browser zoom being used if the aspect ratio is below a certain level however Ive heard thats not the way to go.
Does anyone have any advice on how to proceed with this one? Is there an "entire page/html" zoom query that can be put in place rather than a browser zoom?
Use CSS zoom:
body {
zoom: 0.75;
}
If you're just starting out, I would recommend you right click on elements that are not appearing as expected, and inspect them in your Chrome console (or whatever browser you're on). You can then first adjust styling properties and transfer over the appropriate changes to your actual code once you confirm that the adjustments you make do what you want.
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;
Ive Googled and stackoverflowed since earlier on today and i just cant find a solution. I'm looking for a way using JQuery/JS to open up a webpage ive created with a maximized window. So on the page loading whichever browser the user is using, my webpage will be displayed as though the user has hit the maximise button on their browser, but automatically on load.
I need to make an interactive website which is best displayed maximised, any ideas? Btw im very new to building websites so any solution JS fiddle based or properly explained would be so much appreciated.
THANKS :)
For security reasons, JavaScript cannot change the window's size (including minimizing or maximizing it).
You can, however, open a new window set to a certain size - but not automatically - only in response to user interaction, like a click on the page (again, for security reasons).
I don't know what your site's content is - but if it isn't flexible enough to fit different screen sizes (like a game, maybe?) then your best bet from a user experience perspective may be to just put some text up somewhere on the page that says something like "Site best viewed in fullscreen". Or, if it is something like a game, maybe a nice big button on the homepage that says "Launch Game"?
Your best bet, however, is to have your content fit any screen size/shape. This is often called things like "responsive webdesign", and there's tons of info out there on how to design a website responsively, as well as how to implement said design.
Good luck!
window.innerHeight and window.innerWidth
http://www.w3schools.com/jsref/prop_win_innerheight.asp
I have a web page with a fixed-size layout, it's fine in its current implementation even if it's far from "state of art", but a little too high for a mobile device screen.
Since the "header" part doesn't really matter to anyone, everyone wants to immediately pan / scroll down a little when viewing the page on a mobile device (or, broadly speaking, on a viewport shorter than the page fixed height).
Is there some HTML or JS magic I can do to tell the browser to start displaying the page already-scrolled-down X pixels?
You can try something like links and anchors.
http://www.yourdomain.com/main.html#bottom
If you're using jQuery, you could try scrollTo. You'll need to work out where on the page your target is, though...
Anchors is one solution, but the way I find really nice is to use http://archive.plugins.jquery.com/project/LocalScroll. So use can detect User Agent in Javascript and scroll down in proper place using this plugin.
Cheers!
Not sure anchors would work if you are trying to implement this on the homepage.
If the header is completely pointless in mobile browser this you could use html to detect that a mobile browser is being used then from this load CSS with the header hidden, or load it at the bottom perhaps. If this sounds like a viable option I can post examples.
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/