tabs and pills in bootstrap - javascript

I have a tab structure consisting of 5 tabs. All tabs are working fine. Now in my first tab, I have few header tags which are same as the other 4 tabs. So when clicking of each of them, I want to change the active tab and also the contents. My code is as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#overview">Overview</a>
</li>
<li><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div class="tab-content">
<div id="overview" class="tab-pane fade in active">
<p>overview</p>
<br>
<a href="#tab1">
<h3>tab1 link</h3>
</a>
<br>
<a href="#tab2">
<h3>tab2 link</h3>
</a>
<br>
<a href="#tab3">
<h3>tab3 link</h3>
</a>
<br>
<a href="#tab4">
<h3>tab4 link</h3>
</a>
</div>
<div id="tab1" class="tab-pane fade">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Any help soon will help.

Based off bootstrap documentation here
Use a jquery function like this
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#myTab a[href="' + $(this).attr('href') + '"]').tab('show');
})
THat will work on any a link you click and take you to the tab its href is set to
Look at this codepen

You just have to place the content inside tab-content to make it work.
This will work like you want it to. Try it:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a>
</li>
<li><a data-toggle="tab" href="#tab2">tab2</a>
</li>
<li><a data-toggle="tab" href="#tab3">tab3</a>
</li>
<li><a data-toggle="tab" href="#tab4">tab4</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<p>overview</p>
<br>
<div id="tab1" class="tab-pane fade in active">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
</div>
<div id = "tab2" class = "tab-pane fade">
<br>
<p>WInteger convallis, nulla in sollicitudin placerat, ligula enim auctor lectus, in mollis diam dolor at lorem. Sed bibendum nibh sit amet dictum feugiat. Vivamus arcu sem, cursus a feugiat ut, iaculis at erat. Donec vehicula at ligula vitae venenatis.
Sed nunc nulla, vehicula non porttitor in, pharetra et dolor. Fusce nec velit velit. Pellentesque consectetur eros.</p>
</div>
<br>
<div id="tab3" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
<div id="tab4" class="tab-pane fade">
<p>Donec vel placerat quam, ut euismod risus. Sed a mi suscipit, elementum sem a, hendrerit velit. Donec at erat magna. Sed dignissim orci nec eleifend egestas. Donec eget mi consequat massa vestibulum laoreet. Mauris et ultrices nulla, malesuada volutpat
ante. Fusce ut orci lorem. Donec molestie libero in tempus imperdiet. Cum sociis natoque penatibus et magnis dis parturient.</p>
</div>
</div>
Run this codepen

Related

Smooth Scroll in ScrollSpy

Sorry for my English.
I'm creating a website, and I want to implement smooth scroll for internal links. I have tried many different codes, html {scroll-behavior: smooth;}, and different JavaScript codes.
The horizontal navbar works fine with those codes:
But the vertical navbar, which works as scrollspy, doesn't work with smooth scroll.
This is my code:
<!doctype html>
<html lang="pt-bt">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title> Curso HTML Bootstrap </title>
<!--Requeried Meta TAGS!-->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/compiler/bootstrap.css">
<link rel="stylesheet" href="node_modules/bootstrap/compiler/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary">
<div class="container">
<a class="navbar-brand h1 mb-0" href="#">Curso</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSite">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSite">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#item3">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Perfil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Depoimentos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatos</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
id="navDrop">Redes Sociais</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Facebook</a>
<a class="dropdown-item" href="#">Instagram</a>
<a class="dropdown-item" href="#">Youtube</a>
<a class="dropdown-item" href="#">Linkedin</a>
</div>
</li>
</ul>
<form class="form-inline">
<input class="form-control ml-4" type="search"
placeholder="Pesquisar...">
<button class="btn btn-dark" type="submit">Ok</button>
</form>
</div>
</div>
</nav>
<div id="carouselSite" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselSite" data-slide-to="0" class="active"></li>
<li data-target="#carouselSite" data-slide-to="1"></li>
<li data-target="#carouselSite" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/idaho239691_1920.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem ipsum dolor sit amet</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam commodo dolor a ligula fringilla laoreet. Sed sagittis
eleifend sem, eget pretium est aliquam sit amet. Vivamus at
consectetur felis. Proin eu accumsan lectus. Etiam id ante at ex
tempor iaculis.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/img (35).jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Etiam ac elit et eros consequat luctus.</h1>
<p class="lead">Etiam ac elit et eros consequat luctus. Phasellus eu
sapien molestie, pharetra odio ac, mollis turpis. Mauris aliquam arcu
in orci accumsan, et semper mi lacinia.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/maxresdefault.jpg" class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h1>Phasellus tempus eget enim vel pharetra.</h1>
<p class="lead">Phasellus tempus eget enim vel pharetra. Aliquam erat
volutpat. Mauris vehicula lectus quis tellus semper pretium vitae a
purus. Ut vulputate quam eget tincidunt efficitur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselSite" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselSite" role="button"
data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Avançar</span>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12 text-center my-5">
<h1 class="display-3">Maecenas orci risus</h1>
<p>Maecenas orci risus, consequat eu luctus vehicula, vulputate sit amet
arcu.</p>
</div>
</div>
<div class="row mb-5">
<div class="col-sm-5 col-md-3">
<nav id="navbarVertical" class="navbar navbar-light bg-light">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item1">Lorem ipsum</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item1-1">Curabitur bibendum</a>
<a class="nav-link ml-3" href="#item1-2">Phasellus posuere</a>
</nav>
<a class="nav-link my-2" href="#item2">Sed feugiat</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item2-1">Aliquam ac</a>
<a class="nav-link ml-3" href="#item2-2">Maecenas eleifend</a>
</nav>
<a class="nav-link my-2" href="#item3">Nunc vitae</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3" href="#item3-1">Duis nec orci</a>
<a class="nav-link ml-3" href="#item3-2">Ut imperdiet</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-7 col-md-9">
<div data-spy="scroll" data-target="#navbarVertical" data-offset="0"
class="scrollspySite">
<h4 id="item1">Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h5 id="item1-1">Teste</h5>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>iquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi at
orci.</p>
<h5 id="item1-2">Aliquam at</h5>
<p>Aliquam at enim tincidunt, fringilla purus at, lacinia ipsum. Aenean
sed convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta.</p>
<h4 id="item2">Sed varius</h4>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
<h5 id="item2-1">Ut scelerisque</h5>
<p>Ut scelerisque neque sed nunc porttitor, ut egestas metus accumsan.
Proin quis odio nec ex fringilla cursus. Quisque faucibus dictum
risus, vitae porttitor felis varius ac. Etiam sit amet gravida felis,
sed porta velit. Etiam rhoncus egestas maximus. Quisque mollis, elit
eu ultricies luctus, velit mi congue nisi, iaculis congue massa risus
vitae lectus. In hac habitasse platea dictumst.</p>
<h5 id="item2-2">Lorem ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
venenatis tortor fermentum ullamcorper laoreet. Fusce fermentum nibh
sed lacus euismod tincidunt. Aliquam lorem turpis, condimentum id
augue ut, aliquet pretium eros. In id neque mi. Fusce semper magna
eget pharetra porta. Donec auctor scelerisque nisi, eleifend rhoncus
lectus suscipit quis. Etiam scelerisque feugiat varius. Maecenas sed
malesuada mi. Pellentesque sit amet dolor aliquet, imperdiet odio
vitae, suscipit dolor. Aliquam ullamcorper eros ac justo volutpat, nec
lacinia metus tempus. Morbi at odio vestibulum, scelerisque mauris in,
laoreet massa. Praesent consectetur eros quis dapibus pharetra.</p>
<h4 id="item3">Vestibulum mollis</h4>
<p>Vestibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.estibulum mollis lacus quis dolor sodales, sit amet vestibulum
tellus aliquet. Fusce ultrices quis mauris non placerat. Maecenas
dolor velit, tincidunt rutrum sapien vitae, cursus vestibulum dui.
Quisque in dignissim arcu, vitae porttitor velit. Mauris tempus
ullamcorper orci ut dictum. Curabitur commodo dolor ac dui accumsan,
luctus tincidunt nisl pulvinar. Donec est ipsum, lobortis id lorem sit
amet, vulputate blandit nisl. Nunc viverra pulvinar neque. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur sed sem ac velit lobortis porta. Proin blandit turpis
diam, non consectetur lectus iaculis molestie. Fusce venenatis, erat a
venenatis vehicula, libero sapien molestie dui, ac aliquet risus nisi
at orci.</p>
<h5 id="item3-1">Aliquam at</h5>
<p> raesent tempor tellus in ultricies gravida. Nullam bibendum bibendum
justo eget pulvinar. Su Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta. liquam at
enim tincidunt, fringilla purus at, lacinia ipsum. Aenean sed
convallis elit, eu hendrerit urna. Praesent hendrerit dui non
vulputate lobortis. Praesent tempor tellus in ultricies gravida.
Nullam bibendum bibendum justo eget pulvinar. Suspendisse gravida
tristique tristique. Nulla tincidunt nibh et luctus mollis. Praesent
nunc ipsum, porttitor nec quam non, eleifend bibendum elit. Vestibulum
dui dui, suscipit sit amet consequat ut, sagittis eu libero. Duis
tempus luctus lobortis. Maecenas consectetur finibus porta</p>
<h5 id="item3-2">Sed varius</h5>
<p>Sed varius augue in velit lobortis ultricies. Donec auctor vitae
justo quis laoreet. Sed ac tellus metus. Nunc non mauris est. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Cras turpis
justo, lobortis et cursus in, mattis at est. Sed lorem enim, dignissim
at sem vitae, mattis porttitor turpis. Nunc ac eleifend orci, et
tincidunt sapien. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur placerat varius
aliquet. Nullam sit amet velit laoreet, accumsan purus at, molestie
est. Aenean sodales turpis vel egestas dapibus. Mauris fringilla at
eros quis blandit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Sed convallis nisi fermentum
varius tincidunt.</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="js/app.js"></script>
</body>
</html>
And my styles.scss is:
.scrollspySite{
position: relative;
overflow: auto;
height: 400px;
}
html {
scroll-behavior: smooth;
}

JQuery UI click delay

I need a way to select the "open" tab. What characterizes a selected tab are the .ui-tabs-active class and/or the aria-selected="true" attribute.
Bottomline: The command must run only when the selected/open tab name is clicked, NOT when an "unselected/closed" tab is clicked.
The problem is that by the time the mouse button is released, both the class and the attribute are already added.
$( function() {
$( "#tabs" ).tabs();
$('body').on('click', ".ui-tabs-active", function(e){
e.preventDefault();
alert('plop!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi.</p>
</div>
</div>
You need to bind to the mousedown event, not the click event. By the time the click event (mouse down then up) has been triggered, jQuery UI has already modified your elements.
$( function() {
$( "#tabs" ).tabs();
$('body').on('mousedown', ".ui-tabs-active", function(e){
e.preventDefault();
alert('plop!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi.</p>
</div>
</div>
You can use event capturing for this.
However, this is not robust enough since you are relying on the fact that there are no listeners in the ancestors..
You can also add a listener on <html> but this is also not a bulletproof solution.
$( function() {
$( "#tabs" ).tabs();
$("body").get(0).addEventListener("click", function (e) {
if ($(e.target).closest('.ui-tabs-active').size()) {
e.stopPropagation()
alert('on time!')
}
}, true)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi.</p>
</div>
</div>

How to make chevron icon on each accordion menu rotate

I was just wondering how to make my little chevron icon on each accordion menu rotate. (not just jump to the point but actually having an animation effect and rotate)
Thanks!!!!
here's my code:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script><!-- Latest compiled and minified CSS -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity=
"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
rel="stylesheet"><!-- Optional theme -->
<link crossorigin="anonymous" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity=
"sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
rel="stylesheet"><!-- Latest compiled and minified JavaScript -->
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="common.css">
<title></title>
</head>
<body overflow:hidden>
<div id="header">
<a href="frontend.html">
<img src="logo.png" alt="logo image" style="width:50%;height:50%;">
</a>
</div>
<!-- drop down menu for desktop-->
<div id="website">
<ul >
<div class="dropdown" >
<li><a href="#about" >About ▾</a>
<ul class="dropdown">
<li>Staff</li>
<li>History</li>
<li>Our Mission</li>
</ul>
</li>
<li>Contact
<ul class="dropdown">
<li>Employee Contacts</li>
<li>Corporate Contacts</li>
<li>Join Our Team</li>
</ul>
</li>
</div>
</ul>
</div>
<!--drop down menu for mobile-->
<div id="mobileHover">
<nav class="navbar navbar-default">
<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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>History</li>
<li>Staff</li>
<li>Our Mission</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Employee Contacts</li>
<li>Corporate Contacts</li>
<li>Join Our Team</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="streamline.png" alt="steamline">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="synergy.png" alt="synergy">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="impact.png" alt="impact">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
</div>
<div id="wantit">
<h3>What We Offer</h3>
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.</p>
<h3>Testimonials</h3>
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.</p>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title"><a data-target="#collapseOne"
data-toggle="collapse" href="#collapseOne">What We Offer
</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseOne">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.
</p>
<p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.
</p>
</div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-target=
"#collapseTwo" data-toggle="collapse" href=
"#collapseTwo">Testimonials</a>
<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="indicator glyphicon glyphicon-chevron-down pull-left"></i></h4>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. Eget bibendum suscipit viverra in mauris, cras turpis.
</p>
<p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis augue ipsum.
</p>
</div>
</div>
</div>
</div><!-- Post Info -->
<script>
if($(window).width() > 992){
console.log('test');
$("#accordion").remove();
$("#mobileHover").remove();
}else{
console.log($(window).width());
$("#wantit").remove();
$("#website").remove();
$(accordion).ready(function(){
$('#collapseOne').on('shown', function () {
$(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-right pull-right");
});
$('#collapseOne').on('hidden', function () {
$(".indicator glyphicon glyphicon-chevron-right pull-right").removeClass("indicator glyphicon glyphicon-chevron-right pull-right").addClass("indicator glyphicon glyphicon-chevron-down pull-right");
});
});
$('.accordion').on('show', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-down pull-right").removeClass("indicator glyphicon glyphicon-chevron-down pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
}).on('hide', function(){
$(this).parent().find(".indicator glyphicon glyphicon-chevron-up pull-right").removeClass("indicator glyphicon glyphicon-chevron-up pull-right").addClass("indicator glyphicon glyphicon-chevron-up pull-right");
});
}
</script>
</body>
</html>
It's at the very end by the way!
Class
.indicator{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.indicator.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
JS
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass("down");
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
for reference https://plnkr.co/edit/3ItOoCFZQlicu7iCcGFL?p=preview
do you mean like this?
$(".rotate").click(function(){
$(this).toggleClass("down") ;
})
.rotate{
-moz-transition: all 2s linear;
-webkit-transition: all 2s linear;
transition: all 2s linear;
}
.rotate.down{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa fa-chevron-up rotate"></div>

ScrollSpy Not Working Bootstrap

Hello guys I'm using scroll spy of bootstrap. I have applied some height and a overflow to make the scroll appear but after applying it the scroll spy does not works. I mean that when I scroll up or down the link in the navbar does not changes If I remove the style that I gave it starts working. Here is a Jsbin code. Hope this helps and please tell me what is it that I'm doing wrong
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div style="height:200px; overflow:scroll;">
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
..
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
..
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
..
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
..
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
..
</div>
</div>
</body>
JsBin
The problem is that you're overriding the BODY scroll by using style="height:500px;overflow:scroll;" in the DIV that wraps all of the sections.
As a result, the BODY is never scrolled. You can instead put the ScrollSpy on this wrapper DIV..
<div style="height:500px;overflow:scroll;" data-spy="scroll" data-target="#myNavbar" data-offset="50">
...
</div>
Also, the data-target should be #myNavbar...
Working Demo on Codeply
Try the following code. Taken this example form the page - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-scrollspy.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 ScrollSpy Events</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#myNavbar"});
});
</script>
<style type="text/css">
.scroll-area {
height: 250px;
position: relative;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Scrollspy</h2>
<p>Scroll the area below the navbar and see how menu items are highlighted automatically based on the scroll position. The items in dropdown submenu will be highlighted as well.</p>
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Scrollspy</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
</nav>
<div class="scroll-area" data-spy="scroll" data-offset="0">
<div class="section">
<h3 id="section-1">Section 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
</div>
<hr>
<div class="section">
<h3 id="section-2">Section 2</h3>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
</div>
<hr>
<div class="section">
<h3 id="section-3">Section 3</h3>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
<hr>
<div class="section">
<h3 id="section-4">Section 4</h3>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
<p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
</div>
</div>
</div>
</body>
</html>
I think its a some kind of bug trying to remove height and add min-height instead or take another div element and give it max-height:200px or what ever you want
hope this help http://jsbin.com/kubisivuwo/edit?html,output

Background Scrolling layout

Basically, I am creating a web page for my school project... sorry for silly explanation but..
I want to have fixed navigation bar at the top of the site and when you click any link it will move you up or down to the requested content (not to different subpage, just scrolling up/down)..
see example here: http://www.danbrown.com/
however I need just the simplest way how to do it...and I didnt find any tutorial whatsoever.
Thanks
You need to use fixed position for you menu.
http://www.w3schools.com/css/css_positioning.asp
And to scroll to a particular spot in the page use link anchor.
http://www.echoecho.com/htmllinks08.htm
I could code the ole thing for you but you will learn nothing.
Link anchors are totally the easiest and most reliable way to do what you want.
<a name="a">text</a> or <a id="a">text</a> both set an anchor point somewhere, and text will scroll the viewport to that link.
You can also set the id attribute on other elements, say, headings, to make them into anchor targets, but the name property will only work on <a> tags.
As a starting point, you could use the following twitter bootstrap demo to do the fixed navigation bar.
The jquery code is just needed to make a scroll animation. It would also work with-out jQuery.
In the demo you should do a change effect to the navigation to show the current scroll position. That's not in the demo.
You can find the same code here at jsFiddle.
The initial scroll effect is not difficult to do. Please check my anwser in this SO question that will help you to do that effect.
(You could also do the fixed navigation with the code from the counter example and do your own menu styling.)
$(function () {
// source for transition animation from here: https://stackoverflow.com/questions/12643510/css3-transitions-with-anchors
$('a[href^=#]').on("click", function (e) {
var t = $(this.hash);
var t = t.length && t || $('[name=' + this.hash.slice(1) + ']');
if (t.length) {
var tOffset = t.offset().top;
$('html,body').animate({
scrollTop: tOffset - 20
}, 'slow');
e.preventDefault();
}
});
});
body {
min-height: 2000px;
padding-top: 50px;
}
/* anchor style to scroll to the right position */
a.anchor {
display: block;
position: relative;
top: -20px;
visibility: hidden;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Dummy 1
</li>
<li>Dummy 2
</li>
<li>Contact
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row"> <a class="anchor" id="dummy1"></a>
<h1>Dummy 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div class="row"> <a class="anchor" id="dummy2"></a>
<h1>Dummy 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>

Categories

Resources