I'm trying to build a scrolling navbar in my Angular 7 app.
The functionality should be like this:
When the user clicks on any of the navbar links, the page will scroll smoothly to that section (with that specific ID), and the navbar link should have an active class.
Also when the user scrolls to that section the menu link should also be updated with the active class (based on the OffsetY for example)
something like this:
Scrolling Nav
You could use the scrollTo window function to get the wanted behavior:
scrollTo
About the perfect approach, to get the exact pixels I am not sure.
Related
I am creating a navbar with dropdown menus for both desktop and mobile users. On desktop, the dropdown menus are displayed when the user hovers over the top-level elements and disappear when they mouse away from it. This is the expected behavior. However, on mobile, when I open the navbar and try to focus on each top-level menu item to reveal the dropdown content inside, I am running into an issue.
When I try to jump, for example, from the first dropdown to the 3rd dropdown, my tap appears to be in the correct place, but the instantaneous collapse back to hidden must happen before the next tap is registered. This leads to all of the menus collapsing back down. I have noticed that if I start at the lowest dropdown option and work my way upward, the issue does not occur because I am tapping on coordinates that are not reflowed when the content changes. I am looking for a solution that allows me to jump between any two navbar items, no matter the order or length of dropdown options without having the menu collapse down completely.
This is a link to what I'm working with. Content reflows to mobile layout at about 750px viewport.
LINK TO EXAMPLE
I have tried adding a delay to the transition property but it did not prevent the jumping of elements in my CSS dropdown menu when jumping between items in mobile navigation. I was expecting a solution that would prevent the jumping of elements and allow for smooth navigation between items in the mobile navbar.
I have a website using the fantastic fullPageJS plugin, and it does what it does very, very well.
I have however, an issue on mobile devices, where the sliding hamburger menu does not scroll with touch controls when the menu height exceeds that of the ViewPort, as in this picture:
Question
How do I force the side menu to accept touch-based scrolling?
You should make use of the fullpage.js option called normalScrollElements.
As detailed in fullpage.js docs:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
Additionally, you can call fullpage_api.setAllowScrolling(false) when opening the modal. That will prevent fullpage.js to scroll up or down when using the mousewheel or trackpad.
You can set it back to the default value when closing the menu by using fullpage_api.setAllowScrolling(true).
You should try to add overflow: scroll if you haven't already.
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
My site have a main div with width set to ~1200px and centered.
if I put g+1 button inside another div which is float:left and div with content on the right side everything works great. Sadly, I would like to put this button on the right side of my content. In this situation during loading this button ads horizontal scrollbar for one second.
I know about this: google +1 button adds scroll bar to my site
but it not work for me.
I'm googling about it, but every solution is similar to this I linked above.
[EDIT] IE & FF only
Only one solution I found is load g+1 button to hidden div, and show this div with some delay.
Social div contains three social-* divs for facebook, googleplus and twitter.
$('#social-fb').css("opacity", "0.0");
$('#social-gp').hide();
$('#social-tw').hide();
$('#social-fb').html('...');
$('#social-gp').html('...');
$('#social-tw').html('...');
timeoutID = setTimeout(function(){
$('#social').hide()
$('#social-fb').css("opacity", "1.0");
$('#social-gp').show();
$('#social-tw').show();
$('#social').fadeIn(500);
}, 2000);