Develop Reference

Bootstrap-Wizard | class="active" added to wrong element

I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).
To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>.
This results in the nav-pills not being styled right and the previous/next buttons not working properly.
I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.
Any ideas why the class is added to the wrong element and how to prevent it?
Here's my HTML mark-up:
<div id="rootWizard">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li data-target="#step1" class="active">
<a href="#tab1" data-toggle="tab">
<span class="step">1</span>
<span class="title">Title of Step 1</span>
</a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab">
<span class="step">2</span>
<span class="title">Title of Step 2</span>
</a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Title of Step 3</span>
</a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab">
<span class="step">4</span>
<span class="title">Title of Step 4</span>
</a>
</li>
<li data-target="#step5">
<a href="#tab5" data-toggle="tab">
<span class="step">5</span>
<span class="title">Title of Step 5</span>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
This is how I initialize the wizard within the document.ready()-function:
$('#rootWizard').bootstrapWizard({
tabClass: 'bootstrapWizard'
});

How can I reuse this responsive navbar on separate HTML sites

I tried the other solutions on stackoverflow but they did not work.
The navbar or the banner code is so complex and I can not implement the other solutions.
I want to delete this navbar from all the files (mobile and desktop version) and addd it to a separate HTML file so I can reach from other websites files.
The idea I want to do is, I don't want to change the menu items from every file. Just want to do once.
<!-- Header desktop -->
<div class="container-menu-desktop">
</div>
<!-- Header Mobile -->
<div class="wrap-header-mobile">
<!-- Logo mobile -->
<div class="logo-mobile">
<img src="images/icons/logo-01.png" alt="IMG-LOGO">
</div>
<!-- Button show menu -->
<div class="btn-show-menu-mobile hamburger hamburger--squeeze m-r--8">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
<!-- Menu Mobile -->
<div class="menu-mobile">
<ul class="main-menu-m">
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
<ul class="sub-menu-m">
<li>XXX</li>
<li>XXX</li>
</ul>
<span class="arrow-main-menu-m">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</span>
</li>
<li>
XXX
</li>
<li>
XXX
</li>
</ul>
</div>
<!-- -->
<div class="wrap-logo container">
<!-- Logo desktop -->
<div class="logo">
<img src="images/icons/logo-01.png" alt="LOGO">
</div>
<!-- Banner -->
<div class="banner-header">
<img src="images/banner-01.jpg" alt="IMG">
</div>
</div>
<!-- Navbar STARTS HERE -->
<!-- -->
<div class="wrap-main-nav">
<div class="main-nav">
<!-- Menu desktop -->
<nav class="menu-desktop">
<a class="logo-stick" href="index.html">
<img src="images/icons/logo-01.png" alt="LOGO">
</a>
<ul class="main-menu">
<li class="main-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="main-menu-item">
XXX
<ul class="sub-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="mega-menu-item">
XXX
</li>
<li class="mega-menu-item">
XXX
</li>
</ul>
</nav>
</div>
</div>
</div>

You could achieve this using an .
Just host the navbar as a unique site and than reference it like this:
<iframe src="http://host:port/navbar"></iframe>

Place this file on a server
Fetch file contents through ajax
Replace this content with Javacript/Jquery.

Appended content do not get the proper CSS style

New appended content do not get the same design as the existing ones.
Here my full code:
HTML
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Notifications -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">notifications</i>
<span class="label-count">7</span>
</a>
<ul class="dropdown-menu">
<li class="header">NOTIFICATIONS</li>
<li class="body">
<ul class="menu" id="append">
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">person_add</i>
</div>
<div class="menu-info">
<h4>12 new members joined</h4>
<p>
<i class="material-icons">access_time</i> 14 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-cyan">
<i class="material-icons">add_shopping_cart</i>
</div>
<div class="menu-info">
<h4>4 sales made</h4>
<p>
<i class="material-icons">access_time</i> 22 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-red">
<i class="material-icons">delete_forever</i>
</div>
<div class="menu-info">
<h4><b>Nancy Doe</b> deleted account</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-orange">
<i class="material-icons">mode_edit</i>
</div>
<div class="menu-info">
<h4><b>Nancy</b> changed name</h4>
<p>
<i class="material-icons">access_time</i> 2 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-blue-grey">
<i class="material-icons">comment</i>
</div>
<div class="menu-info">
<h4><b>John</b> commented your post</h4>
<p>
<i class="material-icons">access_time</i> 4 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">cached</i>
</div>
<div class="menu-info">
<h4><b>John</b> updated status</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-purple">
<i class="material-icons">settings</i>
</div>
<div class="menu-info">
<h4>Settings updated</h4>
<p>
<i class="material-icons">access_time</i> Yesterday
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
View All Notifications
</li>
</ul>
</li>
<!-- #END# Notifications -->
</ul>
</div>
</div>
</nav>
<br/><br/> <br/><br/> <br/><br/>
Append it
JAVASCRIPT
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append(
"<li>"+
"<a href=\"javascript:void(0);\">"+
"<div class=\"icon-circle bg-purple\">"+
"<i class=\"material-icons\">settings</i>"+
"</div>"+
"<div class=\"menu-info\">"+
"<h4>Just make a small Test to see the problem</h4>"+
"<p>"+
"<i class=\"material-icons\">access_time</i> Yesterday"+
"</p>"+
"</div>"+
"</a>"+
"</li>"
);
return false;
});
A real example to test it and see my problem:
https://jsfiddle.net/Lr7gn020/1/
To reproduce my problem:
Click on Append it link
Then click on Notification dropdown menu and scroll down into the last <li> row, and you will see that the design of appended rows is not like the others.
Please help to figure it out.

You're missing a couple of classes when you append the new items. The a tag in the original items has the waves-effect and waves-block classes applied, but you're not giving it those in the newly added elements.
Try changing "<a href=\"javascript:void(0);\">" to "<a href=\"javascript:void(0);\" class=\" waves-effect waves-block\">"
Updated JSFiddle: https://jsfiddle.net/Lr7gn020/3/

I have forked your fiddle with a minor adjustment. The only thing that is preventing the styling from being the same as the others is the amount of content that is in the h4 under the menu-info div. When I deleted some of the text, leaving only "Just make a small Test" it appears like all the other list items. The text was making it so the width of the div was larger than the area given to the right of the icon which is why it was dropping down.
Your anchor tag is also missing the two classes waves-effect waves-block. If you are adding these 2 classes with JS you will need to reinitialize the function that does this after the item is appended.
UPDATE
If you need to have that much content then just simply add a max-width: 200px to your .menu-info class. Updated Fiddle

Static page lazy loading jQuery

I am trying to do page load when scrolling down. When I started searching for code I found stuff only for dynamic pages. I did not get any code for static pages.
Please help me. How to do when scrolling down at certain points in a static page, not dynamic page. My code structure is below:
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
<article class="blog_post">
<h4><b>Self-driving Trucks Face Regulatory, Technical Hurdles</b></h4>
<div class="blog_category" style="font-size:14px">
<ul>
<li>Fresh releases</li>
</ul>
</div>
<div class="blog_text" style="font-size:14px">
<ul>
<li>| </li>
<li>Post By : Trucks.com</li>
<li>| </li>
<li>On : 12 Dec 2016</li>
<li>| </li>
<li>
<span class="fb-share-button" data-href="" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" href="javascript: void(0)" onclick="popup()"><img id="my-img" style="width:2%;" class="social" src="images/br4Br.png" /></a>
</span>
</li>
<li>| </li>
<li><a data-site="" class="ssba_twitter_share" onclick="popup('')" target="_blank"><img id="my-img" class="social2" src="images/t1.png" /></a></li>
</ul>
</div>
<div class="blog_post_img">
<a href="" target="_blank">
<img src="images/blog_post_img73.jpg" alt="image">
<span style="font-size:10px;">Torbjörn Holmström, senior advisor to Volvo's Research & Technology Group. (Photo: Volvo)</span>
</a>
</div>
<p>For several decades now, Torbjörn Holmström has been helping Volvo vault the technical and logistical barriers to fulfill the dream of fully autonomous long-haul trucks.</p>
Continue reading <i class="fa element" aria-hidden="true"></i>
</article>
<article class="blog_post">
<h4><b>Nikola Motors Wants to Use Tech to Fix Trucking's Millennial Problem</b></h4>
<div class="blog_category">
<ul>
<li>Fresh releases</li>
</ul>
</div>
<div class="blog_text">
<ul>
<li>| </li>
<li>Post By : Inverse</li>
<li>| </li>
<li>On : 11 Dec 2016</li>
<li>| </li>
<li>
<span class="fb-share-button" data-href="" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" href="javascript: void(0)" onclick="popup('')"><img id="my-img" style="width:2%;" class="social" src="images/f1.png" /></a>
</span>
</li>
<li>| </li>
<li><a data-site="" class="ssba_twitter_share" onclick="popup('')" target="_blank"><img id="my-img" class="social2" src="images/t1.png" /></a></li>
</ul>
</div>
<div class="blog_post_img">
<a href="" target="_blank">
<img src="images/blog_post_img72.png" alt="image">
</a>
</div>
<p>Nikola Motor Company has gotten a lot of attention for its hydrogen-powered trucks. And it should: Hydrogen fuel cells make the trucks environmentally friendly, more powerful than diesel-reliant vehicles, and safer than their predecessors.</p>
Continue reading <i class="fa element" aria-hidden="true"></i>
</article>
.
.
.
.
.
.
</div>
</div>
</div>
I have so many articles and it will update daily around 8 to 10 articles. If I start scrolling down it will take so much time to reach the bottom articles. So Please help me.

i have a bootstrap left side menu ..but when i click the menu items i want to dispaly content from particular nav item on the same page

<div class="profile-usermenu">
<ul class="nav">
<li class="active">
<a href="#" id="navitem1" data-content="content-wrap1 ">
<i class="glyphicon glyphicon-user"></i>
View Profile </a>
</li>
<li class="active">
<a href="#" id="navitem2" data-content="content-wrap2">
<i class="glyphicon glyphicon-"></i>
Account Settings </a>
</li>
<li class="active">
<a href="#" id="navitem3" data-content="content-wrap3">
<i class="glyphicon glyphicon-ok"></i>
Tasks </a>
</li>
<li class="active">
<a href="#" id="navitem4" data-content="content-wrap4">
<i class="glyphicon glyphicon-flag"></i>
Help </a>
</li>
</ul>
</div>
<!-- END MENU -->
</div>
</div>
<div class="col-md-9">
<div class="profile-content">
<div id="content-wrap1" class="content">Edit Profile Content goes here Either it may form or what ever </div>
<div id="content-wrap2" class="content">Account settings</div>
<div id="content-wrap3" class="content">Invoices</div>
<div id="content-wrap4" class="content">Credit card info</div>
</div>
</div>
</div>
</div>
<br>
<br>