Develop Reference

bootstrap collapse stacking elements

I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad

well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.

Bootstrap popover not staying attached to button when scrolled/Positioning is wrong

I have a scrollable table with buttons that generate popovers. The problem is that it's positioned in the center of the button and not outside of it.
Here's my JSFiddle. http://jsfiddle.net/Br4Zg/999/
I read on the Bootstrap site that when attaching a popover to a btn-group I need to use
container: "body" attribute, but when I used that then it doesn't scroll with the table since it's not relative to the table anymore as seen in this fiddle: http://jsfiddle.net/Br4Zg/1000/
Is there a way to get the position correct along with the scrolling functionality?

If you remove the button from the button group then the popover shows up in the correct location.
Remove this
<div class ="btn-group btn-broup-sm">

How to slide out old div and slide in new div with text content in loop?

How to make two divs so that after clicked button old div is slade out and new div with new content is slide in?
My conception but not aligned inline:
jsfiddle
I found something similar to my conception but for my solution I need infinity loop with dynamically added content: example 1 or example 2

There were a few changes I made to the existing code and CSS, but this should do what you want. I also added a check to the reset button to ensure that the slideOut is not already hidden. Otherwise, the animation will unhide the element and hide it again.
It is better to put things into the jQuery $(document).ready() function to ensure that all of your elements have been loaded before trying to use them.
New Fiddle Link

JQuery hover fadeIn/fadeOut on different divs

I have lists inside a div called header which I want to expand the lists on hover over each list, but I want all the lists which have been hovered over to stay open until the mouse is moved out of the header div. So far I have fadeIn/fadeOut for each list individually or I can get each list to fadeIn and stay open but not fadeOut whenever I move out of the div.
here is the code that I am using: http://jsfiddle.net/jTCdg/11/
The line commented out in the javascript is what changes between all the lists staying visible or the list fadeIn/fadeOut on hover.
This is my first time using javascript so help would be greatly appreciated. thanks

jQuery hover is a shortcut for the mouseenter and mouseleave event handlers. You can define both separately.
$(document).ready(function() {
$("#header ul").mouseenter(function() {
$(this).find("li").fadeIn();
});
$("#header").mouseleave (function() {
$(this).find("li").fadeOut();
});
});
Also see the updated jsfiddle.

jQuery - Selecting a child div background image and amending it

Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks

Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!

I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO