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
Related
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'
});
I'm trying to use jQuery to hide and show a div when the link in inside the a li tag is clicked, however I can't get the DOM element.
Ousite the ul >li the script it working fine
<a class="showSingle " >All Test </a> //Work Fine
$(function() {
// $('.showSingle ul.list-inline li a').click(function () {
$('.showSingle ').click(function() {
$(this).siblings('.targetDiv ').slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a><i class="fas fa-arrow-circle-down"></i>
</li>
i have add jsfiddler to explain the hole issue https://jsfiddle.net/mpef13qu/4/
I don't think there is anything wrong, you were just missing the target :/
UPDATE: I've changed the code snippet
$(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$(this).parents("ul")
.siblings('.targetDiv')
.slideToggle('fast');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
<div>
<ul class="list-inline text-center">
<li>
<a class="showSingle">View next </a>
<i class="fas fa-arrow-circle-down"></i>
</li>
</ul>
<div class="targetDiv" style="display: none">Some text</div>
</div>
here is the link
If the target is outside the ul it's not a sibling it's more like an uncle or something ;) so $(this).siblings wont work
Try this:
$('.showSingle').click(function(e){
e.preventDefault();
$('.targetDiv').slideToggle('fast')
})
Updated answer based on your markup
Since you have multiple toggle triggers and you only want to toggle the target directly after a certain trigger you can make use of $(this)
But you need to chain a few other jQuery functions to get up to the level where you can target the next target.
$('this').parent().parent().next('.targetDiv')
.next() is better than .siblings() in this situation since it returns the next sibling matching the .targetDiv selector
Here's the complete code:
$(document).ready(function () {
$('.showSingle').click(function(e) {
e.preventDefault();
$('this').parent().parent().next('.targetDiv').slideToggle('fast');
});
});
Updated fiddle https://jsfiddle.net/ywsmgd5c/
For not reloading page <a href="#"> must be written.
I've made demo for you, see it, #Ploni Almoni
<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>
On my menu I have a font awesome icon that I would like to be able to change once click on parent link.
I am trying to get it if menu link is closed will show
And if menu link is open will show
Currently my java script not working.
I can only get it to change if change it manually but trying to get java script to do so.
<?php echo Modules::run('admin/common/header/index');?>
<div id="wrapper">
<nav class="navbar navbar-inverse" role="navigation">
</nav>
<div class="menu">
<ul class="nav navbar-nav menu">
<li>
<a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> System <span class="pull-right"><i class="fa fa-angle-right"></i></span></a>
<ul id="setting" class="collapse">
<li class="third-level">
<a data-toggle="collapse" data-target="#user"><i class="fa fa-angle-double-right"></i> First Level</a>
<ul id="user" class="collapse">
<li>
<i class="fa fa-angle-double-right"></i> Second Level
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-tachometer"></i> Dashboard <small>Dashboard Home</small></h1>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.parent').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa fa-angle-down');
});
</script>
<?php echo Modules::run('admin/common/footer/index');?>
You need to attach the listener to the object that is actually collapsing:
$('#setting').on('shown.bs.collapse', function() {
$(".parent").addClass('fa fa-angle-right').removeClass('fa-angle-down');
});
#setting is the element being collapsed, so the event happens there.
What's wrong here is you jquery syntax
$('.parent').on('shown.bs.collapse', function() {});
The correct syntax looks like $('.parent <sub classes>').on('click', function() {});
I have a triple nested tab in my page. Whenever I activate a middle tag, it stays activated even when I click out of the first tab onto another tab. Here is an example in a jsfiddle.
http://jsfiddle.net/jNWMY/2/
For example:
Try clicking Acquisition then All Device then Facebook
Click Engagement tab in first row
Bottom row does not deactivate
Second example:
Try clicking Acquisition then All Device then Facebook
Click Desktop tab in second row
Bottom row does not deactivate
The first example provided by you can be solved by enclosing nav-tabs and tab-content under tabbable class. Try like this:
jsfiddle
<div id="dashboard_container" style="padding-left:50px; padding-right:50px; padding-bottom:50px; padding-top:10px;">
<h1> Dashboard </h1>
<div class="tabbable">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li>
<a href="#acquisition_tab" data-toggle="tab">
<b>Acquisition</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#engagement_tab" data-toggle="tab">
Engagement
</a>
</li>
<li> <a href="#retention_tab" data-toggle="tab">
Retention
</a>
</li>
<li> <a href="#revenue_tab" data-toggle="tab">
Revenue
</a>
</li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="acquisition_tabs">
<li> <a href="#all_device_acquisition_tab" data-toggle="tab">
<b>All Device</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#desktop_acquisition_tab" data-toggle="tab">
<b>Desktop</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#mobile_acquisition_tab" data-toggle="tab">
<b>Mobile</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="all_device_acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="all_device_acquisition_tabs">
<li> <a href="#ad_all_acquisition_tab" data-toggle="tab">
<b>All</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_gamefuse_acquisition_tab" data-toggle="tab">
<b>Gamefuse</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_facebook_acquisition_tab" data-toggle="tab">
<b>Facebook</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_kongregate_acquisition_tab" data-toggle="tab">
<b>Kongregate</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_yahoo_acquisition_tab" data-toggle="tab">
<b>Yahoo</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="ad_all_acquisition_tab" class="tab-pane">
<p>all device ALL Acquisition</p>
</div>
<div id="ad_gamefuse_acquisition_tab" class="tab-pane">
<p>all device GAMEFUSE Acquisition</p>
</div>
<div id="ad_facebook_acquisition_tab" class="tab-pane">
<p>all device facebook Acquisition</p>
</div>
<div id="ad_kongregate_acquisition_tab" class="tab-pane">
<p>all device kongregate Acquisition</p>
</div>
<div id="ad_yahoo_acquisition_tab" class="tab-pane">
<p>all device yahoo Acquisition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="engagement_tab" class="tab-pane">
<p>Engagement tab</p>
</div>
<div id="retention_tab" class="tab-pane">
<p>Retention tab</p>
</div>
<div id="revenue_tab" class="tab-pane">
<p>Revenue tab</p>
</div>
</div>
</div>
</div>
And for the second mentioned problem you haven't provided tab-content for desktop and mobile tabs