We Keep Coding

How to change style on other element using Javascript with nodelist

Need help with using js script.
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
How to make js script that will allow user click on list element then all divs from producers-list will get display:none without this one which was clicked at list.
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
var index = 0,
length = producersList.length;
for (; index < length; index++) {
producersLists[index].style.display = "none";
}
});
}
This allow me to hide all elements from producers-container but i don't know how to show only one element clicked before at list.

First of all you should use classes instead of id in the second list in order to have the ability to add more procedures in the future
try this:
<ul class="producers-links">
<li id="section_All" class="active-producer">A-Z</li>
<li id="section_0-9">0-9</li>
<li id="section_A">A</li>
<li id="section_B">B</li>
<li id="section_C">C</li>
</ul>
<div class="producers-list">
<div class="producers-container section_0-9 section_All">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container section_A section_All">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container section_B section_All">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container section_C section_All">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
var producersList = document.querySelectorAll('ul.producers-links > li');
var producersLists = document.querySelectorAll('.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
for (var index = 0; index < producersLists.length ; index++) {
var currElement = producersLists[index];
var hide = !currElement.classList.contains(this.id);
producersLists[index].style.display = hide? "none" : "block";
}
});
}

On click, you can sequentially:
- hide all
- select the one having the same end of id than the textContent of the clicked item (or select all if text is A-Z)
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
// add eventlistener...
producersList.forEach(x => {
x.addEventListener("click", x => {
hideAll();
document.querySelector('.active-producer').classList.remove('active-producer');
x.target.classList.add('active-producer');
const txt = x.target.textContent;
selectForText(txt);
});
});
// hide/show all...
function hideAll(bShow) {
const cl = bShow === true?"block":"none";
producersLists.forEach(x => x.style.display = cl);
}
// select for text...
function selectForText(txt) {
if(txt === "A-Z") {
// select all...
hideAll(true);
return;
}
// the [...nodelist] part allows to 'cast' to proper array, and to have access to find() function...
const found = [...producersLists].find(q => q.id.split("producers-")[1] === txt);
if(found) {
found.style.display = "block";
}
else {
// ???
}
}
.active-producer {
color: #19f;
}
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>

Unable to disable `<li>` elements by setting `disable` property to `true`

I'm trying to make the rest of my chat room app disabled while a modal is open. I've been using element.disable = true to disable the buttons and this has worked. I have a ul where each li is the name of a chat room that is clickable and opens up its respective chat room in another container. I'm trying to disable the lis using the same disable.true method. I'm using a for loop to iterate through the array of lis, but it isn't working.
I used console.log to view the variable with the array stored in it (var lis) as well as the console.log(lis.length). The console shows that the array has a length of 5 but returns lis.length as 0.
Would be much appreciated if someone could tell me what I'm doing incorrectly.
HTML:
<div class"home-template" id="home">
<div class="rooms-container">
<h1 class="app-title">Bloc Chat</h1>
<ul id="rooms-list">
<li class="room-item" id="room-item" ng-repeat="chat in home.chatRooms">
{{ chat.$value }}
</li>
</ul>
<button class="btn btn-warning" id="new-room-button" type="button" ng-click="home.open()">New room</button>
<button class="btn btn-warning" id="delete-cookies-button" type="button" ng-click="home.deleteCookies()">Delete Cookie for testing</button>
</div>
<div class="messages-container">
<h1 class="current-room" ng-bind="home.activeRoom"></h1>
<ul class="messages-list">
<li class="message-bubble" ng-repeat="message in home.messages">
<div class="username">{{ message.username }}</div>
<div class="sentAt">{{ message.sentAt }}</div>
<div class="content">{{ message.content }}</div>
</li>
</ul>
</div>
</div>
JavaScript in a home controller:
home.cookieDisplay = $cookies.get('blocChatCurrentUser');
var modals = document.getElementsByClassName('modal');
var lis = document.getElementsByClassName('room-item');
var newButton = document.getElementById('new-room-button');
var delButton = document.getElementById('delete-cookies-button');
if (modals.length === 0) {
newButton.disabled = false;
delButton.disabled = false;
for (var i = 0; i < lis.length; i++) {
lis[i].disabled.false;
}
} else if (modals.length !== 0) {
newButton.disabled = true;
delButton.disabled = true;
for (var i = 0; i < lis.length; i++) {
// lis[i].setAttribute('display', 'none');
lis[i].disabled.true;
}
}
Here's what my console looks like:

You can't disable the li itself.
You can either disable the anchor tag (a) in it for example like this (refernece):
document.getElementById("tab_c").childNodes[0].onclick = function() {return false;};​
Or you can set pointer-events:noneas it has been done using CSS (reference):
.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; //This grays it out to look disabled
}

get multiple element li with javascript

What I need to get all value of multiple li from the HTML code.
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
This how i get with javascript:
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights item-highlights')[0].innerHTML;
and i get the answer:
<li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li>

Heres an easy to understand answer.
var items = document.querySelectorAll( ".item-highlights li");
var values = [];
for( var n = 0; n < items.length; n++)
values.push( items[n].innerHTML);
If you know css then its simple to change the call to "querySelectorAll" as it is only comparing things through the same way css does, So you can change it however you like.

Expanding on #Tushar comment:
var test = '';
[].forEach.call( document.querySelectorAll('#block-system-main .item-highlights'), function(item) { return test += item.innerText; })
Check demo - Fiddle.

You should be able to select every li using querySelectorAll and then map those values. It would look like this:
var listItems = Array.prototype.slice.call(document.querySelectorAll('li'));
var vals = listItems.map(function (item) {
return item.innerHTML;
});
Example:
http://jsbin.com/zumewidoyo/edit?html,js,console

If you want to select every li element you can do something like this:
Live Preview
HTML
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
JavaScript
//store the list elements
var lists = document.getElementsByTagName('li');
//array to hold the li elements
var liElements = [];
//loop through the lists
for (var i = 0; i < lists.length; i++) {
//add the li element values to the array
liElements.push(lists[i].innerHTML);
}
//show the results
alert(liElements.join("\n"));

The function getElementsByClassName return an array. Just iterate over it instead of using the "[0]" to get only the first element.
function getValue() {
var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights');
var array = [];
for (var i = 0; i < test.length; i++) {
var liList = test[i].getElementsByTagName('li');
for (var j = 0; j < liList.length; j++)
array.push(liList[j].innerHTML);
}
return array;
}
alert(getValue());
<div id="block-system-main">
<div class="row">
<div style="margin-left:11px">
<strong>Detail Product</strong>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>4G LTE</li>
<li>Dual Sim</li>
<li>RAM 1GB</li>
</ul>
</div>
<div class="col-sm-12">
<ul class="item-highlights">
<li>ROM 8GB</li>
<li>Screen 5.5</li>
<li>Warranty 1 Year</li>
</ul>
</div>
</div>
</div>

Binding links within an ember helper

I'm new to ember.js and ember-cli, all has been going well until I just tried to create my first custom helper.
I'm trying to loop through a model, displaying some image thumbnails on multiple rows within the page.
Everything seems to be working fine but I would like to try and bind the links.
Here's my custom helper:
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function(value, options) {
var out = '';
var b = 0;
for (var i=0; i<value.length; i++) {
b++;
if(b === 1){
out += '<div class="row">';
}
out += '<div class="col-md-4 col-sm-6 col-xs-12 center" style="text-align:center;">\
<div class="row center">\
<div class="col-md-12 center">\
<a href="photo/'+value[i]._data.id+'">\
<img class="center" src="'+value[i]._data.thumb_url+'" />\
</a>\
</div>\
</div>\
<div class="row center">\
<div class="col-md-6">'+value[i]._data.status+'</div>\
<div class="col-md-6"></div>\
</div>\
</div>';
if(b === 3){
out += '</div><div class="row"><div class="col-md-12"> </div></div>';
b=0;
}
}
return new Handlebars.SafeString(out);
});
I know that you can't use link-to directly inside a helper so I've been playing around with different options, with no luck.
The most success I had was trying to run link-to manually using something along the lines of:
Ember.Handlebars.helpers.linkTo.call('photo/1', 'photo.index', options);
But this hasn't been working out for me either.
Any tips? I fear I'm probably going about this in completely the wrong way
Edit
An example of the output I'm trying to achieve with a helper
<div class="row">
<div>
<a link><img></a>
</div>
<div>
<a link><img></a>
</div>
<div>
<a link><img></a>
</div>
</div>
<div class="row">
<div>
<a link><img></a>
</div>
<div>
<a link><img></a>
</div>
<div>
<a link><img></a>
</div>
</div>

You should probably create an Ember Component instead of creating a Handlebars helper. With an Ember Component you can use {{#linkTo}} and all the bindings work.
Use the Ember component to create a virtual property rows, where you set the items
of each row; then you can iterate over the rows and items with regular {{#each}} inside of the component template.
The component code would look like this:
App.SampleComponentComponent = Ember.Component.extend({
rows : function() {
var myRows = [];
var elements = this.get('model');
var b = -1;
for(var i = 0; i<elements.length; i++) {
if(i % 2 === 0) {
b++;
myRows[b] = [];
}
myRows[b][i%2] = elements[i];
}
return myRows;
}.property('model'),
});
The component template would look like:
<ul>
{{#each row in rows}}
<li>
<ol>
{{#each item in row}}
<li>{{item}}</li>
{{/each}}
</ol>
</li>
{{/each}}
</ul>
You will have to pass the array of items to the component in the model paramater.
Working example in: http://emberjs.jsbin.com/cowin/3/
The tutorial in http://emberjs.com/guides/components/ should help.

JQuery Sort Divs by child divs

I have the following list of divs and I'd like to be able to sort them using Javascript / JQuery.
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
I'd like to be able to sort the items by their Genre/Name/Location alphabetically.
Example: If Sort by Genre was clicked, it would sort the items in 0-9 A-Z by Genre.
If any of you have any tips it would greatly be appreciated.
Cheers :)

You have to make a little change to html like following:
<div id="container">
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
jQuery
function sorting(tag) {
var items = $('div.item').sort(function(a, b) {
var txt1 = $.trim($('div.' + tag, a).text()),
txt2 = $.trim($('div.' + tag, b).text());
if (txt1 > txt2) return 1;
else return -1;
});
return items;
}
$('.buttons a').on('click', function(e) {
e.preventDefault();
$('div#container').html(sorting(this.id));
});
Working Sample

Ok, this would be my pure JS solution.
First, we should wrap your <div>s into a larger container.
<div id = "wrapper">
<div id = "item">...</div>
<div id = "item">...</div>
<div id = "item">...</div>
</div>
Now, let's define a constant - which property do you want to sort it by? (this will probably be a function parameter later in your code).
var propName = "genre";
Let's get all the <div>s and put them in an array.
var items = document.getElementsByClassName("item");
var itemsArray = new Array();
Let us sort them lexicographically according to the text of the selected property.
for (var i = 0; i < items.length; i++)
itemsArray.push(items[i]);
itemsArray.sort(function(a, b) {
var aProp = a.getElementsByClassName(propName)[0].firstChild.nodeValue;
var bProp = b.getElementsByClassName(propName)[0] .firstChild.nodeValue;
if (aProp < bProp)
return -1;
else if (aProp > bProp)
return 1;
else
return 0;
});
Let us construct a document fragment consisting of the sorted <div>s.
var fragment = document.createDocumentFragment();
for (var i = 0; i < itemsArray.length; i++)
fragment.appendChild(itemsArray[i].clone());
Finally, let us clear the contents of the <div id = "wrapper"> and replace it with the document fragment.
document.getElementById('wrapper').innerHTML = '';
document.getElementById('wrapper').appendChild(fragment);
Also, note that document.getElementsByClassName does not work in IE<9, but I was now really lazy to cope with that issue.
A fiddle: http://jsfiddle.net/nNXr4/

Check this beast:
function sortByCreatedOnAsc(a,b){
return $(a).find('.created_on').text() > $(b).find('.created_on').text();
}
function sortByCreatedOnDesc(a,b){
return $(a).find('.created_on').text() < $(b).find('.created_on').text();
}
function reorderEl(el){
var container = $('#tasks');
container.html('');
el.each(function(){
$(this).appendTo(container);
});
}
$('#created_on').click(function(){
if($(this).hasClass("asc")){
reorderEl($('.task').sort(sortByCreatedOnDesc));
$(this).removeClass("asc");
$(this).addClass("desc");
} else {
reorderEl($('.task').sort(sortByCreatedOnAsc));
$(this).removeClass("desc");
$(this).addClass("asc");
}
return false;
});
jsfiddle: http://jsfiddle.net/jKJc3/116/