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.
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 have tried to make my site tokyocomedy.com to be responsive design down to a minimum of 320 pixels wide. Most, if not all, pages, such as this top page look reasonably good down to that size, using Firefox's responsive design view:
However, this one page, the schedule page, is not working:
The width it gets stuck at seems to be around 530 pixels:
The only thing that is different on this page is the calendar, so I could be wrong, but my best guess is that something about the calendar CSS or JavaScript is holding some minimum width or padding space or something. I have gone through all the elements I can find using the Firefox web developer inspector:
Relevant CSS IDs and classes seem to be #calendar, fc-toolbar, fc-header-toolbar, fc-view-container, fc-view, fc-list-month-view, fc-widget-content, and fc-widget-header. However, I can't find any width declarations, padding, margins, or any other sizing declaration that would explain why the page will not shrink horizontally. It's possible that maybe there is JavaScript acting on the styling that is altering it in a way that is less easy to find.
The page uses the fullcalendar v3.9.0 JavaScript library. I've put the CSS in use on PasteBin for reference.
What is preventing this calendar page from shrinking down to 320 pixels like other pages on the site?
There is a small error in your code. You need to use word-break css property here as your email text is big. kindly refer to attached screenshot.
Hope it solves your problem.
please add below two property and check
* {
box-sizing: border-box;
}
#maincontent {
float: left;
width: 100%;
}
You used display:inline-block style.css line no. 60 ,use display:block rather than display: inline-block
#maincontent, #upcomingshows, #recentblog{
display:block;
vertical-align: top;
}
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 would like to disable browser's scrolling when an event happens, but not remove the scrollbar ?
I would like something very similar to setting CSS's overflow:hidden to the whole document. My reason is that doing so changes the browser's width, hence I will have to re-align the body.
The best practise fix to the problem I think you're describing is this simple CSS:
html {
overflow-y: scroll
}
That forces the vertical scrollbar to always be visible, so that the browser's width will not change "when an event happens", and you won't "have to re-align the body".
Why not just set the entire web page to align:center? No manual re-aligning, and works with any screen resolution or browser :-)
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