I'm using Bootstrap and I have included a navbar at the bottom of the page.
But The notification bar element (look comment - it is the div element with the id warning.
The notification bar can change It's visibility. But when the visibility is 'collapsed' the div is still taking up all space.
My code:
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="visibility: hidden;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
How can I change it so that the div is not taking any space away when the visibility is hidden?
That is correct. The visibility could be seen as an opacity... so the element is there but with opacity zero, when hidden.
If you don't want it to use the place, rather use display:
<div class="row" id="warning" style="display: none;">
Instead of visibility you can use hide class and toggle it
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row hide" id="warning">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
Change style="visibility: hidden;" to style="display: none;:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="display: none;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx
</p>
</div>
</div>
Use
display: none
instead of
visibility: hidden
The difference is well explained on w3schools
that's the whole idea of visibility: hidden;, it keeps the space even it hides the element. But in display:none will leave the space .
Related
Consider the code below:
What I need to do is to have <div class="col-lg-12 kip"> and all it's content scroll down only to the end of section workOne and NOTHING BEYOND THAT ..
I have attached an image here that will show you what happens now to this fixed div,
as you can see in the image, it leave its section and goes beyond the button / what I need to do is that have it stop and the end of the section or RIGHT ABOVE THE BUTTON.
How can I do this either in CSS or JS / please be detailed as much as you can because as a beginner I may need illustration.
IMAGE TO SHOW THE ISSUE
<section id="workOne">
<div class="container">
<div class="row">
<!-- #### DIV CLASS "kip" is what need to be fixed and scroll down to end of this section#### -->
<div class="col-lg-12 kip">
<h2>Kipeesh Language Check // Version 1.0</h2>
<p>Client asked to develop a simple language learning app.</p>
<ul class="kipul">
<li>Development in progress</li>
<li>Will be made to fit Wordpress</li>
<li><mark>html</mark> <mark>css</mark> <mark>javascript</mark> <mark>php</mark></li>
</ul>
</div>
<!-- #### ONE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>01. Overview</p>
<img src="assets/images/kip1.jpg">
</div>
<!-- #### TWO #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>02. Create a button to hide elements.</p>
<img src="assets/images/kip2.jpg">
</div>
<!-- #### THREE #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>03. Put the button to work / hide elements</p>
<img src="assets/images/kip3.jpg">
</div>
<!-- #### FOUR #### -->
<div class="col-lg-6">
</div>
<div class="col-lg-6 kip2">
<p>04. Add a reveal button to display one item at a time</p>
<img src="assets/images/kip4.jpg">
</div>
<button type="button" class="btn btnWork btn-outline-light btn-lg">View Version 1.0</button>
</div>
</div>
</section>
<!-- #### DIV CLASS "kip" must end here and and scroll down further to the next section #### -->
Done, fixed with the following:
.kip{
position: sticky;
top: 50%;
}
I'm trying to toggle between plus and minus icon for bootstrap accordion. On default, plus icon is showing. When accordion collapses, it shows the minus icons and hides the plus icon. I don't know if what I'm saying makes sense but it's really basic for some of you. I'm just a beginner.
I've tried doing it with css with :after and content "+" and content "-" but this is not what I want. I need to use font awesome. I've also tried the js way.
<script>
$(document).ready(function(){
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend><?php echo $header_title; ?></legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus"></i>
Card Info
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I don't know how to check where I went wrong. All I want is to show the plus and minus icon
$(document).ready(function() {
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
/*$("#btnCollapse").on("click", function() {
$(".fa-plus").toggleClass("fa-minus");
})
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend>
<?php echo $header_title; ?>
</legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Card Info
<i class="fa fa-plus"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You can use alternate solution as follow:
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
Alex, your code is working fine. Please check this fiddle.
[https://jsfiddle.net/boilerplate/bootstrap][1]
Please make sure your js code must be written after the jquery.js and bootstrap.js loaded.
I use bootstrap 4.1 card to display inside categories on right sidebar - Card example image;
On small screens I want to collapse this card, because it is big and goes first - mobile example.
So how can I collapse card on sm and md screens, and not collapse on lg screens? Or I need not to use card?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>
<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
<span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>
<div id="example-collapse" class="collapse d-lg-block">
<!-- your card here -->
</div>
The class d-lg-none hides the button for lg and xl screen sizes and the class d-lg-block shows the div for lg and xl screen sizes. I am using the collapse icon for the navbar-light style, you may need to adjust this to match your navbar.
Can just use the built in Bootstrap classes to hide on smaller screens.
https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Would look something like this (untested)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container d-none d-lg-block">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>
All it does is check media queries on the screen width and apply display:none if the screen size is lower than the threshold you put.
You could set it up this way :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
And will do what you're trying to do.
I am having an issue duplicating a button bar without making and exact clone of the first button bar. In my attempt, the second button bar that forms does not work properly. When the buttons are clicked, they do nothing. I want all duplicated button bars to be new and standalone. Any assistance with this would be greatly appreciated. Please see my working code as an example. http://codepen.io/EBM84/pen/RKyNpE?editors=1010
<div id="pfs-tab3" class="tab">
<div class="duplicate-sections">
<div class="form-section">
<section class="duplicate-container">
<div class="tabs">
<ul class="tab-links main-tab-links button-bar" style="margin-top:0;">
<li class="active">box 1</li>
<li>Box 2</li>
</ul>
<div class="tab-content" style="max-height: 125px;">
<div id="notes-tab1" class="tab active">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Name</p><input type="text" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab1 -->
<div id="notes-tab2" class="tab">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Amount</p><input type="text" placeholder="$" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab2 -->
</div> <!-- End .tab-content -->
</div> <!-- End .tabs -->
</section> <!--duplicate-container -->
</div> <!-- End .form sections -->
</div> <!-- End .duplicate sections -->
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add</a>
Buttons inside cloned sections do not work because .clone() by default do not copy event handlers. You should use .clone(true) if you wish to copy event handlers as well.
https://api.jquery.com/clone/
When cloning events this way, make sure you pick up target elements within event handlers more precisely.
For example:
//following line will show/hide tabs the $(document) //incorrect
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
//following line will show/hide only tabs inside particular ('.form-section') //correct
jQuery(this).parents('.form-section').find('.tabs ' + currentAttrValue).show().siblings().hide();
I'm currently working on a single page website using Bootstrap and fullpagejs :
I've followed the required HTML structure, but each sections of my website have got a huge height. So the sections don't fit with their content.
I noticed that if I add the fp-auto-height class, everything is ok. The content fits with the sections. But this is not the right way to do that.
I have no idea about what happens.
Here is my first section for example
<div id="fullpage">
<!-- section 1 begin -->
<div data-anchor="p1-a" class="section">
<div class="container-fluid">
<div id="p1" class="row vertical-align">
<div class="col-md-offset-5 col-md-6">
<div class="row">
<div class="col-xs-12">
<h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
</div>
</div> <!-- end row title intro -->
<div class="row">
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div><!-- end left intro -->
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div> <!-- end right intro -->
<div class="container-fluid">
<i class="intro-text"> ...</i>
<p class="intro-text">- Luc Fayard </p>
</div><!-- end citation intro -->
</div> <!-- end row content text intro -->
</div> <!-- end colonnes + offset page 1 -->
</div><!-- end bigrow page 1 -->
</div>
</div> <!-- SECTION 1 END -->
[... other sections]
</div> <!-- end fullpage -->
Make sure you are not forgetting to add the compulsory <!DOCTYPE html> declaration at the very start of your document as detailed in this tutorial.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
</body>
</html>
Doctype is necessary in any website.