We Keep Coding

Javascript disabled button if checkboxes are not choosen - problem

I wrote a code, that make the button not disabled when you check at least one checkbox with class "sum".
I want to change the code, so I have to classes for and you can check only one checkbox (or two of them) to make the button not disabled.
This is what I have and it works with only one class:
var checkBoxes = $('.sum');
checkBoxes.change(function () {
$('#dashboardbuttonpay').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
$('.sum').change();
});
This is what I tried to do, but OR op does not work:
var checkBoxes = $('.sum' || **'.checkAll'**);
checkBoxes.change(function () {
$('#dashboardbuttonpay').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
$('.sum' || **'.checkAll'**).change();
});
The code works with && operator, but I do not need this.

Using the OR operation on strings this way does not make sense. If you do this with two non-empty strings, you always get the first operand:
console.log('a' || 'b')
In order to select multiple elements, you just separate them by comma:
var checkBoxes = $('.sum, .checkAll');
The code works with && operator, but I do not need this.
Not really. 'a' && 'b' always returns 'b'.

You could check for the amount of checked inputs then add/remove the disabled property in the change event handler.
var checkBoxes = $('.sum','.checkAll');
checkBoxes.change(function () {
if (checkBoxes.filter(':checked').length > 0) {
$('#dashboardbuttonpay').prop('disabled', null);
} else {
$('#dashboardbuttonpay').prop('disabled');
}
});
This way you capture if one or more checkboxes are checked before remove the disabled attribute of the button. Which lets you enable the button with either one or both checkboxes selected.

var checkBoxes = $('.sum','.checkAll');
checkBoxes.change(function () {
if(checkBoxes.filter(':checked').length > 1)
$('#dashboardbuttonpay').prop('disabled',true);
else
$('#dashboardbuttonpay').prop('disabled',false);
});

Triggering a function on multiple events

I've written some code to collapse 2 columns if the text on the left is longer than the image on the right:
var collapsed = null;
var banner = function() {
var txt = $('.banner .text').outerHeight();
var image = $('.banner .main-image').outerHeight();
if (txt > image) {
// Collapse columns
$('.banner').addClass('single-line');
// Set the breakpoint the column collapsed at
if (collapsed == null) {
collapsed = $(window).width();
}
}
// Restore the 2 columns when the browser hits the breakpoint
if ($(window).width() >= collapsed) {
$('.banner').removeClass('single-line')
}
}
My problem is getting this function to trigger at the right times. This works:
$(window).resize(banner);
But neither of these work...
$(window).onload(banner); // When the page first loads
$(window).on('orientationchange', banner); // When device is rotated
I could be completely on the wrong tracks here, so please feel free to point me in the right direction.
Thanks in advance!

Acording to the documentation of JQuery,there is no "onload" method for the jquery object, instead you should use "ready":
$(window).ready(banner);
About this line not getting fired, probably because you"re using the wrong synthax. The reference for "on" method :
.on( events [, selector ] [, data ], handler )
so you should try this :
$(window).on('orientationchange','window', banner)
Cheers

To run when the page first load, you can use:
$(document).ready(function() {
banner();
});
Regarding the orientationchange event, make sure you are using the jquery.mobile.js (https://api.jquerymobile.com/orientationchange/)

Javascript issue, dont know when it changes state

http://jsfiddle.net/fqwvy/12/
I want to "Color" the feilds inbetween "From" and "To", i managed to get it to color the picked feild, but i really dont know how to aproach this.
I also want to reset the css color, when something else is picked, is there an easy way to do this?
Any suggestions are welcome :)
fiddle_requires_some_code_to_post();

You need to loop through your <tds> between your "from" and "to" and set them. You have both the ids already, so it's pretty straightforward. You'll want to make sure your "to" index is set to your "from" index if nothing is selected.
Demo:
evT = end_time[to_color.value] ? end_time[to_color.value] : evF;
for( var index = evF - 1; index < evT; index++ ) {
$("#color"+(index+1)).css("background-color","red");
};
To clear all the colors you can do something like this, which says "all the <tds> with id starting with color":
$( 'td[id^="color"]' ).css( "background-color", "" );

Something along the lines of:
if(evF < evT){
for(i=evF + 1; i < evT; i++){
$("#color"+ i).css("background-color","red");
}
}
Then you will have an else if statement and do the reverse of when evT is greater than evF.
Also, I didn't see any code that cleared out the background color of red on subsequent selections. That would be good to add.

Can't get javascript/jquery to sort elements correctly more than one time

I have child divs that I'm trying to sort based on a jquery .data() value that I give them that is just a single number. This code works perfectly, but only once, after that I can't figure out how the heck it's sorting them. Here is a simplified version:
var myArray = $('#container div').get();
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
$('#container').empty().append(myArray);
I've tried so many other different methods of sorting, other plugins, etc., and I can't get anything to work right. This is as close as I can get. I just have this running on a jquery change event.
Here is the whole thing in case I'm doing something stupid elsewhere:
$('#attorneyFilter').change(function() {
//get array of links for sorting
var myArray = $('#attorneyBlocks div').get();
var selectedArea = $(this).val();
//sort alphabetically when "all" is selected
if (selectedArea == 'all') {
$('#attorneyBlocks div').show();
myArray.sort(function(a,b) {
return $(a).text() > $(b).text() ? 1 : -1;
});
//filter attorneys based on practice area and then assign its order# to the div with data, getting all values from the div's class
} else {
$('#attorneyBlocks div').hide().each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
//sort based on order, the lower the number the higher it shows up
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
}
//append order back in
$('#attorneyBlocks').empty().append(myArray);
});
And a link to the page in question

Here's a jsFiddle with this working using .detach() instead of .empty() to keep the data.
http://jsfiddle.net/shaneblake/Tn9u8/

Thanks for the link to the site, that made it clear.
It seems to me you never clear out the data from the prior time. You hide everything but maybe something like this will solve your problem (here I set everything hidden to the bottom, you can clear it or use a different value -- as long as it is not the same as any sort key):
$('#attorneyBlocks div').hide().data('order',999999).each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
Also, the code on the server is missing the 2nd line you have above:
var myArray = $('#attorneyBlocks div').get();
The problem is the change event is tied to the original items. After the sort you make all new items. They don't have any event tied to them. You will need to use .live()

Eventually figured it out, the data values from hidden divs were screwing with my sorting, so I changed my sorting code to only pay attention to :visible divs and that did the trick. Doh! Thanks for your help everyone.

How to tell if one Div is to the right or left of another div? Jquery Javascript

Say that you have this:
<div id="1"></div><div id="2"></div><div id="3"></div>
Can you use Javascript/jQuery to find that id="2" is to the right of id="1"?

if you're looking for the div that comes before #2, do something like this:
$("#2").prev("div")

I'm not an expert, but no, i don't think you can.
First off are you talking about in the code or how it comes out on the screen? 3 divs listed like will actually each show up on thier own lines. You need to use spans to keep them all on the same line.

Yes. How you check that depends on what you mean exactly by "to the right".
You can use the offset method to get the position of the two elements:
o1 = $('#1').offset();
o2 = $('#2').offset();
Now you can compare the left and top properties of the o1 and o2 objects.
If you by "to the right" mean that they are beside each other, and the second div is on the right side, you have to compare both properties:
if (o1.top == o2.top && o1.left < o2.left) ...
If you only mean that the second div should be more to the right than the first, then you only need to compare the left properties:
if (o1.left < o2.left) ...
Note that an id should not start with a digit. Using for example id="x1" and id="x2" would be valid.

I'd do something like:
function is_div2_after_div1() {
is_after = null;
$("#parent > div").each(function(i, el) {
if (is_after !== null) return;
if (el.id && el.id == "div1") is_after = true;
if (el.id && el.id == "div2") is_after = false;
}
return is_after;
}

You could get their positions, and if div#i1's position is lesser than the one of div#i2's position (their x positioning, if you will). http://api.jquery.com/position/
#Requires jQuery
var d1x = $('div#i1').position().left,
d2x = $('div#i2').position().left;
$('span').html((d1x < d2x) ? "yes" : "no");
I don't think IDs can be solely numeric. It might work, but it's not a good practice.
jsFiddle: http://jsfiddle.net/PKpdp/