[jQuery] UI Slider with group with shared limit
Hello Guys, I'm new to the UI library and looking for some help achieving a certain thing. I want to have a group of sliders which have a shared value which they can reach as a maximum. Here's a visual example of what I'm looking to do: http://tinypic.com/view.php?pic=9ibp05s=6 Notice how we have 100% in total that can be used by the 3 sliders, as you slide up the number of available percent you have left to assign should decrease, to the point where it reaches 0, you will then no longer be able to slide any of the sliders upwards without first sliding one or more downwards to free up available % to be assigned. I suppose its very much like assigning XP in an RPG or something like that, has anyone seen an example of the UI sliders being used like this? I've been Googling the past 30 minutes and found nothing. Thanks for your advice. Robert
[jQuery] UI slider execute function on change or slide
Hi,
I want to make the UI slider to set a font-size to a .cica class. The
setfontsize variable works but I can not succeed to make the slider
change the value on slide.
Here is the function
$('#sizer').slider({
slide: function(event, ui) {
var setfontsize = $('#sizer:selected').text();
$('.cica').css(font-size, setfontsize + px);
}
Here is the markup
form action=#
!-- Slider --
fieldset
select name=speed id=speed
option value=1010/option
option value=1515/option
option value=21
selected=selected21/option
option value=3030/option
option value=4040/option
/select
/fieldset
/form
Thank you.
[jQuery] UI slider with vertical orientation: change direction from top to bottom
Hi everyone, i'm using the 1.7.2/Slider and i'm quite pleased with it. The only thing that bothers me is how to change the direction of the slider when in vertical orientation. The default values are: min at bottom, max at top, but I want to reverse that, so the slider always starts from top to bottom. I tryed different things like modifying the code in ui.slider.js, but it didn't seem to work and I'm stuck now. any tip or advise is wellcome.
[jQuery] Re: Conflict between Simplemodal and jquery-ui slider?
The problem is that you are including the basic.js file from my site,
which is causing a conflict. Remove that script and use the following
code:
$(document).ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e) {
e.preventDefault();
$('#basic-modal-content').modal({onShow: function (d) {
$(#slider-vertical, d.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
});
});
-Eric
On Sep 11, 7:54 pm, folder123 kjau...@gmail.com wrote:
The behavior i'm seeing is the onShow only seems to run once. On
subsequent modal window opens the contents in onShow don't seem to
execute.
-k
On Sep 11, 7:31 pm, folder123 kjau...@gmail.com wrote:
I'm still having issues with the code below, the slider now doesn't
even show up on a 2nd window open.
Any thoughts greatly appreciated, I'm sure i'm missing something
simple.
-k
On Sep 11, 2:52 pm, Eric Martin emarti...@gmail.com wrote:
Use the onShow callback inSimpleModalto call the slider init code:
$('#basic-modal-content').modal({onShow: function (dialog) {
$(#slider-vertical, dialog.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
-Eric
On Sep 10, 2:30 pm, folder123 kjau...@gmail.com wrote:
Summary - Slider does not work inSimpleModalwindow after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to theSimpleModalgoogle code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Conflict between Simplemodal and jquery-ui slider?
Summary - Slider does not work in SimpleModal window after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to the SimpleModal google code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body
[jQuery] Re: Conflict between Simplemodal and jquery-ui slider?
Use the onShow callback in SimpleModal to call the slider init code:
$('#basic-modal-content').modal({onShow: function (dialog) {
$(#slider-vertical, dialog.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
-Eric
On Sep 10, 2:30 pm, folder123 kjau...@gmail.com wrote:
Summary - Slider does not work in SimpleModal window after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to the SimpleModal google code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body
[jQuery] Re: Conflict between Simplemodal and jquery-ui slider?
Excellent, thanks for the reply and your hard work on SimpleModal,
it's greatly appeciated.
-k
On Sep 11, 2:52 pm, Eric Martin emarti...@gmail.com wrote:
Use the onShow callback in SimpleModal to call the slider init code:
$('#basic-modal-content').modal({onShow: function (dialog) {
$(#slider-vertical, dialog.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
-Eric
On Sep 10, 2:30 pm, folder123 kjau...@gmail.com wrote:
Summary - Slider does not work in SimpleModal window after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to the SimpleModal google code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body- Hide quoted text -
- Show quoted text -
[jQuery] Re: Conflict between Simplemodal and jquery-ui slider?
I'm still having issues with the code below, the slider now doesn't
even show up on a 2nd window open.
Any thoughts greatly appreciated, I'm sure i'm missing something
simple.
-k
On Sep 11, 2:52 pm, Eric Martin emarti...@gmail.com wrote:
Use the onShow callback in SimpleModal to call the slider init code:
$('#basic-modal-content').modal({onShow: function (dialog) {
$(#slider-vertical, dialog.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
-Eric
On Sep 10, 2:30 pm, folder123 kjau...@gmail.com wrote:
Summary - Slider does not work in SimpleModal window after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to the SimpleModal google code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body- Hide quoted text -
- Show quoted text -
[jQuery] Re: Conflict between Simplemodal and jquery-ui slider?
The behavior i'm seeing is the onShow only seems to run once. On
subsequent modal window opens the contents in onShow don't seem to
execute.
-k
On Sep 11, 7:31 pm, folder123 kjau...@gmail.com wrote:
I'm still having issues with the code below, the slider now doesn't
even show up on a 2nd window open.
Any thoughts greatly appreciated, I'm sure i'm missing something
simple.
-k
On Sep 11, 2:52 pm, Eric Martin emarti...@gmail.com wrote:
Use the onShow callback in SimpleModal to call the slider init code:
$('#basic-modal-content').modal({onShow: function (dialog) {
$(#slider-vertical, dialog.container[0]).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
}});
-Eric
On Sep 10, 2:30 pm, folder123 kjau...@gmail.com wrote:
Summary - Slider does not work in SimpleModal window after more than
once.
Detail:
Step 1: Click to open modal window
Step 2: Observe slider working properly, with value being updated,
close
modal
Step 3: Click to open modal window
Step 4: Observe slider NOT working properly, NaN being returned
If you open the modal with the slider, then close the window, then re-
open
the modal and attempt to move the slider NaN errors occur. Attached is
a
simple html document that demonstrates the problem.
This has also been posted to the SimpleModal google code group.
Any thoughts would be greatly appreciated, thanks for all the hard
work on jquery.
To replicate, please cut and paste the following into a html document.
html xmlns=http://www.w3.org/1999/xhtml;
head
link type=text/css
href=http://jqueryui.com/latest/themes/base/ui.all.css;
rel=stylesheet /
script
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js;
type=text/javascript/script
script
src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-
ui.min.js
type=text/javascript/script
script
src='http://www.ericmmartin.com/simplemodal/js/jquery.simplemodal.js'
type='text/javascript'/script
script src='http://www.ericmmartin.com/simplemodal/js/basic.js'
type='text/javascript'/script
link type='text/css'
href='http://www.ericmmartin.com/simplemodal/css/basic.css'
rel='stylesheet' media='screen' /
script type=text/javascript
$().ready(function() {
$('#basic-modal input.basic, #basic-modal a.basic').click(function
(e)
{
e.preventDefault();
$('#basic-modal-content').modal();
});
$(function() {
$(#slider-vertical).slider({
orientation: vertical,
range: min,
min: 50,
max: 300,
value: 100,
slide: function(event, ui) {
$(#amount).val(ui.value);
}
});
});
});
/script
/head
body
div id=basic-modal-content
input type=text id=amount style=border:0; color:#ff; font-
weight:bold; width: 40px; background: #aa; /
div id=slider-vertical style=height:200px;/div
/div
div id='basic-modal'
h2Basic Modal Dialog/h2
form action='download/' method='post'
input type='button' name='basic' value='Show modal'
class='basic demo'/
/form
/div
/body- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Multiple Custom Handles using Jquery UI Slider
Hey there,
I was wondering if any of you guys could help me out. I'm using the
Slider for Jquery UI and am having some difficulty setting a custom
style for more than one handle.
script type=text/javascript
$(function() {
$(#slider).slider({ values: [2, 15] }).addClass(handle);
});
/script
the css
.handle .ui-slider-handle{width:30px; height:30px; background:url(../
_images/deactivate_off.jpg) no-repeat; overflow: hidden; position:
absolute; top: -10px; }
and just
div id=slider/div for the HTML
This works for setting each handle to the style i specified above.
However I was wondering if it was possible to apply a different style
to each handle within the slider. I tried using .each and applying a
new style after the slider has been made but I couldn't get that to
work. Is there a simple solution for this?
Cheers
Zay
[jQuery] ui slider effects
I know there's an animate parameter for the slider, but has anyone added (or know how to add) a bounce effect or easing effect to the ui slider at: http://jqueryui.com/demos/slider/#steps
[jQuery] UI Slider Tearing in Firefox
Ok, this is really bothering me. In IE7 and IE8, Opera 9 and 10a,
Safari 3 and 4b, the jqueryUI slider works beautifully. However in
Firefox (3.1b3), the slider handle tears while being dragged. I can't
figure out what is causing it. Does firefox have a really slow refresh
rate causing this tearing, or what is going wrong here. It only seems
to be a problem with my code, as the slider on the example page works
fine.
Slider code below...
$('div.scrollbar').slider({
animate: true,
change: sliderChange,
slide: sliderSlide
});
function sliderChange(e, ui)
{
var maxScroll = $('div.thumbnails').attr('scrollWidth')
-
$('div.thumbnails').width();
$('div.thumbnails').animate({scrollLeft: ui.value *
(maxScroll /
100) }, 1000);
}
function sliderSlide(e, ui)
{
var maxScroll = $('div.thumbnails').attr('scrollWidth')
-
$('div.thumbnails').width();
$('div.thumbnails').attr({scrollLeft: ui.value *
(maxScroll /
100) });
}
[jQuery] UI Slider Tearing in Firefox
Ok, this is really bothering me. In IE7 and IE8, Opera 9 and 10a,
Safari 3 and 4b, the jqueryUI slider works beautifully. However in
Firefox (3.1b3), the slider handle tears while being dragged. I can't
figure out what is causing it. Does firefox have a really slow refresh
rate causing this tearing, or what is going wrong here. It only seems
to be a problem with my code, as the slider on the example page works
fine.
Slider code below...
$('div.scrollbar').slider({
animate: true,
change: sliderChange,
slide: sliderSlide
});
function sliderChange(e, ui)
{
var maxScroll = $('div.thumbnails').attr('scrollWidth')
-
$('div.thumbnails').width();
$('div.thumbnails').animate({scrollLeft: ui.value *
(maxScroll /
100) }, 1000);
}
function sliderSlide(e, ui)
{
var maxScroll = $('div.thumbnails').attr('scrollWidth')
-
$('div.thumbnails').width();
$('div.thumbnails').attr({scrollLeft: ui.value *
(maxScroll /
100) });
}
[jQuery] Problems with fadeTo and jQuery UI Slider
Hi there, I'm working on a header that display a slideshow and at the same time use the fadeTo() effect; the behavior of this header is as follow: 1) Once the page is load display slideshow 50% transparency and hide navigation 2) When user hover header fade slideshow and navigation to 100% 3) The user can now use the slideshow because the navigation is visible 4) When user hover out of the header back to slideshow 50% and navigation 0% Well, this kind of work right now but I've noticed a couple of bugs: 1) When hover out the fadeOut is not instantly. 2) If you hover over and stop the cursor (still over header) and then move it after 2 sec the hover out if fired. I was taking the pageY and although the header is around 85px height the pageY was over 900px :( 3) If you use the slider and then hover out, sometimes the mouseout event is not fired I don't know where else to check and I hope some of you can help me here. For your convenience I have simplified the code and set a demo over here: http://sandbox.altrugon.com/ Thanks in advance for all your help guys.
[jQuery] UI slider 1.6 - how to pass the slider values to an ajax script?
Hi I am a novice to javascript and jquery developer trying to pass
slider values to an AJAX script. My slieder looks like this:
$(function() {
$(#slider-range).slider({
range: true,
min: -10,
max: 66,
//values: [Math.pow(10,2), Math.pow(10,5)],
values: [20, 30],
slide: function(event, ui) {
$(#amount).val('' +
(Math.round(Math.pow(10,(ui.values[0] /
10))) ) + ' - ' + (Math.round(Math.pow(10,(ui.values[1] / 10))) ));
}
});
//$(#amount).val('' + $(#slider-range).slider(values, 0)
+ ' -
' + $(#slider-range).slider(values, 1));
});
How can I pass slider values ui.values[0] and ui.values[1] to a
different javascript function which then via AJAX passes the is to the
ASP script. I tried calling the function like this but it does not
work:
slide: function(event, ui) {
$(#amount).val('' +
(Math.round(Math.pow(10,(ui.values[0] /
10))) ) + ' - ' + (Math.round(Math.pow(10,(ui.values[1] / 10))) ));
function myAjax(ui.values[0], ui.values[0]);
}
});
The slieder stops working when I include the function call. What am I
doing wrong? Please help.
[jQuery] Re: Jquery UI Slider Events not raised
Thanks for the info.. i will do some poking around.
Like i said.. i knew it was something silly that i was missing. :)
Thanks for pointing me in the right direction..
On Jan 31, 7:19 pm, Richard D. Worth rdwo...@gmail.com wrote:
Sounds like you are using incompatible versions of jQuery and jQuery UI.
jQuery UI 1.5.3 through 1.6rc4 are only compatible with jQuery 1.2.6. In
order to use jQueryu UI with jQuery 1.3+, you'll need the latest preview
release, jQuery UI 1.6rc6.
Also note: there is a dedicated mailing list for jQuery UI
http://groups.google.com/group/jquery-ui
should you have any further questions. Thanks
- Richard
On Sat, Jan 31, 2009 at 6:13 PM, cartic cnat...@gmail.com wrote:
OK.. Here is the problem. I have downloaded the UI slider from Jquery
website. The slider shows up fine. The slider moves fine.. BUT.. none
of the callbacks are being called. i have searched high and low for
this but oculd not find anything.
Here is the code that i use
script src=js/jquery/jquery-1.3.1.js type=text/javascript/
script
script src=js/jquery/ui_core_slider.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function(){
$('#slider_callout').hide();
$('#slider1_bar').slider({
handle: '.slider_handle',
stop: function (e, ui) {
console.log( stopped );
}
});
});
/script
!--- OTHER HTML HERE ---
div class='slider_bar' id=slider1_bar
div id=slider_callout/div
div id='slider1_handle'
class='slider_handle'/div
/div
Thanks
Cartic
[jQuery] Jquery UI Slider Events not raised
OK.. Here is the problem. I have downloaded the UI slider from Jquery
website. The slider shows up fine. The slider moves fine.. BUT.. none
of the callbacks are being called. i have searched high and low for
this but oculd not find anything.
Here is the code that i use
script src=js/jquery/jquery-1.3.1.js type=text/javascript/
script
script src=js/jquery/ui_core_slider.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function(){
$('#slider_callout').hide();
$('#slider1_bar').slider({
handle: '.slider_handle',
stop: function (e, ui) {
console.log( stopped );
}
});
});
/script
!--- OTHER HTML HERE ---
div class='slider_bar' id=slider1_bar
div id=slider_callout/div
div id='slider1_handle' class='slider_handle'/div
/div
Thanks
Cartic
[jQuery] Re: Jquery UI Slider Events not raised
Sounds like you are using incompatible versions of jQuery and jQuery UI.
jQuery UI 1.5.3 through 1.6rc4 are only compatible with jQuery 1.2.6. In
order to use jQueryu UI with jQuery 1.3+, you'll need the latest preview
release, jQuery UI 1.6rc6.
Also note: there is a dedicated mailing list for jQuery UI
http://groups.google.com/group/jquery-ui
should you have any further questions. Thanks
- Richard
On Sat, Jan 31, 2009 at 6:13 PM, cartic cnat...@gmail.com wrote:
OK.. Here is the problem. I have downloaded the UI slider from Jquery
website. The slider shows up fine. The slider moves fine.. BUT.. none
of the callbacks are being called. i have searched high and low for
this but oculd not find anything.
Here is the code that i use
script src=js/jquery/jquery-1.3.1.js type=text/javascript/
script
script src=js/jquery/ui_core_slider.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function(){
$('#slider_callout').hide();
$('#slider1_bar').slider({
handle: '.slider_handle',
stop: function (e, ui) {
console.log( stopped );
}
});
});
/script
!--- OTHER HTML HERE ---
div class='slider_bar' id=slider1_bar
div id=slider_callout/div
div id='slider1_handle'
class='slider_handle'/div
/div
Thanks
Cartic
[jQuery] [UI Slider] Specifying Initial Value
Hello,
Can someone confirm if this is possible? I generate a page that has 10+
sliders on it. Each has a different initial value when the page loads. Is
there a way to set the inital value as part of the div element? The reason I
ask is that I'd like to do a blanket $('slider-class').slider({...opts...})
rather than having to do
$('slider-class').each(function(){$(this).slider({value:somevalue})}) . I
realise they are quite similar but it looks less neat when it's done. Surely
there must be way to specify say div class=slider-class initialValue=3/ for
example?
James.
This e-mail is intended solely for the addressee and is strictly confidential;
if you are not the addressee please destroy the message and all copies. Any
opinion or information contained in this email or its attachments that does not
relate to the business of Kainos
is personal to the sender and is not given by or endorsed by Kainos. Kainos is
the trading name of Kainos Software Limited, registered in Northern Ireland
under company number: NI19370, having its registered offices at: Kainos House,
4-6 Upper Crescent, Belfast, BT7 1NT,
Northern Ireland. Registered in the UK for VAT under number: 454598802 and
registered in Ireland for VAT under number: 9950340E. This email has been
scanned for all known viruses by MessageLabs but is not guaranteed to be virus
free; further terms and conditions may be
found on our website - www.kainos.com
[jQuery] ui-slider
i know they're still in beta, but does anyone else see that setting the
startValue is broken ?
As a workaround i tried:
$j('#slider').slider( moveTo, fontsize); where fontsize definately !=
undefined or worse.
So is it simply broken ?
micha
[jQuery] ui slider plugin
Hi
I am having problems with the UI slider plugin. I have this HTML structure
(bulilt with DOM):
div id=hue style=float: right; margin-top: 5px;
background-image: url(img/hue.png); width: 18px; height:
186px;
img id=hueSlider src=img/handle.gif style=left: 232px;/
/div
Then I try to make a slider for the hue:
$('#hue').slider({
minValue:0,
maxValue:360,
axis:'vertical',
handle:'#hueSlider',
startValue:360-h,
start:function(){}
});
It works fine, but the slider always begins at the top of the page instead of
the top of the containig div (selectColor_hueSlider). How can I convince
slider() to work correctly?
Christof
