I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (http://getbootstrap.com).
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
The part of the code is as follows:
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<div class="container">
<div class="row">
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<li>Events<span class="caret"></span>
<ul class="collapse list-unstyled" id="eventSubmenu">
<li > Link1 </li>
<li > Link2 </li>
</ul>
</li>
As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword
Related
I want the navbar button hover drop-down effect to only activate once one of the navbar buttons is clicked. After that once clicked outside like body hover again should be disabled. At the moment hover is working where if I move the mouse around it activate (hence hover effect) but this can be annoying if user meant to not use navbar.
So normally when hovering the navbar, buttons shouldn't drop down any list. But once any of the navbar button is clicked, till you click out side, like the body all navbar buttons should be hovering like normally. I tried some jQuery but wasn't successful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BAPTIST</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./headerAndFooter.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<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>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav top-nav pull-right">
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> About Us</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Providers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Payors</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Employers</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
<div class="dropdown">
<li class="dropbtn"><i class="fa fa-chevron-down" aria-hidden="true"></i> Patients</li>
<div class="dropdown-content">
Action
Another action
Something else here
Separated link
One more separated link
</div>
</div>
</ul>
</div>
</div>
</nav>
</body>
</html>
I was having trouble with getting your navbar to work without all the css you have, so I used the generic Bootstrap 3 navbar from the site to show you.
What the code below does is this:
Anytime a link tag inside the nav is clicked, it will set the variable allowHover to true.
Anytime the users mouse enters the div with class of "content", allowHover is set to false.
I believe the other two functions are self explanatory, but if they require explanation, let me know.
let allowHover = false
$('nav a').click(function() {
allowHover = true
})
$('.content').mouseenter(function() {
allowHover = false
})
$('ul.nav .dropdown').hover(function() {
if(allowHover)
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn('fast');
})
$('ul.nav .dropdown').mouseleave(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut('fast');
})
Check out the codepen. Make sure you when you click a regular link in the nav, don't move your mouse outside of the navbar, or the dropdown won't work.
This is a close example to what you asked for, but I think its quite sufficient in getting you where you need to be to get your own rendition working.
I have a bootsrap navbar, and every menu elements of it has a href attribute, to navigate through pages. When I click on, one of the elements the navbar disappears, of course because I left the page which contained it. But how can I do it dinamically? One always visible navbar fixed top, and every html page( navbar element) stay on the page where the navbar is.(without a database)
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
US
</li>
<li class="dropdown">
SERVICES
</li>
<li class="dropdown">
WORK WITH US
</li>
<li class="dropdown">
EN
</li>
</ul>
</nav>
You may do something like this:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
function goto(url){
document.getElementById("frame").src=url;
}
</script>
This will load the clicked link into the iframe. The page stays the same, so the navbar is still visible. You could also redirect all link cicks to end up into the iframe:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
window.onload=function (){
[...document.getElementsByTagName("a")].forEach(function(a){
a.onclick=function(e){
e.preventDefault();//the redirect
document.getElementById("frame").src=this.href;
}
});
};
</script>
Or if you like the jquery.load:
<div id="navbar">
Google
...
</div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("a").each(function(){
this.on("click",function(e){
e.preventDefault();
$("#content").load(this.href);
});
});
});
</script>
here is a image of coding
here i have a jquery code and html code.i have external css also.i have a problem for making active feed,medicine,eggs,birds and summary item.i want also to make active every pages of sub item of given above item.
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
active:false,
heightStyle:""
});
});
</script>
<div class="sidebar">
<div id="icon-bar">
<a class="active" href="startpage.php">Home</a>
<div id="accordion">
<a class="" href="#">Feed<span class="caret"></span></a>
<div id="feeditem">
<a href="feed_purchase.php" >Feed-Purchase</a>
Feed-Consumption
Feed-Stock
</div>
Medicine<span class="caret"></span>
<div id="medicineitem">
<a href="medicine_purchase.php" >Medicine-Purchase</a>
<a href="medicine_consumption.php" >Medicine-Consumption</a>
Medicine-Stock
</div>
Birds<span class="caret"></span>
<div id="birdsitem">
Birds-Purchase
Birds-Sales
Birds-Mortality
Birds-Stock
</div>
Eggs<span class="caret"> </span>
<div id="eggsitem">
Egg-Lays
Egg-Sales
Egg-Stock
</div>
Summary<span class="caret"></span>
<div id="summaryitem">
Stock-Summary
Income-Summary
Expenses-Summary
Consumption-Summary
</div>
</div>
</div>
</div>
If you using jquery-ui.js please try below css
.ui-accordion-header-active {
background-color: #FFF;
color: #0077b3;
}
The information is not so clear but as I understand you want to make thee clicked link active. You can use the script. 'active' is a css style.
<script>
$('div#accordion > a').click(function (e) {
$('div#accordion > a').removeClass('active');
$(this).addClass('active');
});
</script>
I'm trying to get my responsive navigation to collapse when clicking a navigation item (link).
This is my navigation:
<nav class="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav-toggle"></li>
</ul>
</nav>
Here's how the responsive nav gets expanded:
<script>
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
</script>
I'm not sure why you're mixing old school list tags with the modern Nav because you don't need them.
If you want the menu to collapse upon selection you can use this neat technique:
<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
Home<br>
About<br>
Products<br>
Services<br>
Contact
</div></details></nav>
It looks like you want to hide the navigation when the toggle link is clicked. If so, I would do the following. Note that your <a> tags were outside the <li> tags, I've moved them inside.
<nav id="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav0item">Toggle</li>
</ul>
</nav>
I would target by ID and not class, and set the display to none.
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
Since your toggle is on a <li> inside the nav, your navigation menu (and the toggle) will be hidden when activated. So, I'd make a way to show it again. You could, for instance, add this function in your JS.
function showNav() {
document.getElementById('nav').style.display = "block";}
And then add a link somewhere for the user to show the menu again.
<button onclick="showNav();" >Show Menu</button>
If you go that route, I'd also hide the Show Menu button by default by adding id="shownav" style="display: none;" to hide it initially. And then have your collapseNav function also show the button:
document.getElementById('shownav').style.display = "block";
Thank you for your responses.
This is what I was looking for:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
Now the "responsive" class gets removed when clicking on a navigation item or the logo, so my navigation returns to collapsed mode.
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example