Develop Reference

How to fix Range on jQuery-UI slider and trigger function on hange

I have a basic form that calculates an estimated price based on quantity and one of three options. Then I tried to add a jQuery-UI slider. I need the slider to use the same values as the SELECT, in this case 10-100 but instead it seems to be using 19-109. This means I can't select the lowest value at all without using the SELECT and the max is right off the scale. I also need it to trigger my setAmount() function on slider change to update the price. I thought these would be easy to resolve but I'm still learning. I've included a jsfiddle and would be very appreciative if anyone could point me in the right direction.
Current Code:
<script type='text/javascript'>
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 10,
max: 100,
range: "min",
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#quantity" ).on( "change", function() {
slider.slider( "value", this.selectedIndex + 1 );
});
$('.containing-element').children().on("change", function () {setAmount();});
$("#quantity").on("change", function () {setAmount();});
});
</script>
https://jsfiddle.net/Bestrafung/2cwp9ud6/1

I believe you are getting incorrect behavior by using the selectedIndex from the #quantity select.
$(document).ready(function(){
var select = $( "#quantity" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
range: "min",
value: 10,
min: 10,
max: 100,
slide: function( event, ui ) {
select.val( ui.value );
},
change: function(event, ui){
setAmount();
}
});
$('.containing-element').children().on("change", function () {
setAmount();
});
select.on("change", function () {
setAmount();
slider.slider( "value", select.val() );
});
function setAmount(){
var a = select.val();
if (a <= 10){var q = 9.50}
else if (a > 10 && a <= 20){var q = 7.5}
else if (a > 20 && a <= 50){var q = 4.25}
else if (a > 50 && a <= 100){var q = 2.50}
if ($("#flip-min").val() == "noback") {$("#amount").val((a*q).toFixed(2));}
if ($("#flip-min").val() == "hookback") {$("#amount").val((a*(q+.5)).toFixed(2));}
if ($("#flip-min").val() == "stickyback") {$("#amount").val((a*(q+.6)).toFixed(2));}
}
});
This should correct the behavior by using ui.value and modifying the select.

Animated clouds and plane

I have been created a simple apps, with a lot of Javascript code, I use jQuery too and the code looks so dirty. So now, I want to try restructure my code to Object-Oriented. What I've confused is where to call a properties, where to put an user action to an element, where to put dom element variable, etc. It's a bit of my code before and after restructure.
Before:
var $cloud = $(".js-cloud");
var $plane = $(".js-plane");
function randomPosition(min, max) {
return Math.random() * (max - min) + min;
}
$cloud.each(function(){
var leftPosition = randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
})
function loopPlane(){
$plane.velocity({
left : "-300px"
}, {
duration : 7000,
easing : "linear",
complete : function(){
$(this).css({
"right" : "-300px",
"left" : "auto"
})
loopPlane()
},
delay : 15000
})
}
loopPlane()
After:
//Clouds and plane element
var $cloud = $(".js-cloud");
var $plane = $(".js-plane");
/* Module */
var background = {
init : function(){
this.loopClouds();
this.loopPlane();
},
randomPosition : function(min,max){
return Math.random() * (max - min) + min;
},
loopPlane : function(){
var obj = this;
//Animate it
$plane.velocity({
left : "-300px"
}, {
duration : 7000,
easing : "linear",
complete : function(){
$plane.css({
"right" : "-300px",
"left" : "auto"
})
obj.loopPlane()
},
delay : 1000
})
},
loopClouds : function(){
var obj = this;
$cloud.each(function(){
var leftPosition = obj.randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
//Animate it
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
})
}
}
Is that my code look cleaner and readable? or there is a better version of my restructure code?

When you use $var.each, should you not be using the first parameter of the callback to target elements, instead of using this to target the $var array. If it's anything like a .forEach (but with an fn.init array), then the element is passed through the callback into the context of the loop.
You do this:
function loopClouds() {
var obj = this;
$cloud.each(function(){
var leftPosition = obj.randomPosition(1,100) + "%";
$(this).css("left",leftPosition)
var speed = $(this).data("speed");
//Animate it
$(this).velocity({
left : "-200px"
}, {
duration : speed,
easing : "linear",
loop : true
})
});
}
Shouldn't you be doing this?
function loopClouds() {
$cloud.each(function (cloud) {
cloud.css("left", randomPosition(1, 100));
cloud.velocity({left: "-200px"}, {
duration: cloud.data("speed"),
easing: "linear",
loop: true
});
});
}
This is just one example, but your usage of the this keywords seems to be a bit shoddy all-round.

Autoscrolling slide javascript

I have This javascript code for a slider that I downloaded , and can't figure out how to make it auto scrolling !!
I actually downloaded this code from http://tympanus.net/Tutorials/FullscreenSlitSlider/index2.html
It actually don't contain a next button so i can add an interval like the other sliders :(
$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
setInterval(initEvents,1000);
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});

Like it says in the docs (Google is helpful):
slitslider = $( '#slider' ).slitslider({
autoplay : true
});
should do it.
If you don't want to read the whole thing, here's a short list of common config options:
$.Slitslider.defaults = {
// transitions speed
speed : 800,
// if true the item's slices will also animate the opacity value
optOpacity : false,
// amount (%) to translate both slices - adjust as necessary
translateFactor : 230,
// maximum possible angle
maxAngle : 25,
// maximum possible scale
maxScale : 2,
// slideshow on / off
autoplay : false,
// keyboard navigation
keyboard : true,
// time between transitions
interval : 4000,
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : function( slide, idx ) { return false; }
};

jquery UI Slider bound to select

<p>Cost: $<span id="hddValue"></span></p>
<p>Cost2: $<span id="hddValue2"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var select = $('#hdd');
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: select[0].selectedIndex + 1,
slide: function (event, ui) {
select[0].selectedIndex = ui.value - 1;
$("#hddValue").text($('#hdd option:selected').text());
$("#hddValue2").text($('#hdd2 option:selected').text());
}
});
//show start value
$( "#hddValue" ).html( $('#slider').slider('value') );
$( "#hddValue2" ).html( $('#slider').slider('value') );
});
Can anyone please help me with this js script? What i want to do is when I move the slider i want each selected values to show up on the page as seen on two option values "hdd" and "hdd2".
right now what happens is when i move the slider only #hdd changes and when i add #hdd2 in the javascript, the hdd2 html view just freezes to the first option and doesn't change.
thank you in advance.

Your update method only updates both selects but with the value of the first one.
Havent tried it but it should look something like this, btw. having mutliple elements with the same id (your sliders) is invalid and breaks older browsers.
<p>Cost: $<span class="hddvalue"></span></p>
<p>Cost2: $<span class="hddvalue"></span></p>
<select id="hdd">
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
<select id="hdd2">
<option>1700</option>
<option>500</option>
<option>3700</option>
<option>4300</option>
<option>5070</option>
</select>
$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue')
;
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(select).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});

$(function () {
var
$selects = $('#hdd,#hdd2'),
$values = $('.hddvalue');
$selects.each(function (i) {
var sel = this;
$("<div class='slider'></div>").insertAfter(sel).slider({
min: 1,
max: 5,
range: "true",
value: sel.selectedIndex + 1,
slide: function (event, ui) {
sel.selectedIndex = ui.value - 1;
$values.eq(i).text(jQuery(this).find('option:selected').text());
}
});
});
//show start value
$values.eq(0).html( $('.slider').eq(0).slider('value') );
$values.eq(1).html( $('.slider').eq(1).slider('value') );
});

Jquery Append Trouble

I have a problem, I have a js code which append a span element. My problem is it keeps disappearing, its not a bug or something.
PS: I'm using jquery ui slider.What I'm doing is display the current value of my slider using the appended element(span). The only problem is it keeps disappearing when I click my other slider.
Here is all my code:
HTML
<div id = "opacity" class="slider-range"></div><br>
<div id = "volume" class="slider-range"></div><br>
Javascript
var append_element = $('<span></span>');
$('.slider-range').slider( {
animate : true,
});
$("#opacity").slider({
min : 0,
max : 100,
value : 60,
step : 10,
change : function(event, ui) {
slider_value('#opacity', ui.value);
}
});
$("#volume").slider({
min : 0,
max : 100,
value : 20,
step : 10,
change : function(event, ui) {
slider_value('#volume', ui.value);
}
});
function slider_value(id, response) {
append_element.removeClass().appendTo(id);
//remove '#' / get id
id = $(id).attr('id');
var new_span = $('span').addClass('slider-value-'+id);
$(new_span).html(response);
console.log(new_span);
}
Anyone. Pulling my hair here T_T.
Thanks.

You are just using one span at the whole page..
I think if you won't letting disappear it you have to use more than just one!
So you can use this code:
var append_element = '<span></span>';
$('.slider-range').slider( {
animate : true,
});
$("#opacity").slider({
min : 0,
max : 100,
value : 60,
step : 10,
change : function(event, ui) {
slider_value('#opacity', ui.value);
}
});
$("#volume").slider({
min : 0,
max : 100,
value : 20,
step : 10,
change : function(event, ui) {
slider_value('#volume', ui.value);
}
});
function slider_value(id, response) {
$(id).html(append_element);
//remove '#' / get id
id = $(id).attr('id');
var new_span = $('#'+id+'>span').addClass('slider-value-'+id);
$(new_span).html(response);
console.log(new_span);
}
​
Example: http://jsfiddle.net/c7myp/