So normally when I visit for ex "index.html" and I give my a href link in my navbar the class "active" or whatever class and colour it so it defines which page I'm on
so
<a href="index.html" class="active">
and
a.active {
background-color: #009879;
color: white;
}
would just do the trick and highlights the page I'm currently on in the navbar
but I have a section in my index.html which I can go to by clicking on this in the navbar
<a href="index.html#about">
but if I trigger the class="active" for this section, then both the index and the section will be highlighted in my navbar
how do I make it so that when I'm on the section, my index.html loses its class=active and for the section to gain that class?
possibly if this could be done using only CSS!
TL;DR I need a way in CSS/JS that adds/removes the class for whatever element(s) I want it to be on.
Hi, The function you want in your project is called scrollspy and it is achieved with javascript. You can use the bootstrap or create the function in pure javascript. But in order not to reinvent the wheel I show you an example based on a vanilla javascript script from: https://github.com/cferdinandi/gumshoe.
var spy = new Gumshoe('#my-awesome-nav a');
html {
overflow-y: auto;
scroll-behavior: smooth;
}
/* Sets body width */
.container {
max-width: 90em;
width: 88%;
margin-left: auto;
margin-right: auto;
}
/**
* Grid
*/
.grid {
display: grid;
grid-gap: 2em;
grid-template-columns: 30% 70%;
}
#my-awesome-nav {
position: fixed;
}
#my-awesome-nav li.active {
background-color: black;
}
#my-awesome-nav li.active a {
color: white;
}
/**
* Sections
*/
.section {
color: #ffffff;
height: 95vh;
margin: 0;
padding: 2em;
}
#eenie {
background-color: #0088cc;
}
#meenie {
background-color: rebeccapurple;
}
#miney {
background-color: #272727;
}
#mo {
background-color: #f42b37;
}
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe/dist/gumshoe.polyfills.min.js"></script>
<div class="container">
<div class="grid">
<nav>
<ul id="my-awesome-nav">
<li>Eenie</li>
<li>Meenie</li>
<li>Miney</li>
<li>Mo</li>
</ul>
</nav>
<main>
<div class="section" id="eenie">
Eenie...
</div>
<div class="section" id="meenie">
Meenie...
</div>
<div class="section" id="miney">
Miney...
</div>
<div class="section" id="mo">
Mo...
</div>
<p><a data-scroll href="#top">Back to the top</a></p>
</main>
</div>
</div>
Related
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
In the code below, the default main content is empty. Unless I click on any of the bottom navbar buttons, no content will show up.
I'd like to set content-1 and menu-1 (its respective button) to be the default, i.e. when the user opens the webpage it would be the first thing they see and the button would be black indicating that it is active.
I tried to use an else statement but it did not work:
// set menu-1 as default
else {
$('.menu-1').addClass('default')
$('.content').addClass('default')
}
Find the entire code below:
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
// set menu-1 as default
// else {
// $('.menu-1').addClass('default')
// $('.content').addClass('default')
// }
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.default,
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.default,
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
In case you find it easier, here's my CodePen:
https://codepen.io/fergos2/pen/vYYaRzN
All that is going on to set up each menu and content item to display on the page is adding the class active. So it looks to me like all you need to do is add that class to the HTML. That way when the page loads it's already "active" and when you click something else you already have it set up to remove the class and set something else as active. So basically, your HTML would look like this:
<header>My header</header>
<div class="main-content">
<div class="content-1 active">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home active"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
All I did was give .menu-1 and .content-1 the class of active.
You'll also need to get rid of the css bit which references .content-1.default and .menu-1.default and also set your JS to add the .active back when you click that menu button which you already have. Don't worry about the else statement inside that click function
Let me know if this works out for you!
I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible
The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector
You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");
Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
So I'm using this "Color Admin Responsive Admin Template" (http://wrapbootstrap.com/preview/WB0N89JMK) and I have a sidebar menu, and I have the expand/collapse button displaying, but the actual function is not working. I'm not sure exactly why it isn't working, I got the function from the template. I'm pretty new to JavaScript but I think everything that I needed to change on my specific HTML matches the function.
HTML
<!--sidebar left start-->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
<li class="nav-profile">
<div class="info">
Matt Smith
<small>Manager</small>
</div>
</li>
</ul>
<!-- end sidebar user -->
<ul class="nav">
<!-- begin sidebar minify button -->
<li><i class="fa fa-angle-double-left"></i></li>
<!-- end sidebar minify button -->
</ul>
</div>
<!-- end sidebar scrollbar -->
</div>
<!--sidebar left end-->
JavaScript
var handleSidebarMinify = function() {
$('[data-click=sidebar-minify]').click(function(e) {
e.preventDefault();
var sidebarClass = 'page-sidebar-minified';
var targetContainer = '#page-container';
if ($(targetContainer).hasClass(sidebarClass)) {
$(targetContainer).removeClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
}
} else {
$(targetContainer).addClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
$('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
$('#sidebar [data-scrollbar="true"]').removeAttr('style');
}
// firefox bugfix
$('#sidebar [data-scrollbar=true]').trigger('mouseover');
}
$(window).trigger('resize');
});
};
http://jsfiddle.net/BootstrapOrBust/71og00ev/1/
You do not include jQuery library in your html. I've added check for JQuery at the top of your code:
alert(typeof jQuery !== "undefined")
it returns false that means you don't add JQuery. You can see the Uncaught ReferenceError: $ is not defined error on browser console. Updated JSFiddle
You can do this (without an animation) without any javascript at all, using the css's :hover.
EDIT: I just realised you wanted to control the expansion and collapse with buttons. This answer doesn't address that, but I'll leave it here anyway as an alternative.
JSFiddle: http://jsfiddle.net/2byg62z4/
<style>
body { margin: 0; }
#sidepanel
{
position: absolute;
min-width: 30px;
height: 60%;
top: 20%;
left: 0;
}
#bar
{
display: table;
background-color: #999999;
color: white;
width: 30px;
height: 100%;
text-align: center;
}
#bar div
{
display: table-cell;
vertical-align: middle;
}
#panel
{
display: none;
background-color: #999999;
color: white;
width: 300px;
height: 100%;
text-align: center;
}
#panel div
{
display: table-cell;
vertical-align: middle;
}
#sidepanel:hover #bar { display: none; }
#sidepanel:hover #panel { display: table; }
</style>
<div id='sidepanel'>
<div id='bar'>
<div>
><br>><br>>
</div>
</div>
<div id='panel'>
<div>
stuff
</div>
</div>
</div>