Navbar icon text missing on resize - javascript

i just want to ask what will be the best approach for my navbar. I manage to make my nav bar turn into icons on the left whenever i click on the toggle button. but when I suddenly enlarge my screen while the icons on the left is visible , my navbar returns to normal on the top but missing the label just the icons only.
<nav class="navbar">
<div class="max-width">
<div class="logo">D.N.A <span>Builders</span></div>
<ul class="menu">
<li><i class="fa fa-home fa-fw" aria-hidden="true"></i><span> Home</span></li>
<li><i class="fa fa-question-circle" aria-hidden="true"></i><span> About</span></li>
<li><i class="fa fa-wrench" aria-hidden="true"></i><span> Services</span></li>
<li><i class="fa fa-cog" aria-hidden="true"></i><span> Skills</span></li>
<li><i class="fa fa-users" aria-hidden="true"></i><span> Teams</span></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><span> Contact</span></li>
</ul>
<div class="menu-btn">
<i class="fa fa-bars"></i>
</div>
</div>
</nav>
js:
$('.menu-btn').click(function() {
$('.navbar .menu').toggleClass("active");
$('.menu-btn i').toggleClass("active");
})
});
$(document).ready(function(){
$(".menu-btn").click(function(){
$(".menu span").toggle();
});
});

Maybe this is because you applied the active class on button's click event, try doing this at window's resize one.
Or, if you want to use bootstrap utilities, use its Grid system layout: https://getbootstrap.com/docs/5.0/layout/grid/

Related

Delete the # char from the url

hey I'm having a little issue. Right now my navigator bar just take me to sections on my page. I did it using id which will connect the a tag to a specific section.
I get to see the # char with the section name on the url for example:
http://orelhindi.s3-website.us-east-2.amazonaws.com/#skills
is there a way to make it dissapear?
<div class="menu">
<ul>
<li>About</li>
<li>cv</li>
<li>skills</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>
thanks a lot!
Technically yes: How to modify the URL without reloading the page?. Or you need to implement the scroll in JavaScript, making your life slightly more difficult.
And the # is useful, if someone shares the link anyone clicking on it will scroll to the correct place on the page.
Alternative to Bob's answer. You can use JS to listen for the clicks and scroll the element into view.
Change all href to data-section-id
Using JS: query those a[data-section-id] elements
Add click event listener
Find the element with same id as data-section-id, and scroll it into view
Worth noting the support for scrollIntoView.
// When DOM is ready
document.addEventListener("DOMContentLoaded", function() {
// Get all `a` elements with `data-section-id`
document.querySelectorAll("a[data-section-id]").forEach(aElement => {
// Add click event listener
aElement.addEventListener("click", event => {
// Store the element with `id` matching `data-section-id`
const scrollToElement = document.getElementById(event.target.dataset.sectionId);
// If element is not null, scroll to it
if (scrollToElement !== null) {
scrollToElement.scrollIntoView();
}
});
});
});
<div class="menu">
<ul>
<li><a data-section-id="about">About</a></li>
<li><a data-section-id="cv">cv</a></li>
<li><a data-section-id="skills">skills</a></li>
<li><a data-section-id="portfolio">portfolio</a></li>
<li><a data-section-id="contact">contact</a></li>
</ul>
</div>
....
<section id="skills" data-aos="fade-right">
<ul>
<li><i class="fab fa-java"></i></li>
<li><i class="fab fa-js-square"></i></li>
<li><i class="fab fa-node"></i></li>
<li><i class="fab fa-angular"></i></li>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-git"></i></li>
<li><i class="fab fa-aws"></i></li>
</ul>
</section>

Perform an action per element with a common class

I wish to fade in a share link when clicked on a share icon, but the problem am having is that they are many of them, it is like a post and am using a common class to fade in the links, when i click on one icon all the share link fades in, is there any way to fade in the link per each post, am trying to keep my code dry.
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
$('.fire-share').click(function(){
$('.shareo').fadeToggle()
})
I have tried using .each() but it still throws up the same problem, if i use different classes or id's it works fine but a post of many numbers, its not dry
$('.fire-share').click(function(){
$('.shareo').each(function(i,obj){
$(this).fadeToggle()
})
})
Use this context to tell the clicked element
Use find to search for the specific element that is within the parent element
$('.fire-share').click(function(){
$(this).find('.shareo').fadeToggle()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>

Angular 2 move component to back (Change z position)

I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">

How to copy the <ul> along with html into another <ul> in jquery?

I am trying to copy li items form one ul into another ul along with its html.
So far I am able to copy just the list but I want to copy html inside li items as well as I have different html structure in both list.
HTML:
<li>
Cylinder Block MaterialC1228<i class="fa fa-plus-circle pull-right"></i>
</li>
<li>
Cylinder Head MaterialC1229<i class="fa fa-plus-circle pull-right"></i>
</li>
<li>
Engine AspirationC1405<i class="fa fa-plus-circle pull-right"></i>
</li>
JS:
function copyFieldItemsintoQueryOrder() {
$("#ordering-options").empty();
$("#fields").children().clone().appendTo("#ordering-options");
}
How to copy the list items along with html ?
Just set the html as the other html.
$("#ordering-options").html($("#fields").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>fields</h3>
<ul id="fields">
<li>Cylinder Block MaterialC1228<i class="fa fa-plus-circle pull-right"></i>
</li>
<li>Cylinder Head MaterialC1229<i class="fa fa-plus-circle pull-right"></i>
</li>
<li>Engine AspirationC1405<i class="fa fa-plus-circle pull-right"></i>
</li>
</ul>
<h3>ordering-options</h3>
<ul id="ordering-options">
</ul>
If you want to copy all li items of ul then you can try this.
<ul id="abc">
<li>Cylinder Block MaterialC1228<i class="fa fa-plus-circle pull-right"></i></li>
<li>Cylinder Head MaterialC1229<i class="fa fa-plus-circle pull-right"></i></li>
<li>Engine AspirationC1405<i class="fa fa-plus-circle pull-right"></i></li>
</ul>
$('#abc').html().appentTo("#ordering-options");

Replacing the active class for li using jquery

when i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
http://7revolution.com/captain/captain/empty.html
$('.sidebar-menu .treeview').on('click', function(){
if($(this).hasClass("active")) {
$('.sidebar-menu').find('.treeview .treeview-menu').removeClass('active');
$(this).find(".treeview.active").removeClass("active");
e.preventDefault();
}
else{
$('.sidebar-menu').find('.treeview-menu').attr('display', 'block');
}
<ul class="sidebar-menu">
<li class="active">
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="pages/widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-bar-chart-o"></i>
<span>Charts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-angle-double-right"></i> Morris</li>
<li><i class="fa fa-angle-double-right"></i> Flot</li>
<li><i class="fa fa-angle-double-right"></i> Inline charts</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-angle-double-right"></i> General</li>
<li><i class="fa fa-angle-double-right"></i> Icons</li>
<li><i class="fa fa-angle-double-right"></i> Buttons</li>
<li><i class="fa fa-angle-double-right"></i> Sliders</li>
<li><i class="fa fa-angle-double-right"></i> Timeline</li>
</ul>
</li>
</ul>
When i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
when i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
Try this:
Javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('.sidebar-menu .treeview').on('click', function () {
$('.treeview').removeClass('active');
$(this).addClass('active');
});
});
</script>
CSS:
<style>
.sidebar-menu .treeview-menu{ display: none; }
.active .treeview-menu {
display: block;
}
.treeview-menu {
display: none;
}
</style>
This might help out a little: http://jsfiddle.net/qh8vz4y4/
JS
$('.sidebar-menu .treeview').on('click', function () {
$(this).addClass('active');
$('.treeview').not(this).removeClass('active');
});
CSS
.active .treeview-menu {
display: block;
}
.treeview-menu {
display: none;
}

Categories