Bootstrap dropdown isn't working for me. I did everything correctly as you can see it there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test site | Jony</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Testing website coded by Jony - rapture-gfx" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/flexslider.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script src="js/jquery.flexslider.js"></script><!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" });});</script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp-1.4.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</head>
<header>
<div class="header">
<div class="container">
<ul class="menu">
<li class="current"><span style="color: #bde2e1;">Home</li>
<li class="dropdown"><a class="dropdown-toggle" href="#">Servers</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
Bootstrap is a ready framework with features like grid system, rows, ready js menus and more.
There's an explanation of how it works:
http://twitter.github.com/bootstrap/javascript.html#dropdowns
It doesn't work for me.
Yes, my src links correctly to the JS files.
your missing the body in your html.
put your script at the bottom of the page or after ready:
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
demo: http://jsfiddle.net/rLL75/
EDIT:
use a newer version of jquery.
<header>
<div class="navbar navbar-static header">
<div class="navbar-inner container">
<ul class="nav" role="navigation">
<li class="brand"><span style="color: #bde2e1;">Home</span></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="hovering">Portfolio</li>
<li class="hovering">Releases</li>
<li class="hovering">Contact</li>
</ul>
<div id="logo"><img src="img/logo.png" /></div>
</div>
</div>
</header>
<script type="text/javascript">
$(function(){
$('.dropdown-toggle').dropdown();
});
</script>
Related
I am not familiar with javascript and copied the javascript portion from a tutorial I was watching. However, it does not seem to be working and the Navbar is not changing color when scrolled. I am not sure if the javascript is not working, the css, or if I should add 'scrolled' to the Navbar class as well. Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
$(window).scroll(function(){ $('nav').toggleClass('scrolled', $(this).scrollTop() > 1080);
});
</script>
<style>
navbar.scrolled{
background-color: darkgray !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-light navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#uniqueIdentifier">
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;">
</div>
</header>
</body>
</html>
Add your script tag at the bottom of the body in order to register your event listener once the DOM has loaded. You're also not targetting the right DOM element in your CSS/jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
div.navbar.scrolled {
background-color: darkgray !important;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="navbar navbar-light navbar-expand-md fixed-top">
<a class="navbar-brand" href="#">Brand</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#uniqueIdentifier"
>
<span class="navbar-toggler-icon"></span>
</button>
<div id="uniqueIdentifier" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" style="height:200vh;"></div>
</header>
<script>
$(window).scroll(function() {
$("div.navbar").toggleClass("scrolled", $(this).scrollTop() > 1080);
});
</script>
</body>
</html>
Script should be placed at the bottom of the body tag so that it works after the dom has finished loading.
In the below snippet I have a collapse which shows if you hover over the second nav-link item. Now I want to use the Grid system inside this collapse but I can't seem to make it work.
What does not work?
The columns just display underneath one another.
How do I use the grid system inside the collapse body?
$(".menu1").hover(
function() {
$('.panel').collapse('show');
}, function() {
$('.panel').collapse('hide');
}
);
<!doctype html>
<html lang="en">
<head>
<!-- Required 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link menu1" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="panel collapse" id="collapseExample">
<div class="card card-body">
<div class="row">
<div class="col-md-6">Test - Column</div>
<div class="col-md-6">Test - Column</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Is this what you want to do?
This is in Bootstrap 3
All I did was wrap your row in a container
Fiddle
I'm working on a nav bar using Bootstrap 4.0. I have a pillbox nav bar and I wrote a javascript function to automatically detect the current page and add the active class to the right pillbox. I set the function to run when the DOM is ready but it runs before any of the HTML in the BODY is loaded. Essentially the script fails to find any elements with the 'nav-link' class at runtime and does nothing. If I add the async attribute to the script however, it works as expected.
function main () {
$nav = $('nav-link');
$('.nav-link').each( function () {
var currentPage = location.href.split("/").slice(-1);
var currentLink = $(this).attr('href').slice(2);
console.log(currentPage);
console.log(currentLink);
if (currentLink == currentPage) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
$(document).ready(main());
This is my HTML file.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- Library CDNs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script async type="text/javascript" src='checkNavActive.js'></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./wikiCSS.css">
</head>
<body>
<div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href=".\Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a>
<div class="dropdown-menu">
<a class="dropdown-item" href=".\DryLab.html" >DryLab</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href=".\WetLab.html">WetLab</a>
</li>
</ul>
</div>
<div class="container title">
<div class="row">
<div class="col text-center">
<h1>Home</h1>
</div>
</div>
</div>
</body>
Using $(document).ready(main()) calls the main() function then and there. You should be using $(document).ready(main)
function main() {
$nav = $('nav-link');
$('.nav-link').each(function() {
var currentPage = location.href.split("/").slice(-1);
var currentLink = $(this).attr('href').slice(2);
console.log(currentPage);
console.log(currentLink);
if (currentLink == currentPage) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}
$(document).ready(main);
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- Library CDNs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script async type="text/javascript" src='checkNavActive.js'></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./wikiCSS.css">
</head>
<body>
<div>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href=".\Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href=".\DryLab.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DryLab</a>
<div class="dropdown-menu">
<a class="dropdown-item" href=".\DryLab.html">DryLab</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href=".\WetLab.html">WetLab</a>
</li>
</ul>
</div>
<div class="container title">
<div class="row">
<div class="col text-center">
<h1>Home</h1>
</div>
</div>
</div>
</body>
You should just use $(main), which is a shorthand for $(document).ready(main).
Your syntax is executing the main function instead of passing it, that's why you experience your problem.
I am trying to create a web page where there is a navigation bar containing three tabs. Each navigation tab contains a web page. I can't seem to display the website when the user clicks the tab. Can someone help me display the various web pages when a user clicks the different tab buttons? Note i am using bootstrap.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/shop-item.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('#home').load('home.html');
$('#data').load('data/data.html');
$('#sauce').load('sauce/sauces.html');
</script>
</head>
<body>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"> Home</a></li>
<li><a data-toggle="tab" href="#data"> Data </a></li>
<li><a data-toggle="tab" href="#sauce"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="container-fluid">
<div class="row">
<div id= "mapContainer" class="col-md-12">
<div id="map-canvas"></div>
</div>
<div id = "panelContainer" class="col-md-3 hidden">
<div id="right-panel"></div>
</div>
</div>
</div>
</body>
</html>
updated code as per your requirement.
//onloading
$("#myTab a").each(function () {
var target = $(this).attr("href");
$(target).load($(this).attr("data-page"))
});
//This is for tab click to load page
/*
$("#myTab a").click(function () {
debugger
var target = $(this).attr("href");
alert($(this).attr("data-page"))
$(target).load($(this).attr("data-page"))
});
*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home" data-page="home.html"> Home</a></li>
<li><a data-toggle="tab" href="#data" data-page="data.html"> Data </a></li>
<li><a data-toggle="tab" href="#sauce" data-page="sauce/sauces.html"> Sauce </a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active"></div>
<div id="data" class="tab-pane fade in"></div>
<div id="sauce" class="tab-pane fade in"></div>
</div>
I'm trying to make a dropdown menu on my homepage but the dropdown menu is always active. I'm using this code. What is wrong with it?
This is the part of the drop down code I'm using:
<li class="dropdown" class="" itemprop="name" >
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
It's always active when I open the page and not when I click it to drop down.
Here full code.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Admin
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>