Trying to develop a reactjs Isotope component. I've created the core component and been following the masonary link
http://developers.redhat.com/blog/2016/01/07/react-js-with-isotope-and-flux/
I'm getting the error "Unknown DOM property class. Did you mean className?"
//lastet jsfiddle
https://jsfiddle.net/7xzd92s5/54/
var Grid = React.createClass({
getInitialState: function(){
var $container = $('#Isotope2'),
$checkboxes = $('#filters input');
$container.isotope({
itemSelector: '.item'
});
// get Isotope instance
var isotope = $container.data('isotope');
// add even classes to every other visible item, in current order
function addEvenClasses() {
isotope.$filteredAtoms.each( function( i, elem ) {
$(elem)[ ( i % 2 ? 'addClass' : 'removeClass' ) ]('even')
});
}
$checkboxes.change(function(){
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
});
// ['.red', '.blue'] -> '.red, .blue'
filters = filters.join(', ');
$container.isotope({ filter: filters });
addEvenClasses();
});
$('#shuffle').click(function(){
$container.isotope('shuffle');
addEvenClasses();
});
return null;
},
render: function() {
return ( < div className = "grid" >
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item yellow"></div>
< /div>
);
}
});
ReactDOM.render( < Grid name = "Isotope2" / > , document.getElementById('Isotope2'));
JSX is not exactly the same as HTML. There are some key differences.
In this case, the error message is telling you what's wrong. You need to replace class, which is a reserved JS keyword, with className:
render: function() {
return (
<div className="grid">
<div className="item red"></div>
<div className="item blue"></div>
...etc
</div>
);
}
JSX is alittle bit different than the HTML.
There are few differences that is listed in the DOM differences in React.js.
DOM class attribute is replaced in React with classNamesince class is a JavaScript reserved word.
Since class and for are reserved words in JavaScript, the JSX elements for built-in DOM nodes should use the attribute names className and htmlFor respectively, (eg. ). Custom elements should use class and for directly (eg. ).
Related
I have problem with getting value of a div with class="idC". I need this value to remove object from my array. I know I probably gonna need to use parseInt but all I'm getting with this code is rowid: undefined when I use console.log("rowid: " + bikeId.value). bikeRow.remove(); works fine. It removes the row I want to.
const buttonDel = document.querySelectorAll(".deleteC");
buttonDel.forEach(button => {
console.log("jazda");
button.addEventListener('click', () => {
const bikeRow = button.parentNode;
const bikeId = bikeRow.firstChild;
if (!window.confirm())
return;
console.log("rowid: " + bikeId.value);
bikeRow.remove();
//bikeStorage.removeBike(bikeId.value);
})
})
<div class="bikeRows">
<div class="bikeRow">
<div class="idC"></div>${bike.id}</div>
<div class="frameC">${bike.frame}</div>
<div class="suspC">${bike.susp}</div>
<div class="wheelC">${bike.wheel}</div>
<div class="typeC">${bike.constructor.name}</div>
<div class="deleteC"><button class="delButton" id="${bike.id}">Delete</button></div>
</div>
</div>
You have invalid HTML and you really should delegate
I added the ID as a data-attribute to the row like this
<div class="bikeRow" data-id="${bike.id}">
Makes the code much simpler to debug and extend
document.querySelector(".bikeRows").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".delButton")) return; // not a delete button
if (!window.confirm("Sure?")) return; // they cancelled
const bikeRow = tgt.closest("div.bikeRow"),
id = bikeRow.dataset.id; // the ID to remove from the storage
bikeRow.remove();
//bikeStorage.removeBike(id);
})
<div class="bikeRows">
<div class="bikeRow" data-id="ID1">
<div class="idC">ID1</div>
<div class="frameC">Frame 1</div>
<div class="suspC">Susp 1</div>
<div class="wheelC">Wheel 1</div>
<div class="typeC">Constructor name 1</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID2">
<div class="idC">ID 2</div>
<div class="frameC">Frame 2</div>
<div class="suspC">Susp 2</div>
<div class="wheelC">Wheel 2</div>
<div class="typeC">Constructor name 2</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID3">
<div class="idC">ID 3</div>
<div class="frameC">Frame 3</div>
<div class="suspC">Susp 3</div>
<div class="wheelC">Wheel 3</div>
<div class="typeC">Constructor name 3</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
</div>
I just want to toggle a class from various items. I mean, I have 5 divs with .item class inside a div with .container class. Can I toggle a new class to those 5 .items? Maybe with a loop?
I was trying to do it but it seems that the loop goes infinite.
This is what I tried:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<button onclick="myFunction()"></button>
</div>
<script>
function myFunction () {
var x = document.getElementsByClassName("item");
for (i=0; i<x.length; i+1) {
x[i].classList.toggle('new-class');
}
}
</script>
I expect something like this at the end (maybe with some loop in JS):
<div class="container">
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
<div class="item new-class"></div>
</div>
You can do it by using the for loop and the classList.add() method.
function myFunction() {
var items = document.querySelectorAll('.item');
for(var i = 0; i < items.length; i++) {
items[i].classList.add('new-class');
}
}
I would like to sort a few divs in ascending order based on their data-id. How can I do that?
<div class="container" data-id="1000">
<div id="H1"></div>
<div id="sub">sub 1</div>
<div id="sub">sub 2</div>
</div>
<div class="container" data-id="3000">
<div id="H1"></div>
<div id="sub"></div>
<div id="sub"></div>
</div>
<div class="container" data-id="2000">
<div id="H1"></div>
<div id="sub"></div>
<div id="sub"></div>
</div>
I've found the solution to my problem a while ago:
function sortOut() {
// get the classname chapcontainer
var classname = document.getElementsByClassName('container');
// create a variable and put the classes it into an array.
var divs = [];
for (var i = 0; i < classname.length; ++i) {
divs.push(classname[i]);
}
// Sort the divs based on data-id.
divs.sort(function(a, b) {
return +a.getAttribute("data-id") - +b.getAttribute("data-id");
});
};
divs.sort does the trick. More info about this function can be found here:
https://www.w3schools.com/jsref/jsref_sort.asp
I'm trying to toggle a div's class in pure javascript (unfortunately I cannot use jQuery). I've got some code working but it doesn't work for multiple instances of the div and I'd appreciate some help for that.
I can't give each element it's own specific ID, so I'd need a way to target only the div with a class of 'truncate' that is the parent of the particular button that is clicked. Currently I have hidden the results by default and am just toggling the 'show' class
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div id="button">Show more</div>
</div>
collapse= document.getElementById('button');
collapse.onclick = function() {
collapse.parentElement.classList.toggle("show");
};
/* HIDE PLATES BY DEFAULT */
.truncate .result {
display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
display: block !important;
}
Thank you - help appreciated as always.
I think you need getElementsByClassName
(function() {
var collapse = document.getElementsByClassName('button');
for (var elIndex = 0; elIndex < collapse.length; elIndex++) {
collapse[elIndex].onclick = function() {
this.parentElement.classList.toggle("show");
};
}
})();
/* HIDE PLATES BY DEFAULT */
.truncate .result {
display: none;
}
/* SHOW RESULTS WHEN SHOW CLASS APPLIED */
.truncate.show .result {
display: block !important;
}
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<div class="button">Show more</div>
</div>
You should replace the id of Show more to class.
And use the following code.
collapse =document.getElementsByClassName('button');
for(let i = 0; i < collapse.length; i++){
let oneElement = collapse[i];
oneElement.addEventListener('click', function() {
oneElement.parentElement.classList.toggle("show");
})
}
Parse (loop over) all of your div.truncate elements and give themselves their own functionality via the Accordionize Function.
const Accordionize = el => {
const results = el.querySelectorAll('.result')
const toggleButton = el.querySelector('button')
let open = false
const _toggle = () => {
const action = open ? 'remove' : 'add'
results.forEach(item => item.classList[action]('show'))
open = !open
}
toggleButton.addEventListener('click', _toggle)
}
// get all div.truncate and apply them to their own instance of Accordionize
document.querySelectorAll('.truncate').forEach(Accordionize)
.truncate {
border: 2px solid red;
margin: 5
}
.result {
display: none;
}
.show {
display: block
}
<div class="truncate">
<div class="result">Result 1</div>
<div class="result">Result 2</div>
<button>Show more1</button>
</div>
<div class="truncate">
<div class="result">Result 3</div>
<div class="result">Result 4</div>
<button>Show more2</button>
</div>
<div class="truncate">
<div class="result">Result 5</div>
<div class="result">Result 6</div>
<button>Show more3</button>
</div>
<div class="truncate">
<div class="result">Result 7</div>
<div class="result">Result 8</div>
<button>Show more4</button>
</div>
online sample http://jsfiddle.net/QxdXW/
I am trying to add a close button to remove selected class however, cannot get the result I expected. I wanted the close button to remove selected and back to normal box size. also wanted to close the current red box once the next one triggered
HTML
<div class="item"><div class="close">X</div></div>
jQuery
var $close = $('.close');
$close.click(function(){
var $this = $(this);
$(this).parents('.item').removeClass('selected');
});
I don't know if this solution fits your needs but this is my fiddle
$(function(){
var $container = $('#container'), $items = $('.item');
var $close = $('.close');
$close.hide()
$(document).on('click', '.close', function(e) {
$(this).parent('div').toggleClass('selected')
$close.hide()
$container.isotope('reLayout')
});
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 60
},
getSortData : {
selected : function( $item ){
return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
}
},
sortBy : 'selected'
})
$items.click(function(){
var $this = $(this);
var cla=$this.attr('class')
if(cla==="item isotope-item"){
var what=$container.find('div.selected').attr('id')
$('#'+what).removeClass('selected')
$(this).addClass('selected')
$close.show()
$container
.isotope( 'updateSortData', $this )
.isotope()
}
});
});
html:
<div id="container">
<div class="item" id="a"><div class="close">X</div></div>
<div class="item" id="b"><div class="close">X</div></div>
<div class="item" id="c"><div class="close">X</div></div>
<div class="item" id="d"><div class="close">X</div></div>
<div class="item" id="e"><div class="close">X</div></div>
<div class="item" id="f"><div class="close">X</div></div>
<div class="item" id="g"><div class="close">X</div></div>
<div class="item" id="h"><div class="close">X</div></div>
<div class="item" id="i"><div class="close">X</div></div>
<div class="item" id="l"><div class="close">X</div></div>
<div class="item" id="m"><div class="close">X</div></div>
<div class="item" id="n"><div class="close">X</div></div>
<div class="item" id="o"><div class="close">X</div></div>
<div class="item" id="p"><div class="close">X</div></div>
<div class="item" id="q"><div class="close">X</div></div>
<div class="item" id="r"><div class="close">X</div></div>
</div>
I do not know this plugin so I don't know if your goal was to get this.
If I'm wrong I'm sorry for your loss of time