Develop Reference

in js.cytoscape limit the mouse scroll function

I am using in js.cytoscape library and the diagram is generated statically for a demo.
Now I am facing an issue with the mouse scroll, which Zooms in and out so much.
Is there a way to control this? I have seen the same happens in the provided demos. But it is not acceptable. Any work around.
Appreciate the help.
Thank you

The property wheelSensitivity changes that fast scroll behaviour, when you give it a value between 0 and 1, so just put this in your code:
var cy = cytoscape({
container: yourContainer,
elements: yourElements,
style: yourStyle,
layout: yourLayout,
wheelSensitivity: 0.5
});
If you have more questions like this, consider looking at the documentation of cytoscape, where you can find the answer most of the time. If you can't find the solution, feel free to ask on stackoverflow :)
Another thing, please show us what you already tried via code. Thank you

How to make HTML elements react on mouse movements?

my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?

If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.

You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.

How to reverse jQuery Reel autoplay

I'm using jQuery Reel to show a 360 product view, doing something like this:
$('img.one').reel({
image: 'http://jquery.vostrel.cz/demo/rc-reel.jpg',
frames: 35,
speed: 0.4
});
I'd like to have it autoplay in reverse (right-to-left, rather than the default left-to-right), but I don't want to change the way the dragging and indicator work (which is what cw: true does -- so I can't use that).
What I've tried
The option cw: true does make it play in reverse, but the dragging and indicator are now backwards from the way they should be.
The option inversed: true seems like it would do exactly what I'm looking for, but so far as I can tell, it doesn't change anything.
Setting the speed option to a negative value (i.e. speed: -0.4) seems to act the same as setting it to a positive value (it doesn't change anything).
Even reversing the order of the images (I'm using an image list rather than a sprite) doesn't help, since that's essentially exactly the same as using cw: true, so the dragging and indicator are still backwards when doing that. Combining reversed order image list with cw: true is the same as using no options at all, and again, inversed: true appears to have no effect in this case as well.
Check out this JS fiddle to see my test case.
(It's using a sprite rather than an image list, but it behaves the same as an image list in all my tests.)
I've tested with both Reel 1.2.1 and 1.3.
How do I get the reel to autoplay in reverse, while still maintaining the drag and indicator directions?

Use iScroll to create a Picker with the snap-feature

I'm trying to create a list which looks and feels like a typical 'Picker', this means it's a normal list which fades out at the top and bottom, and there's a mask overlay in the middle.
Example
The problem with the normal list is it starts with the first <li>-element on top while it should be in the middle, and scrolling down to the the last element it's at the bottom while it should be in the middle.
To fix this, I implemented some padding. However after scrolling down and back up, the padding isn't applied anymore. I think this has something to do with the maxScrollY in the source code.
Has anyone ever tried something like this, or alternatives?
Here's the code:
var myScroll = new iScroll('hour-list-wrapper', {
snap: "li",
momentum: false,
vScrollbar: false
}
);
http://jsfiddle.net/2kBdv/3

Mobiscroll library would make it easier for you, see the demo here http://demo.mobiscroll.com/select/select
If you want to create your custom solution for this anyway you can look for some inspiration in the source code.

How can I cause the browser to scroll an element horizontally to a pre-defined location without using JavaScript?

I'm working on 'timeline' project, where I have content inside of list items, in a horizontal unordered list. This is contained in a div, so you can scroll left to right through the content.
My client would like buttons to 'goto' each era. I know this is easily achieved through JavaScript. However they also want this to be functional without JavaScript. I've tried adding anchors to each item, but this doesn't really work since you can't control the exact position the browser want's to end up at. It's very buggy using the anchors with horizontal scrolling.
Any ideas?

Use a vertical timeline (the whole page scrolls, no inner scrollbars) when JavaScript isn't available. Anchors work reasonably well in that scenario. An easy way to achieve this is to make the styles that collapse your list and its containing div dependent on a class higher up in the DOM hierarchy, and set that class at load-time using JavaScript. Something like,
.jsEnabled .containingDiv { height: 10em; overflow: auto; }
.jsEnabled .timelineList li { width: 6em; float: left; }
...
function loadTimeStuff()
{
// enable styles that require JS-assisted scrolling
document.body.className = "jsEnabled";
// ...
}
Sure, it won't look as fancy as the full-blown JS-enhanced page, but it's a fallback - if users want the fancy stuff, they need only use a JavaScript-enabled browser...

You're stuck with javascript here for the most part -- as you found out, anchors don't really do the job.
You do have one other alternative, though you probably wont like it any better: Flash.

You'd have to position the anchors at a certain offset to the item you want to have displayed. F.e. if you want the item in the middle of the screen you would have to position the anchor at x = item.x-screenWidth/2 and y = item.y-screenHeight/2, approximately.
I don't think there's another solution, but using Javascript.

I'm afraid you are out of luck if you have to make this work without JavaScript. At least without some hideous hacking that would involve postbacks and dynamically generating some CSS for offsetting the position of the timeline ...
But as Shog9 has said, non JavaScript version would be a fall-back and can't be expected to work as well as the JS version (why would you need JS then) ...