I have a notification bar that is 'hiding' behind my header by default:
It is only shown after an AJAX request (via jQuery animate()) to tell the user if it was successful:
But when the user scrolled down the page and does not see the header, the way I build it at the moment, it just hangs in the air:
So there are 2 cases:
if the user sees the header, it should be right beneath it
if the user does NOT see the header, it should be attached to the top of the page
And of course when the user scrolls it should move smoothly between the states.
How would I do this? CSS only / with JS?
Position the info bar using position:relative in your CSS. Get everying working in this normal state.
Then use the scroll event on the window in Javascript to find if the user has scrolled more than the height of the header. If this is the case, add a class to the info bar that sets it's position using position:fixed; top:0;.
Remove the class when the scrollTop height is less than the height of the header
Related
I add a vuetify drawer to my application, and set the position to fixed and temporary.
When the drawer is open (and I have overlay), when I try to scroll the drawer stay in position - good. but the problem is the event pass to the page, and the page is do scroll.
How can I fix that?
My code on codesandbox.
open the link
click on toggle and the drawer is open.
try to scroll (with the mouse)
if you do, it's bad.
Your problem is that you give the wrapper div height:3000px.
you have to set it to height:100vh - in this case it will take the maximum height of your screen (like 100% of it)
I have a height-limited window: It cannot grow above a certain height (based on its current content), but can be made smaller (in which case I'll add a vertical scrollbar).
I limit the maximum height with a NSLayoutConstraint.
Now, if the user enables tabbed windowing by checking the menu command View -> Show Tab Bar, the window's contents get moved down in order to make room for the tab bar but the entire window's height remains the same, which effectively leads to the content being "squished", so that my current code decides to add the vertical scrollbar, as if the user just reduced the window height manually.
I rather have the window grow with the bar tab instead. How can I accomplish this?
There seems to be no event or notification that would inform me when the Tab Bar got enabled.
What's a clean way to detect the activation of the Tab Bar then, so that I can grow my window height along with it?
I poked around with KVO and found that I could watch NSWindow's tabbedWindows property for this purpose (tested on 10.13.6).
In the ViewController's viewWillAppear:
if ([self.view.window respondsToSelector:#selector(tabbedWindows)]) {
[self.view.window addObserver:self forKeyPath:#"tabbedWindows" options:0 context:nil];
}
And then handle the change:
-(void)observeValueForKeyPath:(NSString*)keyPath ofObject:(id)object change:(id)change context:(void*)context {
// ... adjust my window's height
}
This may not be reliable, though, i.e. I found no documentation that guarantees that this will work in the future and is not just an accidental side effect.
I'm developing a chrome extension. It is basically a toolbar standing at the upper part of the visible screen, added to the page as an Iframe.
My problem is that I set it a high z-index to make sure the bar appears; and then the elements below it (below the Iframe) gets not clickable (lets say I got a piece of the iFrame that is transparent, what allows the user to see the elements below it). Other Stack Overflow questions doesn't address my problem, since they suppose I have control at both the upper and the lesser elements, and I don't have at the lesser one.
If only certain parts of the iframe should let the clicks pass through then in the iframe's onclick handler send a message to the content script of the page via postMessage with the click point coordinates and in the content script's document.addEventListener for that message use querySelectorAll(':hover') or document.elementFromPoint while temporarily hiding the iframe to find the clicked element and then dispatch a new click event to that element via dispatchEvent (plus the iframe's top-left corner offset in the original document).
You can do this simply by using CSS
pointer-events: none
height: 0px;
overflow: visible;
I'm working on a phonegap app that has a fixed sidebar behind the page and I found an behavior issue.
The sidebar is hidden, the user can see it with a tap on a menu icon. When the user tap on he icon the page go to the right and it shows the sidebar that is in a minor z-index.
If the user want to close the menu he have to drag the visible part of the page to the left.
My problem was that in the sidebar I have a block that is vertically scrollable. It works fine but the thing is, if I put the .scroll (overflow-y: scroll; -webkit-overflow-scrolling: touch;) class in this element and the user swipe horizontally from right to left over it the sidebar and the page start a drag.
We're using snap.js for the sidebar interaction.
I want to disable this drag. I tried with CSS and preventing horizontal scroll but it doesn't work.
I attach a pic for more visual details.
Use iScroll5 for scrolling.
Then hook into the onScrollStart event:
myScroll.on('beforeScrollStart', function(event)
{
if (isPanelOpen){
myScroll.disable();
}
else{
myScroll.enable();
}
});
Or - if you not wanna use iScroll5, you can set a global bool, which indicates, if a panel is open (you've gotta do this anyway).
If a Panel is open (meaning, you're showing the sidebar) set the bool to true in snap.js - this subsequently means, you've gotta tweak snap.js.
Then, on touchmove, check the bool if it is true. Then you know, a panel is open, and you can do a event.stopPropagation on touchmove in order to prevent the event bubbling up to get recognized by snap.js and avoid the panels closes too early.
Woop! We found it!
The problem was that we're catching the touchmove event for each element with .scroll class and we're stoping the propagation of it.
We had notice that when we tried to start a horizontal scroll all page was moving like a drag so we added this CSS property:
html, body, .ui-mobile .ui-page-active { overflow-x: hidden; }
And...it works fine!
P.S. we don't actually need the horizontal scroll in any element, so, this is fine for us.
I'm using Fancybox for Wordpress to display a form.
Within the fancybox is a div with id "popup1", which contains the form.
When the user submits the form, #popup1 disappears, and #popup2 appears. div#popup2 just has a little "Thank you" message that is very short.
The height of the fancybox window automatically resizes to fit the height of the content when I switch from popup1 to popup2, but I want the WIDTH of fancybox window to shrink also. How can I do that?
Thanks in advance!
You have several handlers to flip from one pop-up to another like
$("#popup4-BA").slideDown("slow");
Try adding the fancybox (v1.3.4) method $.fancybox.resize() after completing the animation like
$("#popup4-BA").slideDown("slow", function(){
$.fancybox.resize();
});
... you may need to do this in every handler.
Some Notes:
you first pop-up has a fixed width so you may need to try removing it and set the css width property to auto.
since you are using fancybox v1.3.4 with inline content, you need to be aware of this BUG and workaround.