*ngIf is not working like other *ngIf's

*ngIf is not working like other *ngIf's - javascript

I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks

Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem

ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}

Related

Jquery search not working properly in accordion?

Here if search text matches the text of <a> tag I want to hide other unmatched items.
Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.
I want to display only the accordion which matches the searched text and hide unmatched .How can I do it here ?
script
jQuery("#query").keyup(function () {
var filter = jQuery(this).val();
jQuery("#accordion").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
html
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

Your html structure are missing some tags . Then you can iterate through your [data-toggle] element and if match found hide closest card from that elements.
Demo Code :
jQuery("#query").keyup(function() {
var filter = jQuery(this).val().toLowerCase(); //get text
//loop through `a` tag
jQuery("#accordion [data-toggle]").each(function() {
if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) {
jQuery(this).closest(".card").hide(); //hide closest card
} else {
jQuery(this).closest(".card").show()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="query">
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>
</div>
</div>
</div>

This should be easy. its a little mistake that you did.
jQuery("#query").keyup(function () {
var filter = jQuery(this).val().toLowerCase();
// Search function return 0 when it dose not find anything.
// and the Regexp should be using g instead of i so the problem with casesensetive should be solved.
jQuery("#accordion .card-body .col-3").each(function () {
var text = jQuery(this).text().toLowerCase();
if (text.indexOf(filter) == -1) {
jQuery(this).hide();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

Vue js: Change value using if else

I am new to Vue and I have two button. One is to show the login section and one is to show the register section. What I am tryin to achieve is, if I click on the login button, I want the login section to show and if I click on the register button, I want to hide login section and the register section to show. And by default, I want the login section to be showing. And also, if I click on the login button or Join button and that section was already showing, I want to keep that section showing. Is there a way to achieve this using if else statement or is there a better way to do this. Below is my code
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true,
displayJoinPage: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayLoginPage = !displayLoginPage" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayJoinPage = !displayJoinPage" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayJoinPage">
<h5>Hello Register Page</div>
</div>
</div>

You could use a single boolean, since there are only two views. Set the variable to true to show the login view and hide the other, and vice versa for false. Additionally, replace v-show with v-if and v-else:
<template>
<div>
<button #click="displayLoginPage = true">Login</button>
<button #click="displayLoginPage = false">Join</button>
<div v-if="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-else>
<h5>Hello Register Page</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayLoginPage: true
}
}
}
</script>
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayLoginPage = true" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayLoginPage = false" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-if="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-else>
<h5>Hello Register Page</div>
</div>
</div>
If you plan to have more than two views, you could set the variable to a string specific to each view. For example, set displayPage to "login" to show the login-view; or "join" to show the join-view. Change your v-show condition to compare displayPage against the corresponding value:
<template>
<div>
<button #click="displayPage = 'login'">Login</button>
<button #click="displayPage = 'join'">Join</button>
<div v-show="displayPage == 'login'">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayPage == 'join'">
<h5>Hello Register Page</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayPage: 'login'
}
}
}
</script>
var app = new Vue({
el: '#app',
data: {
displayPage: 'login'
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="displayPage = 'login'" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="displayPage = 'join'" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayPage == 'login'">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayPage == 'join'">
<h5>Hello Register Page</div>
</div>
</div>

You just need to explicitly set the values for displayLoginPage and displayJoinPage when either button is clicked. See the following example:
var app = new Vue({
el: '#app',
data: {
displayLoginPage: true,
displayJoinPage: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container-fluid p-0" id="app">
<div class="col-md-12">
<div class="col-md-12 sub-title">
<div class="col horizontal-line">
<h5>PERSONAL DETAILS</h5>
</div>
<div class="col-md-12 text-color-per">
<p>Make Sure All Enter Information Are Correct</p>
</div>
</div>
</div>
<div class="d-flex justify-content-center entry-section col-sm-12">
<div class="col-md-6 entry-option-button-login" id="show-login-section">
<button #click="(displayLoginPage = true) && (displayJoinPage = false)" type="button" name="btn button">
Login</button>
</div>
<div class="col-md-6 entry-option-button-join" id="show-join-section">
<button #click="(displayJoinPage = true) && (displayLoginPage = false)" type="button" name="btn button">
Join</button>
</div>
</div>
<div v-show="displayLoginPage">
<h5>Hello Login Page</h5>
</div>
<div v-show="displayJoinPage">
<h5>Hello Register Page</div>
</div>
</div>

Angular how to Get values from ng-model and pass into params

I'm new to angular
help me to get value from ng-model and pass them into $http params to get json response,
and then i don't know how to show results using my own template as ng-repeat
<script>
var myApp = angular.module("orderApp", []);
myApp.controller("ArchiveController", function ($scope, $http) {
console.log($scope.fromdate);
console.log($scope.todate);
$http({
url: "#Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)",
method: "GET",
params: { fromDate: '1396-01-01', toDate: '1396-01-17' }
// i should use $scope.fromdate & $scope.todate here
})
.then(function (response) {
$scope.orderArchive = response.data;
console.log(response.data);
});
});
</script>
Here is my HTML code
<div ng-app="orderApp">
<div ng-controller="ArchiveController">
<h2 class="title">بایگانی سفارش‌ها</h2>
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="txtFromDate">از تاریخ:</label>
<div class="col-sm-4">
<input type="text" class="form-control fromDate" id="txtFromDate" ng-model="fromdate" placeholder="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")">
</div>
<label class="col-sm-2 control-label" for="txtToDate">تا تاریخ:</label>
<div class="col-sm-4">
<input type="text" class="form-control toDate" id="txtToDate" ng-model="todate" placeholder="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")" value="#Persia.Calendar.ConvertToPersian(DateTime.Now).ToString().Replace("/","-")">
</div>
</div>
<a class="btn btn-primary btn-block searchInArchive" ng-href="#">جستجو</a>
</div>
<hr />
<!-- Template html code: -->
<div class="results">
<div class="panel-group" role="tablist" aria-multiselectable="true" data-day="2" ng-repeat="order in OrderArchive">
<h3 class="dayName"></h3>
<div class="panel panel-default orderItem">
<div class="panel-heading" role="tab">
<span class="description"></span>
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#day-1" href="#order-{{order.id}}" aria-expanded="true" aria-controls="collapse-one">
فاکتور #{{order.id}}
</a>
</h4>
</div>
<div class="panel-collapse collapse in" id="order-{{order.id}}" role="tabpanel" aria-labelledby="orderHeader-{{order.id}}">
<div class="panel-body orderInfo">
<div class="row borderBottom">
<div class="col-xs-12 col-sm-6">
زمان سفارش: <b>{{order.orderDatetime}}</b>
</div>
<div class="col-xs-12 col-sm-6">
سفارش‌دهنده: <b>{{order.ordererFullName}} — {{order.ordererUserName}}</b>
</div>
<div class="col-xs-12">
آدرس: <b>{{order.ordererAddress}}</b>
</div>
</div>
<div class="row borderBottom">
<div class="col-xs-12">
سفارش‌ها:
<div ng-repeat="food in order.foods">
<b>
<i class="howMany" data-food="{{food.id}}"> عدد</i>
<span class="foodMenu">{{food.menuName}}</span>
<span data-toggle="tooltip" data-placement="auto" data-html="true" title="" data-original-title="{{food.price}} تومان">{{food.name}}</span>
</b>
</div>
—
</div>
</div>
<div class="row borderBottom">
<div class="col-xs-12 col-sm-3">
درگاه پذیرنده: <b>{{order.bank}}</b>
</div>
<div class="col-xs-12 col-sm-3">
کد رهگیری تراکنش: <b>{{order.orderReferenceId}}</b>
</div>
<div class="col-xs-12 col-sm-3">
مبلغ: <b class="orderAmount">{{order.orderAmount}}</b>
</div>
<div class="col-xs-12 col-sm-3">
وضعیت سفارش: <b data-toggle="tooltip" data-placement="auto" data-html="true" title="" class="text-success" data-original-title="123">{{order.orderlevel}}</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to find the solution.

It looks like you aren't declaring the variables $scope.formdate and $scope.todate inside of your controller. Try the code below, the first thing it does is declares the variables. Then to add them to the params you just need to put those variables in place of the constants you have now, like below.
<script>
var myApp = angular.module("orderApp", []);
myApp.controller("ArchiveController", function ($scope, $http) {
$scope.fromdate = "";
$scope.todate = "";
$http({
url: "#Url.Action(MVC.Admin.Finance.ActionNames.OrdersArchiveList,MVC.Admin.Finance.Name)",
method: "GET",
params: { fromDate: $scope.fromdate, toDate: $scope.todate}
})
.then(function (response) {
$scope.orderArchive = response.data;
console.log(response.data);
});
});
</script>

Change column width on click in bootstrap 3

How to switch the size of one column when there is a click on a sidebar?
Im developing an application with a map in a column and a second column to the right displaying information. There is a sidebar that slides in from the right when activated.
When the sidebar is extended, the main column with the map is col-lg-6 and the column on the right is col-lg-4
Now when the sidebar is closed by clicking on a button, I would like to map column to switch to col-lg-8. Is there a way to do this?
Code for page and sidebar:
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-heading">
<h3 class="panel-title">Projects
<button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-8 col-md-8">
<input type="text" class="form-control search" placeholder="Filter" />
</div>
<div class="col-xs-4 col-md-4">
<button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i> Sort</button>
</div>
</div>
</div>
<div class="sidebar-table">
<table class="table table-hover" id="feature-list">
<thead class="hidden">
<tr>
<th>Icon</th>
<tr>
<tr>
<th>Name</th>
<tr>
<tr>
<th>Chevron</th>
<tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:0px;">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
<div id="map"></div>
</div>
<div class="col-xs-6 col-lg-4" style="padding-top:0px">
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-2x"></i>
</div>
<div class="panel-body" style="text-align:center">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list fa-2x"></i>
</div>
<div class="panel-body" style="text-align:left">
<div id="projects"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code for activation of sidebar and menu button:
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 50; // Calculate the top offset
$('#map').css('height', (h - offsetTop));
}).resize();
$("#list-btn").click(function() {
$('#sidebar').toggle();
map.invalidateSize();
return false;
});
$("#sidebar-toggle-btn").click(function() {
$("#sidebar").toggle();
map.invalidateSize();
return false;
});
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
map.invalidateSize();
});
EDIT
I have tried using toggleClass and addClass/removeClass but its not working. Here is a jsfiddle to show what happens when the sidebar is hidden.
http://jsfiddle.net/Monduiz/dzo5yg72/

Try this type of trick:
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
$('#mapDiv').removeClass('col-lg-6');
$('#mapDiv').addClass('col-lg-8');
});

FadeIn happens multiple times automatically

I my webpage I want background image to be changed each time when mouse hover happens on menu buttons. My code for it is like this
<div class="container-fluid ">
<div id="home-banner-1" class="active-banner">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-2" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg_rigging.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>Thethe world.</p>
</div>
</div>
<div id="home-banner-3" style="display:none">
<div class="main-banner-wrapper">
<img src="images/frontpage_bg-Hatches.jpg" class="upload">
</div>
<div class="col-md-4 col-sm-6 visible-lg visible-md visible-sm front-text">
<p>The around the world.</p>
</div>
</div>
</div>
<!--content-->
<div class="container-fluid">
<div class="main-logo-panel">
<div class="box">
<div class="col-md-12 col-sm-12 ">
<div class="col-md-3 col-sm-3 col-xs-4 main-logo"><img src="images/logo_frontpage.png" class="img-responsive"></div>
<div class="col-md-9 col-sm-9 col-xs-8 main-menu">
<ul class="list-inline home-menu-list">
<li>Rigging</li>
<li>Hatches </li>
<li>Stoppers</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".home-menu-list li a").hover(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').fadeOut();
$('.active-banner').removeClass('active-banner');
$(bannerClass).fadeIn();
$(bannerClass).addClass('active-banner');
});
});
</script>
everything looks okay, Except when the hover happens multiple back ground images fadeIn's not only the required one. Can any one point out what I am doing wrong here?

I think the problem is the animation queue, use .stop() to stop the execution of any previous animations in the queue
$(document).ready(function () {
$(".home-menu-list li a").mouseenter(function () {
var bannerClass = '#home-banner-' + $(this).attr('id');
$('.active-banner').not(bannerClass).stop().fadeOut().removeClass('active-banner');
$(bannerClass).stop().fadeIn().addClass('active-banner');
});
});
Also since you are not doing any operation on mouseleave, use mouseenter event directly instead of using hover

Develop Reference

JavaScript is the programming language of the Web.

ngIf is not working like other ngIf's - javascript

Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem

Related

Jquery search not working properly in accordion?

Vue js: Change value using if else

Angular how to Get values from ng-model and pass into params

Change column width on click in bootstrap 3

FadeIn happens multiple times automatically

Categories

Resources