Is it possible to combine jquery-ui range slider with scrollbar? - javascript

I would like to create a jquery-ui slider which is a combination of the "range slider" and "slider scrollbar" examples. Is this possible?
So it would have 3 manipulation points as below:
I want to use the slider to control a canvas. If you move an end it would zoom in/out of the canvas. If you slide the whole bar it would pan.

To answer your question: Yes, this is possible. To answer the underlying but inevitable "How", please take a look at this answer.

Related

How can I scroll a Sheild UI chart horizontally at a time based speed

I was wondering if anyone can offer any advise/examples of using Shield UI charts to show a horizontally scrolling graph over a time period.
I am open to suggestions about how to achieve this but would like to see real-time (per second or less accuracy) scrolling, either by frequent updating of a single graph or perhaps better, simply moving a vertical line marker from left to right across the y-axis to demonstrate the movement of time, relative to a static background chart.
May you specify some more details about what you want to achieve as it is not quite clear? Can you give some image/example how it should look like?
I think you should look at that demo, probably it is something near to what you have asked.
http://demos.shieldui.com/web/line-chart/forex-data
There as you can see you can dynamically rebind chart and simulate live data. Scrolling starts after it is filled with data. Probably that is something similar to what you want to achieve.

Image Map Area Highlight and Zooming with iScroll 4

In my Cordova project, I have a slider with multiple zoomable images (by iScroll) and I would like to use map to highlight some area always. But I have tried many libraries like imagemapster.js, maphilight.js but these libraries prevent images' zooming feature. Is there any library that I can use to highlight area only.
Any help or idea. Thanks in advance!
I got figured it out. For someone like me, here is my solution.
I used imagemapster.js for highlighting map areas. But I applied imagemapster first and then I grab those whole element and then applied iScroll(version 4) for zooming. First, i was doing backward, that's why I can't zoom in or out anymore. Cheer!

Zooming using slider

I am a beginner with jQuery and looking to build a short plugin for my requirement. I am looking to build a light and short timeline like plugin which has to look something like the following:
The green bar below has two small rectangles which can be moved left and right towards or away from each other to zoom in / zoom out the content of the timeline above (orange bar). I tried to find similar plugin which I could use as a reference to write to zoom in/zoom out using the slider.
I found some timeline plugins such as Timeglider etc. which have the zoom functionality implemented in a different way and not similar to the above figure (where I could use two rectangles to zoom in/zoom out and zoom timeline in orange bar).
I wanted to ask for suggestions about where I could find a similar plugin that I could use as a reference to see how zooming using slider is implemented. Or if there's no such already plugin, I would appreciate some help on how to go about the zooming functionaility for the plugin.
Do you know, that there is the slider plugin for jQuery UI (link). It will be just question of styling it, connecting to slide event and changing zoom level on the go.
I would expand my answer, but I lack some more information about your HTML layout, Would like to see some code of yours in jsfiddle.net.

Can I draw something like Wheel of Fortune using CSS?

I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.
Also, I want to have at least 8 segments in the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:
Once I have this working I then can use CSS3 rotate property.
Any idea how could I do this?
Here's a Spinning Wheel Demo done in HTML5 using Canvas: LINK
Direct download to the project demo files : ZIP
EDIT: Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas
Here is another example of a spinning wheel using a Canvas
Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
It contains an introductory tutorial to somewhat you need. Check for the JS 2d Transformation library code at github too.
I created a roulette wheel using Raphael at: http://www.guesttime.com/members/ledlogic/roulette/index.html
It has the text rotated like you do, but you'd have to handle the centering for each letter.

Jquery and Css and math: dots in a circle to converge in one point

I have a circle of dots in the middle of a web page
i'd like expand the circle and collapse to a certain point sliding a scrubber like a zoom slider
i'm trying to do it via css and jquery, i was also thinking of using webkit transformazion on plane Z but my basic problem is just to move hose dots form a position to another, to converge in one point and back, just sliding the scrubber
do you have an idea of the direction to take?
thanks
This might be too high-level, but I'd begin by making the position of each dot interpreted as a function of y = m(x)+b just like point-slope form in algebra. I'm interested in the application and would like to see if I can help more! Try and get started with that and see where it takes you.
yahooo api are the answer, i solved it

Categories