I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Check this article out...
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible
Related
When using the picture tag with srcset, I can define different image sources for different viewport widths.
What I want however, is to define different images sources for the actual space (width-based) the image occupies after the browser has rendered the page.
For example:
Viewport width is 1920px Website uses container size of 1200px
Container is split into two columns of 600px each
Column 2 contains an image with 100% width - which will result in a width of 600px
The srcset for the image supplies 400x300px, 800x600px and 1200x900px
The browser should now automatically know to pick 800x600px
As long as it's clear that the image will always be in that spot, I could use srcset based on the viewport width.
Unfortunately, my site design is so, that content editors can freely add columns/rows and even nest them. Also at some point columns collapse and become always full-width. So when rendering the HTML, I cannot predict how much of the viewport width an image will get.
Therfor I would love to have the browser check how much pixels the image actually has when it's rendered to the user - and choose the appropiate image.
I have searched quite a bit, but couldn't find anything about that.
Is that even possible?
Or is the only solution a Javascript one?
No, sadly this is not possible yet. There has been much talk about element queries, basically media queries that apply to the element's size, instead of the windows size. But they are apparently really complicated to integrate. There is also no syntax for it yet. The classic problem that is often brought up (in pseudo-syntax), is something like this:
.child {
width: 500px;
}
.container:min-width(450px) > .child {
width: 400px;
}
so we set .child to 500px width, BUT then we say if the child's parent is more than 450px, the .child should have a width of 400px, thus .container would be less than 450px again, and .child is set again to 500px and so on and on. This causes what is called a "circularity problem".
There are also other problems, such as with dynamic layouts and the browser not really knowing how much space an element will take up beforehand. This could lead to huge performance issues, as the browser would simply have to calculate too much.
There are however JS libraries that try to implement this (e.g. EQCSS, CSS-Element-Queries or EQJS), but for your case a selfmade JS would probably be better. I'd recommend checking out how those libraries handle it though.
More info:
https://www.xanthir.com/b4PR0
https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690
JS Libraries:
https://elementqueries.com/
http://marcj.github.io/css-element-queries/
https://github.com/snugug/eq.js
I'm pulling my hair out over this. I have a webpage where I'd like to have a fixed position div on the left (the parrot & translater) follow the page as it scrolls down.
http://www.cartoonizemypet.com/new/help/
I managed to follow this tut http://jqueryfordesigners.com/fixed-floating-elements/ and get what I thought was a perfect effect! Then I tried viewing it on my phone.... As soon as I zoomed in the blasted div moved over the text! :( You can see the affect on a regular browser by shrinking the browser window and scrolling to the right.
Does anyone know a way to prevent the parrot from moving horizontally? I've been searching high and low for a solution but it's starting to seem impossible.
Here's the relevant CSS
#content {
padding-top:20px;
padding-bottom:713px; /* Height of the footer element */
width:888px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#help-col1 {
left:0;
width:218px;
position:absolute;
height:500px;
}
#parrot-box {
position:absolute;
top:0;
margin-top: 20px;
}
#parrot-box.fixed {
position:fixed;
top:0;
}
#help-col2 {
width:634px;
float:right;
}
Feel free to check out the page source (http://www.cartoonizemypet.com/new/help/) to see the SCRIPT and HTML. Any help would be MUCH appreciated.
When the parrot gets the 'fixed' class, The parrot (inside #help-col1) has a 'left' value of 0. This means he's always going to be attached to the left side of the page... no matter what the dimensions of the window are, and how it scrolls.
What you're asking for is for him to behave like a fixed positioned element when the user scrolls vertically, but not horizontally. As far as I know, this isn't possible. Fixed is fixed... x and y.
However, there are some solutions (like this one) that talk about using javascript to get over this problem. The theory here is that a little javascript can listen to when the page has been horizontally scrolled and if it has, nudge the parrot back into place accordingly.
Personally, I'd look into using css media queries to make a mobile specific layout. You can assign specific CSS for the mobile version of the site, so hopefully the user doesn't need to zoom (or horizontally scroll) at all =)
Good luck!
JS scroll event listener has been suggested, but all implementations relying on it are systematically laggy. I reckon you would have better luck using media queries to determine whether or not fixed positioning is appropriate (i.e. OK if the window/device is wide enough, or substitute with an alternative behaviour if not).
You could actually leave the parrot at the top for narrow screens and preserve some real estate as well as address older mobile Safari versions' inability to correctly interpret position:fixed. You could certainly implement out a more refined approach, but this should be a good starting point - to try it out, execute the following script on your page (just in the console is fine):
$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>');
First it overrides the original #parrot-box.fixed declaration, and then applies your floated styling to whenever the window is at least 982px wide (your page wrapper width).
Not to worry everyone, my husband figured out an alternative way of making this work! :)
Rather than moving the parrot with the page; I'm going to have multiple versions of the parrot inside the answer divs. That way when a user clicks on an answer it pops open and the parrot appears beside it.
Not how I originally had it planned out, but I think I can make this new way look even better!
Thanks for the help at any rate! :)
I need to have my site fit exactly to the user's browser, this means any browser and any size of monitor. i need to have no scroll bars both vertical and horizontal
I want to do this in javascript/jquery
I have this code:
screen.width
screen.height
i also tried jquery :
$(window).height()
$(window).width()
also had scroll bars.
Is this the only way?? cuz when i used it on my site, i had scroll bars both vertical and horizontal. it was to big.
Can any one please help?
It's impossible.
No way you'd be able to fit your content to all display resolutions (think ipads, smartphones [each with different resolutions], 30" monitors, etc).
by the way:
// both of these on their own do nothing.
$(window).height() // just returns to you the viewport height
$(window).width() // just returns to you the viewport width
body {height: 100%; width: 100%;}
div#page_container {height: 100%; width: 100%;}
No need for JS/jQuery, just wrap all your content inside <div id="page_container"></div>
It also resizes with people resizing browser windows.
I have to agree with Phil. There is going to be no way to determain the resolution of the users screen. That is going to be a user problem. I have always built my web sites at 1024 x 768 resolution for that reason. Sometime even lower depending on the content, and the target audience(sites that target older people who probably have a low resolution setting so they can read their screen).This way, I know that my stuff will fit. Most people now a days, with monitors the size that they are, do not go much below that.
I found this code here at http://support.microsoft.com/kb/287171 that might help you though. This will adjust the screens height and width based on the users screen resolution.
Also remember that some JavaScript will not work in certain browsers. I have run into this problem with pop-ups when it came to changing screen size, scrollbars ect...
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
I've got a javascript-based Scrolling Widget Thingy™. One of the things it does is create a fixed height div and gives it overflow: auto.
Alas on mobile Safari (and other mobile browsers) overflow: auto; doesn't show a scrollbar. Any content below "the fold" can only be found by accident.
Is there a way to detect this in javascript, without resorting to browser detection? e.g.
if (there is a scrollbar) {
/* give me a fixed height and a scrollbar */
} else {
/* Do something more suited to this situation */
}
I can only think of resorting to dirty tricks:
Create 50x50 box
Set box to overflow: auto
Flood box with text
Read box inner size: if 50x50, something went wrong
Store result in variable and destroy box
... given that there's actually a way to measure the inner size, scrollbar excluded.
It's a scary algorithm anyway, hundreds of things can go wrong... Consider it just an idea.