Develop Reference

JQuery Scrolling event fire many time

Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?

Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.

Stopping scroll when dragging on touch devices

I have the following drag-and-drop list component which works exactly as it should with mouse based events and should work that way with touch events but unfortunately while the touch events are starting to drag the list item the screen scrolls at the same time (making the drag pretty ineffectual).
component example
github source
What i'd like to know is what is the most effect ways to prevent this scroll event from taking place. This code was written using the Ember framework but a JS-specific answer is fine.

You can prevent the default behaviour:
$(".handle").on('touchstart',function(ev) {ev.preventDefault();})

iPhone touchmove bypass

I am building a mobile website that contains fixed elements. Unfortunately the iPhone handles fixed elements as if they were static.
I know of a solution where you put that image into a scrollable div, so the elements stay at their position while you scroll. But then on the iPhone you have to use two fingers for scrolling which is very uncomfortable.
Can you show me a way to bind the two-finger-touchmove to one finger or switch the touchmove events?
Thanks in advance!

Look into UIGestures. You can map one to multiples touches. You can also check what type of gesture it is. Eg. Panning, Pinching, Shake, Swipe right etc...

Differentiate between a scroll caused by .scrollLeft and a user trying to scroll in an HTML page

I have a scrollbar that has to follow some timeline. It is being constantly scrolled with .scrollLeft using setInterval.
I still want the user to be able to naturally take control and just drag the scrollbar away. If I can detect the user did that, I would just turn off the setInterval timer and leave the control to the user until he explicitly turns the auto scroll back on.
Is there a way to differentiate the user scroll event, from the scroll created by .scrollLeft?

You can set a flag before changing scrollLeft and clear it afterwards, then check the flag in the scroll event.
Since Javascript is run on the UI thread, it is not possible for the user to scroll while your code is running.

One alternative is to give up using a scroll-bar at all and do it using CSS and a jQuery slider control. This also gives you the option of making it look more like a time-line. you can set the scroller elements to whatever CSS you want.
There are a few out there, but it's not too hard to roll-your-own using a jQuery draggable control and constraining one axis inside a long, narrow container DIV.

Simple JavaScript drag and drop witout the help of a library

I am simply looking for a way of using drag and drop without jquery or any other library. If a dragged object is dropped on another element the later element should start an event (in FF - better would be browser independent).
I know that drag and drop for JavaScript was discussed sometimes before but the previous postings didn't help me.
Although I found some examples it is not clear to me if there is a "drop" or "dragdrop" events exist but these things don't work:
<p ondrop='alert("It worked");'>Text</p>
<p ondragdrop='alert("It worked");'>Text</p>
How could this be done?
Many thanks in advance.

I agree with the other answers. A library will save you a lot of time and headache. This is coming from someone who just recently created a drag-and-drop control from scratch.
If you insist though this is what you'll need to do:
Bind a onmousedown event to the div you want to drag (div.onmousedown).
Change the div's position style to absolute (div.style.position = 'absolute')
Begin capturing mouse movement (document.onmousemove).
On mouse move update the div's position (div.style.top|left = '[location]px')
On the div's onmouseup event (or the document's) unbind all the handlers and do any other cleanup (null out position changes, etc).
Some problems a library will probably solve:
While dragging you will select text on the page (looks ugly).
Binding to events is different between browsers.
You have to calculate the size of the element being dragged if you want to show placeholders and to make it not "pop" when you begin dragging the control (since changing to absolute positioning will remove the element from flow).
You will probably want your dragged element to move fluidly so you will have to store some mouse offset when selecting the element or automatically center the element to the mouse.
If you want to drag an item in a list you'll have to write a ton more custom code for that list to accept the dragged item.
You'll have to take into consideration dragging when the window is scrolled and possibly dragging inside other elements that are positioned strangely.

I am simply looking for a way of using drag and drop without jquery or any other library.
I'm sorry, but there are no such thing as simply drag and drop without any library. You can write it all yourself, but that will be a lot of JS to make it work in all browsers.

Hmm. It's probably not that simple that you'd want to do it yourself, but I would look at Peter Michaux's FORK Javascript drag and drop library -- unlike JQuery or all those big libraries, FORK's modules are decoupled from each other, and are simple enough that you could probably look at Peter's source code and figure out the bits you need. (edit: I'd just use FORK.Drag as it's really small: 7.6KB total minified)

While I agree that library is the way to go, the answer you want is onmousedown, onmousemove, onmouseup. You have to handle those three events.
In onmousedown you'd find the target (event.target or similar in different browsers) and set draggedObject = event.target. You'd also start handling the onmousemove event.
Whenever the onmousemove event fired, you'd move the dragged element based on the difference in position since last time the onmousemove event fired.
In the onmouseup event, you'd clear your draggedObject variable and stop handling onmousemove.
It's not very crossbrowser, but it's the core of what you'd need to do for dragging and dropping.