We Keep Coding

jquery images active/inactive loading

Here is my code
$(function(){
var $list = $('.my-loading-list'),
$imgs = $list.find('img'),
animateImages = function(){
var active = 0;
setInterval(function(){
active = $list.find('img.active').index();
if(active > $imgs.length){
active = 0;
} else {
active++;
}
$imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png');
$imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png');
}, 300);
setInterval(function(){
$imgs.removeClass('active');
}, 600);
};
animateImages();
});
And here is the snippet:
https://jsfiddle.net/8d4xfjgt/
I need to animate the third image as well. one and two are changing their source but not the third one.
Please suggest.

Do you want to change the 3 images, one by one like this, or all at the same time?
The problem is this value isn't updating correctly active = $list.find('img.active').index(). It's taking values -1,0 alternatively
$(function(){
var $list = $('.my-loading-list'),
$imgs = $list.find('img'),
animateImages = function(){
var active = 0;
setInterval(function(){
if(active > $imgs.length){
active = 0;
} else {
active++;
}
$imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png');
$imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png');
}, 150);
setInterval(function(){
$imgs.removeClass('active');
}, 150);
};
animateImages();
});

Change background color with checkbox, limited number of checkboxes selectable

Desired: User can only click on 2 out of 3 displayed checkboxes; when the user clicks on a checkbox, the checkbox background turns orange.
Currently: The first checkbox selected acts as desired. The second checkbox ticks, but does not change background color. Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected). A 3rd checkbox is not selectable whilst two are already selected.
Requesting: Help to achieve the desired, thank you!
Fiddle: http://jsfiddle.net/0fkn1xs4/
Code:
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
$(this).closest("li").toggleClass("checked", this.checked);
});
A slightly cleaner implementation that does what you want. Check out the JSFiddle

Try this:
$('input.playerCheckbox').on('change', function (event) {
var selectableFriends = 2;
if ($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
} else {
$(this).closest("li").toggleClass("checked");
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
});
Check it out here: JSFIDDLE

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
this.checked = false;
}
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.

DEMO
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
$(this).closest("li").removeClass('checked');
}
});

This works in Fiddler for ya.
$('.playerCheckbox').change(function() {
if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
else{
if( this.checked == true ) {$(this).closest("li").addClass("checked");}
if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
}
});

How to make random selector only pick shown items?

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/

Javascript hide show div - Have div show by default

I have a script that I created to show a div on-click of an <a> tag. However, what I would like to know is if anyone has an easy solution to use this same script but allow a select div to show on default? My script:
var portletToHide = new Array(
'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_');
for(a=0;a<portletToHide.length; a++){
document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}
function display(id, id2){
for(a=0;a<portletToHide.length; a++){
document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}
document.getElementById(id).setAttribute('style', 'display:block; visibility:visible;')
if(id2){
document.getElementById(id2).setAttribute('style', 'display:block; visibility:visible;')
}
$target =$('#'+id);
$('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}

See if it's possible to render the HTML with class 'hidden'.
index.css
.hidden {
display: none;
/* no purpose combined with display none */
/* visibility: hidden; */
}
index.js
var portletsToHide = [
'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_'];
function setPortletsVisibility( visible ) {
for( var a=0; a < portletToHide.length; a++ ){
setElementVisibility( portletToHide[a], visible );
}
}
function setElementVisibilityById( elementID, visibility ) {
var className = visible
? ""
: "hidden";
document.getElementById( elementID ).className = className;
}
function display(id, id2){
setPortletsVisibility( true );
setElementVisibilityById( id, true );
if(id2){
setElementVisibilityById( id2, true );
}
}
function someFunction( id, id2 ) {
display( id, id2 );
$target = $( '#' + id );
$('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}
// Default
setPortletsVisibility( false );
Please note that I dont do jQuery addClass/removeClass which might cause disturbances.

This uses HTML 5 data- attributes to allow you to select which div to toggle. Below you can use either vanilla Javascript or jQuery.
HTML
toggle mydiv
<div id="mydiv">
mydiv
</div>
Javascript
function toggleDiv(evt) {
var link = evt.target;
var toggle = link.getAttribute('data-toggle');
var div = document.getElementById(toggle);
div.style.display = (div.style.display == 'none')
? 'block'
: 'none';
if(evt.preventDefault)
{ evt.preventDefault(); }
if(evt.returnValue)
{ evt.returnValue = false; }
return false;
}
var links = document.getElementsByTagName('a')
for(var i=0,l=links.length;i<l;i++) {
var toggle = links[i].getAttribute('data-toggle');
if(toggle !== null && toggle != '' && document.getElementById(toggle)) {
if(links[i].addEventListener)
{ links[i].addEventListener('click',toggleDiv,false); }
else if(links[i].attachEvent)
{ links[i].attachEvent('onclick',toggleDiv); }
else
{ links[i].onclick = toggleDiv; }
}
}
jQuery
$('a[data-toggle]').each(function(i,link){
var a = $(link);
var toggle = a.attr('data-toggle');
var div = $('#'+toggle);
if(div.length) {
a.click(function(){
div.toggle();
});
}
});

Change div class to Active once clicked or Deactive if clicked again

When I click my link the div changes to active and ajax is loaded.
But how can I then say if the link is clicked again that it should become deactive?
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
favourite.className = 'statusOptionActive';
}

favourite.onclick = function() {
loadXMLDoc('indexFavourite');
var linkclass = favourite.className;
if(linkclass == 'statusOptionDeactive')
favourite.className = 'statusOptionActive';
else
favourite.className = 'statusOptionDeactive';
}

Try this.
favourite.className = (favourite.className == 'statusOptionActive') ? 'statusOptionDeactive' : 'statusOptionActive';
The above checks if the current className is statusOptionActive. If yes, it changes the className to statusOptionDeactive. If no, it sets it as statusOptionActive.
Fiddle

You can have a global variable like:
var isDivActive = false;
Which is false by default.
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
if (isDivActive) {
favourite.className = 'statusOptionActive';
}
else {
favourite.className = '';
}
isDivActive = !isDivActive;
}