Develop Reference

Vue.js $emit doesn't pass click event from child component

I'm trying to add click event on my button in child component and then hide side bar component which I imported in parent component. I read many articles and watched some videos but i can't solve this at the moment.
Child - Navbar.vue
<template>
<div id="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="toggle-btn ml-3">
<button type="button" class="close" #click="closeSidebar" aria-label="Close">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="nav-head mx-auto">
<a class="navbar-brand" href="#">Contact Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse col-lg-10 mx-auto" id="navbarSupportedContent">
<form class="form-inline col-md-12 my-2 my-lg-0 justify-content-center">
<input class="form-control shadow-none col-md-6 mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-secondary shadow-none my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</template>
<script>
import sidebar from './Sidebar.vue'
import contactList from './ContactList.vue'
export default {
data() {
return {
}
},
methods: {
closeSidebar() {
this.$emit('slideLeft');
document.querySelector('.close').classList.toggle('rotate');
},
},
components: {
sidebar,
contactList
}
}
</script>
Parent - App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="d-flex">
<transition name="ease">
<sidebar class="slide" v-show="clickToggle" #slideLeft="toggleSidebar"></sidebar>
</transition>
<contact-list></contact-list>
</div>
<modal></modal>
</div>
</template>
<script>
import sidebar from './components/Sidebar.vue'
import navbar from './components/Navbar.vue'
import contactList from './components/ContactList.vue'
import modal from './components/AddContactModal.vue'
export default {
name: 'app',
data() {
return {
clickToggle: true
}
},
methods: {
toggleSidebar() {
this.clickToggle = !this.clickToggle;
}
},
components: {
sidebar,
navbar,
contactList,
modal
}
}
</script>
And this is another child component - Sidebar.vue which i'm trying to hide through parent component
<template>
<div id="sidebar">
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-id-card"></i><span class="item-desc">All Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light" data-toggle="modal" data-target="#exampleModalScrollable">
<i class="fa fa-user-plus"></i><span class="item-desc">Add Contact</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-users"></i><span class="item-desc">Groups</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-share-alt"></i><span class="item-desc">Share Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-trash"></i><span class="item-desc">Trash</span></a>
</div>
</div>
</div>
</div>
</template>
<script>
import contactList from './ContactList.vue'
import modal from './AddContactModal.vue'
export default {
methods: {
},
components: {
contactList, modal
}
}
</script>
<style lang="">
#sidebar {
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
.hide {
margin-left: -16rem !important;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: calc(100vh - 57px);
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .sidebar-heading i {
transform: rotate(90deg);
}
#sidebar-wrapper .list-group {
width: 16rem;
}
#sidebar-wrapper .list-group .list-group-item {
padding: 20px 30px;
}
#sidebar-wrapper .list-group .list-group-item i {
width: 40px;
padding: 0 10px;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
</style>

Change the value of CSS style when scrolled

First of all I want to explain what I want to do, I want to change the value of a certain CSS style which is the border-bottom-color when scrolled. But the problem is, it's not working while the other style is working .navbar-inverse .navbar-nav>li>a. Can someone explain me why it's not working? I'm new to HTML and CSS.
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(".navbar-inverse .navbar-nav>li>a").css("color", "white"); //Working
$(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "white");
} else {
$(".navbar-inverse .navbar-nav>li>a").css("color", "black"); //Working
$(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "rgb(2,1,131)");
}
})
})
.navbar-inverse .navbar-nav>li>a {
color: black;
padding-top: 80px;
padding-left: 30px;
font-weight: bold;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: rgb(2, 1, 131);
border-bottom-color: rgb(2, 1, 131);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
<img src="img/gear.png" class="gear" width="15px">
<img src="img/lightning.png" class="lightning" width="25px">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Clients</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Team</li>
<li>HR Express</li>
<li>Activities</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>

I would suggest to use CSS over jquery like below
$(document).ready(function() {
$(".navbar-inverse .navbar-nav>li>a").mouseover(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(this).css("color", "red"); //Working
$(this).css("border-bottom-color", "rgb(2, 1, 131)");
} else {
$(this).css("color", "black"); //Working
$(this).css("border-bottom-color", "rgb(2,1,131)");
}
});
$(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {
var scroll = $(window).scrollTop();
if (scroll > 36) {
$(this).css("color", "black");
$(this).css("border-bottom-color", "transparent");
} else {
$(this).css("color", "black");
$(this).css("border-bottom-color", "transparent");
}
});
})
.navbar-inverse .navbar-nav>li>a {
color: black;
padding-left: 30px;
font-weight: bold;
border-bottom: 3px solid transparent;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: rgb(2, 1, 131);
border-bottom-color: rgb(2, 1, 131);
}
body {
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
<img src="img/gear.png" class="gear" width="15px">
<img src="img/lightning.png" class="lightning" width="25px">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li>Careers</li>
<li>Clients</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Team</li>
<li>HR Express</li>
<li>Activities</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>

Try changing your script like this
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
// change color here
} else {
// change color here
}
});

I suggest you define a separate style for both cases, i.e. .navbar-menuitem and .navbar-menuitem-scrolled or something similar. Then use Javascript to add or remove the class from the item you are targeting.
What you are trying to do in jQuery above is target the CSS of a possible state of the element. jQuery does not have access to that unless the element is already in the hover state. jQuery is used to manipulate the elements in their present state, not their stylesheets, though it does have access to the currently applied styles.
Use the .addClass() and .removeClass() methods to solve your problem. Remember to use .hasClass() so you do not add the class a billion times when scrolling up and down the page.

You cannot use :hover css on script selector. You are suppose to use jquery hover() or mouseover() to achieve this. Something like below
$('.navbar-nav>li>a').hover(function(){
if(scroll>36){
//change border-color
}
else{
//change border-color
}
});

jQuery Function to bring in "offcanvas" slide-in menu is not working

I have tried and searched the internet dry without any solution to my problem. I have created an list in which I modified to be located off the main screen as a slide-in menu using transform: translate (-100%). When the main navbar collapses into the mobile button, I intend to assign a jQuery function to the button in order to slide-in the offcanvas menu. However, the button does not respond no matter what and I need some aid. Any help is greatly appreciated!
/..The main navbar../
<nav class="main-navigation" role="navigation">
<ul>
<li class="products1">Products</li>
<li class="store1">Store</li>
<li class="about1">About Us</li>
<li class="discover1">Discover</li>
<li class="support1">Support</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
/..The button that dosen't work../
<button class="navbar-toggle pro-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
/..The menu that I want to slide in but dosen't work../
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
/..The main CSS for the slide-in menu../
<style>
.main-navigation {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
text-decoration: none;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.main-navigation.open {
transform: translateX(0);
}
</style>
/..The jQuery function that is supposed to slide-in the menu../
<script>
$(document).ready(function() {
$('.pro-toggle').on('click', function(){
${'.main-navigation').toggleClass('open');
});
});
</script>

change
from ${'.main-navigation') to $('.main-navigation').

Off Canvas - Left Navbar animation very jumpy/laggy on close

I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply

Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>

Multiple classes in one div

This has been wreaking my head all day and before I give up I thought I'd see if anyone could help me out.
I have a sticky header that moves down the page when scrolled. I'm using bootstrap and have two classes in one div - navbar for the regular view and navbarSticky for the sticky effect when scrolled.
The problem is when I have both classes in the div, the navbar class completely disappears but navbarSticky works and navbar will only return when the navbarSticky class is deleted from the div. I was thinking it must have something to do with CSS - navbarSticky having more precedence over navbar.
I would really appreciate it if someone could help me out.
This is my navbar :
<div class="navbar navbarSticky navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="row">
<div class="logo col-xs-6 col-md-6">
<ul class="pull-left">
<li>Theme</li>
</ul>
</div>
<div class="nav col-xs-6 col-md-6">
<ul class="pull-right">
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="menu-button col-xs-6 col-md-6">
<ul class="pull-right">
<li>
<button id="menu-button" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
</div>
</div>
<div id="nav-dropdown" class="nav-dropdown col-xs-12 col-md-12">
<ul>
<li id="form">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
<li>Home</li>
<li class="dropdown">
Products
<ul>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
<li>Example Dropdown</li>
</ul>
</li>
<li>Services</li>
<li>Join</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
This is my jquery
$(window).scroll(function (){
if($(window).scrollTop() > 65)
{
$("navbar").addClass('navbarSticky');
$(".navbarSticky").css({
'display':'block'
})
}
else{
$("navbar").removeClass('navbarSticky');
$(".navbarSticky").css({
display:'none'
})
}
});
This is my css
.navbar
{
background: #ffffff;
color: #2d3238;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
height: 100px;
}
.navbarSticky
{
background: #ffffff;
box-shadow: 1px 5px 15px #ccc;
color: #2d3238;
display: none;
top: 0;
height: 100px;
left: 0;
right: 0;
position: fixed;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
z-index: 9999;
}
Update:
I Finally have it working, i just needed to change navbar in jquery to .navbar but now i have some wierd jumping down effect of the navbarSticky when it crosses over from the navbar. Could someone help?

navbarSticky overwrites every property on navbar. It isn't that the navbar class disappears, it is that none of it's own css properties dominate so you see none of it until the dominating navbarSticky class has been removed.