Does AngularJS help in any way with setting an active class on the link for the current page?
I imagine there is some magical way in angularjs or css this is done, but I can't seem to find.
My menu looks like:
<ul>
<li ><a href="#/person" ng-click = "person()" id="bl" >Person</a></li>
<li><a href="#/product" ng-click = "product()" id="or" >Product</a></li>
<li ><a href="#/place" ng-click = "place()" id="gr" >Place</a></li>
</ul><br/><br/>
my css looks like:
body {
font-family: Source Sans Pro;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a{
float: left;
width: 6em;
text-decoration: none;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
#navbar li a.current {
background-color: #FFF;}
li {
display: inline;
}
#bl {
background-color:#5a5a5a;
color: yellow;
}
#or {
background-color:#5a5a5a;
color: yellow;
}
#gr {
background-color : #5a5a5a;
color: yellow;
}
#bl:hover ,#or:hover , #gr:hover {
background-color:#ff6900;
}
#persons{
float:left;
}
.left{
float:left;
}
Looks like you have functions person(), product(). Set background-color by using getElementsByName('body').style.backgroundColor = 'red'; and respective colors in respective functions.
You could use https://docs.angularjs.org/api/ngRoute/service/$route service to get/detect the current route and set some class in your li or a tag then use css to style them based on the class you set.
Related
Is it possible to move to next element in my DIV wih E and return to previous element with A. I'm trying to make a menu and navigate within only with keys.
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn1");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
/* Mini menu CSS */
/* Style the buttons */
#myDIV{
margin-top:50px;
margin-left: 12px;
margin-right: px;
display:inline-flex;
}
#myDIV btn1{
top:3px;
}
#myDIV p{
top:4px;
/*margin-left: 10px;*/
letter-spacing: 1.8px;
}
.btn1 {
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<div id="myDIV" style="display: inline-flex; margin-left: 15px; margin-right: 5px;">
<p class="btn1 active">ALL</p>
<p class="btn1">MENU1</p>
<p class="btn1">MENU2</p>
<p class="btn1">MENU3</p>
<p class="btn1">MENU4</p>
<p class="btn1">MENU5</p>
</div>
Semantically, you should be using an unordered list (<ul>) since you are actually making a list of menu items.
Next, it really isn't a "move" that you want, but a change of which element has the active class applied to it.
Your original JavaScript (while working) is more than you needed to be doing. See my reworked version with comments.
Lastly, you had some errors and some redundancy in your CSS.
See the comments inline for details.
// Listen for key strokes on the document
document.addEventListener("keydown", function(event){
// Get the currently active element
let activeElement = document.querySelector(".active");
// Check for "e" and if there is a previous sibling
if(event.key == "a" && activeElement.previousElementSibling){
// Make the previous sibling (if any) element active
deselectAll();
activeElement.previousElementSibling.classList.add("active");
} else if(event.key == "e" && activeElement.nextElementSibling){
// Make the next sibling element (if any) active
deselectAll();
activeElement.nextElementSibling.classList.add("active");
}
});
// Just set up one event handler on the parent of all the menu items
// Any click within that parent will bubble up and be handled here
document.getElementById("menu").addEventListener("click", function(event) {
// event.target is the actual element that triggered the event
if(event.target.classList.contains("btn1")){
deselectAll();
event.target.classList.add("active"); // Add active to the clicked item
}
});
// Don't use .getElementsByClassName() - - it's outdated
let items = document.querySelectorAll(".btn1");
function deselectAll(){
// Loop over all the menu items
items.forEach(function(item){
item.classList.remove("active"); // Remove the active class if its there
});
}
/* Mini menu CSS */
/* Style the buttons */
#menu{
margin-top:50px;
display: inline-flex;
margin-left: 15px;
margin-right: 5px;
list-style-type:none;
}
.btn1 {
top:3px;
letter-spacing: 1.8px;
border: none;
outline: none;
padding: 3px 12px;
cursor: pointer;
font-size: 18px;
border-radius: 2rem;
transition: 0.2s;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
overflow: visible;
color: #000;
font-family: Proxima Nova;
font-weight: bold;
/* Give non-active items an invisible 2px border
so that when they do become active the overall
size of the element doesn't shift around. */
border: 1px solid rgba(0,0,0,0);
}
.active {
border-color: #366eaf;
border-width: 2px;
border-style: solid;
}
<ul id="menu">
<li class="btn1 active">ALL</li>
<li class="btn1">MENU1</li>
<li class="btn1">MENU2</li>
<li class="btn1">MENU3</li>
<li class="btn1">MENU4</li>
<li class="btn1">MENU5</li>
</ul>
I'm trying to make my vertical navigation bar to move to the top when the user scrolls (the original position is not at the top).
I only know HTML, CSS and JavaScript, so I don't know jQuery.
Here is the code for the navigation bar:
Is there something wrong with the class or id names or is it the JavaScript code?
var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");
window.addEventListener("scroll", navigationFixing());
function navigationFixing() {
if (body.scrollTop > navigation.getBoundingClientRect().bottom)
{navigation.className = "fixedNavigation";
}
else {
navigation.className = "notFixedNavigation";
}
}
#navigation {list-style-type: none;
width: 15%;
margin: 0px;
padding: 0px;
font-size: 35px;
border: 1px solid;
height: 100%;
background-color: #d6d6c2;
overflow: auto;
position: absolute;
}
.navigationbar {
border-bottom: 1px solid black;
}
.navigationbar a {display: block;
background-color: #C0C0C0;
padding-left: 10px;
padding-bottom: 16px;
text-decoration: none;
color: #ffffff;
}
.navigationbar a:hover {background-color: #404040;
color: white;}
.navigationbar a.nuvarande {background-color: black;
}
.fixedNavigation {
position: fixed;
top: 0;
left: 0;
}
.notFixedNavigation {
position: absolute;
}
<ul id="navigation" class="notFixedNavigation">
<li class="navigationbar">
Home
</li>
<!---------------DATOR-------------------
<li class="navigationbar">
Play
</li>
---------------------------------------->
<li class="navigationbar">
Rules
</li>
<li class="navigationbar">
Tactics
</li>
<li class="navigationbar">
Contact
</li>
</ul>
You care calling your event handler immediately, instead of attaching it to the listener. Remove the parens.
window.addEventListener("scroll", navigationFixing);
In addition, navigation.getBoundingClientRect().bottom will change when the position changes. Better to set it outside the function.
var pos = navigation.getBoundingClientRect().bottom;
function navigationFixing() {
if (body.scrollTop > pos) {...}
}
Also note from #bestinamir, your CSS is being overwritten. It needs some work, but you can start with:
.fixedNavigation {
position: fixed !important;
top: 0;
left: 0;
}
I am trying to create a disappearing drop down menu that disappears into the top of the page, and you can only see the word 'open'. This opens the the menu, the word open changes to the word close which when clicked makes the menu disappear again. Help would be much appricated.
<html>
<head>
<title>dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown_css.css">
<script type = "text/javascript">
function navagate(menu) {
var panel = document.getElementById(menu),maxh = "-362px", navg = document.getElementById('navag');
if (panel.style.marginTop == maxh){
panel.style.marginTop = "0px";
navag.innerHTML = "Close";
}
else {
panel.style.marginTop = maxh;
navag.innerHTML = "Open";
}
}
window.onload = function(){panel.style.marginTop = "-362px";}
</script>
<body>
<div id = "panel">
<ul>
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
<div id ="sections_button">
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
</html>
#panel {
width : 160px;
height: 130px;
background-color: gray;
margin-left: 30px;
margin-top:20px;
}
#panel li {
list-style-type: none;
}
Here, I've made a JS fiddle that may help you out: http://jsfiddle.net/942z0nhh/ I did not play around with the styling at all.
A few things I noticed:
You're making some mistakes that I think you wouldn't make if you indented properly. Take a look here, where you closed your body twice:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
</div>
</div>
</body>
</body>
Second, you have some spelling mistakes:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
vs
function navagate(menu) {
You can see there that your function would never be called because of it.
Lastly, your 'open' and 'close' a here:
<a onclick = "navigate ('panel')" id = "navag">Open</a>
Was within the div your function was overwriting. The function would change it to 'close'- but then it wouldn't be visible to the user anyway! I moved it above, which I hope makes sense.
Please let me know if you have any other questions, or if I misunderstood.
You could also do it only with CSS. It's the "css checkbox hack". I'm having it not like you want it but it is pretty close. Changing the text from open to close should be also possible.
At the moment, I don't know how to move the open/close label below the ul list.
*, html {
padding: 0px;
font-family: sans-serif;
}
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
display: none;
}
label {
display: block;
cursor: pointer;
content: "close";
}
/* Default State */
#wrapper {
display: block;
background: gray;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ #menu {
display: block;
background: lightgray;
color: black;
top:0px;
}
.menuToggle ul{
display: none;
width: 100%;
}
#menu {
padding-top: 5px;
margin: 0px;
list-style: none;
}
<div id="wrapper">
<div class="menuToggle">
<label for="toggle-1">open</label>
<input type="checkbox" id="toggle-1"/>
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
</ul>
</div>
</div>
With jQuery you could do it like the example below.
I think it is now almost like you wanted it. Maybe some styling improvements are required.
With the css hack I couldn't manage the text change. With js you have more possibilities. You could also improve/modify the animations.
$(function() {
var $menuButton = $('#openButton');
var $menu = $('#menu');
var btnToggleAnim = function() {
$menuButton.animate({opacity: 'toggle'}, "fast");
};
var menuToggleAnim = function() {
$('#menu').animate({
height:'toggle',
//opacity: 'toggle'
}, { duration: "slow" });
};
$('#closeButton,#openButton').on('click', function() {
menuToggleAnim();
btnToggleAnim();
});
});
*, html {
padding: 0px;
font-family: sans-serif;
}
a {
text-decoration:none;
}
#openButton {
display:block;
background: gray;
color: #fff;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
#closeButton{
display: block;
background: gray;
color: #fff;
text-align: center;
border: 2px solid lightgray;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
}
#wrapper {
display: block;
text-align: center;
}
#menu {
display: none;
background: lightgray;
color: black;
padding-top: 5px;
margin: 0px;
list-style: none;
}
#menu {
color: #000;
text-decoration: none;
border: 2px solid lightgray;
border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
open
<ul id="menu">
<li>CIT</li>
<li>Blackboard</li>
<li>Mcomms</li>
<li>Tables</li>
<li>Exams</li>
<li>close</li>
</ul>
</div>
Goal:
When you are entering the address calculation or project.html, one of the main element in the menu should be marked with a background color based on the webpage you are entering. For instance, if you are entering calculation.html the selection named Calculation (from the menu) should be selected by having a different background color compare to others.
Problem:
I don't know how to make a mark by having a background color once you
have clicked the link. I would like the code to be written in jQuery.
If possible, it would be great to add "id" in the element "a href" to change the background color.
The value "Project" and "calculation" from jQuery is the value of element title from the html code.
HTML:
<div id="nav-menu">
<ul id="kthh">
<li>Kalkylering</li>
<li>Projekt</li>
</ul>
</div>
Javascript:
$(document).ready(function()
{
var data = $('title');
if(data[0].textContent == "Project")
{
$('#kthh').closest('li').next('li').find('a').addClass("asdd");
}
if(data[0].textContent == "calculation")
{
//$('title').html('someHTML');
}
}); // ready
CSS:
/* Menu for display */
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: right;
}
#nav-menu li a
{
height: 70px;
line-height: 110px;
float: left;
padding-left: 13px;
padding-right: 13px;
display: block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-family: Verdana;
font-weight:bold;
}
#nav-menu li a:hover { background: #AA1133;}
#nav-menu li.last-child { padding-right: 50px;}
.asdd
{
background: #AA1133;
}
I think you should not use textcontentbut text:
$(document).ready(function()
{
var data = $('title');
if(data[0].text () == "Project")
{
$('#myFirstButton').addClass("asdd");
}
if(data[0].text() == "calculation")
{
//...
}
});
You can simplify your life by adding an Id to all your button also:
<div id="nav-menu">
<ul id="kthh">
<li><a id="myFirstButton" href="calculation.html">Kalkylering</a></li>
<li><a id="mySecondButton" href="project.html">Projekt</a></li>
</ul>
</div>
I am creating a 'FAQ' page which has a list of questions at the top (links) and the answers appear below.
As each question is clicked the corresponding answer is shown (using show/hide divs). My questions is: Is there a way to make the clicked question/link bold? and for it to stay bold until another question is clicked, in which case the newly clicked question will be bold and the previously clicked question will go back to normal.
I have tried using a:active in the CSS but although this makes the text bold on clicking, as soon as you let go of the mouse it goes back to normal.
This is my CSS
div#newboxes1, div#newboxes2, div#newboxes3
{
border: 1px solid black;
background-color: #CCCCCC;
display: none;
padding: 5px;
width: 659px;
}
div#newboxes1 {
display:block;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ol#toc li {
float: left;
}
ol#toc li a img
{
border: none;
}
ol#toc a {
color: #676767;
float: left;
line-height: 2em;
text-decoration: none;
}
ol#toc li.current {
background-color: #e5e5e4;
background-position: 0 -60px;
}
ol#toc li.current a {
color: #676767;
}
ol#toc li.current a:hover {
color: #fff;
font-weight: bold;
}
div.content {
background: #e6e5e4;
padding: 20px;
width: 669px;
margin: 0px;
}
div.content a
{
color: #000000;
text-decoration: underline;
}
div.content a:active
{
font-weight: bold;
}
div.content a:visited
{
font-weight: bold;
}
This is my HTML
<ol id="toc"><li class="current"><img src="delivery_0.jpg" alt="Delivery" /></li>
<li><img src="returns.jpg" /></li>
<li><img src="contact.jpg" /></li>
<li><img src="shopping.jpg" /></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order? </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
<p>Where is my order answer</p>
</div>
<div name="newboxes" id="newboxes2">
<p>UK Standard Delivery answer</p>
</div>
Javascript function is called when each link is clicked, this shows/hides the relevant divs which are currently on top of each other.
javascript is below
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
Thanks for your help :)
Theresa
You have to add this style to your css file:
ol#toc li.current a:active {
font-weight: bold;
}
Yes, just amend your Javascript to add or remove a class. Define that class as having text-weight bold or normal.
CSS selector :active will do it. Usage same as with :hover.
using jquery something like this may work. you can substitute ".css" for ".addClass('class')" and ".removeClass('class')" in the relevant places.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').css('font-weight','normal');
$(this).css('font-weight','bold');
});
});
// or:
$(document).ready(function()
{
$('ol#foo li').click(function() {
$('ol#foo li').removeClass('active');
$(this).addClass('active')
});
});
</script>
should note - where "active" is your css class to style the LI. and ol#foo is your OL.