I have a DIV that has plenty of child DIVs inside of it. What I want is similar to Firefox's tabs, when you have too many tabs open or the main DIV width is too small, the interface will detect overflow and show a button on the right side to list all hidden tabs. The problem is that I have no idea where to even start looking for help.
Is you main DIV set to overflow:hidden?
If so, you can test its need to overflow by incrementing the scrollLeft property and then querying it to see if it's changed:
function containsTooMuch(el) {
var original = el.scrollLeft++;
return el.scrollLeft-- > original;
}
Googling turns up this:
http://knitinr.blogspot.com/2008/08/javascript-warn-if-overflow.html
looks nice and framework independent.
But maybe somebody comes up with a solution that works with less code.
Oh and guess which popular coding community site screws up the Googe results for
javascript detect overflow
:)
My approach would be to work from how new DIVs get added. Whatever event causes this to happen, I would add a handler to the document that runs a script which checks the size of the various DIVs to ensure that they meet your requirements. If they are too large (or too many), then you hide some of them and add your button with it's display logic.
Related
I know that this is not a 'good question' to pose—but I'm desperate by now and need to find some inspiration.
I have a questionnaire page/web-app that uses CSS transitions to slide to the next page of questions/options.
It is well-tested and the transitions in question aren't complex.
But the transition to one special page went out of control recently. And although I consider myself well versed in CSS and JavaScript I'm totally lost with this problem.
The construct in question works like this:
I have a 'window' that is positioned absolutely and has its overflow hidden.
Inside that is a page container positioned relative to no left or top values or transforms given.
The pages inside this container are positioned absolutely according to their status classes positioned on the left: 0 (active), left 100% (not yet shown), and left: -100% (already done)
What happens now is that when I switch classes to show a certain page, the page container 'jumps to the left'. In Chrome nearly -100% in Firefox about -70% same in Safari.
Those values are my guess because when I open the dev-tools, nothing is to be found in the styles, in the computed values anywhere.
When I move back to the previous page the container jumps back to its original position, and if I move again to the critical page it stays.
I do no positioning whatsoever with JavaScript anywhere, I only switch classes on HTML elements.
After hours of experimenting back and forth, I found out that the problem is in some way JavaScript-related anyhow.
Using the exact same CSS and HTML with a slightly older version of JavaScript does not show the strange behavior. The changes in the Script are mostly ES2020-module related, and the new version does nothing even remotely related to DOM manipulation different from the older working version.
When not using transitions, the shift of the container does not occur.
Has anyone come across something similar?
Does anyone know of other tools to deeper analyze the current layout state of a page more than the respective developer tools of the browsers?
Any other ideas?
Today I found a solution and at least some kind of explanation, but I still have to investigate some more to truly understand the why and how. I'll post an update if I find a better explanation.
The problem has to do with a text field and focus.
The page in question has a text (search) as its main component.
[I am aware and always was that browsers try to move focused elements into view, regardless of what the author's CSS says.
Therefore, when I decided to give focus to the text field which it does not have on its own, as every page movement required a button to be clicked, I did so on transitionend. This has never changed.
When the issue first occurred, one of the things I tried first was to disable that (auto) focus behavior. It did not solve the problem.
I cannot say what made that change in behavior happen. I change the construction of the page to include a grid some time before the issue occurred. That in itself was not the reason, however (it worked for quite some time with that system, and removing it did not sole the behavior).]
What solved the issue was to initially fully disable the text field and only enable it on transitionend (then focusing it).
The reason browsers moved the page to different positions likely has to do with this situation, as the text fields width is ch based.
The important takeaway (for now) for me is, that there is no hint to be found in the developer tools when the browsers moves - elements in the (in my case unsuccessful) attempt to keep inputs in the viewport.
I think that this should be changed/fixed.
I will as soon as I have the time try to better understand the things that made the problem occur, If someone has information or experience with similar situations pleas add useful hints and background info.
My dashboard app is a single page - never longer than 100vh.
In a certain place, when I click a button, some unknown container temporarily overflows and a scrollbar appears on the right side, and then one second later it disappears. During that one second, the page background jumps very noticeably.
I wish to prevent this scrollbar from displaying via CSS - but I am having difficulty identifying the container that is overflowing.
Does anyone know of a method or a trick to identify which div is displaying the scrollbar right now, or which div has overflowed the screen? I've been at this for a while and thinking, there's got to be a DevTools trick for quickly finding this...
If this happens during an action I would ask myself which are the DOM elements that are loaded at this moment and I would probably try to add something like overflow: hidden; on the elements loaded at this moment to see which one Do it.
If there is javascript, breakpoints can be useful.
It is also possible to put some on the DOM (element inspector, right click on a div or other elements then "break on" and "subtree modification" for example)
I find the breakpoint very practical to go back to a problem.
Here's how I used Hadock's answer to solve my problem. Using the Break On Subtree Modifications (BOSM for short), I was able to do the following:
I set BOSM on a div that I thought was just above where things were being added, and re-ran the app.
The app paused with the scrollbar displayed - exactly what I wanted.
In DevTools console, I entered the following:
[...document.querySelectorAll('*')].filter(x => x.scrollHeight > 1000)
this returned all Divs with big scrollbars (height > 1000px). In my case, they were:
html
body
#react-entry-point
I was able to add the css:
#react-entry-point{overflow: hidden;}
and my problem is resolved.
This might not be a good solution for everyone, but for me, with my 100vh (max) one-page application, it did the trick.
Here are some other useful (related) console commands:
Display all containers that might have a scrollbar displayed (courtesy of user A1rPun):
[...document.querySelectorAll('*')].filter(x => x.clientHeight < x.scrollHeight)
Display all containers with a scrollbar > 150px:
[...document.querySelectorAll('*')].filter(x => x.scrollHeight > 150)
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
sorry if asking this question in wrong place.
I have a web page (asp.net / vb) and each section of the web page is built in divs inside a bootstrap grid.
Using the code behind, I am adding onclick events to each bunch of div's to do certain things. Every single div/onclick works on the page apart from just one that will only work if I set the div to something like 100 pixels deep.
I am in safari.
I have tried allsorts - binding with jquery click/tap etc but nothing apart from making the div really large.
I dont understand how only this one div could cause problems.
This text box wont let me paste html in to show.
If anyone could suggest anything I would be really grateful!
C
You are likely facing an issue where you've got one element covering up another. Check to make sure that you don't have any other div's that are too wide and happen to be covering your link on the iPad. This would explain why when you move it to 100 pixels deep it works.
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).