I have this code below that basically gets a number of elements and stops them at 6 items. I have then got a button that when clicked loads in remaining divs.
I just want it to load in 6 divs at a time. Does anyone know the way forward to do this at all?
Here is the javascript:
function click_load() {
var count = 0;
var item = $('.newsmainimages');
//var itemClick = $('Load More');
$(item).each(function() {
if (++count == 6) {
$(this).parent().append('<div class="nextClick">Load More</div>');
}
else if (count > 6) {
$(this).css('display','none');
}
});
$('.nextClick a').click(function() {
$(item).each(function(item) {
$(this).delay(200*item).fadeIn("slow");
});
alert(item);
return false;
});
}
Cheers
You can use slice for this kind of things
DEMO
$(function(){
var count = 6;
showListItems(0 , count);
$('button').click(function() {
showListItems(0, ($('ul li:visible').length) + count);
});
function showListItems(firstNumber, lastNumber)
{
$('ul li').slice(firstNumber, lastNumber).fadeIn("slow");
}
});
Related
How do I make the Up buttons to update the attribute value? When I increase the count fx to 5 and then decrease it with Down buttons to 2, and then increase it again, it does not increase from the current value of attr value wich is 2 but continues from 5. I just don't know how to update it after Down button has been clicked. DEMO
$(function() {
var plus = $('.up');
var minus = $('.down');
$(plus).each(function(index, element) {
var count= $(element).closest('tr').find('.times').attr('data-myval');
$(element).click(function() {
count++;
$(element).closest('tr').find('.times').attr('data-myval', count);
$(element).closest('tr').find('.times').text(count +' x');
});
});
$(minus).each(function(index, element) {
$(element).click(function() {
var count= $(element).closest('tr')
.find('.times').attr('data- myval');
count--;
parseInt($(element).closest('tr')
.find('.times').attr('data-myval',count))
$(element).closest('tr').find('.times').text(count +' x');
if (count<2) {
$(element).closest('tr').find('.times').text('');
}
if (count < 1) {
$(this).parents('tr').remove();
}
});
});
});
Please set the countinside the click event for the up button:
$(function() {
var plus = $('.up');
var minus = $('.down');
$(plus).each(function(index, element) {
$(element).click(function() {
var count= $(element).closest('tr').find('.times').attr('data-myval');
count++;
$(element).closest('tr').find('.times').attr('data-myval', count);
$(element).closest('tr').find('.times').text(count +' x');
});
});
$(minus).each(function(index, element) {
$(element).click(function() {
var count= $(element).closest('tr')
.find('.times').attr('data- myval');
count--;
parseInt($(element).closest('tr')
.find('.times').attr('data-myval',count))
$(element).closest('tr').find('.times').text(count +' x');
if (count<2) {
$(element).closest('tr').find('.times').text('');
}
if (count < 1) {
$(this).parents('tr').remove();
}
});
});
});
I hope that helps :D
I refactored your code to avoid putting click handlers inside of a loop. jQuery lets you listen to click events on a per class basis without expressly defining each one.
The contents of each function is largely unchanged, I just saved the elements we need to look up in variables to avoid looking them up repeatedly.
Your problem in the code posted was count being set outside of the click handler. That logic has been moved inside of the .up click handler.
Fiddle
Javascript
$(function() {
$('.up').on('click', function(){
var count = $(this).closest('tr').find('.times');
var curVal = Number(count.attr('data-myval'));
count.attr('data-myval', curVal + 1);
count.text(curVal + 1 + ' x');
})
$('.down').on('click', function(){
var count = $(this).closest('tr').find('.times');
var curVal = Number(count.attr('data-myval'));
curVal--;
count.attr('data-myval', curVal);
count.text(curVal + ' x');
if (curVal < 2) {
count.text('');
}
if (curVal < 1) {
$(this).parents('tr').remove();
}
})
});
I'm guessing you are setting the count outside of the onclick function
var count= $(element).closest('tr').find('.times').attr('data-myval');
So the count may hold the previous value that was set when the last up was pressed.
grab the value first in count variable then increment i update your jsfiddle, i hope its helpful for you
var count = $(element).closest('tr').find('.times').attr('data-myval');
count++;
https://jsfiddle.net/j9vnbcf0/13/
You just don't need to go through for .each function for each plus/minus btns, simply call .click function on them directly, it works that way-
JS-
$(function() {
var plus = $('.up');
var minus = $('.down');
$(plus).click(function() {
var count= $(this).closest('tr').find('.times').attr('data-myval');
count++;
// console.log(count);
$(this).closest('tr').find('.times').attr('data-myval', count);
$(this).closest('tr').find('.times').text(count +' x');
});
$(minus).click(function() {
var count= $(this).closest('tr').find('.times').attr('data-myval');
count--;
parseInt($(this).closest('tr').find('.times').attr('data-myval',count))
$(this).closest('tr').find('.times').text(count +' x');
if (count<2) {
$(this).closest('tr').find('.times').text('');
}
if (count < 1) {
$(this).parents('tr').remove();
}
});
});
Here goes the updated link-
https://jsfiddle.net/j9vnbcf0/14/
Right now when you click inside the div, the counter decreases by 1. How do I make it stop at 0?
Also when it reaches 0 how can I add a class?
I want the overlay to be enabled once the click counter reaches 0.
If there is a better way to disable the div box1 after the clicks reach 0. We can try it that way.
$( function() {
$('.box').click( function() {
var num = $(this).find('.num');
num.text( parseInt(num.text()) - 1 );
});
});
fiddle
Rather than searching DOM and parsing HTML on each click, I'd cache both element and its value:
var $box = $('#box1'),
$num = $box.find('.num'),
limit = $num.text();
$box.click(function() {
$num.text(--limit);
if (limit === 0) {
$('.overlay').show();
}
});
Demo.
This should do it:
$('.box').click( function() {
var num = $(this).find('.num');
val = parseInt(num.text()) - 1;
if (val > 0){
num.text(val - 1);
} else {
$(".overlay").show();
// add your class here.
}
num.text( val );
});
Updated Fiddle
Yeah not very familiar with JQuery and I'm trying to make a random lunch picker for our web team.
http://jsfiddle.net/vy8RL/1/
I want to hide certain items. For example when you hit the "Quick Eats" button it only displays 4 options and when you hit "EAT ME" it still selects the LI's that are hidden. Is there any way to allow it only to select options that are visible?
$(document).ready(function() {
$("#button").click(function(){
random();
});
$("#unhealthy-food").click(function(){
$(".unhealthy").hide();
});
$("#all").click(function(){
$("li").show();
});
$("#fast-food").click(function(){
$(".food").hide();
$(".fast").show();
});
});
function random() {
$("li.selected").removeClass("selected");
var menuItems = $("ul#list li");
var numItems = menuItems.length;
if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
previous = Number(window.sessionStorage.getItem("selected"));
} else {
previous = -1;
}
var selected = Math.floor(Math.random()*numItems);
while(selected === previous && numItems > 1) {
selected = Math.floor(Math.random()*numItems);
}
if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
$("ul#list li:nth-child("+(selected+1)+")").addClass("selected");
}
You can use the :visible selector:
function random() {
$("li.selected").removeClass("selected");
var menuItems = $("#list li").filter(':visible');
var numItems = menuItems.length;
// ...
menuItems.eq(selected).addClass("selected");
}
Please note that I have replaced the $("ul#list li:nth-child("+(selected+1)+")") with the cached collection + eq() method.
http://jsfiddle.net/3n9ex/
here you go. I just added tracking of menu preference. Also added $(".food").show(); in line 9 to correct a bug.
$(document).ready(function() {
var user_choice = ".food";
$("#button").click(function(){
random(user_choice);
});
$("#unhealthy-food").click(function(){
user_choice = "li:not(.unhealthy)";
$(".food").show();
$(".unhealthy").hide();
});
$("#all").click(function(){
$("li").show();
user_choice = ".food";
});
$("#fast-food").click(function(){
$(".food").hide();
$(".fast").show();
user_choice = ".fast";
});
});
function random(user_choice) {
$("li.selected").removeClass("selected");
var menuItems = $(user_choice);
console.log(menuItems);
var numItems = menuItems.length;
if(window.sessionStorage && window.sessionStorage.getItem("selected")) {
previous = Number(window.sessionStorage.getItem("selected"));
} else {
previous = -1;
}
var selected = Math.floor(Math.random()*numItems);
while(selected === previous && numItems > 1) {
selected = Math.floor(Math.random()*numItems);
}
if(window.sessionStorage) window.sessionStorage.setItem("selected", selected);
$(menuItems[selected]).addClass("selected");
}
http://jsfiddle.net/vy8RL/19/
Here's the FIDDLE.
List item that appears on clicking the up and down arrows.
When I click on it. It appears instantly which I don't want it to be like that.
I wanted to add a transition to it but I don't have any clue whether to apply it on a li or a tag.
Besides I'm here hiding and revealing li items on click. But I need the transition like when I click on the up arrow, I want the hidden element to push the active element downwards and vice versa.
Someone help me in this.
I updated your FIDDLE
you may check it out.
var
cur = 2,
$container = $('.dropdown-container'),
$ul = $('.dropdown'),
$ul_length = $('.dropdown li').children().length,
$up = $('.up'),
$down = $('.down'),
changeLi = function (cur) {
var $cur_li = $('.dropdown li:nth-child(' + cur + ')');
$('.current_selected').removeClass('current_selected');
$cur_li.addClass('current_selected');
$container
.height($cur_li.outerHeight())
.width($cur_li.outerWidth());
$up.offset({
left: ($container.outerWidth() - $up.outerWidth()) / 2
});
$down.offset({
left: ($container.outerWidth() - $down.outerWidth()) / 2
});
$ul.animate({
top: -$cur_li.position().top
}, 200);
};
$up.on('click', function () {
cur--;
if (cur < 1) {
cur = 1;
return false;
}
changeLi(cur);
});
$down.on('click', function () {
cur++;
if (cur > $ul_length) {
cur = $ul_length;
return false;
}
changeLi(cur);
});
changeLi(cur);
You can add animatation like slideUp, slideDown etc.
var cur = 2;
$('.up').click(function() {
if(cur <= 0) return;
var last = cur;
cur --;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});
$('.down').click(function() {
if(cur >= $('.dropdown li').length - 1) return;
var last = cur;
cur ++;
$('.dropdown li').eq(last).hide(500).addClass('hide');
$('.dropdown li').eq(cur).show(100).removeClass('hide');
});
I've got a set of elements and I don't want to show them all at once.
My problem is that I've got to use this a series of times in the same page.
Do you guys know jQuery plugin that does what I've written?
jQuery(function($) {
$lis = $('.addfilter');
min = 2;
max = $lis.length;
var visible = min;
function showUpToIndex(index) {
$lis.hide();
$lis.slice(0, index).show();
}
function disableButtons(){
if (visible >= max){
visible = max;
$('#more').hide();
}
else
{
$('#more').show();
}
if (visible <= min){
visible = min;
$('#less').hide();
}
else
{
$('#less').show();
}
}
showUpToIndex(visible);
disableButtons();
$('#more').click(function(e) {
e.preventDefault();
visible = visible + 5;
disableButtons();
showUpToIndex(visible);
});
$('#less').click(function(e) {
e.preventDefault();
visible = visible - 5;
disableButtons();
showUpToIndex(visible);
});
});
Here is a working example:
http://jsfiddle.net/cUUfS/179/
Thanks!
Please try these,
http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/
https://github.com/mfarid/readmore-readless
This may help I hope