Is there any way to modify a jQuery UI range slider so that you can grab the bar between the handles to slide the selected range? If you try to grab the bar, it jumps to one of the handles.
This page has an example of the sort of behavior I'm looking for - it's at the bottom.
this extended widget from wijmo should help you out
I assume you are referring to the jQuery UI Slider. I'm quite sure that it doesn't have the feature you are looking for. But that would be a pretty cool add-on to it. If you end up enhancing Slider to do this, I'd love to see it.
Related
I am currently creating a website which at the top of the page I am trying to create a slider which when you use next and previous buttons, the content below changes to match that item.
For example, Honda Bikes has this which is shown in the image below. I am after something exactly like this with content changing below the slider to match the item. I have had a look at the page, and it seems like they are using some kind of jQuery carousel.
If someone has a link to a, I presume, jQuery plugin that would be a great help to get me started.
It looks to me like Honda created their own jQuery carousel plugin.
There are plenty of great slideshow plugins available, here's a cool jQuery slideshow included on the Honda site.
Top 10 jQuery Carousel Plugins For 2013 has a couple of good ones.
I would recommend this plugin: jQuery Cycle plugin. It's easy to use, flexible and has many features.
Does anyone know of a jQuery content slider (not just an image slider) that allows you to specify a grid of elements?
As an example, this is the sort of grid that I'm after:
http://cl.ly/image/0O213C1n2b0s
You can see that it's a 2x2 grid. With the controls, when someone clicks on a 'next' link, it should scroll to show the next 4 elements. I'd like to be able to have multiple instances on a page, each having different grids (I may be 3x2, 2x2, 4x1 on the same page)
Also, as an added caveat, I need this to be responsive.
First question is; does anyone know of a solution that already exists which would fit my requirements? If not, that leads to my second question; would anyone like to help me write such a thing? I'm relatively savvy with javascript (more specifically jQuery if I'm being absolutely honest) but by no means an expert.
I've done a fair amount of googling, but came up short. Hopefully someone is way ahead of me and has already written something along these lines.
What say you, Internet?
Have you seen this:
jQuery grid syle slider
Is there JS plugin,e.g. jQuery or any other,that imitates effect of loose-leaf calendar?
Here is image of calendar.
It's needed, that top half falls into bottom when changing date in calendar.
Perhaps, jQuery Accordion is closest,but it imitates a little bit other effect.
Take a look at this question: JavaScript Flip Counter
And this is a demo from one of the links: http://cnanney.com/journal/demo/apple-counter-revisited/
I have seen this article in the past, though not implemented it.
http://cnanney.com/journal/code/apple-style-counter/
Edit: I have just seen welldan97's comment, he should post an answer and get some credit for being before me.
I want to enable the user to drag a bar up/down to reveal/hide content in two contiguous panes. I also need to create some buttons that move the bar to some preset locations. I know this is all possible, but am not sure where to start.
I'm creating a prototype whose purpose is to figure out the right user experience, so it's OK if it's not going to scale to 300 million simultaneous users on IE6/Windows Millenium. ;-)
That's a rather complicated thing to do from scratch, so consider using a plugin. Wijmo is based on jQuery UI and has an open-source splitter widget. The documentation is decent as well.
While I don't see any methods to resize it, you may be able to add one and contribute it back to the project.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.