I am building a generator and I am using the arctext.js plugin. (http://tympanus.net/Development/Arctext/)
Here is my problem. I have an input field where people can type any text they want. After that there are sliders for font-size, letter spacing, and text arc.
the arctext.js works great on text that is there when the page loads, but not on text inputed.
Here is my code for the text that is input
/* top */
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
$(document).on('change', '#bead-top-font', function(e) {
$('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});
});
$("#bead-top-font-size").slider({
range: "min",
value: 28,
min: 10,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'font-size': ui.value+'px'});
}
});
$("#bead-top-letter-spacing").slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$('#bTop').css({'letter-spacing': ui.value+'px'});
}
});
$("#bead-top-arc").slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
$('#bTop').arctext('set', {
radius : ui.value,
dir : 1,
animation : {
speed : 300
}
});
}
});
I am at a loss. Any ideas on how I can get this working? The generator is at http://www.xbracelets.com/xgen/
I fixed it by using the solution Erik posted here: Why does the changed input field change the element but no longer allows Jquery arc effects
changed this code from this:`
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
});
To this:
$(document).on('keyup', '#bead-top-text', function(e) {
$('#bTop').arctext('destroy');
$('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
$('#bTop').arctext({radius: 1100});
});
Related
I'm using the Slider widget, as a range from 0 to 500000, in my rails web app. I'm trying to display the value of slider as it changes, but I don't know where I'm wrong. I'm new to JQuery, help would be much appreciated.
JQuery:
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#the_slider").slider({
range: true,
min: 0,
max: 500000,
step: 1,
values: [0, 500000],
animate: 'slow',
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
},
slide: function(event, ui) {
$(ui.handle).find('span').html('฿' + ui.value[0]);
$(ui.handle).find('span').html('฿' + ui.value[1]);
}
});
$("#q_rent_gteq").val(slider.slider("values")[0]);
$("#q_rent_lteq").val(slider.slider("values")[1]);
});
</script>
View:
<div id="the_slider"></div>
<span id="q_rent_gteq"></span>
<span id="q_rent_lteq"></span>
Use .text if #q_rent_gteq or #q_rent_lteq are not inputs, textareas or selects. Other than this I cannot reproduce your error. Also combine both your slides. There is no need for two
slide: function(event, ui) {
$("#q_rent_gteq").val(ui.values[0]);
$("#q_rent_lteq").val(ui.values[1]);
$(ui.handle).html('฿' + ui.values[0]);
$(ui.handle).html('฿' + ui.values[1]);
}
Also ui.handle is a span itself. Did you mean to find that span or another? I don't see any others in the jQuery slider that can be found with a .find.
https://jsfiddle.net/eu793by7/
Function not triggered when moving slider to fast. I'm calling function using "slide" with Jquery UI slider. Is there a way to force it to call the function on each step? Here's the code:
var last = currentZoom;
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0.2,
max: 1.3,
value: currentZoom,
step: 0.1,
slide: function( event, ui ) {
if (ui.value > last) {
zoomIn();
}else{
zoomOut();
}
console.log($( "#slider-vertical" ).slider('value'));
last = ui.value;
}
});
So just to recap, while sliding it to fast it doesnt recognize the slide and it leads to it on skipping steps resulting in inaccurate values.
Thanks
I couldn't find a solution to this problem I'm having with the default jQuery slider and outputting the current value:
It seems like the value is the one from the "previous" step.
With a min value of 0, a max value of 10 and step of 0.25 the most left position displays a value of 0.25 and the most right 9.75 - which is simply wrong.
Does anyone know why this is or how to fix it?
HTML:
<div id="slider"></div>
JavaScript:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25
});
$('#slider').on('slide', function( event, ui ) {
var value = $('#slider').slider('option','value');
console.log(value);
});
Any help is much appreciated.
You just need to use ui.value to get the value of the slider:
$('#slider').on('slide', function( event, ui ) {
console.log(ui.value);
});
If you want to see just the value where it stops, and not every value that the slider passes by, use the stop event:
$('#slider').on('slidestop', function( event, ui ) {
console.log(ui.value);
});
See http://api.jqueryui.com/slider/#event-stop
Got it!
the "slide" event needs to be called in the slide function:
$('#slider').slider({
min: 0,
max: 10,
value: 2.5,
step: 0.25,
slide: function( event, ui ) {
value = ui.value;
console.log(value);
}
});
Im trying to make multiple jquery sliders that dynamically create a span with the value, but I am getting an instance of the value for each slider.
take a look at the fiddle http://jsfiddle.net/houareau/RvSgj/182/
or
var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
value : 5,
min : 1,
max : $(this).data('max'),
step : 1,
slide : function (event, ui) {
a = ui.value;
$(slider).next().find('span.sliderValue').html(ui.value);
}
});
});
Yay, here is the new fiddle!
$(".slider").slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append( $('<span />').addClass('sliderValue') )
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
You forgot to post the create function, which is the real issue here, you're appending both spans to both sliders.
$(".slider").each(function () {
$(this).slider({
min: 0,
max: $(this).data('max'),
step: 1,
create: function (event, ui) {
$(event.target).find('a').append($(event.target).next('.sliderValue'));
},
slide: function (event, ui) {
$(ui.handle).find('span.sliderValue').html(ui.value);
}
});
});
FIDDLE
And do not use a global variable to get the values, you can get a sliders value at any time by calling $( ".selector" ).slider( "value" );
I have the following code that implements 2 jQuery sliders:
<script type="text/javascript">
$(document).ready(function () {
$("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide });
$("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide });
});
function handleSlide(event, ui) {
$("#lblInfo").text(ui.id + ':' + ui.value);
}
</script>
As you see, both sliders generate a slide event which is handled by handleSlide function. Inside the handleSlide function, I can get the value of the slider by calling ui.value, but how do i know which slider actually generated the event?
I've tried ui.id, ui.name and some others that seemed logical, but they all come back as undefined. How do I get actual name of its CSS implementation (e.g. either #wheelRight or #wheelLeft)?
Thanks.
Try wrapping ui.handle
function handleSlide(event, ui) {
$("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value);
}
Edit: Oops, that returns the "a" element. This should return the parent element id:
$(ui.handle).parent().attr('id')
You can pass the id selectors (or any arguments of your choice) directly to your handler function:
$(document).ready(function () {
$("#wheelLeft").slider({
value: 50, min: -100, max: 100,
slide: function(event, ui) {
handleSlide(event, ui, "#wheelLeft");
}
});
$("#wheelRight").slider({
value: -10, min: -100, max: 100,
slide: function(event, ui) {
handleSlide(event, ui, "#wheelRight");
}
});
});
function handleSlide(event, ui, idSelector)
{
$("#lblInfo").text(idSelector);
}
function handleSlide(event, ui) {
var sender = event.srcElement || event.target;
$("#lblInfo").text(ui.id + ':' + ui.value);
}
The sender should contain the raw element that triggered the event.