I am trying to follow the steps provided at https://auth0.com/docs/quickstart/spa/angularjs for getting Auth0 integrated into an Angular App.
Code I have is as follows,
<div class="navbar navbar-default navbar-static-top" role="navigation" bs-navbar>
<div class="navbar-header">
<a class="navbar-brand" href="#/login">
<span class="fa fa-twitter"></span> Tweet
<strong>Cloud</strong>
</a>
</div>
<div class="pull-right" style="margin-right : 20px;">
<a href="#/">
<button type="button" class="btn btn-primary navbar-btn">Fetch Tweets</button>
</a>
<a href="#/login">
<button type="button" class="btn btn-social btn-twitter navbar-btn" ng-click="authService.login()"><span class="fa fa-twitter"></span> Sign in with Twitter</button>
</a>
</div>
</div>
Despite my best efforts can't get the "authService.login()" to fire. Any possible suggestions based on common mistakes that newbies might be making?
Thanks in Advance.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a Bootstrap Collapse. The old collapse doesn't close when I open new collapse. Is there anything possible to close old collapse when I open new one?
<div class="my-2">
<a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<i class="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
<div class="collapse" id="collapseExample">
<div class="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
<div class="my-2">
<a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
<i class="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
<div class="collapse" id="collapseExample2">
<div class="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
Bootstrap v4:
You need to use an accordion as a parent and add data-parent to the collapseables
Bootstrap documentation v4
<div id="accordion">
<div className="my-2">
<a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
<i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
<div className="collapse" id="collapseExample" data-parent="#accordion">
<div className="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
<div className="my-2">
<a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2"
role="button" aria-expanded="false" aria-controls="collapseExample2">
<i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
<div className="collapse" id="collapseExample2" data-parent="#accordion">
<div className="card card-body border-4 fs-4">
lorem ipsum...
</div>
</div>
</div>
</div>
Bootstrap V5:
collapsible and accordion are different things
Bootstrap V5 documentation
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" href="#flush-collapseOne"
role="button" aria-expanded="false" aria-controls="flush-collapseOne">
<i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
</a>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">lorem ipsum...</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" href="#flush-collapseTwo"
role="button" aria-expanded="false" aria-controls="flush-collapseOne">
<i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
</a>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">lorem ipsum...</div>
</div>
</div>
</div>
I've got multiple accordions from Bootstrap 4. I want a single accordion to move up/down when I click its corresponding arrow. How do I go about this in JS or jQuery?
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
Disco Full Overview
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h3 class="mb-0">
<a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
Disco Test
</a>
<a href="#">
<button class="btn btn-success pull-right">
<i class="mdi mdi-tooltip-edit"></i> Edit
</button>
</a>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
</button>
<button class="btn btn-link btn-sm pull-right">
<i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
</button>
</h3>
</div>
<div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
...
</div>
</div>
</div>
I've already set up the arrow keys but I don't know how to do this.
Edit.
I've found about insertafter and insertbefore but I don't know how parent and child works. Because the up/down button is child to the other elements and I don't know how to address the entire accordion.
I have seen some questions similar to this one but I haven't come across an answer that would help. Can anyone please have a look at my code?
I have {{$ctrl.init}} and {{$ctrl.people}} assigned in the component. I know this assignment works because if I take away the "split-button" and just print them on the template directly, I can click on them and they redirect normally, with no problem.
This is the code in my template:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>
When I add the button, I get the proper styling but it doesn't drop down or show me the options. There is no reaction.
Any thoughts?
Try this.
you should add ui.bootstrap module to main app .
in controller define $scope.isCollapsed = true;
and also add uib-collapse="isCollapsed" directive to ul tag
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
<div class="btn-group btn-xs" uib-dropdown ng-cloak>
<button id="mydd" type="button" ng-click="isCollapsed = !isCollapsed" class="btn btn-primary dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true">Action
<span class="caret"></span></button>
<ul class="dropdown-menu" uib-collapse="isCollapsed" role="menu" aria-labelledby="mydd">
<li>Start</li>
<li>People</li>
</ul>
</div>
</div>
</div>
</div>
I have a navigation menu. This menu, I have build it with bootstrap and I want it to hide when scroll down and show when scroll up. I get the requirement to it by using vanilla JavaScript only.
Here is my HTML code :
<nav class="navbar navbar-default navbar-fixed-top custom-header" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="" style="color:#FFF">
<img src="img/header-logo.png" alt="Happy Tour" />
</a>
</div>
<!-- This section contains all link buttons in the header -->
<div class="collapse navbar-collapse pull-right mybtn" id="bs-example-navbar-collapse-1" style="margin-top:9px;">
<button class="btn btn-primary btn-md"><i class="glyphicon glyphicon-bookmark"></i> Destinations</button>
<button class="btn btn-success btn-md"><i class="glyphicon glyphicon-th"></i> Tour Package</button>
<button class="btn btn-danger btn-md"><i class="glyphicon glyphicon-file"></i> Book Ticket</button>
<button class="btn btn-info btn-md"><i class="glyphicon glyphicon-search"></i> Find Hotel</button>
<button class="btn btn-success btn-md"><i class="glyphicon glyphicon-user"></i> Register</button>
<button class="btn btn-primary btn-md"><i class="glyphicon glyphicon-fire"></i> Login</button>
</div>
</div>
</nav>
This is a css:
.custom-header{
padding: 0;
height: 120px;
line-height: 120px;
background: url(../img/top_head_bg.jpg) repeat-x;
border:none;
}
Like suggested with this article Auto-Hide Sticky Header (I also used those 4 words to instantly find the solution in Google) you can set your header as fixed
.header {
width: 100%;
height: 7.5em;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
}
and then react to the scroll to change the top property with JS.
Good Luck'
I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.
I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.
How can I fix this?
JSFiddle:
https://jsfiddle.net/whywymam/2u79tpp2/1/
HTML:
<div class="container">
<div class="row upperRow">
<nav class="nav logoFw">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<img src="../image/logo.jpg" class="img-responsive" alt="logo">
</div>
</nav>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">
<a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i>Job Seeker
</a>
</div>
</li>
<li>
<div class="col-xs-3 col-md-4 col-lg-4">
<a href="../employer/signupLoginEmp.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
</a>
</div>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>
<div class="row bottomRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="nav-collapse" class="collapse navbar-collapse topmenu">
<ul class="nav navbar-nav center-block">
<li>Home</li>
<li>About</li>
<li>Job</li>
<li>Resources</li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
<!--to indicate which page user is on -->
</div><!-- end container -->
You may want to remove the unordered list that is containing your buttons and instead use a button group:
http://getbootstrap.com/components/#btn-groups
Also, since button groups make the buttons flush to each other, use some CSS to override their margins.
JS Fiddle:
https://jsfiddle.net/1dwq7bqx/
CSS
.btn-group button { margin: 0 7px; }
HTML
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<img src="logo.jpg" class="img-responsive" alt="logo" />
</div>
<div class="col-md-8 text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
</div>
</div>
</div>
</div>