Affix Bootstrap falling onTop of Sub Navigation instead of above, Bootstrap - javascript

I cannot share the link to the webpage at the moment for confidental reasons but I will describe my issue as much as possible with the required code.
I am running the affix javscript from Bootstrap 3.3.6 and have built the page on anchor points so that the the menu stays affix right above a sub navigation.
My order of elements are:
[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
[CONTAINER/ROW]
[SUBNAV]
[LIBRARYBOX]
[CONTAINER/ROW2]
[SUBNAV2]
[CONTACTBOX]
[CONTAINER/ROW3]
[SUBNAV3]
[FOOTER]
[/MAIN]
The Affix JS I am using
//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
offset: {
top: tfv,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
CSS
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
The Issue
Essentially the nav drops correctly right above my sub navigation as planned once the "affix" class is set
The moment it is still on "affix-top" then on the first click/interaction with the menu - the nav overlaps the sub navigation and it is only on the subsequent click that the nav will reposition itself anew
Attempted solutions
Add
negative margins/paddings,
create new anchor divs within the main 3 content divs
tried debugging this different or fixed heights on the containers instead of min-height 0 !important;
other minute misc. troubleshooting
gone through google dev tools to inspect and play around with the JS HTML and CSS but no luck
I am the only one working on CSS/JS at the firm and the only colleague with similar exp cannot comprehend why the Affix is not working on the first click/interaction with the nav but only on the subsequent ones
If you click on ABOUT (nav has About/Library/Contact as links) the page bounces down to About and if you click ABOUT a second time it scrolls up and since that is when the affix commences, the sub navigations suddenly pops out underneath.
Afterwards with the "affix" class set if you click on LIBRARY or CONTACT then you correctly bounce between them showing the sub navigation each time.
However if you click on ABOUT anew then the state goes back to the top of the page and you have click on the button twice again so that the sub navi pops out underneath
If this can't be trouble shooted without code I'll try to make a blank page so that we can clearly see the impact
Thanks a lot!

I had a similar issue with an affix not updating until I clicked somewhere in the body. I fixed it by adding $(element).affix('checkPosition')

Related

fullpage.js issue positioning navigation button

I am currently using the fullpage.js plugin for my website, I created a slide in navigation bar and I am now placing the pancake to open it on the first section of fullpage. I am trying to position it in the top left corner of the page, but I can't figure out how. Here is the code. Thanks in advance for your help.
<div class="section"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><h2 class="animated fadeInDown">GTX 1080</h2></div>
edit: here is all of my code: https://anotepad.com/notes/pjccfy
Image
You give me very little code to go by, but I'm assuming you want a similar navigation as on the fullPage.js demo page.
Using CSS:
.section {
position: fixed;
top: 0;
left: 0;
}
As I said, I have very little to go by so I don't even know if .section is the correct class to apply this positioning to. Would be great if you could provide a complete page. If you want the element to have some spacing between the browser borders, you can increase the values for top and left to say, 20px.

strange results differing between left and right positioning

This is a strange bug i'm facing, i don't really understand the problem so forgive me for the obscure title.
The problem is I'm developing a SPA style site and i want the content to slide in from the right (when the buttons at the bottom are clicked)
I thought this would be easy, but for some reason it is easy to achieve from the left, using the example below
.page {
right: 100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/3/
and less ideally to slide the full width across like this
.page {
left: -100%;}
.page.active {
left: 0; }
https://jsfiddle.net/pphfstos/4/
But when i try to create the same effect as the first example but from the right it not only doesn't work but totally seems to destroy the page
.page {
right: -100%;}
.page.active {
right: 0; }
https://jsfiddle.net/pphfstos/5/
There is other code involved as you can see in the fiddle, but these are the only things that are different between the 3 examples
Can anyone explain what is happening and how to fix it?
Content you position outside of the viewport to the left is actually hidden, and can’t be reached via scrolling.
Content you position outside of the viewport to the right however “extends” the page in that direction, and can be scrolled to.
Remove the overflow-x: hidden from html/body in your first and third fiddle, and you see what I mean – in the first one, the content positioned to the left is hidden, and no scrollbar appears; in your third fiddle however you do get a scrollbar, and the content positioned to the right can be reached via scrolling, moving the part of your page that is initially visible to the left while you’re doing so.
Now, setting overflow-x: hidden removes the ability to scroll using the mouse; but the viewport can still be “shifted” to display that content, for example by navigating to an anchor – and that is what your links are doing. (But because this is an “instant jump” and not smooth scrolling, you don’t see your initially visible content move away, it is just gone instantly.)
So you simply need to suppress the default action of your anchor links in your click event handler:
mainNavButton.click(function (e) {
e.preventDefault(); // prevent event default action
// … rest of your code
– and the effect of the page ”jumping” to the anchor position is gone.
https://jsfiddle.net/pphfstos/6/

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

div (menu) not pushing div (maincontent)

For a website i'm making I have a little problem. I have a mobile menu which activates when I press the menu button (done with javascript).
I want it to push the div with the 3 blocks (the maincontent div) down, but sadly it's not doing what it's supposed to.
I have tried everything with positions and so on, without success. You can check out the website at dev.hotelkom.nl
It's not working because your main menu is positioned absolutely and its parent has a fixed height. Also your wrapper-content is positioned absolutely hence it's not moving.
Few reasons how you may fix it:
.mainmenu {
position: relative;
height: auto;
}
.wrapper-content {
position:relative;
}
Apply these properties on mobile.

Jquery-Cycle Is hovering above my fixed nav bar, how would I make it go behind it like everything else?

On my website www.staygold-design.com I have a fixed nav bar that floats above all the content.
I have a jquery cycle slide show going on in the second section (click portfolio and scroll the page right to see what I'm trying to explain) and it seems to float above the nav bar.
any thoughts?
Use z-index to change the layer precedence.
#slideshowcontainer {
z-index: 5;
}
#fixednav {
z-index: 10;
}
I've just tested in Firebug an it works. You may need to add position: relative to #slideshowcontainer for this to work in all browsers though.

Categories