We Keep Coding

Bootstrap popover(draggable) jumps after dragging, what to do?

i am trying to make my popover draggable, but when i drag it, it jumps based on the position in DOM, because its position is set to top:0 and left:0 and it uses transition to change position. Does anybody know how to solve this?
HTML
<div class="row">
<div class ="col-auto">
<h2>
sendhelp
</h2>
</div>
</div>
<div id="Normal">
<a class="btn btn-primary draggable">Popover</a>
</div>
JS
$(".draggable").popover({
html:true,
content: "<p>Drag me</p>"
}).popover('show');
$('.popover').draggable();
Here is an example in jsfiddle:
Example
Try to drag that popover and you will see the jumping.

Seems like margins are interfering from css. Try adjusting those.

Popover scrolls and some content is hidden when called within a .sticky-top element

So, using Bootstrap 4, I have a navigation bar that is set to .sticky-top. There's a button that calls a popover, which works great until the page is scrolled a little, then the top part of the popover content gets hidden.
This wouldn't be too bad if it only happened upon scrolling. The real issue is that if the popover is opened AFTER scrolling, the contents are still hidden.
Here's a Fiddle showing the problem:
https://jsfiddle.net/vfpb7r2d/16/
And the most relevant bit of code:
<div class="sticky-top bg-dark p-2">
<div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>
Is there any way to fix this?

Add data-boundary="viewport" to the popover element.
<div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>
https://jsfiddle.net/vfpb7r2d/22/

Can't click on button after declaring z-index?

I am unable to click on button after giving z-index to it. It's overlapping on my side navigation bar I don't know why, any suggestions would be great:) .
How can I make it clickable even after z-index=-1
MY CODE :
<div class="col-lg-1 col-lg-offset-0 col-xs-4" >
<span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
<a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" >
<button class="btn btn-md btn-default btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; " id="lovebtn">Love</button>
</a>
</div>

Since for those element that z-index value has not assigned, it's z-index value is auto. and for as long as you do not post more of your code we are not going to be able to help.
I tried your code you provided here: https://jsfiddle.net/cb16h3jo/ and the button is responsive.
You can inspect you button in your browser and see if any other element is overlaying in your element. If so then change that element z-index to something lower than your button z-indez says: z-index: -2

I guess you have a reason for setting the zindex to -1? is not that your button is not clickable, is that probably something is overlapping it (I've tried the piece of code you posted and I can click on the button).

you could use high values to bring the button to top layer... try
z-index=3
or
z-index=5
or
z-index=9

Hide div by default and show it on click with bootstrap

I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>

Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>

Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}

Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>

I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>

How to make jQuery Up & Down arrow buttons to scroll body vertically step by step?

I'm creating a single page website with 5 sections one below another on a single page.
I need two buttons, Up & Down arrows near scroll bar to help users scroll using these buttons.
These buttons should sequentially scroll to previous & next section respectively.
Basically we are scrolling the whole body.
For example, navigation is lie Home, About, Projects, Gallery & Contact.
When on Home, and clicked Down arrow, body should scroll to About and stop. If on About, the Up button should bring us to the Home section.
I'm a jQuery n00b so, kindly help me with code examples.
Code so far:
<div id="arrows">
↑
↓
</div>
Thank you.

You can make use of the jquery animate function:
<div id="HomeSection">
<h2>Home</h2>
<input type="button" onclick="scollWin('AboutSection');" value="Scroll to Next" />
</div>
<div id="AboutSection">
<h2>About</h2>
<p>About your page....</p>
<input type="button" onclick="scollWin('HomeSection');" value="Scroll to Previous" />
<input type="button" onclick="scollWin('ProjectSection');" value="Scroll to Next" />
</div>
Jquery:
function scrollWin(id){
$('html,body').animate({
scrollTop: $("#" + id ).offset().top
}, 2000);
}
Source and demonstration: link