I'm trying to add an alert for unread messages in my Bootstrap navbar. I was able to figure out how to format this alert nicely. However, I have not been able to figure out how to format it correctly within an <a> tag.
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="navbar-text label label-danger" style="color: white">
1
</span>
</a>
</li>
</ul>
This layout looks like this.
I also tried moving the CSS classes currently in my <span> element to the <a> element (and remove the span), but that was much worse.
Is there an existing way for Bootstrap to support this, or do I need to just custom style this all?
Just remove the CSS class: .navbar-text;
Result:
<span class="label label-danger" style="color: white">
1
</span>
View on JsBin : https://jsbin.com/bugakey/edit?output
alert("View the example on a large screen so that the <nav> elements are displayed inline")
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="label label-danger " style="color: white">
1
</span>
</a>
</li>
</ul>
Related
In my angular application for small devices the sidebar toggling is working but I want to to close or hide the sidebar when we click on anywhere on the page(i.e body).
.component.html
<nav class="sidebar sidebar-offcanvas active" id="sidebar">
<ul class="nav">
<li class="nav-item nav-profile">
<a href="javascript:;" class="nav-link">
<div class="nav-profile-image">
<img src="assets/images/bbbs2.png" alt="profile">
<span class="login-status online"></span>
<!--change to offline or busy as needed-->
</div>
<div class="nav-profile-text">
<span class="font-weight-bold mb-2" style="color: #00B5B8"></span>
</div>
</a>
</li>
<li class="nav-item" [ngClass]="{ 'active': dashboard.isActive }">
<a class="nav-link" routerLink="/dashboard" routerLinkActive #dashboard="routerLinkActive">
<span class="menu-title" style="color: #00B5B8">Dashboard</span>
<i class="mdi mdi-home menu-icon" style="color:#00B5B8"></i>
</a>
</li>
// --and some more sidebar tabs
Now I want to remove the sidebar when the class is not active (class name is active).
<nav
class="sidebar sidebar-offcanvas"
[ngClass]="{'active': condition}"
id="sidebar">...
In this way you can control if class "active" is inserted or not.
The condition obviously is a boolean and you can control it by a click listener in the rest of your application.
...
...
Maybe you can use a service variable, localstorage, or a store...
I have one HTML design in that button/Portlet. I have one fa fa-Caret, After clicking on that caret it should display the drop-down list (which is hidden by default)
I have written a Jquery code to remove the hidden class of that drop-down list, But it's not working properly.
$(".Caret").click(function () {
if ($(".dropdown-menu").hasClass("hidden"))
$(".dropdown-menu").removeClass("hidden");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a >
<ul id="ddlist1" class="dropdown-menu hidden">
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
Whenever I click that Button's Caret symbol only that drop-down list must appear, and if I switch to another Button's Caret(Second button I didn't mention) that drop down must come, I have a static drop down, but I am adding into the number of buttons (Generated dynamically)
Note:- You need to add span class and inside span class you can write <i> and add toggle class on <span> tag resolve this issue.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="dropdown">
<span class="btn dropdown-toggle" data-toggle="dropdown">
</span>
<ul id="ddlist1" class="dropdown-menu hidden">
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
Click event triggered from 'anchor' tag. Also you could use the inline style 'display' property too.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i id="carett" class="fa fa-caret-down pull-right hidden Caret"></i > ' + ButtonName + '</a >
<ul id="ddlist1" class="dropdown-menu" style="display:none">
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<script>
$(".dropdown-toggle").click(function () {
if ($(".dropdown-menu").css("display") == "none")
$(".dropdown-menu").css("display", "block");
});
</script>
I'm doing a website project, where I'm using Materialize framework.
Problem :
I have to make a navbar, where it should be able to let out a dropdown menu/submenu. I think the main problem could be either on the overflow: or the z-index. Because of that, I've tried to test the overflow between auto, visible, etc. There are 2 observations that I got during my testing:
Navbar dropdown menu came out perfectly, but got hidden behind the main content
Navbar dropdown came out perfectly on top of the main content, but resulting a large white space between the navbar and the main content.
Can anyone points out what did I miss? or what is wrong in my code, any help would be appreciated, thank you.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<!-- Header -->
<nav id="navbar" class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">
<img src="images/logo_new.png" class="logosize" alt="logo">
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='test'>Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<!-- Info Page -->
<div class="container">
<div class="row">
<div class="col s12">
<!-- note: there is center before -->
<!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
<!-- Menu 1 -->
<div class="col s12 m5">
<p align="left">
<h3>
<b>Intimate House</b>
</h3>
<br> Project : Intimate House
<br>
<br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
<br>
<br> Site Area : 160 sqm
<br>
<br> Building Area : 210 sqm
<br>
<br> Design Phase : 2016
<br>
<br> Construction Period : April 2016 - July 2017
<br>
<br>
</p>
<div class="textbox">
<p align="left">
<i>
Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
It had a high ceiling, but lack of open space inside the house which make this house look
extremely dark, moist, and stuffy.</i>
<br>
<br>
</p>
<p align="right">
<i>
We transformed this house program by separating service area and private area. Furthermore private area is connected by a
connecting chamber in order to transform service area into private area which can be used
as a gathering room which is the main area in this Intimate House.</i>
<br>
<br>
</p>
<p align="left">
<i>
Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
an open space next to Living Room, High Ceiling, and Skylight.</i>
<br>
<br>
</p>
</div>
</div>
<!-- Menu 2 -->
<div class="col s12 m7">
<div class="slider">
<ul class="slides">
<li>
<img src="images/architecture/intimate_house/1.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/3.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/4.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/5.jpg">
<!-- random image -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Dropdown Menu -->
<div class="container_sub">
<div class="section">
<div class="row">
<!-- Architect -->
<ul id='architect' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='architect-mobile' class='dropdown-content'>
<li>
Project one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Interior -->
<ul id='interior' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='interior-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Commercial -->
<ul id='commercial' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='commercial-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<!-- Office -->
<ul id='test' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id='test-mobile' class='dropdown-content'>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="footer-copyright">
<div class="container">
Copyright #
<a class="white-text" href="#">2018</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
$('.slider').slider();
$(".dropdown-button").dropdown({
hover: true
});
});
</script>
Here is my full code: https://codepen.io/bukuchaga/pen/Zjqvxe
Thanks again.
You are doing it wrong, you should know how the position properties work. You are using position relative. so when you use position relative it means relative to itself not from something else. Next time keep in mind how these tricky things works so that it won't waste your time in resolving the error caused by them.
I have seen your code, the css wrapper class nav .nav-wrapper has a wrong relative position.
You don't need to use relative position here because, It is unnecessary. So, remove it and your code will work like a charm.
If you have any other error in design, post another question and if i or someone else has answered your question marked my or someone answer as accepted so that this thread can be closed. Thanks.
It kind of worked when I removed position: relative property from the style class nav .nav-wrapper. You can either remove it or override it with position: inherit.
I have big HTML project and I want to divide one big HTML file into separate small html files. Is there a good way to do it?
This is an example of my HTML file (this is not all since the original html is much bigger)
http://plnkr.co/edit/gwdAHfGIeac9WusLKMlV?p=preview
<!DOCTYPE html>
<html>
<head>
<title>toolbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<!-- remove from here!!!! -->
<nav id="navi" class="navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-plus" title="Home" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" title="Dropdown one" class="dropdown keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-ok" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" title="Third group" >
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-time" title="Notifications" data-toggle="dropdown" href="#" >
<span class="badge badge-print">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-user" title="Languages" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span> </li>
</ul>
</div>
</nav>
<p style="margin-left:25%; margin-top:5%;"><iframe src="http://stackextance.com" frameborder="0" width="660px" height="270px" marginheight="0" marginwidth="0" scrolling="No"><p>See the World Forests Clock at http://www.cifor.org/fileadmin/world-forest-c/wfc-cifor.htm.</p></iframe></p>
<!-- until here!!!! -->
<script src="app.js"></script>
</body>
</html>
For example, how can I have the part starting at <!-- remove from here!!!! --> and going to <!-- until here!!!! --> in index2.html file and load it inside index.html?
I can copy all the relevant lines(22-78) to index2.html but how should I make it work together without using iFrame or frame...
https://www.tutorialspoint.com/html/html_frames.htm
Try using jQueries get function for that
$.get( "index2.html", function( data ) {
$( ".result" ).html( data );
//code to insert data into desirable container
});
Data in this case will be your html2 page content
Here is full documentation https://api.jquery.com/jquery.get/
In fact by reading difference between .get and .load functions i'd now prefer using .load, they do the same thing except that .load won't perform ajax call if there is no container in first place. Here is example of load method
$("your container selector").load("desired data (index2.html)"[, optional callback function when data is loaded]);
I have a bunch of pages and I want class active change when I switch pages
<nav class="main-navi">
<ul>
<li>
<a id="homeLink" href="index.html">
Home
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li >
<a id="portfolioLink" href="portfolio_masonry.html">
Portfolio
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li >
<a href="about.html">
About
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a class="active" href="service.html">
services
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a href="blog.html">
Blog
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a href="contact.html">
contacts
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
</ul>
</nav>
I know it will require javascript but I'm so newbie about javascript, can you guys help me? and doest every pages have that script?
// grab all elements with the classes dot and corner
var all = document.getElementsByClassName(dot, corner);
// if the url contains any of the below then we set the classname of dot and corner
var contains = "example"
var contains2 = "example2"
var contains3 = "example3"
var contains4 = "example4"
function setclassname() {
if (window.location.href.indexOf(contains || contains2 || contains3 || contains4) > -1) {
// change newclassname to your preferred classname.
all.className = newclassname;
}
}
Add a onclick to your spans, include the .js file in your html pages and change the variables. (read the comments I placed)
Each page only has the scripts that you put on it. I would recommend taking the script and making it its own script/file which you could then include on all pages.
You can get the url of the current page using window.location.href. Then you could write some logic to add an active class or something to whichever element in the list matches the current URL.
You could use Bootstrap to build a navigation bar. It will style <li> elements with the active class. Include this in the head of your HTML file:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
getbootstrap.com
Here's a demo bootstrap navbar:
<nav class="navbar navbar-default">
<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>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
codepen.io/anon/pen/KVbOvo
www.w3schools.com/bootstrap/bootstrap_navbar.asp