Is there a way to set by how much the slider moves when someone presses page up or page down? Currently, my slider moves by a value which is equivalent to one fifth of the slider range. I would like to set it to move by, say, 10 steps. Is there a way to do it?
You have to use the 'step' option for that:
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50
});
To solve the page up/ page down strange behavior, try this: http://jsfiddle.net/SPDBw/
From version 1.8. to 1.11., they've put the variable numPages inside the ui.slider container, and fixed it to 5.
Even if you override the keyCode handler to recognize the keys "PageUp" and 'PageDown" wouldn't fix the problem.
BUT, as a workaround, you can override this variable, contained in the prototype scope of the slider widget, at the beggining of your page load.
Pros: I don't need to worry about fetching the objects' max and min values
Cons: Solution is only a workaround, and solution can(and will) be broken in a future patch.
What I did was:
$(document).ready(function() {
$.ui.slider.prototype.numPages = 10;
});
Hope it works ;)
Related
I have two Meteor.Collections in my app. One contains a bunch of "slider" objects, which define a title, max, min, base value, and step for each slider. Now, I have two problems. The first is making the sliders show up in the first place. I've tried to put the following code:
Sliders.find().forEach(function(slider) {
$("#"+slider._id).slider({
min:slider.min,
max:slider.max,
value:slider.base,
step:slider.step,
change:function(event,ui) {
Data.update({_id:Data.findOne({slider:event.target.id})._id}, {$set:{value:ui.value}});
}
});
});
in Meteor.startup, at the end of my client.js file, in a $(document).ready() block, and nothing seems to get it to work. When I paste it into the javascript console, however, it works. Anyways, that's my first problem.
My second problem is that whenever I slide the slider, the slider disappears. I can keep dragging the mouse around to change the value, but once I let go of the clicker, I can't change the value anymore. I've tried using the above way and calling a Meteor.method that changes it on the server side. It's the fact that I'm updating a collection that is published to the same client that makes the slider disappear. Anything short of that doesn't cause it to disappear. How should I deal with this?
Thanks!
Have you already tried using the Template.preserve method? http://docs.meteor.com/#template_preserve
I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
JQuery UI Sortable works great for lists with no gaps, but say I want to render a list of items with gaps, e.g.
1, 2, empty, 4, 5, 6, empty, 8
where the number represents the slot number. The behavior expected then would be if the user drags an element over the 2 slot, the 2 value gets pushed to the empty slot 3, and the user could drop the new element in the 2 slot, whereas if they drag a new element over the empty 3 slot, the list items would not push down, and the user could just drop the new item into the empty 3 slot. Hopefully this makes sense.
I've been looking at the JQuery UI Sortable code, and it seems that I need to utilize the change and receive callbacks in order to achieve this, but, being new to JQuery/JS in general, it's not clear to me what to use to add these empty slot placeholders and manage the selection list so that I don't break the sorting functionality with custom code.
Any pointers, examples, etc. would be much appreciated.
After banging my head on this for a while, I created a jsFiddle: http://jsfiddle.net/pdHnX/
To help explain the problem. I believe everything I'm trying to accomplish can happen in an overridden _rearrange method. The fiddle code handles the case where an item is replacing a filler item, but there is an odd issue, where if you drag an item from the item list to the filler list, drop the item, then drag the same item within the filler list, the filler list is shrunk by 1, which is a problem.
There are more issues once you start dragging more items into the filler list, but this is where I'm at with the problem at the moment.
I'm not sure if I understood you correctly, but here's what I came up with:
http://jsfiddle.net/py3DE/
$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
start: function(ev, ui){ ui.helper.width($(this).width()); } // ensure helper width
});
$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
drop: function(ev, ui){
var item = ui.draggable;
if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
this.innerHTML = ''; // clean the placeholder
item.css({ top: 0, left: 0 }).appendTo(this); // append item to placeholder
}
});
Assumptions:
If you drag item from the top list - it will be "cloned" (original will remain in the list)
If you drag item from the bottom list - it will move (leaving empty placeholder)
If you drop any item on a bottom list's placeholder - it will replace the placeholder
If you drop any item on bottom list's non-empty placeholder/item - it will replace it
sizes of both lists always stay the same
Let me know if this helps or are you looking for something else.
Also explaining the whole task (what's the purpose of this dragging) might help :-)
Sorry, this was a really difficult question to detail out. The requirements were really specific and hard to describe.
Here is the solution I was looking for.
The others answers here, while they may have been solutions to the poorly described problem, were not what I was looking for.
http://jsfiddle.net/vfezJ/
Unfortunately, the sortable.js code is very hairy so the code linked there is also very hairy. The solution I've posted also makes some assumptions on CSS classes and DOM ids to get the job done.
http://jsbin.com/igozat/2
Here's something I whipped up. It's not perfect or deserving of much credit because sortable() can't be interruped mid-drag. If that was possible, then a drop action could take over completely. Also, my attempt to re-sort was buggy. I know that this methods works with just regular jQuery, but it didn't work with jQuery UI mucking me up.
At risk of sounding like a jerk, if it were me, I'd write the functionality with just jQuery. jQuery UI isn't all its cracked up to be. :P
I am using jQuery draggable/droppable to drag (divs) from one list to another. Both lists have a fixed number of list items, and the list items themselves and can either be empty or already contain a div.
I am dragging a div to a list item. If the list item already contains a div then I would like that div to be pushed down to the list item below it - so as to make way for the div I am dragging. I can do this with the "over" event in droppable. But I would like this to happen only after the user has paused there for a cetain period of time, say 0.5 second. How can I do this?
Also, if the user decides not to drop then I would like the displaced item to come back to its original position. Again, what would be the easiest of accomplishing that?
Thanks for your help
William
I just happen to be doing something similar. In my case, I am using the treeTable plugin. I want to expand a collapsed tree if it is hovered for some amount of time. Here is what I have so far. I just happen to be working on this today. Note the use of a timeout to delay the operation.
var timeout = null;
var clear = function() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
}
$(".selector").droppable({
over: function(e, ui) {
if (! $(this).is("expanded")) {
clear();
timeout = setTimeout(function() {
$(this).expand();
timeout = null;
}, 1000);
}
}
, out: clear
, drop: function(e, ui) {
clear();
...
}
});
I'm still having a problem with this. After one branch gets expanded, the rows below it get pushed down to make room for the expanded branch. I haven't dropped yet and so I go hover over the first new element in the expanded branch. The problem is that this element does not get the hoverClass, the first element that got pushed down below the new branch gets it. It is like jquery doesn't figure out that it got moved down. I imagine that you are likely to encounter this problem given what you've described.
I was on jquery-1.4.2 but then I updated to jquery-1.6.4 to see if that would fix the problem. Both versions exhibit the same behavior. Also, I tested this in Chrome 14.0.835.202, Opera 11.52, Firefox 3.6.23 and IE7.0.5730.13. It happens the same way in all of them. So, either jquery has a bug or I've done something to cause this.
About your second question. I'm not sure I completely understand what you're going after. Are you looking for the