I am expecting when I click the tab buttons the buttons to get active and display there corresponding content but I am not able to figure out why JavaScript function not working as expected. Below is my HTML, JavaScript and CSS respectively.
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>
This is my JavaScript function:
$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
This is my CSS:
.hide {
display: none;
}
This $("#pages .page:not('.hide')") is an incorrect selector,
has to be changed to this: $("#pages .page:not(.hide)")
$(document).ready(function() {
$("#navbar #list li a").on('click', function(e) {
e.preventDefault();
var page = $(this).data('page');
$("#pages .page:not(.hide)").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="list" class="nav navbar-nav">
<li><a data-page="home-button" href="#">Home</a></li>
<li><a data-page="about-button" href="#">About</a></li>
<li><a data-page="contact-button" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div id="pages">
<div id="home-button" class="page" data-page="home-button">
<div class="container">
<div class="jumbotron">
<h1>Welcome to 2018</h1>
</div>
</div>
</div>
<div id="about-button" class="page hide" data-page="about-button">
<div class="container">
<div class="jumbotron">
<h1>Content 2</h1>
</div>
</div>
</div>
<div id="contact-button" class="page hide" data-page="contact-button">
<div class="container">
<div class="jumbotron">
<h1>Content 3</h1>
</div>
</div>
</div>
</div>
Related
This menu needs to become a Bootstrap burger menu on resolutions with widths 992px and below.
I am using Bootstrap 3.
<div class="container-fluid">
<div class="row navbar">
<div class="col-sm-2 col-sm-offset-1"><a class="btn" href="index.html">Home</a></div>
<div class="col-sm-2"><a class="btn" href="prices.html">Our Prices</a></div>
<div class="col-sm-2"><a class="btn" href="location.html">Location</a></div>
<div class="col-sm-2"><a class="btn" href="about.html">About Us</a></div>
<div class="col-sm-2"><a class="btn" href="contact.html">Contact Us</a></div>
</div>
</div>
I think this is what you are looking for
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<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">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="btn" href="index.html">Home</a></li>
<li><a class="btn" href="prices.html">Our Prices</a></li>
<li><a class="btn" href="location.html">Location</a></li>
<li><a class="btn" href="about.html">About Us</a></li>
<li><a class="btn" href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
This is my header area section of my template. i want to stick the menu bar and logo at the top. I tried a lot for all most 4 days.But i couldn't.I use sticky.js plugin.But it wouldn't happen.What's wrong with my code?I couldn't understand.I use parallax in the header section.Is that for the problem.
.parallax-window {
background: transparent;
}
.parallax_bg {
z-index: 2;
position: relative;
color: #FFFFFF;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try navbar-fixed-top in class of header.
Is this what you're trying to achieve?
.parallax-window {
position: fixed;
top: 0px;
left: 0px;
}
<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
<div class="parallax_bg">
<div class="top_area">
<div class="header_area">
<div class="container">
<div class="row" id="navbar-example">
<div class="col-md-2">
<div class="logo">
<img src="img/header_img/logo.png" alt="">
</div>
</div>
<div class="col-md-10">
<div class="main_menu">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Igredients</li>
<li>Menu</li>
<li>Reviews</li>
<li>Reservations</li>
</ul>
</div>
<div class="social_links">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="header_text_area">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="header_text">
<h2>the right ingredients <br /> for the right food</h2>
BOOK A TABLE
SEE THE MENU
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
so I have a sticky header on a website project that is using single page layout as expected. Just because my header is quite big because of the logo, whenever I scroll it covers the headers of each section. I was wondering is it a way to offset the margin whenever a link is clicked on scroll with like margin-top: 150px;. I also have a content that is using absolute position and I want to specify another selector that is only scrolling on fixed with for a specific page-section. I hope that makes sense, I will post a part of the html and jquery code that I have so far:
HTML:
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <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 scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href=".hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="#carousel-example" class="page-section">
<h1>Header</h1>
<p>CONTENT....</p>
</div>
<div id="about" class="page-section"><h2>Header</h2>
<p>CONTENT....</p></div>
<div id=".services" class="page-section"><h3>Header</h3>
<p>CONTENT....</p></div>
jQuery:
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
})
$(window).scroll(function () {
onScrollHandle();
});
function onScrollHandle() {
//Navbar shrink when scroll down
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50);
//Get current scroll position
var currentScrollPos = $(document).scrollTop();
//Iterate through all node
$('#navbar5 > ul > li > a').each(function () {
var curLink = $(this);
var refElem = $(curLink.attr('href'));
//Compare the value of current position and the every section position in each scroll
if (refElem.position().top <= currentScrollPos && refElem.position().top + refElem.height() > currentScrollPos) {
//Remove class active in all nav
$('#navbar5 > ul > li').removeClass("active");
//Add class active
curLink.parent().addClass("active");
}
else {
curLink.parent().removeClass("active");
}
});
}
Coudn't understand what exactly you want, but for a beginnig let's try to make your code works first,
i removed the scrollHandle() function, and corrected your html,
now try to explain to me what you want and i'll edit my answer.
$('a').click(function (e) {
e.preventDefault();
var curLink = $(this);
var scrollPoint = $(curLink.attr('href')).position().top;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
<div class="container-fluid example5">
<nav class="navbar navbar-default navigation1">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" id="nav-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar5"> <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 scroll-top" href="index.html"><img class="img-responsive" src="img/Logo3.png" alt="Cleaning Services Logo"></a>
</div>
<div id="navbar5" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class="scroll-link" data-id="home" href="#carousel-example">HOME</a></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li><a class="red scroll-link" data-id="hot-offers" href="#hot-offers">HOT OFFERS</a></li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
</header>
<!-- content -->
<div id="about" class="page-section"><h2>about</h2>
<p>CONTENT....</p></div>
<div id="services" class="page-section"><h3>services</h3>
<p>CONTENT....</p></div>
<div id="hot-offers" class="page-section"><h3>Hot Offers</h3>
<p>CONTENT....</p></div>
<div id="testimonials" class="page-section"><h3>testimonials</h3>
<p>CONTENT....</p></div>
<div id="contact-us" class="page-section"><h3>Contact US</h3>
<p>CONTENT....</p></div>
<div style="height:300px"/>
When I click on a menu item the menu does not close. I have already checked the imports of JS and CSS and seemingly everything is OK, is there something else I need to do to run the menu?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
for me works...
$(document).ready(function(){
$('.navbar-collapse a').on('click', function(){
$('.navbar-toggle').click();
});
});
<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.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I'm not certain, but i think it may be dependant on jquery ui... some bootstrap features are. I can't help much further with current knowledge of the question...
I've been having a lot of trouble with imports too.. you can try checking on your browser debug console to be sure everything is being load, also.. on chrome: f12, tab sources.
I hope it has been helpful.
Try It, I think, it usefull.
<nav class="navbar navbar-static-top">
<div>
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
</button>
</div>
<div id="navbar_logistic" class="navbar-collapse collapse">
<ul class="nav navbar-nav flot_none">
<li class="active">Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</div>
</div>
</nav>
check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>