Develop Reference

jquery single slide handle

I have a HTML page with an ordinary jquery slider from jquery 1.12.1
But the slider has 2 handles and I can't manage to find the line of code that generates two handles. I've deleted the "values [x,y]" part in the script on my html, but it still gives two handles.
I think this is the JavaScript that generates it, but I'm not familiar with JS, so
_createHandles: function() {
var i, handleCount,
options = this.options,
existingHandles = this.element.find( ".ui-slider-handle" ),
handle = "<span tabindex='0'></span>",
handles = [];
handleCount = ( options.values && options.values.length ) || 1;
if ( existingHandles.length > handleCount ) {
existingHandles.slice( handleCount ).remove();
existingHandles = existingHandles.slice( 0, handleCount );
}
for ( i = existingHandles.length; i < handleCount; i++ ) {
handles.push( handle );
}
this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );
this._addClass( this.handles, "ui-slider-handle", "ui-state-default" );
this.handle = this.handles.eq( 0 );
this.handles.each( function( i ) {
$( this )
.data( "ui-slider-handle-index", i )
.attr( "tabIndex", 0 );
} );
I think this is the piece that does something, but I can't understand it's variables; where they come from.
for ( i = existingHandles.length; i < handleCount; i++ ) {
handles.push( handle );
}
If somebody knows how to delete this piece of code whilst making the handle appear afterwards (I tried to delete different lines, but that didn't work), Thank you very much in advance!

That is a for loop that I believe creates a handle as long as i is less than the variable handleCount. You will need to change the variable handleCount so that the for loop only executes once, thus creating one handle.
something like:
handleCount = 1;

You just need to remove the range: true option.
When this is removed, you are left with a slider with only 1 handle.
range: If set to true, the slider will detect if you have two handles
and create a styleable range element between these two.
http://api.jqueryui.com/slider/#option-range
Also, if you only want one handle, you should probably just use the value property, instead of values.
http://api.jqueryui.com/slider/#option-value
$(function(){
//creates 2 handles
$( ".example-a" ).slider({
range: true,
values: [0]
});
//creates 1 handle slider
$( ".example-b" ).slider({
values: [0]
});
//also creates 1 handle slider
$( ".example-c" ).slider({
value: 0
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<h2>Example A - 2 handles<h2>
<div class="example-a"></div>
<h2>Example B - 1 handle (values)<h2>
<div class="example-b"></div>
<h2>Example C - 1 handle (value)<h2>
<div class="example-c"></div>

Okay, so that's fixed, but one thing remains and that is that JS now searches for the other handle to create a colour in the spacing between the two.
if ( !this.range || !this.range.length ) {
this.range = $( "<div>" )
.appendTo( this.element );
this._addClass( this.range, "ui-slider-range" );
} else {
this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" );
// Handle range switching from true to min/max
this.range.css( {
"left": "",
"bottom": ""
} );
}
if ( options.range === "min" || options.range === "max" ) {
this._addClass( this.range, "ui-slider-range-" + options.range );
}
} else {
if ( this.range ) {
this.range.remove();
}
this.range = null;
}
},
Maybe this is something I have to rewrite. I don't know.
// Handle range switching from true to min/max
this.range.css( {
"left": "",
"bottom": ""

swipebox.js - swiping or navigating slides in reverse order not possible?

When loading slides dynamically (http://brutaldesign.github.io/swipebox/), it does not seem possible to swipe right to load the last slide and cycle through the slides in reverse order. Currently I can only swipe left to view each slide in the specified order.
Here is my current code:
jQuery( '.images' ).click( function( e ) {
e.preventDefault();
jQuery.swipebox( [
{ href:'image1.jpg' },
{ href:'image2.jpg' },
{ href:'image3.jpg' },
{ href:'image4.jpg' },
{ href:'image5.jpg' },
{ href:'image6.jpg' }
] );
} );
This loads image1.jpg and moves through each slide in order. It is not able to move from image1.jpg to image6.jpg in reverse.
Any possible workarounds or solutions known for this issue?

You need to change a few the source code. In the function getPrev you can implement the same logic as in the function getNext, with a new option, let's call it enableReverse. You will set it to true as a regular option when calling the plug-in (don't forget to add a default value to the defaults object).
You will end up with something like:
getPrev : function () {
var index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ), src;
if ( index > 0 ) {
// normal implementation
} else {
if ( plugin.settings.enableReverse === true ) {
// get inspired by getNext function and use the correct indexes
} else {
// normal implementation
}
}
}
You will also have to change the condition at the end of setSlide function so that the 'prev' button is not disabled:
if ( index === 0 )
becomes:
if ( index === 0 && plugin.settings.enableReverse !== true )
hope this will help !

JavaScript on input event

I have a form with CSS animations, when form field is selected labels animate out and when text is filled labels shouldn't animate back. And this works for input fields but not with textarea. Can't seem to find the problem, and I've been playing with it for some time now.
This is my JS code:
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll('input.input_field', 'input-textarea.input_field-textarea') ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
EDIT: This was the problem, code was going like this:
document.querySelectorAll('textarea.input_field-textarea', 'input.input_field'))
Instead of removing those 2 extra '':
document.querySelectorAll('textarea.input_field-textarea, input.input_field'))
Thanks to all for help!

Change the input-textarea.input_field-textarea selector to textarea.input_field-textarea. There's no such <input-textarea/> element:
[].slice.call(document.querySelectorAll('input.input_field', 'textarea.input_field-textarea')).forEach(function(inputEl) {
// ...
});

jQuery confliction with the menu

I'm working a site which is having a jQuery conflicting error. I tried few practices from the internet but I always failed. Please take a look at the script and teach me how I can solve this error.
/**
* navigation.js
*
* Handles toggling the navigation menu for small screens.
*/
( function() {
var container = document.getElementById( 'site-navigation' ),
button = container.getElementsByTagName( 'h1' )[0],
menu = container.getElementsByTagName( 'ul' )[0];
if ( undefined == button || undefined == menu )
return false;
button.onclick = function() {
if ( -1 == menu.className.indexOf( 'nav-menu' ) )
menu.className = 'nav-menu';
if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
}
};
// Hide menu toggle button if menu is empty.
if ( ! menu.childNodes.length )
button.style.display = 'none';
} )();
Thanks :)

You need to add "jQuery" on the end:
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
Taken from: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Try this.
$j = jQuery.noConflict();
Now use $j wherever jQuery is needed to be used.
e.g. use jQuery code j$(...) wherever jQuery is needed.

If query fails with AND but works with OR

I search a JSON tree with jQuery on keyup-event. If the input is equal to the desired entry the input will disabled.
Now I need to call a function if they all are filled and correct. The if queries are long so i have written them into variables.
I've tried this, but it fails:
if (simple_present && simple_past && past_participle) {
alert('All right!');
}
Now, when I write something like this, it works:
if (simple_present || simple_past || past_participle) {
alert('All right!');
}
Here's a fiddle of what I have so far.
Any ideas?
BTW: What is the best way to combine long if queries with reg expressions​?

Consider this:
var json = {
"vocables": {
"irregular": {
"sein": {
"simple_present": "be",
"simple_past": "was were",
"past_participle": "been"
},
"schlagen": {
"simple_present": "beat",
"simple_past": "beat",
"past_participle": "beaten"
},
"werden": {
"simple_present": "become",
"simple_past": "became",
"past_participle": "become"
}
}
}
};
var word = $( 'h1' ).text();
$( 'input' ).on( 'keyup', function () {
if ( this.value === json.vocables.irregular[ word ][ this.id ] ) {
$( this ).prop( 'disabled', true ).next( 'input' ).focus();
}
if ( $( 'input:not(:disabled)' ).length === 0 ) {
alert( 'SUCCESS' );
}
});
Live demo: http://jsfiddle.net/NnAMu/1/
As you can see, I have:
changed the JSON structure to suit my needs better,
cached the current word into a variable.
With those changes, the resulting "keyup" handler code is much simpler.

You run all of the following code in the same event handler for each element:
$this.attr('id') == 'simple_present'
$this.attr('id') == 'simple_past'
$this.attr('id') == 'past_participle'
They can't be all true, so && is guaranteed to give you false.

Add a debug line just before the if:
alert( simple_present.toString() + '\n' + simple_past.toString() + '\n' + past_participle.toString() );