I'd like to change the background color of the current page the user is on. I've tried some code but they don't work.
My js code is in a different file and it's loading the menu to some of the pages.
$(function(){
$("#menu-nav").load("menu.html");
$("#footer").load("footer.html");
})
/* The menu code is in another file */
<div class="menu-nav">
<ul id="nav">
<li><a id="homeLink" href="index.html">home</a></li>
<li><a id="pessoal" class="a-borda" href="pessoal.html">pessoal</a></li>
<li><a id="galeria" href="galeria.html">galeria</a></li>
</ul>
</div>
The code I've tried, but the class is not added
var section = window.location.pathname;
if (section == "/index.html"){$("#homeLink").attr("class", "active");}
CSS:
.active {
background-color: red;
}
also tried with .addClass( className ), but doesn't add the class.
I don't know if the fact I'm bringing the files with Jquery it's interfering in the process or if I'm using the wrong syntax.
You can add a class dynamically depending on the page
$(document).ready(function() {
let section = window.location.pathname.substring(1);
$(`a[href='${section}']`).addClass("active");
})
You need to wrap your var section = window.location.pathname; ... if (section == "/index.html"){$("#homeLink").attr("class", "active");} into a $(function(){. This lets the script wait until the DOM finishes loading.
$(function(){
var section = window.location.pathname;
//Changed the section to /js as the script is run from https://stacksnippets.net/js
if (section == "/js") {
$("#homeLink").addClass("active");
}
})
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-nav">
<ul id="nav">
<li><a id="homeLink" href="index.html">home</a></li>
<li><a id="pessoal" class="a-borda" href="pessoal.html">pessoal</a></li>
<li><a id="galeria" href="galeria.html">galeria</a></li>
</ul>
</div>
Related
Currently I´m highlighting the active tab in my site with just a CSS class,
the problem is that I´m having more and more tabs and this list is getting bigger and every time I add a new tab I also need to add a new selector to the class
Is there a CSS only way to simplify this?
body.students li.students,
body.teachers li.teachers,
body.sports li.sports,
...,
... {
background-color: #000;
}
I´m adding the class to the body for each section
is there a way to do something like this with CSS?
body.[class] > li.[class] {
background-color: #000;
}
Basically I just want to add a property if both (body and li) have the same class
Example for students.html
<body class="students">
<ul>
<li class="students">students</li>
<li class="teachers">teachers</li>
</body>
In this example li.students is the one that will be highlighted
Example for teachers.html
<body class="teachers">
<ul>
<li class="students">students</li>
<li class="teachers">teachers</li>
</body>
In this example li.teachers is the one that will be highlighted
Thanks!
Change your HTML code - introduce a class "current_page" (or whatever you'd like to call it)
<body class="students">
<ul>
<li class="students current_page">students</li>
<li class="teachers">teachers</li>
</ul>
</body>
Or
<body class="teachers ">
<ul>
<li class="students">students</li>
<li class="teachers current_page">teachers</li>
</ul>
</body>
That way, you'll only ever need one selector:
li.current_page {
background-color: #000;
}
You could also do it in JavaScript if you don't like to change your HTML code:
var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";
How can I disable drop down menu item that uses ui-router and looks like this?
<ul class="dropdown-menu">
<li><a ui-sref="state.random">A random state</a></li>
</ul>
obviously this doesn't work:
<li ng-disabled="true"><a ui-sref="state.random">A random state</a></li>
nor this:
<li><a ui-sref="state.random" ng-disabled="true">A random state</a></li>
ng-disabled don't work on the li tag. Need to do this using css styles.
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}
<li class="disabled"><a ui-sref="state.random">A random state</a></li>
Disabling might not work here. You may have to use a ternary operator with ui-sref. As I assume disabling would be conditional. The disabled style effect can be introduced with CSS.
$scope.someValue = false;
<li><a ui-sref={{someValue ? 'state.random' : ''}}>A random state</a></li>
I encountered a similar problem (angular 2), here is what worked for me:
HTML file:
<li (click)="onClick(item, $event)"
tooltip="{{isItemDisabled() ? getText(item.tooltipText) : undefined}}">
<a href="" role="tab" data-toggle="tab"
[ngClass]="{'disabled': isItemDisabled()}"
id="btnSelect{{getMenuLabel(tabitem)}}">{{getMenuLabel(tabitem)}}</a>
</li>
TS file:
onClick(isItemDisabled, $event) {
$event.preventDefault();
if (!isItemDisabled) {
// do whatever
}
}
CSS file:
disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
There are several examples of this on the net, using just HTML and CSS, or Bootstrap. They often have examples like this:
<li>News</li>
<li>Contact</li>
<li>About</li>
What I'd like is for the navbar to not have to load on each refresh / link click. Are the anchors in the example supposed to be replaced by links to other pages that include the full navbar source themselves?
What is a typical implementation, so that the navbar stays static?
How can I implement a static navbar between pages with HTML / CSS?
HTML
<ul class="w3-navbar">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Put your content in to each list item above.
JS
openCity("London");
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
First, call openCity() to open "London" (id="London).
Then call open City() with a different city name (id="Paris) when the user clicks on one of the buttons in the menu.
The openCity() function hides all elements (display="none") with the class name "city", and displays the element (display="block") with the given city id.
Sourced from http://www.w3schools.com/w3css/w3css_tabulators.asp where you can find other examples too.
One problem with the accepted answer is that the browser will have to load the content of all the tabs on page load. This may not be very good if your tabs have a lot of content and your users are using mobile devices. One way around that problem is using iframes. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<ul>
<li><a target="iframe" href="page1.html">Tab1</a></li>
<li><a target="iframe" href="page2.html">Tab2</a></li>
<li><a target="iframe" href="page3.html">Tab3</a></li>
</ul>
<iframe name="iframe" src="" onload="resizeIframe(this)" style="width:100%;"></iframe>
</body>
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.style.height = 0;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
</html>
This will load the content of each page into the iframe only when the link is clicked. Note that news.html, contact.html, and about.html have to be created as well.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:300px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Just wanted to give you another possible solution. I'm putting it in a separate answer since it is a different idea.
Basically you can use javascript to fire an ajax request every time a link is clicked. The request will return the HTML content that will be inserted into the page. Here is a demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<ul id="nav">
<li><a target="#" href="page1.html">Tab1</a></li>
<li><a target="#" href="page2.html">Tab2</a></li>
<li><a target="#" href="page3.html">Tab3</a></li>
</ul>
<div id="pageContent">
</div>
</body>
<script type="text/javascript">
$("#nav li a").click(function() {
$("#pageContent").load($(this).attr('href'));
return false;
});
</script>
</html>
Note I am using jQuery since it makes it much easier but the idea is the same if you want to use a different library or just vanilla javascript. Basically it attaches a callback function to the links' click event and that function calls jQuery's load function to fetch the content of the page and insert it into the div. I think this approach is much more common and you can find it in a lot of popular websites.
Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)
You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.
To create the menu:
Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
So your entire HTML file should look like:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
Here is a quick example. You set up a container div (which must have position:relative), and menu div (which has positioned:absolute). Use jQuery to hide the menu div when the page loads. When a user clicks on Share, the div will be displayed.
The API code that you get from Facebook will be placed in the div that has the Facebook placeholder text.
To see more about how the menu in your example was implemented, open the page using Chrome. Right click on "Share" and go to "Inspect Element."
<script type="text/javascript">
$(document).ready(function () {
//Initally hide social-menu div
$("#social-menu").hide();
//When social-button is pressed, show social-menu
$("#social-button").click(function () {
$("#social-menu").show();
});
});
<div id="social-button" >Share</div>
<div id="social-container" style="position:relative;">
<div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
<div>Facbook</div>
<div>Google +</div>
</div>
</div>