jQuery UI Slider change class for each value - javascript

I have a jQuery UI Slider that has a range between 1-100. I want to change the class of a div for each value between 1-100.
I know there is a more efficient JavaScript method to switch classes and go through the values. Is there a better method other than the else if statement?
Any tips to make this more efficient appreciated.
$( '#slider-container' ).slider({
min: 1,
max: 100,
slide: function( event, ui ) {
if ((ui.value == 2)) {
$( ".number_100" ).toggleClass( 'number_102' );
} else if ((ui.value == 3)) {
$( ".number_100" ).toggleClass( 'number_103' );
}
}
});
or (but not sure how to find/remove last class added?)
<div class="position_100 number_101"></div>
$( '.position_100' ).removeClass().addClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);

It seems a bit long winded, but after checking the other answered it appeared that the toggleClass wasn't sufficient; solely because for every slide we're potentially adding a class, thus resulting in multiple "number classes" on the item, i.e. the class attribute value was: number_101 number_102 number_103. Instead, I'm assuming you're aftering simply the most recent ui.value change?
If that's the case it can be achieved using the data method within jQuery, and by simply remember what the most recent class was that was added, like so:
slide: function(event, ui) {
if (div.data('lastClass')) {
div.removeClass(div.data('lastClass'));
}
var newClass = ui.value < 10 ? 'number_10' + ui.value : 'number_1' + ui.value;
div.data('lastClass', newClass).addClass(newClass);
}
I know it may seem a bit longer winded, but it does mean that we only have a single "number class" after sliding.
jsFiddle

Try this:
slide: function( event, ui ) {
if (ui.value < 10) {
$( ".number_100" ).toggleClass( 'number_10'+ui.value );
} else {
$( ".number_100" ).toggleClass( 'number_1'+ui.value );
}
}
or:
slide: function( event, ui ) {
$(".number_100").toggleClass((ui.value<10) ? 'number_10'+ui.value : 'number_1'+ui.value);
}

Wouldn't:
slide: function( event, ui ) {
$( ".number_100" ).toggleClass( 'number_10'+ui.value );
}
be more efficient? This assumes that your class names correspond to the slider values so that a value of 10 equals a class name of 'number_1010'.
Quick jsFiddle example using three classes.

Related

Hiding a div based on variation price

I'm trying to show or hide a div based on variation price of selected items.
For example, we have a product whose base (cheapest) option price is £359.
The same product also has a £455 option.
We also have a finance plugin whose minimum spend cap is £400, and the finance calculator (user front end) exists within a spoiler below our add to cart button called '.finance'.
I'd like to be able to hide this spoiler (namely it's containing div '.finance') dynamically, in response to the selected variation price, so that finance options are not visible to customers when the spend is below the aforementioned finance cap.
I've tried the following to no avail - as you can see, I'm not too handy with js:
jQuery( function( $ ) {
$( ".in_stock" ).on( "woocommerce_variation_select_change", function() {
setTimeout( function() {
if ( $( 'span.amount' >= '400' ).length ) {
$( 'div.finance' ).show( 'fast' );
} else {
$( 'div.finance' ).hide( 'fast' );
}
}, 50 );
});
});
How can I achieve that?
Make use of the snippet below on change of the amount;
jQuery( function( $ ) {
// Run on selected variation price change.
let currency_symbol = '£';
for ( let i = 0; i < $( 'p.price' ).length; i++ ) {
// Define the subtotal block.
let sub_total = $( 'p.price:contains(Subtotal ' + currency_symbol + ')' );
// Define the condition for the finance block.
let amount = Number( sub_total.text().split( ' ' + currency_symbol )[1] ) >= 400;
// Show or hide the finance block based on the condition above.
amount ? $( 'div.finance' ).show( 'fast' ) : $( 'div.finance' ).hide( 'fast' );
}
});
I'd probably lose the setTimeout because 50 milliseconds isn't go to make a lot of difference.
Assuming that span.amount is one element you want to grab its text content, coerce it to a number, and then check if it's within range.
$('.in_stock').on('woocommerce_variation_select_change', function() {
const value = Number($('span.amount').text());
if (value >= 400) {
$('div.finance').show('fast');
} else {
$('div.finance').hide('fast');
}
});

Javascript & jquery manipulation

I am stuck at what I think is a really simple thing, basically I have the following code for a slider.
$( ".slider" ).slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 255,
step: 1,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#slider-result" ).html( ui.value );
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#112').attr('value', ui.value);
}
});
All works fine and dandy, the thing I want to be able to do is make the value 0 again, resetting the slider. I have a little bit setup that does it in the physical form element, but I want the visual slider to show nothing as well.
If this is jQuery UI slider, then look at this:
http://api.jqueryui.com/slider/#option-value
// Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
You can specifically set the value of the slider
// This would reset the slider
$( ".slider" ).slider( "value", 0);

How to select the multiple rows in jQuery datatable using the mouse drag option

I am using the jQuery DataTables plug-in in my application. I need to select the multiple rows in a jQuery datatable using the mouse drag option. How is it possible?
Use jQuery-UI selectable and code similar to the following:
$( "#yourTable" ).selectable(
{
distance: 10,
stop: function()
{
$( this ).find( "tr" ).each(
function () {
if ( $( this ).hasClass( 'ui-selected' ) )
$( this ).addClass( 'row-selected' );
else
$( this ).removeClass( 'row-selected' );
});
}
});
I use 'distance: 10' because I found that otherwise my mousedown handler for the table wouldn't get events - this may not be important for you.

jQuery Drag and Drop not working

I am trying to develop a simple drag and drop 'game'. In simple terms all you do is drag and drop various items into a area and it will say correct or wrong depending on the item dragged. This is what I have so far and its not working at all and I dont know why. My knowledge of JS and jQuery leaves a lot to be desired too.
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#wrong" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var currentId = $(this).attr('id');
if (currentId == "draggable") {
$( this )
.addClass( "highlight" )
.find( "p" )
.html( "Correct! :)" );
} else {
$( this )
.find( "p" )
.html( "Wrong! :(" );
}
}
});
});
</script>
Now that I have it working I need more instances of the draggable images but when I add more the the new ones that have been added don't work.
http://jsfiddle.net/KcruJ/9/
var currentId = $(this).attr('id');
if (currentId == "draggable")
...
Will never result true, as $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable[1]
Try:
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable")
...
This works: http://jsfiddle.net/T6nu3/2/
$(this).attr('id');
Will always return droppable.
You need to access the dragged element:
$(ui.draggable).attr('id');
Take a look at the jQuery UI Documentation for more information.
Code:
$(function() {
$("#draggable").draggable();
$("#wrong").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
var currentId = $(ui.draggable).attr('id');
if (currentId == "draggable") {
$(this).addClass("highlight").find("p").html("Correct! :)");
} else {
$(this).find("p").html("Wrong! :(");
}
}
});
});
haha well, Alex seems to have this one on lock.
There's the answer: http://jsfiddle.net/aGqHh/1/

Setting z-index when using jQuery UI Draggable not working in Firefox 4

I have 2 draggable DIVs that that i want stacked depending on where in the parent DIV they are located. I tried to set z-index, while this works in IE 9, I cannot get it to work in Firefox 4.
Using Firebug I see that the dragged elements has z-index set to auto.
Full demo of what I want to accomplish at http://jsfiddle.net/a5jgm/6/
Thank you for your time
$( ".draggable" ).draggable({
// zIndex: 5,
start: function(event, ui) {
// console.log(this);
var zIndex = $(this).draggable( "option", "zIndex" );
$('#zindex').val(zIndex);
// $( this ).draggable( "option", "zIndex", 100 );
},
drag: function( event, ui ) {
var pos = $( "#"+this.id).position();
$( "#offset" ).val( ""+pos.left +" "+pos.top );
},
stop: function(event, ui){
console.log(this);
if(ui.offset.left > 220){
var currentz = parseInt( $('#zindex').val() )+1;
$( this ).draggable( "option", "zIndex", currentz);
$('#zindex').val(currentz);
console.log(' z index is: '+$(this).draggable( "option", "zIndex" ));
}
}
});
var i = 10;
$( ".draggable").each(function(){
i = i +1;
$( this ).draggable( "option", "zIndex", i );
});
Try setting the position attribute as well. Set it to relative, absolute etc whichever is appropriate as per your implementation. That might probably solve the issue.

Categories

Resources