Develop Reference

How to add sticky header to bootstrap-table that has a dropdown filter as the title?

I am trying to use bootstrap-table and give it an "Excel feeling". With the option to quickly filter a column based on the values inside. But I can't seem to make it work with sticky headers, there is a bootstrap-table addon for the sticky header (data-sticky-header="true").
I tried to create something using bootstrap 5 dropdown and attach it to the title, and it works great, but when the sticky header is activated (scroll the head out of view so it kicks in), the filter and the dropdown stop working.
Here is the example, you can see that it works fine until you try to scroll down.
Maybe someone has a solution or option to use a custom sticky header that would work?
Edit:
Followed by T J answer to change the overflow, it fixed the problem where the dropdown wouldn't show on the sticky header.
There was a problem where the filter wouldn't apply, and I fixed it by changing:
const checkboxList = document
.querySelector("#departmentDropdownMenu")
.querySelectorAll("input");
to:
const dropdownUL = cb.parentElement.parentElement.parentElement;
const checkboxList = dropdownUL.querySelectorAll("input");
But now a problem that I am having is that when I scroll, this filter apply once but then if I click on the dropdown again it "reset" to how it was when it started (when I scrolled past it's entry point). It changes the filter but on view it appear to "reset" to that position every time. If something is checked there when I started scrolling it will appear checked everytime the dropdown opens again.
I made the updates to this example

Remove overflow: hidden; from .fix-sticky class
.fix-sticky {
position: fixed!important;
/* overflow: hidden; */
z-index: 100;
}

fullPage.js utilizing .active and .fp-viewing-firstpage-X classes

I have a webpage that utilizes fullPage.JS. There is a firstPage section with 5 horizontal slides that is navigated to with a header menu via data-menuanchor. Additionally there is a secondPage section with 3 horizontal slides that is navigated with a footer menu, also via data-menuanchor.
I would like for each li menu item to change color when it's corresponding section is navigated to. Right now I am accomplishing MOST of this by using the :focus CSS selector. However this only works when a menu item is clicked. I also need the highlights to change when navigation is done via touchscrolling, keyscrolling, etc.
Initially I thought I could accomplish this by using the "active" class as it is passed to the menu, but I quickly realized that, because of the structure of my page, the "active" class is simultaneously passed to every li in the menu....either all five items in my header menu or all 3 items in my footer menu.
After concluding that I would not be able to use the "active" class to differentiate as needed, I began looking at the "fp-viewing-firstpage-X" class that is given to the body as each section and slide is navigated to...
However, I am not having luck with either approach I've come up with.
First I tried to do it all with CSS with something like this:
.fp-viewing-firstpage-1 .item {
color:white;
}
After not having success with that I tried using this javascript in the onLoad, onLeave, afterRender callbacks, etc...:
if ( $('body').hasClass('fp-viewing-firstpage-1') ) {
$('.item').addClass('white');
}
So far neither approach has accomplished my goal of changing the color of whichever menu item's corresponding section is navigate to, regardless of HOW is is navigated to.
Your assistance is appreciated!

Wordpress navigation submenu shifts items to the right on hover

I am working on a website developed in Wordpress that uses a three-depth navigation menu. The menu is automatically generated and consists of <li> and <ul> items. I am encountering a problem where list items shift to the right when a list containing a submenu is opened.
The site where this happens is the Dutch site http://www.skoll.nl/. I'm having trouble converting this to a JS-fiddle, but I'll try again tomorrow.
The problem
Whenever I hover on an item in the first submenu, the second submenu opens. Often, the items in this second submenu are larger than the item itself, causing the list item to expand and pushing other items to the right. This can be seen by navigating to "Informatie" and then "Evenementen". You can see that the item on the right shifts to the right, making it rather hard to click on.
I've spent numerous hours on this problem and haven't got any further, so the question I would like to be answered is:
How do I stop the list items in the first submenu from shifting to the right, while preserving the current layout of the navigation menu? I am fine with both CSS- and JS-solutions.
Thanks in advance.

Add following style to li elements which contains for example 'Evenementen' link:
position: relative;
Then for submenus add following styles:
position: absolute;
left: 0;
top: 20px; /* this needs to be adjusted */
You may have to add some other styles too to make everything look like it looks now, but after this submenus wont shift items anymore.

isotope image onclick to reveal new content in top div Wordpress

I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks

Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)

CSS class depending on page position

I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.

This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()

When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.

Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}

Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).