Variable boolean doesnt work in a #Input and *ngif - javascript

sorry for my bad english, not my main language.
I got a problem, i have a boolean var in a father component to switch language. I have 2 ngifs in all my component to switch language if var is true or false.
app component:
public euskera: boolean;
constructor(){
this.euskera=false;
}
ngOnInit(): void {
}
setEuskera(){
this.euskera=true;
}
setCastellano(){
this.euskera=false;
}
app component html:
<div *ngIf="euskera">
<header id="header">
<img id="logo" src="../assets/img/logoSoinuka.png">
<nav id="nav">
<ul>
<li [routerLink]="['/inicio']"><a>hasiera</a></li>
<li [routerLink]="['/sobre-nosotros']"><a>nor gara?</a></li>
<li [routerLink]="['/proximos-eventos']"><a>hurrengo ekitaldiak</a></li>
<li [routerLink]="['/contacto']"><a>kontaktua</a></li>
<li (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()"><a>Hizkuntza:<span>[</span></a></li>
</ul>
</nav>
</header>
<div id="language" (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()">
<ul>
<li [routerLink]="['/inicio']" (click)="setCastellano()"><a>Gaztelania</a></li>
<li [routerLink]="['/inicio']" (click)="setEuskera()"><a>Euskara</a></li>
</ul>
</div>
<div class="son">
<app-home [euskera]="true"></app-home>
</div>
</div>
<div *ngIf="euskera==false">
<header id="header">
<img id="logo" src="../assets/img/logoSoinuka.png">
<nav id="nav">
<ul>
<li [routerLink]="['/inicio']"><a>Inicio</a></li>
<li [routerLink]="['/sobre-nosotros']"><a>¿Quienes somos?</a></li>
<li [routerLink]="['/proximos-eventos']"><a>Proximos eventos</a></li>
<li [routerLink]="['/contacto']"><a>Contacto</a></li>
<li (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()"><a>Lenguaje:<span>[</span></a></li>
</ul>
</nav>
</header>
<div id="language" (mouseenter)="mostrarLenguajes()" (mouseleave)="esconderLenguajes()">
<ul>
<li [routerLink]="['/inicio']" (click)="setCastellano()"><a>Castellano</a></li>
<li [routerLink]="['/inicio']" (click)="setEuskera()"><a>Euskera</a></li>
</ul>
</div>
<div class="son">
<app-home [euskera]="false"></app-home>
</div>
</div>
<body>
<div id="content">
<router-outlet></router-outlet>
</div>
</body>
So far everything works. The problem is, when I pass the variable to the child and do the input.
Home component (child)
public title: string
#Input() euskera:boolean;
Home component html (child)
<div *ngIf="euskera">
euskk
</div>
<div *ngIf="euskera==false">
dd
</div>
At this point the Ifs stop working. It does neither of the two checks for me, neither false nor true.
When I reload the page, as soon as I start, when outputting the input value from the child through the console it gives me false (its real value) but then without doing anything it marks undefined.
Then it no longer matters if I press the button to change language and change the value of the variable since it does not modify the text of the child.
Anyone can help me? Thanks

use !euskera to check if a value is null or undefined or false
<div *ngIf="euskera">
euskara
</div>
<div *ngIf="!euskera">
castellano
</div>
You can also give a value by defect in input
#Input() euskera:boolean=false

Related

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.
if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");
Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

Vue SPA overrides dropdown

I'm building a, SPA with Vue JS, and I'm having some problems with my Sidebar component. The default functionality of my Dropdown - to open the submenu - is being overridden by Vue. When I click the anchor, the url is being updated as though I was clicking in a route.
I tried to add #click.stop, but it doesn't work.
Sidebar.vue
<template>
<div class="sidebar">
<div class="main-menu">
<div class="scroll">
<ul class="list-unstyled">
<li>
<a href="#start" data-target="#start" #click.stop>
<i class="iconsminds-shop-4"></i>
<span>Dore</span>
</a>
</li>
</ul>
</div>
</div>
<div class="sub-menu">
<div class="scroll">
<ul class="list-unstyled" data-link="start">
<li>
<a href="Dore.Start.html">
<i class="simple-icon-briefcase"></i> Start
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script >
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>
The question is a little ambiguous but if I understood you correctly, you're trying to prevent navigation from happening when you click on the a element?
If this is the case, try the prevent modifier (#click.prevent) instead of #click.stop as the latter will stop the event from propagating to parents, rather than preventing the default behaviour.
Docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Render MVC View Section From Jquery

Here is my MVC View section:
#section popups{
<div class="popup-class" id="popup">
<div class='btn-group' id='actions'>
<div class='collapse navbar-collapse'>
<ul class='actions'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a>
<ul class='dropdown-menu'>
<li><a href='#'>Product</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'>
</div>
</div>
}
I want to call it from JavaScript file (only this section).How can i do that?
There is no way to get a asp.net mvc section in javascript. What you can do is define an html element around the section on the layout page, a <div> for sample, and get this element, for sample, in your layout page:
<div id="popups">
#RenderSection("popups", false)
</div>
In your javascript code, just call this element, for sample:
$(function(){
// call the element, call a method
$("#popups").show();
});
You do not specify what you want to do with this.

How to check if subMenu is shown without setInterval function?

I've got a problem. I have some submenus on my website that i show and hide with jQuery.
The #Sekundar is the submenu, but what i want to ask about is, Is there a better way to check if the menu is shown or not shown?
I couldn't get it make it work unless i put a setInterval on it, and that isn't the best way of doing it i think? Any suggestions?
Here is the JS code:
function sekundarmenu() {
$('#sekundar').fadeToggle();
$('#sekundar2').hide();
$('#sekundar3').hide();
$('#sekundar4').hide();
$('#sekundar5').hide();
}
setInterval(function () {
if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
$("#li1").css("background-color", "#24ac5f");
}
else {
$("#li1").css("background-color", "transparent");
}
}, 1);
And the HTML:
<nav id="primar">
<ul>
<li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
<li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
<li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
<li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
<li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
Since there are many ways to solve similar problems you have to choose the one that best suits your case.
in this Fiddle
i thought to solve the problem in another way by adding some classes in your html code. In this way the jQuery code is drastically reduced.
I also added the ability to disappear the submenu on mouseleave, if you don't like this solution you can easily delete the lines of code highlighted in the fiddle.
If you like this solution remember to flag in green my answer ;)
all jQuery code you need is:
<script type="text/javascript">
$(document).ready(function(){
$('li.principal').click(function(){
var whatSubmenu=$(this).attr('id').slice(1)
$('li.principal').css("background-color", "transparent")
$(this).css("background-color", "#24ac5f")
$('div.sekundar').hide()
$('.'+whatSubmenu).fadeIn()
})
/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
$('div.sekundar').on('mouseleave',function(){
$(this).hide()
$('li.principal').css("background-color", "transparent")
})
})
</script>
html:
<header>
<nav id="primar">
<ul>
<li class="principal" id="li1"><a class="pointer">Indhold</a></li>
<li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
<li class="principal" id="li3"><a class="pointer">Billeder</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar i1">
<nav class="nav2">
<ul>
<li>Osadff</li>
<li>Rwefewg</li>
<li>Reehjy</li>
</ul>
</nav>
</div>
<div id="sekundar2" class="sekundar i2">
<nav class="nav2">
<ul>
<li>dgdgdg</li>
<li>sdfdfdg</li>
</ul>
</nav>
</div>
<div id="sekundar3" class="sekundar i3">
<nav class="nav2">
<ul>
<li>defdgdgdg</li>
</ul>
</nav>
</div>
In this simple example, you have a button that displays or hides your sub menu.
To verify if the menu is visible just give it a class using the toggleclass method and then check for the presence of that class.
<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').click(function(){
$('#sekundar').toggleClass('visible')
if($('#sekundar').hasClass('visible')){
alert('not visible')
$('#sekundar').show()
}else{
alert('visible')
$('#sekundar').hide()
}
})
})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>

Limiting events with e.preventDefault()

Force function toolbarInit() to fire only once.
There are 2 items with the class "nav". When I click on the link "Menu", I would like to see both nav's open.
Right now, the event runs twice (once for each nav) so you see the slidetoggle run multiple times. so rather than it opening, closing, and reopening, i just want it to open a single time.
shouldn't my use of e.preventDefault() prevent the function from running multiple times?
See my Codepen
HTML:
<nav id="people-menu" class="nav people-nav">
<div class="wrap">
<div class="region region-audience-links">
<div class="block">
<div class="content">
<ul class="row in"><div class="split-left"><li class="first leaf menu-level-1">Alumni</li>
<li class="leaf menu-level-1">Current Students</li>
<li class="leaf menu-level-1">Faculty</li>
</div><div class="split-right"><li class="leaf menu-level-1">Parents</li>
<li class="leaf menu-level-1">Prospective Students</li>
<li class="last leaf menu-level-1">School Counselors</li>
</div></ul> </div>
</div>
</div>
</div>
</nav>
<ul class="header-toolbar-triggers row">
<li><span class="icon-menu"></span><span class="nodisplay">Menu</span></li>
</ul>
<nav id="global-menu" class="global-nav nav" role="navigation">
<div class="wrap">
<div class="in">
<div class="region region-header">
<div id="block-menu-menu-primary-menu" class="block block-menu">
<div class="content">
<ul class="menu"><li class="first leaf">About</li>
<li class="leaf">Admissions</li>
<li class="leaf">Financial Aid</li>
<li class="leaf">Academics</li>
<li class="last leaf">Student & Residential Life</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Javascript/JQuery
function toolbarRespond() {
if ($(window).innerWidth() < 795) {
$('.nav').hide();
}
}
function toolbarInit() {
$('.header-toolbar-triggers a').on('click', function(e) {
var toolbarTarget = $(this).attr('data-target');
$('.'+toolbarTarget).slideToggle(500);
e.preventDefault();
});
}
$(document).ready(function() {
toolbarRespond();
toolbarInit();
window.onresize = function(event) {
toolbarRespond();
toolbarInit();
}
});
The preventDefault() method only stops the browser from performing the event's default action. In this case, that action would be to follow the link to its location. Your call to e.preventDefault() is why the browser doesn't navigate to the #global-menu URL.
The reason you're seeing multiple runs of the bound functionality is that you're running toolbarInit() multiple times--thereby binding the click multiple times. You run it at document ready, but then you bound it to run every time the window resizes as well.
In your simple sample code, there is no need to run toolbarInit() on resize of the window. If your real-life code is more complex, you need to separate the click binding out and stop calling it on resize.

Categories

Resources