I created a simple bootstrap 5 template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Detailed View</title>
<link rel="canonical" href="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.0/font/bootstrap-icons.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png"
sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32"
type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg"
color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<!-- Custom styles for this template -->
<link href="../css/t02-stockDetailView_style.css" rel="stylesheet">
</head>
<body>
<main class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="text-center py-5 px-3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 px-0">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-thumbnail"/>
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<p>CEO of Apple Inc.</p>
<small><cite title="San Francisco, USA">San Francisco, USA <i
class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="bi bi-envelope"></i> email#example.com
<br/>
<i class="bi bi-globe"></i> www.jquery2dotnet.com
<br/>
<i class="bi bi-gift"></i> June 02, 1988</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">test</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">test2</div>
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
When pressing the Home or Profile button nothing gets loaded.
I am loading all js components from bootstrap 5.
Any suggestions why the out of the box pile navigation does not work?
I appreciate your replies!
As i checked bootstrap 5 documentatiton no data-toggle attribute.
Change data-toggle with data-bs-toggle
https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.80.0">
<title>Detailed View</title>
<link rel="canonical" href="">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.0/font/bootstrap-icons.css">
<!-- Favicons -->
<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/apple-touch-icon.png"
sizes="180x180">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32"
type="image/png">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16"
type="image/png">
<link rel="manifest" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/safari-pinned-tab.svg"
color="#7952b3">
<link rel="icon" href="https://getbootstrap.com/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">
<!-- Custom styles for this template -->
<link href="../css/t02-stockDetailView_style.css" rel="stylesheet">
</head>
<body>
<main class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="text-center py-5 px-3">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 px-0">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-thumbnail"/>
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<p>CEO of Apple Inc.</p>
<small><cite title="San Francisco, USA">San Francisco, USA <i
class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="bi bi-envelope"></i> email#example.com
<br/>
<i class="bi bi-globe"></i> www.jquery2dotnet.com
<br/>
<i class="bi bi-gift"></i> June 02, 1988</p>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">test</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">test2</div>
</div>
</div>
</div>
</main><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Related
My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>
Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="page1" role="tab">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="page2" role="tab" >Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="page3" role="tab" >Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="page2" role="tab">Settings</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I use boostrap4, and want to do a left navigation panel as the above example.
But I found that when I click each tab, the href does not work? I refer boostrap documents
Two things:
When you click any tab, there is no content to match inside tab-content, from where the text are actually shown.
You have to set the corresponding id of the content to the related tab's href by prefixing #.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#page1" role="tab">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#page2" role="tab" >Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#page3" role="tab" >Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#page4" role="tab">Settings</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="v-pills-home-tab">Home content...</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="v-pills-profile-tab">Profile content...</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="v-pills-messages-tab">Messages content...</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="v-pills-settings-tab">Settings content...</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You're missing the tab content.
https://getbootstrap.com/docs/4.0/components/navs/#v-pills-tab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-page-1" data-toggle="pill" href="#page1" role="tab" aria-controls="v-pills-page-1" aria-selected="true">Page 1</a>
<a class="nav-link" id="v-pills-page-2" data-toggle="pill" href="#page2" role="tab" aria-controls="v-pills-page-2" aria-selected="false">Page 2</a>
<a class="nav-link" id="v-pills-page-3" data-toggle="pill" href="#page3" role="tab" aria-controls="v-pills-page-3" aria-selected="false">Page 3</a>
<a class="nav-link" id="v-pills-page-4" data-toggle="pill" href="#page4" role="tab" aria-controls="v-pills-page-4" aria-selected="false">Page 4</a>
</div>
</div>
<div class="tab-content col-9" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel" aria-labelledby="v-pills-page-1">page 1 content</div>
<div class="tab-pane fade" id="page2" role="tabpanel" aria-labelledby="v-pills-page-2">page 2 content</div>
<div class="tab-pane fade" id="page3" role="tabpanel" aria-labelledby="v-pills-page-3">page 3 content</div>
<div class="tab-pane fade" id="page4" role="tabpanel" aria-labelledby="v-pills-page-4">page 4 content</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to make a scrollable list of items with two buttons: up and down. My goal is to show a single item whenever I click on any of the two buttons.
I'm using jQuery event slideUp() but whenever I click on the button all the list items slides up. I couldn't separate the event for each item. Help?
$(document).ready(function(){
$(".bott").click( function() {
$(".item").slideUp();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
Maintain a counter to track which item you are sliding up or down. Check the following sample and do the same for the sideDown()(counter-- on sliceDown()).
$(document).ready(function(){
var counter = 1;
$(".bott").click( function() {
$(".item:nth-child(" + counter + ")").slideUp();
counter++;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
$(document).ready(function(){
var i = 0;
$(".bott").click( function() {
$(".item:eq("+i+")").slideUp();
i++;
});
$(".bott2").click( function() {
i--;
$(".item:eq("+i+")").slideDown();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
I am trying to implement a toggleable tab menu through bootstrap and also using Material Design for bootstrap
I have a issue with the tabs after the first one always pushing its content down (below where the 1st tab content would be)
I have searched around and found a similar issue discussed here and also tried the solution provided but it didn't seem to work for me
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
You need to remove the show class from the default active tab, so tab-pane fade in show active becomes tab-pane fade in active:
$('#toggle-tabs a').click(function(e) {
e.preventDefault()
$(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>
Remove the show class from the first tab pane
<div class="tab-pane fade in show active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<script src="main.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>
</head>
<body>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Nav tabs -->
<div class="col-sm-2">
<ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
<li class="nav-item elegant-color-dark">
<a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
<h3>Test1</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
<h3>Test2</h3>
</a>
</li>
<li class="nav-item elegant-color-dark">
<a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
<h3>Test3</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
<!--Panel 1-->
<div class="tab-pane fade in active" id="test1" role="tabpanel">
<h3>Test1</h3>
</div>
<!--Panel 2-->
<div class="tab-pane fade in" id="test2" role="tabpanel">
<h3>Test2</h3>
</div>
<!--Panel 3-->
<div class="tab-pane fade in" id="test3" role="tabpanel">
<h3>Test3</h3>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>
</body>
</html>
I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">
As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>