jQuery side menu toggle change gyphicon on click - javascript

I have jQuery side menu toggle.
$('#open').click(function() {
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('active');
})
$(document).click(function(e) {
var sidebar = $(".sidebar, #open");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="topHeaderMenu leftMenu listMenu" id="open">
<div class="listMenuDiv"><i class="glyphicon2 glyphicon-align-justify"></i></div>
</li>
<div class="sidebar">
sidebar content
</div>
So, when I click #open then the sidebar will open.The question is how to make the glyphicon-align-justify change to glyphicon-remove if sidebar open and make glyphicon-remove to glyphicon-align-justify if sidebar closeand how to keep glyphicon-align-justify on document click(the current if I click outside/body it will change to glyphicon-remove)

replace your script
$('#open').click(function()
{
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('active');
})
$(document).click(function(e)
{
if($(".sidebar.active").length > 0){
var sidebar = $(".sidebar, #open");
if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
{
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('active');
}
}
});

Related

Close button in bootstrap 5 popover and close popover on body click

I need to close popover on button click inside data-bs-content in bootstrap 5 popovers also there is no function on popover close on body click.
following is my code
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn
JS
return function() {
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
});
}
HTMl
Popover(White) left with close btn
Also if we use hide function as per their doc then we cant reopen popover, check below code
$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
$(document).on("click", ".popover .close-popover" , function(){
$(this).closest(".popover").hide();
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn
It seems like hide() does not toggle the element correctly for some reason as it changes the style for all popover elements (both old and new). After experimenting and searching online, I get it to work by using popover('hide') instead of hide().
$(document).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
$(document).on("click", ".popover .close-popover" , function(event){
$(this).closest(".popover").popover('hide');
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Popover(White) left with close btn

Height of elements are 0px

Hi so I have divs in an accordion:
<a href="#collapse17" data-quickedit-field-id="paragraph/17/field_section_title/en/default" class="field field--name-field-section-title field--type-string field--label-hidden accordion-toggle field--item" data-parent="#accordion" data-toggle="collapse">
<h2><strong>Accordion Header</strong></h2>
</a>
<div id="collapse17" data-quickedit-field-id="paragraph/17/field_section/en/default" class="field field--name-field-section field--type-entity-reference-revisions field--label-hidden panel-collapse collapse field--item">
<div class="panel-body">
<div data-quickedit-field-id="paragraph/10/field_diagram_title/en/default" class="field field--name-field-diagram-title field--type-string field--label-hidden p-1 section-title-diagram field--item background-purple" id="div">INDEPENDENT LEARNING12</div>
</div>
</div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
when hovered over div element on inspect element, the height is 20px. But my jquery:
$('.section-title-diagram').each(function(){
var $div = $("#div");
var height = $div.height();
var text = $div.text();
console.log("Height: ", height);
console.log("Text: ", text);
});
is 0.
When I do
var text = $(this).text();
console.log(text);
it does spit out correctly INDEPENDENT LEARNING12. I am stuck on why height of my div is 0. I have tried multiple things, but to no avail. Any help would be appreciated.
http://jsfiddle.net/xotu9qgj/5/
because you set
.collapse {
display: none;
}
in your css
change to display:block
or set $('.collapse').show(); in your jquery code.
http://jsfiddle.net/xotu9qgj/15/
$('#collapse17').on('shown.bs.collapse', function(){
var diagram_title = $(this).find('.section-title-diagram');
$(diagram_title).each(function(){
var $div = $("#div");
var height = $div.height();
var text = $div.text();
console.log("Height: ", height);
console.log("Text: ", text);
});
});

Bootstrap tooltip is not visible using javascript

I am new to Bootstrap. I am using bootstrap range slider and javascript in my program. Inspite of using following, I am not able to see tooltip of slider:
<input id = "cheapHFSlider" type="range" data-slider-min="0" data-slider-max="100" data-slider-step="1"
data-slider-tooltip="show" onchange="sliderChanged(this)">
<label id = "cheapHFSliderVal">
When I hover my cursor over that slider in Chrome's debugging mode, I can see that 'tooltip tooltip-main top' is being highlighted in Elements tab of debugger. Attaching the screen shot of above.
Related CSS and JS are:
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Bootstrap slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css">
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap slider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>
My script tag is:
<script type="text/javascript">
$(document).ready(function() {
$("#cheapHFSlider").slider().on('slide', function(_event) {
$("#cheapHFSliderVal").html(_event.value + "%");
});
$("#cheapHFSliderVal").html($("#cheapHFSlider").slider('getValue') + "%"); // set the initial value of slider in label
})
function sliderChanged(slider) {
switch(slider.id) {
case 'cheapHFSlider':
$("#cheapHFSliderVal").html(slider.value + "%");
break;
default:
console.log("Invalid slider '" + slider.id + "' !");
}
}
</script>
Please let me know where I am going wrong

Bootstrap: popover button click

I have used bootstrap popover function, its working now.. but i need to "dismiss" popover box if i click anywhere in the page. please check the code that i have used.
First click on the button then i need to "dismiss" popover box on clicking the black space (now its dismiss only when we clicked on the same button).
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here
<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Just use data-trigger="focus" in a tag
For more info check Dismissible popover
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here
<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
This will work
Use below javascript for dismiss popover when outside click
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
Try this
$(document).ready(function(){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
$(document).ready(function(){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:400px; height:400px; background:#000;padding-top:50px;">
Click here<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Popover not working when code hosted locally, but working on jsbin

This is insane... I've been trying to figure out why my popover code won't when hosted locally, but working fine on jsbin. Let me know what you guys think, I going crazy over this. Thanks to you all!!
So here it is:
jsbin: http://jsbin.com/ocepaw/1/edit
/*///// Libraries jquery & bootstrap libraries ///////*/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
/*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/
<a href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
</a>
<a href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
<a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
NEXT
PREVIOUS
/*///// CSS ///////*/
var currentPopover = -1;
var popovers = [];
// Initialize all the popovers to be "manually" displayed.
popovers.push($("#pop1").popover({ trigger: 'manual' }));
popovers.push($("#pop2").popover({ trigger: 'manual' }));
popovers.push($("#pop3").popover({ trigger: 'manual' }));
// On each button click, hide the //currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
});
$("#PreviousBtn").click(function() {
popovers[currentPopover].popover('hide');
currentPopover = currentPopover -1;
popovers[currentPopover].popover('show');
});
I had a similar issue a long time ago. Here's how i solved it: i changed the order of my imported .css and .js files. Try to load first bootstrap's required files and then everything else. Hopefully it will work for you too! if not then there's something wrong with your code.
Try declaring the CSS and JS with no redundancies and in correct order:
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>

Categories