Develop Reference

Jquery - If each() .filter working on console but not in code in realtime

Context:
I have a gallery of images. The user can select each image, when they click it, the "selected" attribute is added to the individual element and a new class is added to their chosen image.
The thing is, I want to limit this to only 2 selections being available.
I want to edit my script to only run up until the length is 2 or less. If the length reaches 2, no more Selected attributes to be added and no more class changes to be toggled.
I feel like I'm close. Right now my users can select/deselect but they can just do it too many times. Where am I going wrong?
function NFTSelector() {
$("#NFTGallery2 > img").each(function() {
$(this).on("click", function() {
if($(this).filter("[selected]").length>=2) {
alert('true');
} else
console.log("less than 2 or undefined so letting them choose more");
{
$(this).toggleClass('chosenNFT');
if ($(this).attr('selected')) {
$(this).removeAttr('selected');
} else {
$(this).attr('selected', 'selected');
}
}
})
});
}

I changed my approach, I instead set it up as checkboxes and limited the checkboxes this way
function NFTSelector() {
var limit = 3;
$('#NFTGallery2 > li > input').on('change', function(evt) {
if($('#NFTGallery2 > li > input:checked').length >= limit) {
this.checked = false;
}
});
}

Change element css when div has specific class

I have problem with my code. What I want to do is change css of elemnt when I'm on first div. So, when I'm on first div my element have for example font-size: 24px; when I scroll down my element should have font-size: 40; I'm using wordpress and Vase theme. My site - http:///www.ciranga.pl
When I'm on main slide (with red background) I want to make my arrows on right to be white. When I scroll down I want it to be red. How Can I do that? Any help would be great.
jQuery(document).ready(function($) {
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) {
$('.vase_whiteC').css('font-size', '40px');
} else {
$('.vase_whiteC').css('font-size', '24px');
}
$('html').keydown(function(e) {
var Key = e.keyCode;
if ([37, 38, 39, 40].indexOf(Key) > -1) {
// up!
if (Key == 38) {
$(".umicon-vase_arrowPrev").parent().trigger("click");
}
// down!
if (Key == 40) {
$(".umicon-vase_arrowNext").parent().trigger("click");
}
return false;
}
});
});

After working with the original poster, we have arrived at this solution:
$(window).on('wheel', function() { setButtonState(); });
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); });
function setButtonState() {
setTimeout(function() {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
if(!sbw) {
arw.css('color', 'red');
} else {
arw.css('color', 'white');
}
}, 600);
}

You can use other methods like $(document).scroll(function(){
Below code is not your answer but you can try something like that
var
$w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
// add css here
}
}
targetOffset would be 38,40.

Jquery UI selectable table cell outline

Ok so I'm using Jquery UI Selectable to highlight some cells in a table. I would like to be able to add a border around the highlighted cells using like a 2px border. This way each time you highlight a section you can tell the separation between each section that has been highlighted. I am also hoping I can achieve this result with overlapping sections.
I've done quite a bit of reading and haven't really seen anyone trying to do this yet. So I'm wondering if someone might be able to point me in the right direction on how to achieve this effect.
Here's a fiddle of my example and some code below.
var shadeColor = $(".color-pallet > .active").css("background-color");
applySelectable = function() {
$(".block-tools > .shade-btn").click(function() {
var $this = $(this);
if (!$this.hasClass("active")) {
$this.siblings().removeClass("active");
$this.addClass("active");
}
});
$(".color-pallet > span").click(function() {
var $this = $(this);
if (!$this.hasClass("active")) {
$this.siblings().removeClass("active");
$this.addClass("active");
shadeColor = $(this).css("background-color");
}
});
// keep selected shade color selected after new question
if (shadeColor !== $(".color-pallet > .active")) {
$(".color-pallet > span").filter(function(){
var color = $(this).css("background-color");
if (color === shadeColor) {
$(this).click();
};
});
}
$(".blocks").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
filter: "td",
selecting: function (event, ui) {
if ($('.block-shade').hasClass("active")) {
$(ui.selecting).addClass('marked').css("background-color", shadeColor);
} else {
$(ui.selecting).removeClass('marked').css("background-color", "");
}
userAns = $('.marked').length+"";
}
});
};
applySelectable();
Thank you in advance for you time.
EDIT: For bonus points, can someone tell me when im dragging a selection, why is the containers height growing and creating a scroll bar? This has been seriously bugging me for some time and I chose to ignore it but I guess while I'm here maybe someone could explain this as well?

Huh... here is some kind of solution, i've added 4 css classes, and some ugly code... but it is working...
$(".blocks").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable({
filter: "td",
selecting: function (event, ui) {
if ($('.block-shade').hasClass("active")) {
$(ui.selecting).addClass('marked').css("background-color", shadeColor);
$(ui.selecting).addClass('top');
$(ui.selecting).addClass('left');
$(ui.selecting).addClass('bottom');
$(ui.selecting).addClass('right');
if($(ui.selecting).prev().hasClass('marked')) {
$(ui.selecting).removeClass('left');
$(ui.selecting).prev().removeClass('right');
}
if($(ui.selecting).next().hasClass('marked')) {
$(ui.selecting).removeClass('right');
$(ui.selecting).next().removeClass('left');
}
top_elem=$(ui.selecting).parent().prev('tr').find('td');
// console.log(top_elem);
$(top_elem).each(function(i) {
if($(this).hasClass('marked')) {
if($(this).offset().left==$(ui.selecting).offset().left)
{
$(this).removeClass('bottom');
$(ui.selecting).removeClass('top');
}
}
});
bottom_elem=$(ui.selecting).parent().next('tr').find('td');
$(bottom_elem).each(function(i) {
if($(this).hasClass('marked')) {
if($(this).offset().left==$(ui.selecting).offset().left)
{
$(this).removeClass('top');
$(ui.selecting).removeClass('bottom');
}
}
});
} else {
$(ui.selecting).removeClass('marked').css("background-color", "");
$(ui.selecting).removeClass('top');
$(ui.selecting).removeClass('left');
$(ui.selecting).removeClass('bottom');
$(ui.selecting).removeClass('right');
}
userAns = $('.marked').length+"";
}
});
};
applySelectable();
});
DEMO: http://jsfiddle.net/wh2ehzo3/10/
However, overlapping is really, really tricky IF YOU WANT to KEEP borders on overlapping parts.. test... (just OUTER border of both shapes is saved, i hope you will see what i mean)
Idea: check siblings -> remove classes accordingly, if there is .marked element, check up and down rows -> do the same...

Use the same keypress to show a div and hide another, repeatedly, using Javascript

Lets call the 2 divs in question div1 and div2.
What I'm trying to do is use the enter key to show div1 and hide div2 (if div2 is currently visible) and vice-versa. Right now I have the code so that pressing enter will show div1 and hide div2, but to go back to having div2 shown and div1 hidden you have to use the shift key. The way it is now works, but I would like it so I only have to press enter each time I want the divs to alternate.
Here is the javascript code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var keys = [];
var code = [13];
var keys1=[];
var code1 = [16];
$(document).keydown(function(keyEvent) {
keys.push(keyEvent.keyCode);
keys1.push(keyEvent.keyCode);
if ( keys.length > code.length ) {
keys.shift();
}
if ( keys1.length > code1.length ) {
keys1.shift();
}
if ( keys.toString() == code.toString() ) {
showAns();
}
if ( keys1.toString() == code1.toString() ) {
hideAns();
}
});
});
</script>
Any idea how to accomplish what I'm asking?

Try this sample of what you want to achieve:
var toShow = true;
$(document).keydown(function(keyEvent) {
if(keyEvent.keyCode == 13){
$('#div1').toggle(toShow);
$('#div2').toggle(!toShow);
toShow = !toShow;
}
});

I'll give you a nudge in the right direction, but won't supply you the answer outright.
You need to find a way to check the property of your elements visibility ( How do I check if an element is hidden in jQuery? This might help you!), and add that to your conidtion like so:
if(KeyIsPressed && element.IsVisible)
{
HideElement
}
else if(KeyisPressed)
{
ShowElement
}

Without getting too fancy, you can use a 'state' variable to hold that information, and then synchronize that to the DOM:
var state = {
"div1": true,
"div2": false,
};
synchronizeState();
$(document).on("keydown", function(event) {
if(event.which === 13) {
state.div1 = !state.div1;
state.div2 = !state.div2;
synchronizeState();
}
});
function synchronizeState() {
if(state.div1) {
$("#div1").show();
} else {
$("#div1").hide();
}
if(state.div2) {
$("#div2").show();
} else {
$("#div2").hide();
}
}
Working example: http://jsbin.com/eJiPavO/1/

Add Hover CSS to table cells processed in javascript

I'm currently using the below code to colour the cells based on their value:
cell.each(function() {
var cell_value = $(this).html();
if (cell_value == 0){
$(this).css({'background' : '#DF0101'});
} else if ((cell_value >= 1) && (cell_value <=10)) {
$(this).css({'background' : '#FF7C00'});
} else if (cell_value >= 8) {
$(this).css({'background' : '#04B404'});
}
});
I've also added the CSS to the stylesheet:
td:hover{
background-color:#CA2161;}
So how can I make it so that on hover the cells processed in the javascript will change colour? At the minute they won't change at all, they just stay as the colour processed above^^^

Just try to bind an hover function to the "tds" of your table like this
$('td').hover(function(){
$(this).css('background-color', '#CA2161');
});
and if you want to remove the colour on mouse out you can try this
$( "td" ).hover(
function() {
$(this).css('background-color', '#CA2161');
}, function() {
$(this).css('background-color', '');
}
);

EDIT: Turns out you want the colors to leave instead of show when you hover. Simple change.
Okay first of all, you should separate these out into CSS classes:
.ZeroValue {
background:'#DF0101';
}
.ValueBetween1And10 {
background:'#FF7C00';
}
.ValueOver8 {
background:'#04B404';
}
.ValueTransparent {
background:transparent !important;
}
Add the above classes on $(document).ready() based on their values:
if(cell_value === 0){
cell.addCLass('ZeroValue');
} else if((cell_value >= 1) && (cell_value <= 10)){
cell.addClass('ValueBetween1And10');
} else if(cell_value >= 8){
cell.addClass('ValueOver8');
}
Then just dynamically add the transparent class when you hover, removing it when you leave:
cell.on({
mouseenter:function(){
$(this).addClass('ValueTransparent');
},
mouseleave:function(){
$(this).removeClass('ValueTransparent');
}
});
Or if there was a unique color to each item and you wanted to temporarily remove that, you would just create a function:
function classByValue(cell,cell_value){
if(cell_value === 0){
cell.addCLass('ZeroValue');
} else if((cell_value >= 1) && (cell_value <= 10)){
cell.addClass('ValueBetween1And10');
} else if(cell_value >= 8){
cell.addClass('ValueOver8');
}
}
This will clear any of the classes when the mouse enters, and then re-add the class based on cell_value when mouse enters. Then dynamically apply on load and when mouseleave. The $(document).ready():
cell.each(function(){
classByValue(this,this.val());
});
And the hover:
cell.on({
mouseenter:function(){
$(this).removeClass('ZeroValue ValueBetween1And10 ValueOver8');
},
mouseleave:function(){
classByValue($(this),$(this).val());
}
});
There you have it, multiple ways to accomplish your goal. You might need to modify $(this).val() to appropriately reflect the value of that specific cell, but without your HTML I can't really determine that.
As a side, that last option with >= 8 should probably be reconsidered, because a value of 8 or 9 will never fire it.