We Keep Coding

What is the best way to show 3 items per click from jquery data

This is my markup:
jQuery(document).ready(function( $ ) {
var $container = $('#homegrid').masonry({
isAnimated: true,
itemSelector: '.home-blocks',
columnWidth: '.grid-sizer',
percentPosition: true,
transitionDuration: '0',
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
jQuery('#more').click(function(){
jQuery.get('/pages/ajax', function( data ) {
// Make jQuery object from HTML string
var $moreBlocks = jQuery( data );
// Append new blocks
$container.append( $moreBlocks );
// Have Masonry position new blocks
$container.masonry( 'appended', $moreBlocks );
});
});
});
<div class="homegrid-wrap">
<div id="homegrid" class="home-grid">
<div class="grid-sizer"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
<div class="home-blocks"></div>
</div>
<button id="more">Load More</button>
</div>
What I would like to do is to count all the object that was from another html page and show 3 objects at a time per click then hide the load more button once all the objects are shown. Been working on this for days. I'm using Masonry for my grid.
Disclaimer: I dont know much about javascript.

$('#more').click(function(){debugger;
var expanded = $('.block-collapsed').slice(0,3);
expanded.show();
expanded.removeClass('block-collapsed');
if($('.block-collapsed').length == 0) {
$(this).hide();
}
});
.home-blocks {
width:100%;
background-color:yellow;
border-bottom: 1px solid black;
}
.block-collapsed {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="homegrid-wrap">
<div id="homegrid" class="home-grid">
<div class="grid-sizer"></div>
<div class="home-blocks block-collapsed">1</div>
<div class="home-blocks block-collapsed">2</div>
<div class="home-blocks block-collapsed">3</div>
<div class="home-blocks block-collapsed">4</div>
<div class="home-blocks block-collapsed">5</div>
<div class="home-blocks block-collapsed">6</div>
<div class="home-blocks block-collapsed">7</div>
</div>
<button id="more">Load More</button>
</div>

ReactJs Isotope

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. ).

sortable new order error get value tkEmail

I need to sort items that are within div with the same id and class. I have problems to return the value of tkEmail tag. I can not get the value.
example:
item 1
Order: 0 Value: 1
HTML:
<div id="sortable">
<div class='sortear' tkEmail='1'>Item 1</div>
<div class='sortear' tkEmail='2'>Item 2</div>
</div>
<br>
<div id="sortable">
<div class='sortear' tkEmail='3'>Item 3</div>
<div class='sortear' tkEmail='4'>Item 4</div>
</div>
JS:
$(document).ready(function () {
$('div#sortable').sortable({
update: function () { novaOrdem() },
});
});
function novaOrdem(){
$('div#sortable').each(function (i) {
alert($(this).attr('tkEmail'))
});
}

Ids have to be unique and you're not actually checking the child divs in the call to each. $('div#sortable').children() will get you what you want. Also, tkEmail is not valid and it would be better practice to use a data attribute e.g. data-tk-email:
HTML:
<div id="sortable">
<div class='sortear' data-tk-email='1'>Item 1</div>
<div class='sortear' data-tk-email='2'>Item 2</div>
<div class='sortear' data-tk-email='3'>Item 3</div>
<div class='sortear' data-tk-email='4'>Item 4</div>
</div>
JQuery:
$(document).ready(function() {
$('div#sortable').sortable({
update: function() {
novaOrdem()
},
});
});
function novaOrdem() {
var items = $('div#sortable').children();
$.each(items, function() {
alert($(this).html() + ', Order: ' + $(this).index() + ', Value: ' + $(this).data('tkEmail'))
});
}
Fiddle Demo

Meteor Spacebar

I'm having problem accessing the index returned by Collection.find(). In HTML, I'm creating a carousel and I want to make the images dynamic. Before making it dynamic, here's what it looks like:
<div class="carousel-inner">
<div class="item active">
<img src="img/homepage/sliders/1.jpg">
</div>
<div class="item">
<img src="img/homepage/sliders/2.jpg">
</div>
</div>
After implementation, here's the new code:
<div class="carousel-inner">
{{#each sliders}}
<div class="item active">
<img src="{{this.url}}">
</div>
{{/each}}
</div>
Here's what my JS looks like:
Template.homepageSlider.helpers({
sliders: function() {
return HomepageSliders.find({}, {fields: {url:1}}).fetch();
}
});
This sort of works fine, but I wanted to add the class 'active' only on first index. How should I do this?
Thanks a lot!

Something like this should work.
JS:
Template.homepageSlider.helpers({
sliders: function() {
return _.map(HomepageSliders.find({}, {fields: {url:1}}).fetch(),
function(val, index) {
return {value: val,
class: (index == 0 ? "item active" : "item")}
});
}
});
HTML:
<div class="carousel-inner">
{{#each sliders}}
<div class="{{this.class}}">
<img src="{{this.value.url}}">
</div>
{{/each}}
</div>

drag and drop working funny when using variable draggables and droppables

i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina

Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})