I am trying to use easytabs jquery with Twitter Bootstrap 3. The problem is when i try to resize it, the navbar-toggle isn't working anymore when I click it, nothing appears. Any idea why?
Here is what my html structure looks like:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1><a class="navbar-brand" href="#">Bach Wigs</a></h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="tabContainer">
<ul class="nav navbar-nav navbar-right">
<li class='active'>Salon</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Hair Care</li>
<li>Hair Extensions</li>
<li>Hair Color</li>
<!-- <li class="divider"></li> -->
</ul>
</li>
<li>Location</li>
<li>Contact Us</li>
</ul>
<section class="body">
<div id="salon">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
<div id="services">
<div class='salon-title center-block'>
<img src="img/LogoPNG2.png" alt="logo" class='center-block'>
</div>
<div class='salon-description center-block'>
<h3>Bach Wigs</h3>
<p>We provide top quality in all our services color, cut, style, extensions, wigs and much more.</p>
<p> Our newly remodeled salon established, December, 2012 services the finest clientele in the Metroplex, the United States and several countries around the world.</p>
</div>
</div>
</section>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And here's the javascript code when i try to use easytabs:
$(document).ready( function() {
$('#tabContainer').easytabs({
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
animationSpeed: 'slow'
});
});
UPDATE:
I changed tabContainer back to bs-example-navbar-collapse-1 and created another div to place the tab id for easytabs jquery to function. Problem now is the body contents are also getting hidden when going responsive. I know it's because of the order, I'm finding ways how to solve this. Hopefully you can give out some ideas too. Thanks!
If you want, you can take a look at the website itself. http://webguy.moe/hair
Related
i have a question and that is about my navbar collapse in html. i currently use
http://pastebin.com/s92VvJr6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="container">
<!-- 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><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
<script>
$(function() {
$('.nav a').on('click', function(){
if($('.navbar-toggle').css('display') !='none'){
$(".navbar-toggle").trigger( "click" );
}
});
});
</script>
<img klass="crab" src="images/crab.png" height="50" width="50">
<a class="navbar-brand" href="">Restaurang MaxLax</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="menu-collapsed">
<div class="bar"></div>
<div class="collapse navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
(i don't know how to paste it in here, im new)
when the page goes to 765px width it shows the bar icon. problem is that i can't click on it to toggle down some menus. so my question leads to
Q: How do i write the script so it works will with the code.
would also be great if you can make it for me :) hehe
Mvh Max
So you are using a boostrap navbar without calling the bootstrap js file or the css file for that matter? At least I am not seeing it in your code, and the bootstrap js file should be called directly after the jquery call. Link those two files in from bootstrap and you should have no issue toggling the navbar.
Also as stated this isnt some freelance site that we will just make your code for you. This is a site for you to learn what it is you are doing. If I were you I would edit out that statement pronto or you risk a flurry of downvotes and having the question removed
I'm developing a wordpress theme based on Bootstrap and I'm trying to add scrollspy's effects to my nav, but it only highlights the first element of my nav went the page is loaded (which is wrong, since its corresponding section in in the middle of the page) and then nothing else happens.
My html:
<div class="nav-collapse collapse text-center span4 scrollspy">
<ul class="nav text-center">
<li>
<a href="#section1" >Section 1</a></li>
<li>
Section 2</li>
</ul>
</div>
And the JS with which I try to activate Scrollspy:
$(document).ready(
$("body").scrollspy({
target: ".scrollspy"
})
)
My page is structured as follows:
<section id="zero" style="height: 100vh">
...
</section>
<section id="section1" style="height: 100vh">
...
</section>
<section id="section2" style="height: 100vh">
...
</section>
So I'm not really sure what your navbar looks like as you just posted the nav-collapse part but it looks fine to me. It may be that you only have 2 sections and if you have a fixed navbar and don't specify the offset your second section may not be reaching the top therefore not triggering the active event. There may be some issue with your navbar structure as well but I'm not really sure. It may be the way you are initianting the scrollspy with $(document).ready( instead of using $(document).ready(function(){ but not really sure as they both worked for me in the followig fiddle demo that I posted. Below is the working code that I used along with a working fiddle. I have added a smooth scrolling code below the scrollspy initiation script if you would like your scroll to have a smooth transition. Here is the fiddle that I used and it is working just fine Fiddle.
And here is the code with the full navbar that I used.
<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="#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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse scrollspy">
<ul class="nav navbar-nav">
<li class="active">Section Zero</li>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<section id="zero" style="height: 100vh;background: #222;">
...
</section>
<section id="section1" style="height: 100vh;background: #555;">
...
</section>
<section id="section2" style="height: 100vh;background: #888;">
...
</section>
And here is the ready function that I used with the top offset
$(document).ready(function(){
$('body').scrollspy({
target: ".scrollspy",
offset: 50
});
});
Hopefully this helps you figure out where things are going wrong.
My navbar's toggle button refuses to work. The code I'm using has been copied and pasted from a Bootstrap template with a fully functional navbar. I don't know what's up.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<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>
<a class="navbar-brand" href="#page-top">Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
Downloads
</li>
<li class="page-scroll">
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here's the script tags to the JavaScript and jQuery files. They've been left unmodified.
<!-- jQuery -->
<script src="js/jquery.js" />
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js" />
You didn't identify anything to drop down. You need a list of things, using an unordered list. All you have is the names of the buttons. Please see bootstraps example below:
http://getbootstrap.com/components/#btn-dropdowns
I'm currently building the website for my brand new creation and - since I've never been such a CSS guru - I need your lights!
There is a central screenshot (with the editor inside). When the window is at full size, the screenshot appears fine and centered as it's supposed to be. When I start reducing the width of the window, the image seems as if it's moving to the right. Would it be possible to keep it where it initially is, and resize it when the window resizes?
On resizing, the navbar menu collapses and a toggle button (mobile-style) is created in its place. Is there any way to disable this? Or, at least, not trigger at that stage but at a smaller width (while the navbar-brand is still fitting)?
That's the core HTML section:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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" style="color:black;">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" width="40"> Peppermint</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><i class="fa fa-home"></i> Overview</li>
<li><i class="fa fa-question-circle"></i> Documentation</li>
<li><i class="fa fa-shopping-cart"></i> Buy</li>
<li><i class="fa fa-life-ring"></i> Support</li>
</ul>
</div>
</div>
</div>
<div id="header">
<div class="container" >
<div class="row-fluid" style="text-align:center;">
<img src="images/screenshot2.png" >
</div>
</div>
</div>
And here's the live page: http://www.osxpeppermint.com
Thanks a lot!
The image is larger than the containing div so it jumps outside. Simplest solution is to add the img-responsive to the image:
<img src="images/screenshot2.png" class="img-responsive">
If you want the nav bar to collapse at a different screen width, you will need a custom download of the Bootstrap library. Go to http://getbootstrap.com/customize/ and change the #grid-float-breakpoint value from it's default of #screen-sm-min to whatever width you require.
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
The following is my HTML and Javascript link-ins:
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Operation Pulse</li>
<li>Forum</li>
<li class="dropdown">
Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>News & Updates</li>
<li>Indie Pulse</li>
<li>rec</li>
<li>Geeks and Giggles</li>
<li class="divider"></li>
<li>Podcasts</li>
</ul>
</li>
<li class="dropdown">
Info <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>FAQ</li>
<li>Crew</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
Change the data-target= in the button to.. .navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Most of the time, boostrap.js file reference two times.
In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).