Develop Reference

Show a number of additional divs on every click

I want to have a sequential list display, where initially all the lis except the first one are hidden, and when the user clicks a button, the lis appear by groups of 3. Eventually I would like to hide the button when the list gets to the end.
The code is something like this, but it shows only one per click, every third - but I want to show also the in-between elements until the third
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
i+=3;
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
});
Probably the .eq(i) is not the function I need, but couldn't find the correct one...

You can use :hidden with use of .each() loop:
jQuery("#allevents").on('click', function(e){
e.preventDefault();
jQuery(".event-holder:hidden").each(function(i){
if(i <= 2){
jQuery(this).fadeIn();
}
});
});

Working fiddle
If you have just three you could use :
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
var li = jQuery(".event-holder");
jQuery("#allevents").on('click', function(e){
e.preventDefault();
li.eq(i+1).fadeIn();
li.eq(i+2).fadeIn();
li.eq(i+3).fadeIn();
i+=3;
if ( i == numbofelem ) { jQuery(this).hide(); }
});
If you have several lis to show you could use a loop, e.g :
var step = 10; //Define it outside of the event
for(var j=0;j<step;j++){
li.eq(i+j).fadeIn();
}
i+=step;
Hope this helps.

You eq(i) needs to be looped.
jQuery(".event-holder:gt(0)").hide();
var i = 0;
var numbofelem = jQuery(".event-holder").length;
jQuery("#allevents").on('click', function(e){
e.preventDefault();
//i+=3;
//jQuery(".event-holder").eq(i).fadeIn();//You are showing only the third element. Loop this
//Something like this
for(var j=i;j<i+3;j++){
jQuery(".event-holder").eq(i).fadeIn();
if ( i == numbofelem ) { jQuery(this).hide(); }
}
i = j;
});

An alternative approach would be to buffer all the items, and keep adding them until empty:
var holders = $('.event-holder').hide();
$("#allevents").click( function(e){
e.preventDefault();
holders = holders.not(holders.slice(0, 3).fadeIn());
if(holders.length === 0) $(this).hide();
});
Fiddle

Disable onclick/mousedown on Div when being overlapped by another div

I have got a loop function that slides 2 divs over a 3rd. Working example can be found here: http://jsbin.com/OYebomEB/4/.
Main function:
var elements = ['#pointsbarDiv', '#hotlink1Div', '#pointsbarDiv', '#hotlink2Div'];
function hotlinks_loop(index) {
$(elements[index]).css({top: -75, display: 'block'}).animate({top: '+0'}, 3000, function () {
var $self = $(this);
var currentInstance = this;
setTimeout(function () {
$self.animate({top: $(window).height()}, 3000);
if(currentInstance.hotlinkStop !== true){
hotlinks_loop((index + 1) % elements.length);
}
}, 3000, currentInstance);
});
}
hotlinks_loop(0); // start with the first element
I have some code to disable onclick while hotlink divs are moving:
hotlink2BtnClick: function () {
if ($("#hotlink2Div").css("top") === "0px") {
//do stuff;
} else {
//do stuff;
}
},
However, for the stationary pointsbarDiv I cannot find a solution to disable onclick/mousedown while hotlink divs are sliding over it.
I have tried various 'If's like the the following example:
if (($("#hotlink1Div").css("top") < "76px" && $("#hotlink1Div").css("bottom") < "150px") || ($("#hotlink1Div").css("top") > "-75px" && $("#hotlink1Div").css("bottom") < "75px")))...
I am also wondering if there is way I can just disable onclick/mousedown while divs are moving within the main function provided.
I should mention that I am a newbie to javascript/jquery.

JQuery event functions get passed an event object - you can accept this in your function, and use it to stop propagation:
hotlink2BtnClick: function (ev) {
ev.stopPropagation();
http://api.jquery.com/event.stoppropagation/
Also, if you put your js examples on http://jsfiddle.net, then we can fork it and return it to you fixed.

I managed to do this by creating a an extra div giving it a z-index of -1 and setting visibility to hidden.
Then replacing the points div with this in array for the loop.
Followed by implementing a similar code solution hotlink2BtnClick().

Javascript - Hide other divs when one is clicked, but no double click

I used the answer to this question for a problem I originally had:
JavaScript - Hide all other divs
It works for what I need to do, but I want to make it so that when you click on original div you used to activate the slide, it doesn't hide that displaying slide. So you don't have a double click for the current active div.
<script>
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
</script>
You can check my project here, when you try to click on a character, it changes slides, but when you double click on them, it hides the slide you are looking at. I want to block the "hide" function, so if you are looking at a characters slide. You can't click their illustration again to switch it off. But if you click a different character, it will hide/switch the slides:
http://www.redvelvetevents.com/tracy/newtest_july2013.htm
Hopefully this is making sense. What do I need to add to the code above so the current div won't activate the HIDE function for that specific slide? Only when you click a different character.
Thanks!

You can change your code to this:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = true;//I changed this line
//close others
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = 'block';//I changed this line
}
}

Sort input box move UP/Down works only for first set of buttons

I have merged my last two demos and now there is a conflict.
Here is my 2 demos
Adding multiple input boxes DEMO
Sort Up/Down - DEMO
Merged demo
If you look at merged demo, the sort option is working only for first input box. Which mean you can move only first text box to up and down, other up/down button of respective text boxes are not working at all.
I need it to work as the sort Up/Down demo, all the button should work to move respective input boxes up or down.
Thanks in advance!!
Code
$(document).ready(function(){
$(":radio").click(function(){
$(".test").hide();
var show = $(this).attr("data-show");
$("#"+show).show(300)
});
$filtr = $('.filtr');
$filtr.on('click', '.add', function(){
$(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
});
$filtr.on('click', '.del', function(){
$(this).closest('.loop').remove();
});
$('#1lev, #2lev, #3lev').hide();
//For sort up/down
function moveUp(item) {
var prev = item.prev();
if (prev.length == 0)
return;
prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
prev.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertBefore(prev);
});
}
function moveDown(item) {
var next = item.next();
if (next.length == 0)
return;
next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
next.css('z-index', '').css('top', '').css('position', '');
item.css('z-index', '').css('top', '').css('position', '');
item.insertAfter(next);
});
}
$(".filtr").sortable({ items: ".loop", distance: 10 });
$('button').click(function() {
var btn = $(this);
var val = btn.val();
if (val == 'up')
moveUp(btn.parents('.loop'));
else
moveDown(btn.parents('.loop'));
});
});

Please have a look at http://jsfiddle.net/VMBtC/7/
I did changes in only one line
$(document).on("click", "button", function() {
Is this your requirement? Let me know your comments.

Instead of document selector choose the closest parent selector
$('.filtr').on('click','button' ,(function() {
In order to study the difference between the two you can see this
You may also read Direct and delegated events section of .on event

Why is my jQuery .click() callback not handling input properly?

I'm creating this cool HTML Jeopardy game and I need a little coding help.
Right now im working just on the first question. Which pops up in an FancyBox.
I'm using an if to Identify the correct answer but it is not working.
I have the code:
$(document).ready(function() {
var tag_100_input = $('#tag_100_ans').val();
$('#tag_100_button').click(function() {
if (tag_100_input == 'strong' || tag_100_input == 'b' || tag_100_input == '<strong>' || tag_100_input == '<b>') {
$('.tag_100_correct').fadeIn(500);
setTimeout("$.fancybox.close()", 3000);
score += 100;
$('#tag_100_not').css('display', 'none');
$('#tag_100').css('display', 'none');
}
else {
$('.tag_100_wrong').fadeIn(500);
setTimeout("$.fancybox.close()", 3500);
$('#tag_100_not').css('display', 'none');
$('#tag_100').css('display', 'none');
}
$('.score').html(score);
});
});
The jeopardy question is:
What tag can make text Bold?
Even when I enter one of the awnsers: b, strong, <b>, or <strong>
It shows me the wrong <span> instead of the correct one. Why is that?

$(document).ready(function() {
var tag_100_input = $('#tag_100_ans').val();
$('#tag_100_button').click(function() {
You're retrieving the input with .val() as soon as the document loads. You don't look at the input again later, so your code will only act on the default input values, not what you've actually entered.
You just need get the input value inside of your .click() callback instead, by swapping the second and third lines:
$(document).ready(function() {
$('#tag_100_button').click(function() {
var tag_100_input = $('#tag_100_ans').val();