<div class="list-group" id="menu">
MESSAGES <span class="label label-info">5</span> <span class="glyphicon glyphicon-envelope pull-right"></span>
<div id="sm" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
</div>
TASKS <span class="glyphicon glyphicon-tag pull-right"></span>
<div id="sl" class="sublinks collapse">
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
<a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
</div>
ANOTHER LINK ...<span class="glyphicon glyphicon-stats pull-right"></span>
</div>
In spite of both <a> got data-parent="#menu", none of them appearing triggers other to hide. How to update this code to hide one sublinks as other are visible?
The #menu must be a parent of the list-group, and the list-group needs to have the panel class.
http://www.bootply.com/tGF9MEGbLM
Related
I'm just learning some HTML+CSS and today I created a carousel using Bootstrap 4. For some reason it seems not to work. It actually doesn't trigger any action when i press the buttons, neither it switches the slides automatically.
Can anyone please give me some help?
thank you in advance
Please see attached code:
<div class="row slider">
<div class="col mt-3">
<div class="carousel slide" id="slider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/segunda.jpg" alt="Slide #1" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="img/primera.jpg" alt="Slide #2" class="d-block img-fluid">
</div>
</div>
<a href="#slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a href="#slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
You have to include javascript, for example:
$('.slider').carousel({
interval: 2000
})
Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>
Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/
I am looking at a way to add a class dynamically to aurelia template. I have to add an active class if the particular li is visible.
Example
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}">
<ul *ngFor = "#item of slide">
<li class="jobDetails" *ngFor="#job of item; #i = index">
<div>
<span id="{{job.name}}" class="jobName">{{ job.name }}</span>
</div>
<div>
<span>{{job.noOfJobs}}</span>
</div>
</li>
</ul>
</div>
<div>
Previous
Next
</div>
</section>
I want to add the active class on below code
<div class="phs-widget-body">
<div class="phs-carousel-inner">
<ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" >
<li repeat.for = "item of slide" class="phs-small-6">
<a href="javascript:void(0)">
<div class="phs-job-title">${item.title}</div>
<div class="phs-job-info">
<span class="phs-job-loacation">${item.location}</span>
<span class="phs-job-category">${item.category}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="phs-widget-footer">
<a class="left" href="#phsNearbyJobs" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i> Move to Previous
</a>
<ol class="phs-carousel-indicators">
<li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li>
</ol>
<a class="right" href="#phsNearbyJobs" role="button" data-slide="next">
Move to Next <i class="fa fa-angle-right"></i>
</a>
</div>
As well how do I pass an event Object on aurelia?
Just use interpolation
<div class="${ applyMyClass ? 'my-class' : '' }">
E.g.
<div class="${ carouselIndex == $index ? 'active' : '' }">
You don't need to do this with a click event, it's the same as ng2 (only less code!)
I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>
There you go friend!
SOLUTION JDSFILE
Regards!
I have top menu and left menu on page, I want that both should collapse on small screen, these are working fine for small but on large screen both menu don't display.
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#first">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="nav-collapse collapse" id="first">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="nav-collapse collapse" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Here is Fiddle
Please guide me what is wrong I am doing?
In order to correct the position of the links, i changed the order of the navbar elements, first the left side, then the right side ( it was not the problem, its a matter of organization). Added a division between the nav & the page title. Changed the class of the navbar items on the left to :
<ul class="nav navbar-nav navbar-left">
Instead of just
<ul class="nav">
Here is the Final Jsfiddle: http://jsfiddle.net/FDkqT/
I know its simple, but if you expand the window you will see that it works just right