On my ruby on rails 5 app I have a menu button that uses javascript to toggle the menu, the toggle function is showing and hiding the menu but the menu is not styled with css anymore
onclick the menu toggles like it should but all the elements are not styled, I dont know if its related to rails or I am missing something here
//Toggle between adding and removing the "show_for_mobile" class to admin_side_bar when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
console.log(x.className)
if (x.className === "admin_side_bar") {
x.className += "show_for_mobile";
} else {
x.className = "admin_side_bar";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>
When you add the .show_for_mobile class the original display:none from .admin_side_bar still takes precedence. If all you really want to do is show the nav then you can use x.style.display = "block"; to overwrite display:none from the admin_side_bar class
x.style.display="block" works because it adds inline style which is the highest CSS specificity (it overwrites all other css rules).
From CSS specificity
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
document.getElementById("toggleButton").addEventListener("click", toggleNav);
//Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon
function toggleNav() {
var x = document.getElementById("admin_side_bar");
if (x.className === "admin_side_bar") {
x.className += " show_for_mobile";
x.style.display = "block";
} else {
x.className = "admin_side_bar";
x.style.display = "none";
}
}
.admin_side_bar {
width: 70%;
height: 50vh;
background-color: #e2e6e8;
position: absolute;
left: 0;
top: 60px;
padding: 20px 10px;
display: none;
}
//show side bar on click
.show_for_mobile {
display: block !important;
}
.admin_side_bar>ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.admin_side_bar>ul>a {
color: #3d3d3d;
font-size: 19px;
text-decoration: none;
}
.admin_side_bar>ul>a:hover {
color: #06bed3;
}
.admin_side_bar .fas {
margin-right: 20px;
color: #afaeae;
}
.admin_side_bar .fas:hover {
color: #7a7a7a;
}
.admin_side_bar>ul>a>li {
margin-bottom: 20px;
}
<button id="toggleButton">Toggle Nav</button>
<!--Admin side bar-->
<div class="admin_side_bar" id="admin_side_bar">
<ul>
<a href="#">
<li><i class="fas fa-home fa-fw fa-lg"></i>Home</li>
</a>
<a href="#">
<li><i class="fas fa-tshirt fa-fw fa-lg"></i>Items</li>
</a>
<a href="#">
<li><i class="fas fa-gift fa-fw fa-lg"></i>Orders</li>
</a>
<a href="#">
<li><i class="fas fa-chart-line fa-fw fa-lg"></i>Stats</li>
</a>
<a href="#">
<li><i class="fas fa-newspaper fa-fw fa-lg"></i>Blog</li>
</a>
</ul>
</div>
Related
I'm trying to create this sidebar menu to the right using HTML CSS transitions and standard JavaScript and I also imported some FontAwesome icons.
My code looks like this (the JavaScript code is inside the HTML document):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu</title>
<script src="https://kit.fontawesome.com/b1956a1c85.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-user"></i></li>
<li><i class="fas fa-cogs"></i></li>
<li><i class="fas fa-wrench"></i></li>
<li><i class="fas fa-tools"></i></li>
<li><i class="fas fa-lock"></i></li>
</ul>
</div>
<i class="fas fa-bars"></i>
<script>
let btn = document.querySelector('.button'),
side = document.querySelector('.sidebar');
btn.addEventListener('click', function() {
if(btn.innerHTML === '<i class="fas fa-bars"></i>') {
btn.innerHTML = '<i class="fas fa-times"></i>';
side.style.marginLeft = '0px';
} else if (btn.innerHTML === '<i class = "fas fa-times"></i>') {
btn.innerHTML = '<i class= "fas fa-bars"></i>';
side.style.marginLeft = '-25px';
}
});
</script>
</body>
</html>
And my CSS page looks like this:
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #af8f36;
}
.sidebar {
float: left;
width: 120px;
height: 100vh;
background: #6e36af;
overflow: hidden;
margin-left: -125px;
transition: 0.5s;
}
.sidebar ul {
list-style: none;
}
.sidebar ul li a {
text-decoration: none;
color: #fff;
height: 100px;
width: 100%;
font-size: 40px;
line-height: 100px;
display: block;
text-align: center;
transition: 0.5s;
}
.sidebar ul li a:hover {
background: #5d2e94;
}
.button {
float: left;
padding: 27px 20px;
font-size: 40px;
text-decoration: none;
color: #333;
}
For some reason the sidebar won't slide to the right when I click on the hamburger button. Can someone explain to me why? Is my JavaScript code correct?
I found your problem:
In your JS code you check if the inner HTML of the Button is:
<i class="fas fa-bars"></I>
But Fontawesome adds a new Attribute to your <I> Element. So now it's inner HTML is:
<i class="fas fa-bars" aria-hidden="true"></I>
I would recommend using a variable in js or something similar to check/save wether your menu is open or not.
Your way could easy lead to more bugs.
In Addition, for better performance I would recommend animating with Transform not margin, if possible.
I want each element to close upon the click of the "x" icon using pure javascript. i'm actually new to javascript so i am trying some stuffs out. Below is my code and what i have been able to do.
I want each element to close upon the click of the "x" icon.
var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
closeBtnTask[i].addEventListener("click", function() {
var panel = document.querySelectorAll(".taskpanel");
for (var x = 0; x < taskpanel.length; x++) {
Things[x].style.display = "none";
}
});
}
.task-box {
float: left;
width: 100%;
}
.task-wrapper {
width: 400px;
background: #f5f5f5;
}
ul.mytask {
padding: 0px;
margin: 0px;
padding-left: 5px;
}
ul.mytask li {
list-style: none;
line-height: 34px;
border-bottom: 1px solid #ddd;
}
.mytask span {
float: right;
padding-right: 10px;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="task-box">
<div class="task-wrapper">
<ul class="mytask">
<li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li>
</ul>
</div>
</div>
You can delegate in plain JS too
document.querySelector(".mytask").addEventListener("click",function(e) {
let tgt = e.target;
if (tgt.matches(".fa-close")) tgt.closest("li").style.display="none";
})
.task-box {
float: left;
width: 100%;
}
.task-wrapper {
width: 400px;
background: #f5f5f5;
}
ul.mytask {
padding: 0px;
margin: 0px;
padding-left: 5px;
}
ul.mytask li {
list-style: none;
line-height: 34px;
border-bottom: 1px solid #ddd;
}
.mytask span {
float: right;
padding-right: 10px;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="task-box">
<div class="task-wrapper">
<ul class="mytask">
<li class="taskpanel">First Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Second Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Third Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Fourth Task <span><i class="fa fa-close times"></i></span></li>
<li class="taskpanel">Fifth Task <span><i class="fa fa-close times"></i></span></li>
</ul>
</div>
</div>
Your code was just a bit wrong, I fixed it here
https://jsfiddle.net/L81t9ym6/
var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
closeBtnTask[i].addEventListener("click", function() {
var panel = document.querySelectorAll(".taskpanel");
for (var x = 0; x < panel.length; x++) {
panel[x].style.display = "none";
}
});
}
Note: this closes EVERY element when you click ANY x, rather than just the element that the click happened on.
edit
here's the code for closing JUST the panel you clicked
var closeBtnTask = document.querySelectorAll(".times");
for (var i = 0; i < closeBtnTask.length; i++) {
closeBtnTask[i].addEventListener("click", function(ev) {
var tp = ev.target.closest('.taskpanel');
tp.style.display = "none";
});
}
I didn't know that javascript has a native .closest method now, that's useful! https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
use this Javascript
working demo is here https://jsfiddle.net/Lg7bjr3k/
$('.times').click(function(){
$(this).parent().parent().hide();
})
Live Snippet
$(document).ready(function() {
"use strict";
var PushState, Current;
$(document).on('click', function(e) {
if ($(e.target).closest($('.page-breadcrumb')).length) {
$(e.target).closest('li').nextAll().remove();
PushState = $('.page-breadcrumb').children('li').each(function() {
return $(this).children().find('span.Title').text();
}).get().join("/");
console.log(PushState);
Current = $(e.target).closest('a').html();
$(e.target).closest('li').remove();
$('.page-breadcrumb').append(Current);
}
});
});
.page-bar {
box-sizing:border-box;
position: relative;
width:100%;
height:61px;
padding: 0 20px;
}
.page-bar .page-breadcrumb {
display: inline-block;
float: left;
padding: 20px 0;
margin: 0;
list-style: none;
}
.page-bar .page-breadcrumb>li {
display: inline-block;
}
.page-bar .page-breadcrumb>li,
.page-bar .page-breadcrumb>li a {
font-size: 14px;
color: #A3A3A3;
text-decoration: none;
}
.page-bar .page-breadcrumb>li a:hover {
text-decoration: underline;
}
.page-bar .page-breadcrumb>li>i.fa-arrow-right {
font-size: 12px;
margin: 0 5px;
position: relative;
opacity: .4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="page-bar">
<div class="page-breadcrumb">
<li>
<i class="fa fa-home"></i> <span class="Title">Dashboard</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<a href="javascript:;">
<i class="fa fa-user"></i>
<span class="Title">Account</span>
</a>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<a href="javascript:;">
<i class="fa fa-envelope"></i>
<span class="Title">Messages</span>
</a>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li></li>
<i class="fa fa-plus"></i>
<span class="Title">Compose</span>
</div>
</div>
Outcome
Dependant on where you click, the outcome is as follows (I clicked on 'Account'):
[object HTMLLIElement]/[object HTMLLIElement]/[object HTMLLIElement]
What I'm Trying To Achieve
If $(e.target) is $('.page-breadcrumb li a')
Initiate everything the script currently does
PushState should return (clicking on Messages example):
Dashboard/Account/Messages
Questions
How do I return the text only of each span.Title connectings all with '/'?
Using return in each callback is causing you to loose the data .If you even have this
PushState = $('.page-breadcrumb').children('li').each(function() {
return 0;
}).get().join("/");
you would still be getting the same results because what you are getting is just the outer <li> elements .So instead of returning use some variable in which you can store the individual results of eachs callback
Make some global like variable var v =[]; outside each and use below modification
$('.page-breadcrumb').children('li').each(function() {
var txt = $(this).children().find('span.Title').text();
if(txt != '')
v.push(txt);
});
PushState = v.join('/');
Target the selector you want in the event listener:
Change
$(document).on('click', function(e) {
To
$(document).on('click','.page-breadcrumb a' function(e) {
// "this" will be instance of .page-breadcrumb a
var spanText = $(this).find('.Title').text()
.....
I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}
in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}
I am trying to resize my footer with jquery. So far when I resize the window it doesn't add the class. Am I implementing it right?
/* My jQuery: */
$(document).ready(function() {
$(window).on('resize', function(){
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
}
});
});
/* My CSS: */
.social-lg div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 4.25rem;
width: 4.25rem;
}
.icon-lg div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 2em;
}
.social-sm div.col-md-12 > ul > li > a {
border: 2px solid #616161;
border-radius: 50%;
display: inline-block;
letter-spacing: normal;
text-align: center;
height: 3.25rem;
width: 3.25rem;
}
.icon-sm div.col-md-12 > ul > li > a > i {
padding-top: .5rem;
font-size: 1.5em;
}
<!-- My HTML: -->
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a id="anc" class="nostyle" href="https://www.linkedin.com/in/"><i id="ico" class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://github.com/"><i id="ico" class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://www.instagram.com/_/"><i id="ico" class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a id="anc" class="nostyle" href="https://twitter.com/"><i id="ico" class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Edit: embedded code inside the question instead of providing a link
You have a number of same id parameters for li and i tags which prevents jquery to select all the elements of the same id, so make them classes like following
<div class="row" id="footer">
<div class="col-md-12">
<ul>
<li><a class="anc nostyle" href="https://www.linkedin.com/in/"><i class="ico fa fa-linkedin fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://github.com/"><i class="ico fa fa-github fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://www.instagram.com/_/"><i class="ico fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<li><a class="anc nostyle" href="https://twitter.com/"><i class="ico fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
<p>Lorem Ipsum</p>
</ul>
</div>
</div>
Then use the modified javascript code
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$(".anc").addClass('social-lg').removeClass('social-sm');
$(".ico").addClass("icon-lg").removeClass("icon-sm");
} else {
$(".anc").addClass('social-sm').removeClass('social-lg');
$(".ico").addClass("icon-sm").removeClass("icon-lg");
}
}).trigger("resize"); //this to force first event on load
});
You didn't include a case when there's a need to delete a one class to make another one work. Toggle class should fix it.
Edit: toggle won't work in this case. You have to use another solution:
$(document).ready(function() {
$(window).on('resize', function() {
var win = $(this);
if (win.width() > 600) {
$("#anc").addClass('social-lg');
$("#ico").addClass("icon-lg");
$("#anc").removeClass('social-sm');
$("#ico").removeClass("icon-sm");
} else {
$("#anc").addClass('social-sm');
$("#ico").addClass("icon-sm");
$("#anc").removeClass('social-lg');
$("#ico").removeClass("icon-lg");
}
});
});