Develop Reference

JQuery - How to pass active class between desktop and mobile menu?

I have a tab menu which shows/hides blog-posts based by category. On the mobile version of my application, I have a select dropdown instead of the tab-menu. My issue is, that when I hit a tab, let's say "nature", this tab gets the "active" class - now when I switch to the mobile version, the "nature" tab is of course not "active" - how can I solve this?
Here is my JS-code:
The tab menu:
var $btns = $(".tab").on("click", function(e) {
let clickedTab = $(e.currentTarget).attr("data-tab-id");
if (clickedTab == "all") {
$(".blog-posts > div").fadeIn(450);
} else {
var $el = $("." + clickedTab).fadeIn(450);
$(".blog-posts > div")
.not($el)
.hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
And the Select dropdown:
$(".blog-tab-select").change(function() {
var selectedCategory = $(this).val();
if (selectedCategory == "all") {
$(".blog-posts > div").fadeIn(450);
} else {
$(".blog-posts .card").removeClass("active");
var $el = $("." + selectedCategory).fadeIn(450);
$(".blog-posts > div")
.not($el)
.hide();
}
});
UPDATE
Here is what my HTMl looks like:
<div class="blog-tabs d-none d-md-block">
<ul>
<li data-tab-id="all" class="tab all active">All</li>
#foreach ($blog_categories as $category)
<li data-tab-id="{{ strtolower($category->name) }}" class="tab {{ strtolower($category->name) }}">{{ $category->name }}</li>
#endforeach
</ul>
</div>
<div class="mobile-select d-md-none">
<select class="custom-select blog-tab-select w-50 float-right" id="blogTabSelect" name="blogTabSelect">
<option value="all">All</option>
#foreach ($blog_categories as $category)
<option data-tab-id="{{ strtolower($category->name) }}" value="{{ strtolower($category->name) }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
Do I need some kind of "state" or "eventHandler"? Please help

Without seeing any HTML, the simplest (yet not the best ofc) would be to not duplicate your logic, but instead to trigger the <select>'s 'change' event - on tabs click:
const $sel = $('#blogTabSelect');
const $tab = $('[data-tab]');
const $cat = $('[data-cat]');
// Select does all the job
$sel.on("change", function(e) {
const val = this.value;
const $tabTarget = $(`[data-tab="${val}"]`);
const $catTarget = $(`[data-cat="${val}"]`);
$tab.not($tabTarget).removeClass('active');
$cat.not($catTarget).removeClass('active');
if(val === 'all') {
$cat.addClass('active');
} else {
$catTarget.addClass('active');
}
$tabTarget.addClass('active');
});
// LI just triggers SELECT's value and change event
$tab.on('click', function() {
$sel.val($(this).data('tab')).trigger('change');
});
[data-tab] {
background: transparent;
}
[data-tab].active {
background: #0bf;
}
[data-cat] {
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
[data-cat].active {
visibility: visible;
opacity: 1;
}
<div class="blog-tabs d-none d-md-block">
<ul>
<li data-tab="all" class="active">All</li>
<li data-tab="cat">cat</li>
<li data-tab="dog">dog</li>
</ul>
</div>
<div class="mobile-select d-md-none">
<select id="blogTabSelect" class="custom-select blog-tab-select w-50 float-right">
<option value="all" selected>All</option>
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
</div>
<div class="blog-posts">
<div data-cat="cat" class="active">cat 1...</div>
<div data-cat="dog" class="active">dog...</div>
<div data-cat="cat" class="active">cat 2...</div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

Cannot get the Selected Value from Materialize dropdown with React JS

I have this Materialize DropDown
<ul id="dropdown1" className="dropdown-content">
<li>
<a href="#!">
one
</a>
</li>
<li>
two
</li>
<li className="divider" tabIndex="-1"></li>
<li>
three
</li>
<li>
<a href="#!">
<i className="material-icons">view_module</i>four
</a>
</li>
<li>
<a href="#!">
<i className="material-icons">cloud</i>five
</a>
</li>
</ul>
and I have declared it as follows :-
componentDidMount() {
let dropdowns = document.querySelectorAll('.dropdown-trigger');
let options = {
inDuration: 300,
outDuration: 300,
hover: true, // Activate on hover
coverTrigger: false, // Displays dropdown below the button
};
M.Dropdown.init(dropdowns, options);
var instance = M.Dropdown.getInstance(dropdowns);
}
which displays fine, however I cannot manage to get the selected value.
I tried the following JQuery:-
$(document).ready(function(){
$('dropdown1').formSelect();
});
but I am getting a type error :-
TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).formSelect is not a function
Any help will be very much appreciated!
Thanks

I think one should use <Select> in case of a form to select from a list of options. So, you can initialize the Materialize components in componentDidMount() lifecycle method.
I attached onChange event listener on <Select> so that we can track the value and save it in our state. I also gave the defaultValue property so that a person knows in form what he has to choose, for example, Choose a country.
CodeSandbox - Working Demo (Select in React)
Select Component
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Select extends Component {
constructor() {
super();
this.state = {
selectVal: null
};
}
componentDidMount() {
M.FormSelect.init(this.FormSelect);
}
handleChange = event => {
this.setState({
[event.target.name]: event.target.value
});
};
render() {
console.log(this.state.selectVal);
return (
<div className="input-field col s12">
<select
ref={FormSelect => {
this.FormSelect = FormSelect;
}}
name="selectVal"
onChange={this.handleChange}
defaultValue="0"
>
<option value="0" disabled>
Choose your option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
);
}
}
export default Select;

Angular filter with ng-repeat not yet populated

I have filter options such as dropdown which act as filters for displayed content.
Said content is called from a DB, and take a few ms to get displayed. during those few ms, I have lot of error linked to the filtering system. does someone knows how to keep them quiet?
HTML markup
<div class="user-content py-4 px-5">
<ul class="nav justify-content-center pb-3" id="filters">
<li class="nav-item dropdown">
<select class="form-control" id="continent" ng-model="filter_continent">
<option value="">continent</option>
<option ng-repeat="con in continents" value="{{con}}">{{con}}</option>
</select>
</li>
<li class="nav-item dropdown">
<select class="form-control" id="category" ng-model="filter_cat">
<option value="">catégorie</option>
<option value="experience">Experience</option>
<option value="explore">Explore</option>
<option value="globe">Globe</option>
<option value="sleep">Sleep</option>
<option value="taste">Taste</option>
</select>
</li>
</ul>
<div ng-show="tipson" class="tips-widget text-center mb-5"
ng-repeat="item in userTips | filter:{category:filter_cat,continent:filter_continent}"
id="{{item._id}}"
style="background-image: url('{{item.cover}}');"
data-id="{{item._id}}"
ng-mouseenter="placeHover(item._id, item.lat)"
ng-click="show_tips(item._id)">
<div class="background"></div>
<p class="location"><span>{{item.country}}</span>, {{item.city}}</p>
<h3>{{item.name}}</h3>
</div>
</div>
and the errors I get. As soon as the ng-repeat source array is populated, errors stop.
Error: [filter:notarray] http://errors.angularjs.org/1.4.9/filter/notarray?p0=%7B%7D
EDIT
here is the instance code
//USER TIPS
$scope.userTips = {};
$scope.user_tips = function(id){
Tips.getByAuthorId(id)
.success(function(data) {
$scope.userTips = data;
});
}

Before you fetch the data from db, please check what userTips is initialized to. If it is not initialized, initialize it to an empty array.

Make first value in dropdown bold in angular js

I have a dropdown where I need to make first value in the dropdown to be bold.Dropdown code is as follows.
<div class="col-xs-3">
<select-box id="ad-version-select" options="curItem.stats.version" model="state.version" initial="All" change="watchvalue()" ng-disabled="state.partialDisable"></select-box>
</div>
<select class="form-control" ng-model="model" ng-change="change()">
<option ng-if="initial.length" ng-bind="initial" value=""></option>
<option ng-repeat="option in options" value="{{getValue()}}" ng-selected="model==getValue()" ng-bind="getTitleVariable()"></option>
</select>
I tried like
<style>
div.col-xs-3>div:first-child {
font-weight: bold;
}
</style>
but didn't worked. I am not getting any idea how to make only the first value bold. I can't use jquery. Can someone help me with this?

There need to be an alteration done in your css selector. You should select the first child of the option to make it bold.
option:first-child
{
font-weight: bold;
}
Here is the sample Fiddle
Hope this helps.
-Help :)

You can use ng-options with ng-class:
<select ng-model="Blah">
<option ng-repeat="person in persons" ng-class="{red: person.id == 1}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>
</select>
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.persons = [
{id: 1, Name:'John',Eligible:true},
{id: 2,Name:'Mark',Eligible:true},
{id: 3,Name:'Sam',Eligible:false},
{id: 4, Name:'Edward',Eligible:false},
{id: 5, Name:'Michael',Eligible:true}
];
$scope.Blah = 'Sam';
}
]);
Here is the Plunker

#Help's solution should work.
But not all browsers support styles in <select><option>. Maybe you need to build the component by yourself, something like this:
<div class="select">
<div class="selected" ng-bind="current.title"></div>
<div class="options">
<div class="option" ng-repeat="option in options" value="{{option.value}}" ng-bind="option.title" ng-click="current=option"></div>
</div>
</div>
.option:first-child {font-weight: bold;}
You'll need to add some more scripts and styles to make it work like a natural <select>.

Highlight Corresponding Names With Javascript

I have a list of names to display in a browser:
Alan, Ben, Cindy, Dan, Ellen, Fred.
I'd like the user to be able to select male or female.
Then I'd like the name(s) of people who are that gender to change colors, or become highlighted.
Is there a way to do this with JavaScript?

If i understand you correctly, you can do following:
// step 1 create list of names with classes
<ul>
<li class="person male">Alan</li>
<li class="person male">Ben</li>
<li class="person female">Cindy</li>
</ul>
// step 2 create dropdown list of genders
<select id="my-dropdown-id" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
// step 3 simple jQuery script
<script type="text/javascript">
$('#my-dropdown-id').change(function() {
$('.person').removeClass('selected');
$('.' + this.value).addClass('selected');
});
</script>
<style>
.selected{
background: yellow;
}
</style>
This is a very simple solution, though i believe it implements your idea at least theoretically.