What is the easiest way to show/hide a div outside the tab content when on that specific tab only? My current example shows but I could not make it hide again.
Plunker: http://plnkr.co/edit/E6dK5C9ZxVQaicQgfS4w?p=preview
<div class="border" ng-show="aboutTabActive == true">Show me when the "About Tab" is clicked.</div>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view></div>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home" ng-click="aboutTabActive=false">Home</a></li>
<li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
</ul>
Related
I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?
change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>
I have explain my query with this code. here when i click on dropdown navbar page should redirect to the tabbar available on another page.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#tab1">Page 3-tab1</a></li>
**<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->**
<li><a id="tab2" href="Page-3.html#tab2">Page 3-tab2</a></li>
**<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->**
<li><a id="tab3" href="Page-3.html#tab3">Page 3-tab3</a></li>
**<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->**
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
Page-3.html contains a tabbar should be activated and redirect on screen on click menubar.
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#tab1" role="tab">Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3" role="tab">Tab3<br></a>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content.</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
I am new in jquery and it can be done through javascript/jquery. But i dont know exactly how to do it. So,please can anyone help me??Thank you in advance
You can use jquery to make this work.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><a id="tab1" href="Page-3.html#menu1">Page 3-tab1</a></li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li><a id="tab2" href="Page-3.html#menu2">Page 3-tab2</a></li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li><a id="tab3" href="Page-3.html#menu3">Page 3-tab3</a></li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
And then in page-3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 3-tab1</li>
<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
<li>Page 3-tab2</li>
<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
<li>Page 3-tab3</li>
<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
<!-- Page 3 Contains one tabbar having 3 tabs -->
</ul>
</div>
</nav>
<h1>page 3</h1>
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
<li><a data-toggle="tab" href="#menu2">Tab2</a></li>
<li><a data-toggle="tab" href="#menu3">Tab3</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Some content in tab 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Some content.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Tab 3</h3>
<p>Some content.</p>
</div>
</div>
<script>
$(document).ready(function() {
var hash = $.trim( window.location.hash );
console.log(hash);
var thisLink = $('a[href="'+hash+'"]');
console.log(thisLink.parent());
hash = hash.substring(1);
$(".active").removeClass("active");
$(thisLink.parent()).addClass("active");
$("#"+hash).addClass(" in active");
$('#gototab1').click(function() {
$('#myTab a[href="#menu1"]').tab('show');
});
$('#gototab2').click(function() {
$('#myTab a[href="#menu2"]').tab('show');
});
$('#gototab3').click(function() {
$('#myTab a[href="#menu3"]').tab('show');
});
}); //end of document ready
</script>
I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
my dropdown menu in navbar works fine when the browser is maximized but if i resize the browser to a mobile size then the dropdown menu does not show up as well as the menu button toggled up. here is my navbar code with dropdown. I am using bootstrap 3.when i clicked EBBL the dropdown menu does not show up and the whole navbar menu is toggled up.
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="<?php echo site_url('home/index')?>">BCTF</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse ">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/index')?>">Home</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_about')?>">About</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_open_butterfly_park')?>">Open Butterfly Park</a>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>About EBBL</li>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
</ul>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_biography')?>">Biography</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_gallery')?>">Gallery</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am really new with bootstrap, and I'm trying to apply the active class to a menu, but for some reason is not working, I don't know if it is the jquery function (I got it from a tutorial) or if bootstrap won't allow the use of active links.
JS Fiddle Demo
HTML
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
CSS
nav-justified a.activee {
background:red !important;
}
JS
jQuery(function() {
jQuery('.nav-justified a').each(function() {
if (jQuery(this).attr('href') === window.location.pathname) {
jQuery(this).addClass('activee');
}
});
});
In your JavaScript code you're checking to make sure that the href attribute of your link is equal to window.location.pathname but, in your JSFiddle, none of the links have a matching attribute. Try this instead:
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
http://jsfiddle.net/021qbcvd/7/
Note that window.location.pathname is equal to everything after the main URL. I had to do an alert(window.location.pathname) to get the correct one for the JSFiddle.
if you use twitter-bootstrap 3,can use this code :
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>CARS</li>
<li>MODEL</li>
<li>COLORS</li>
</ul>
</div>
</div>
and use class="active" in li tag to show active page