Clear background Blurry background

  • dev / 

    Dragdealer JS

    The extra mile

    A few weeks ago I posted a JavaScript Slider component, the same I used for my comment button. One problem was that it lacked touch support and therefore was unusable on mobile phones. But the surprise came when a friendly chap named Pratik implemented it without even me knowing, then contacted me to share his contribution. I then saw the potential and decided to take it to the next step.

    Obviously, I had to come up with a less vanilla name than Slider, but I wanted it to be something smart. The ongoing name brainstorming spanned over a few days, but after a bunch of uninspired combinations, it finally hit me. Presenting: Dragdealer JS, drag provider – the good stuff.

    I chose Google Code for hosting. This is the project page: code.google.com/p/dragdealer/, where you can find the repository and the files to download, but I also have an internal project page with more in-depth details and demos: code.ovidiu.ch/dragdealer/.

    So what does it do?

    A LOT. Really. While the base code is mainly the same, It's extended to another dimension... literally, it's 2d now. Basically it gets dragged, tapped, even somehow stretched; then it slides, snaps, responds and reacts (I'm talking about the callbacks and the runtime methods). And of course, it has the touch support that Pratik originally added.

    If you have a touch device at hand try the comment slider below, which is now a Dragdealer implementation, and let me know what device/browser did you manage to post from.

    Yeah baby, I'm bringing the JavaScript back!

    © June 2010 Ovidiu Cherecheș

  • Excellent work! I am using it in a music player that I'm writing as a progress bar, however, as the track progressed the value of the slider gets set every few ms, and so when attempting to do seeking the value is overwritten by setValue. I fixed it by locking the slider until the handleTouchHandler has gone through its business and the return method has been called.

    My changes are at github.com/TheFuzzball/Vibe/blob/bd47611b61d74a783871b099fa93425744b9c68c/modules/UI/Widget/DragDealer/DragDealer.js, in case you're interested. Again, that's so much for your work.

    +Reply

    Posted May 2012, by Luke Channings

  • Hey,
    I def love this script, as everyone else. But I am trying to dynamically add slides once reaching more than halfway through the existing slides. Is this script capable of doing something like that...Currently, i am able to append additional slides, but the step gets messed up and the slider now longer snaps to the end of the slide. I was hoping you may know of a solution to fix this issue.

    Any ideas will help. Thanks in advance and thanks again for the awesome script.

    +Reply

    Posted May 2012, by Jason

  • I have a problem with dragdealer, it blocks vertical scroll on iphone. I need it to slide image only on horizontal scroll, without blocking vertical document scrolling. Is it possible?

    +Reply

    Posted May 2012, by Andrey

  • Great stuff, have used this script heaps! Ran into problems though when I wrote two vertical scrolling windows into one page. What do I have to change to have two separate windows with a vertical scroller each.
    D

    +Reply

    Posted May 2012, by Dean

    You'll have to be a tad more specific in order to understand what exactly goes wrong there. Maybe a link to some work in progress would help.

    +Reply

    Posted May 2012, by Ovidiu Cherecheș

    Thanks Ovidiu, I've uploaded an example here.. d2328758.u211.cirrucloud.com/dragdealer/double-example.html

    You can also download the source files of this example here... d2328758.u211.cirrucloud.com/dragdealer/double.zip

    I can't get two vertical dragdealer windows to work on the same page.

    Thanks again,
    Dean

    +Reply

    Posted May 2012, by Dean

    Dean, you have the same IDs for both sliders. IDs are supposed to be unique, the second slider doesn't even get initialized at all because it is ignored.

    +Reply

    Posted May 2012, by Ovidiu Cherecheș

  • Mr. Ovidiu Hello and congratulations on your script.

    Unfortunately, I can not create clickable links on the map.
    With a script made ​​to your forum, this is the card that is not moving to touch on Iphone with links that work, and move the map or the links do not work!
    Can anyone give me knowledge, please?
    Thank you in advance

    +Reply

    Posted March 2012, by Eric

  • h! I love this script - like we all do! I`m just wondering about one thing: Is it possible to change the value which is needed to drag the image (in your last example) till it turns over? I`d like to shorten the drag way to the next image. Once again - really really great piece of code here!

    +Reply

    Posted March 2012, by Mat

  • Hi,
    Great script. I have a question though. Suppose you are using dragdealer as an image slider. Its all good. But the problem is when the dragdealer fills the entire screen I cant use touch sliding gesture to go up or down. So basically is it possible to use dragdealer only as horizontal slider and enable default action when sliding up and down?

    +Reply

    Posted March 2012, by Sinan Taga

  • Hi. First of all, congratulations for this great script!
    I have one question: which parameter do I have to change in the "Slideshow w/ controls" in order to have the wrapper move horizontally rather than vertically?
    Thanks again for the script.
    Bye

    +Reply

    Posted February 2012, by Uccio81

    Well it already is moving horizontally. But if you meant the other way around, this is how you do it:

    { vertical: true, horizontal: false }

    +Reply

    Posted February 2012, by Ovidiu Cherecheș

    I meant the grey border (in the example page, the one around the texts "Lorem", "Ipsum", ..., on the right of the images, which is 3px wide).
    Second thing: in which file do I have to change this parameter? Sorry, but I'm not much able with scripts... Thanks again.

    +Reply

    Posted February 2012, by Uccio81

  • Thank you for the great script.
    Although scroll-bar is used, how should js be corrected in order to put two in order up and down?

    +Reply

    Posted February 2012, by animitsu

    fresh

    +Reply

    Posted April 2012, by josh

  • Nice little script! I am just curios, is there a callback for when it has finished animating and come to a full stop? I can only find callbacks for when you press and release the handle?

    +Reply

    Posted February 2012, by Nils

    You can use the animationCallback and check for when the values are equal to 1.

    +Reply

    Posted February 2012, by Ovidiu Cherecheș

  • Hi, I think I may have posted this comment in another of your forums yesterday but I can't find it now -- sorry if this is a duplicate! First off I absolutely love this script, I've used it on afew projects now and it makes my life so much easier, so thank you! An upcoming project is going to need slides of varying widths, and I'm wondering if there's any practical way to make dragdealer work in that scenario -- basically I'm thinking that I can store the widths of all slides in an array, and possibly use the animation callback to check whether we're close to one of those values, then trigger whatever mechanism dragdealer uses for determining whether the border of a slide has been reached. Is that at all possible, or is there some alternate approach that could work? Any insights would be much appreciated! PS, do you have a donate link somewhere, I'd like to contribute something for your work!

    +Reply

    Posted February 2012, by David

  • Hello! This is plugin supports the scroll wheel mouse?

    +Reply

    Posted February 2012, by Kostya

  • Thanks a lot for the script. How will I be able to run a block of code when the animation is totally finished?

    +Reply

    Posted January 2012, by Jermaine

    I found a workaround by using this calculation

    var result = ((this.value.current)[0] * (this.steps - 1)) + 1;

    in the 'animationFeedback' property, a whole number is returned when the animation completes, therefore allowing me to run my callback function like this:

    if(result % 1 == 0) {
// run this code if result reaches a whole number
}

    +Reply

    Posted January 2012, by Jermaine

    And this code also works for the 'callback' property as well. Thanks again for this brilliant component.

    +Reply

    Posted January 2012, by Jermaine Oppong

  • awesum work!!!

    +Reply

    Posted December 2011, by ankit

  • Great script. Any way to have an event "on touch"? IE there is "on move", "on stop" how about "on start"?

    +Reply

    Posted November 2011, by kevin

  • Yes Ovidiu! Very nice scripts!
    But i have a question:
    1) is it somehow possible to replace a photo in the slideshow w/controls with a div container and if that would work what happens 2) if there is a link or something like this (drag/link). What i have to change?
    Is it possible? Thank you! Above all, nice page. Greetings from Switzerland,
    Bodo

    +Reply

    Posted November 2011, by bodo

  • Hi, Was wondering, can you have a 'Canvas Mask' with an image that includes 6 slides, 3 columns and 2 rows? How would you set this up?

    +Reply

    Posted November 2011, by dave

  • I put the dragdealer in a div hidden by css, when i try to show the div through jquery the div with the slider appears but doesnt work.. any ideas how i can fix my problem?

    +Reply

    Posted November 2011, by artsmorgan

    Dragdealer requires the width and the height of its HTML elements to setup correctly. But when an element is hidden (display: none), its width and height are not available.

    A solution would be to initialize Dragdealer just after you display that hidden DIV. There are many more paths to follow but they differ from case to case.

    Let me know if that works for you.

    +Reply

    Posted November 2011, by Ovidiu Cherecheș

  • I simply love the Dragdealer and have used it for a host of projects over the course of the last year, but I have run into a strange problem, which I hope that you can find a solution to: It seems that when you define e.g. { steps: 100 } the number in the middle of the range, in this case 50 is not present. The middle number is the ONLY number in the range that is missing.

    In the above case, doing a slider.setValue(0.5) results in the slider being set to 0.494949..., which puzzled me for a long time, until I tried to manually slide to 0.5 just to realize that the number wasn't in the range.

    Keep up the good work

    +Reply

    Posted October 2011, by Adam Barry

    Thanks for your kind words. As for your problem, try setting the steps to 101.

    The best way to understand this is through fingers: do 4 fingers have a middle finger? No, you need an odd number to have one.

    Let me know if this helps.

    +Reply

    Posted October 2011, by Ovidiu Cherecheș

  • With reference to demo #2, drag is on the dragger. Can you make a demo where the drag is on the content and the dragger also. When i try to do the dragger gets out of sync with the content.
    BTW great job

    +Reply

    Posted September 2011, by Son Thanh Tran

  • Hi, first of all nice work, thank you. Is it possible to make the content of slideshow clickable/selectable?

    +Reply

    Posted September 2011, by arief

    That depends, is your slideshow a draggable Dragdealer element itself or just controlled by one?
    If it is, than it is only clickable (which is by default), being selectable would comprimise the dragging itself. It is basically the same behavior.

    +Reply

    Posted September 2011, by Ovidiu Cherecheș

    Hello again Ovidiu. Another issue crept up in regards to making the text content of the slideshow selectable? I tried the suggestion here(code.google.com/p/dragdealer/issues/detail?id=6) and it works for Firefox and Opera but not IE, Chrome and Safari. I was hoping you can provide a solution to help me achieve this. I have set disabled to true and loose to false but I still cannot select the text for the other browsers.

    Thank you very much in advance for your help.

    +Reply

    Posted January 2012, by Jermaine Oppong

  • this design is sux man. youre great but i have to say

    +Reply

    Posted August 2011, by Davi Albuquerque

  • When I drag the handler with the mouse the cursor is not moving in sync with it. Instead, every time I click within the handler div, the cursor is reset back to it original position. Any ideas why this is happening?

    +Reply

    Posted August 2011, by Steve

    Figured it out. My example is essentially the inverse of what you have on your demo page. Handler is scrolling vertically while the cursor moves horizontally. Needed to use the y argument in the animationCallback instead of x. Works great!

    +Reply

    Posted August 2011, by Steve

  • Hi man!

    Pretty cool dragger I must say, great job!
    I have a "small" issue or request you may say.
    I would like it in fullscreen while keeping aspect ratio of the image/content.
    I manage to do it with pure css (%) but as you know to keep the aspect of
    the image/content you need jquery. How in hell do I do that? ;)

    / Keep it up !!

    +Reply

    Posted July 2011, by Fred

  • Hello, I'm using your excellent DragDealer JS library for an image pan control quite similar to your last example (canvas mask). I would like to resize the handle to make a zoom in/out effect. Setting new dimensions in handle.style.width and handle.style.height in Javascript doesn't work. How can I do ? Thanks a lot :)

    +Reply

    Posted July 2011, by Pierre-Marie Baty

    I found it. I needed to resize the handle with Javascript, then call dragdealerobject.setBounds (). Works beautifully :))

    +Reply

    Posted July 2011, by Pierre-Marie Baty

    I want to implement dual slider with this? Is it possible. Or can I restrict use to select only range 0-0.6 within given width ?

    +Reply

    Posted September 2011, by Chandan

  • hello

    +Reply

    Posted June 2011, by Hidehiko Maeda

    Огромное спасибо!

    +Reply

    Posted April 2012, by Тимофей 

  • slideshow.setStep((slideshow.getClosestSteps(slideshow.value.current)[0] * (slideshow.steps - 1)) + 2);

    Here you go, next button. Change the +2 to +1 for previous. Cheers. :P

    +Reply

    Posted June 2011, by Andrew

    left:

    slideshow.setStep((slideshow.getClosestSteps(slideshow.value.current)[0] * (slideshow.steps - 1)) );

    right:

    slideshow.setStep((slideshow.getClosestSteps(slideshow.value.current)[0] * (slideshow.steps - 1)) + 2);

    up:

    slideshow.setStep(0, slideshow.getClosestSteps(slideshow.value.current)[1] * (slideshow.steps - 1));

    down:

    slideshow.setStep(0, (slideshow.getClosestSteps(slideshow.value.current)[1] * (slideshow.steps - 1)) + 2);

    thanks for the tip anyway

    +Reply

    Posted September 2011, by omercrafts

    how do we merge two scripts slider and auto slideshow

    +Reply

    Posted December 2011, by michel

  • Cool±

    +Reply

    Posted June 2011, by Dragos

  • It works in the default browser on Android but is broken in Firefox on Android. Likely because Firefox uses the left and right drag to get to the tabs and settings?

    +Reply

    Posted June 2011, by getsetbro

    That is correct. I installed Firefox on my N1 just to see what you're talking about. A browser should give you more freedom, keeping those gestures for itself is just wrong :). Notice the script is actually working when you click the four links in the last demo. Thanks for the heads up!

    +Reply

    Posted June 2011, by Ovidiu Cherecheș

  • There seems to be a bug with the x return if you are shifting from 0-1. When you are sending a return percentage, it will fluctuate from floor and ceil if you would. So, using this to use as a way to return choice 0-1-2-3-4-....26 will not work with Math.floor(x*total) or Math.ceil(x*total) it will skip and not be usable in this way. You should have a function that returns the step itself instead of a float of 0-1.

    +Reply

    Posted June 2011, by kristoffe

    Unless you set the "steps" option, it does not fluctuate from floor and ceil. A callback for returning the step directly would be a nice-to-have, indeed; but you can still retrieve it easily using Math.round(x * (numSteps - 1)) + 1.

    +Reply

    Posted June 2011, by Ovidiu Cherecheș

  • Im having trouble dragging the outer handler horizontally while dragging the inner handle vertically like this site www.bartleboglehegarty.com/#!/india

    I can get the scrollbar to sync while dragging the content, but when i use the scollbar of the scroller to drag content - it gets out of sync.

    Appreciate any help :)

    great stuff btw

    +Reply

    Posted June 2011, by son thanh tran

    The example you mentioned doesn't seem to be implemented in Dragdealer; if you have your own implementation somewhere online it would help me understand the problem better. Let me know.

    +Reply

    Posted June 2011, by Ovidiu Cherecheș

    Theres a sample of what i've accomplished so far here: www.freshcode.dk/dd/

    +Reply

    Posted June 2011, by son thanh tran

  • Thanks for this great script! i'm playing with the slideshow. Is there a way to get the current element? I would like to do some stuff depending on the current image displayed.

    +Reply

    Posted May 2011, by Adau

  • First...great work. How do you reset the "x" value of the slider without reloading the page? example, I call via function "Slider = new Dragdealer('simple-slider',{
    x: NumberVariable,..." when the page first loads, I set the value of "x" to a fraction such as "0.25" based on value assigned to NumberVariable. This works perfect the first time the page loads as x is zero so now x is 0.25 and the slider position is correctly at "25%". When slide starts, it also starts at the correct value...(left)24,23,22 or (right)26,27,28....

    The problem I am running into though is if I send another "x" value on the fly without reloading the page, it's new start point is now relative to the last "x" value. If I do this enough times and eventually the slider locks at 50% or 0,5. it appears that even if x is set to a different number, x retains it's previous value and simply adds the new value.

    so how can we force a reset before sending a new "x" value without reloading the page? IE Be able to call the slider, send it a new "x" value. the "myVariable.setValue" example is not what I am looking for.

    Know what I mean?

    +Reply

    Posted May 2011, by kevin

  • I try to use Dragdealer on my Iphone 4. No success. It seems the animationCallback was not working ! the function was not called
    Any idea ?

    +Reply

    Posted April 2011, by rouillier

    I tested it on the iPhone 4 and it worked fine for me. Is it working properly or differently on any other device? Maybe it doesn't have anything to do with the device itself but rather with an error in your code. You can send me a link if you want me to check it out.

    +Reply

    Posted April 2011, by Ovidiu Cherecheș

    Updates to Firefox on Android have happened and dragdealer works better there. =]

    +Reply

    Posted February 2012, by getsetbro

  • Hi, good script.
    But I would like to use the drag function and "prev / next" button to scroll between images. How can I use that.

    +Reply

    Posted April 2011, by casper

    You can start off with the "Slideshow w/ controls" example from the demo page and then keep the current position stored in a variable. Basically you need to make use of the setStep() method, e.g., yourSlider.setStep(current +/- 1);

    +Reply

    Posted April 2011, by Ovidiu Cherecheș

  • Very interested in Dragdealer, but new on it.
    How could i get the value x and y to display it in an input file or a div ?

    Thanks for answer

    +Reply

    Posted April 2011, by Rouillier Patrick

    Simple, through the animationCallback option. The callback function receives two arguments, the X and the Y value of the slider. After that, changing the content of a div is as easy as setting its innerHTML property (with the received arguments in this case).

    +Reply

    Posted April 2011, by Ovidiu Cherecheș

  • As avea nevoie de un pic de ajutor privind folosirea solutiei Photoslice.
    Avem scriptul function.js si fisierul css dar care sunt elementele obligatorii ce trebuie folosite in body?
    Cu multumiri!

    +Reply

    Posted April 2011, by Vasile

  • Hi, thank's a lot for this great script.
    I've got a problem with IE8. IE8 return an error (line 53, char 4 dragdealer.js).
    The error is the same you can view when visito yout page: code.ovidiu.ch/dragdealer/.
    Browsing with IE8 that page as well make the error.
    Can you say me how to fix it?
    Thank's a lot.

    +Reply

    Posted March 2011, by Andrea

    It's weird, I got that error once, and never again after I refreshed the page. Not even after restarting IE. IE has a strange way of loading and caching pages. It's still a bit suspicious that we got the warning on the same line. I'll look it up when I have more time. Thanks for your interest!

    +Reply

    Posted March 2011, by Ovidiu Cherecheș

  • Hi. This is a really great plug-in. Thank you. Do you or does anyone else have a working example of a horizontal scroll-bar (basically the vertical example on code.ovidiu.ch/dragdealer/ but with the correct API calls and callback function to make a horizontal scroll-bar move content horizontally)? Any responses gratefully received.

    +Reply

    Posted March 2011, by Damian Stafford

  • Hi.
    It's a great idea!!!!
    Please can you tell the way to set all steps in an instant mode?
    I have 300 images and I want to pass from the beginning to end without loading the overall set.
    Is it possible?
    Gianluca.

    +Reply

    Posted March 2011, by Gianluca Rocchi

  • Hi,
    may be i misunderstood something. I downloaded the zip file and found the
    dragdealer.js and .css.
    But it seems to me that also dragdeler-main.js is necessary
    wheer can I find it ?
    thanks a lot

    +Reply

    Posted February 2011, by fabrizio

    No, not really. dragdealer-main.js contains the code for the examples, which you can find next to each of them, into their corresponding code block. What are you trying to achieve?

    +Reply

    Posted February 2011, by Ovidiu Cherecheș

    Now it's clear, thank you - fabrizio

    +Reply

    Posted February 2011, by fabrizio

  • Is it possible to start the slideshow on another slide than slide 1?

    +Reply

    Posted February 2011, by kie_ken

    You can call object.setStep(x) after initializing the Dragdealer object, but you can see it animating. If you want it to be instant, there is an "x" option when initializing the Dragdealer object, it accepts an interval between 0 and 1; so you'll need an easy formula for "slides", x: (slide - 1) / ( numSlides - 1).

    +Reply

    Posted February 2011, by Ovidiu Cherecheș

  • I can't seem to get your vertical slide bar to work... I'm embarrassed to ask but could you email me a complete bare-bones example of how to generate one? I copy and past the code form your example but then the slider wont move. I am for sure using the right version.

    +Reply

    Posted January 2011, by Dalton

    In order to clear the air, @Dalton had set the vertical option true, but didn't change the actual CSS to make the element vertical, we sorted the problem easily.

    +Reply

    Posted February 2011, by Ovidiu Cherecheș

  • Hi,
    I try to use the "canvas-mask" with a form in a slide. Strangely, I can't access to the form fields.
    Any idea to fix it?
    Benoit (France)

    +Reply

    Posted January 2011, by Benoit

  • Hi, very cool Script. I am a beginner in JS and use the Script on a gallery web page. This also functions really, now I would like to use not only slide and drag, but also jump by arrow keys to the next and previous picture. Could you help me in it? Thank you

    +Reply

    Posted January 2011, by Ingolf

  • Doesn't seem to work with slides at 100% width & height?

    +Reply

    Posted December 2010, by kie_ken

    Can you show me an example? I don't see why it wouldn't.

    +Reply

    Posted December 2010, by Ovidiu Cherecheș

    An online example: bit.ly/fjaFul
    I can't get to the second slide (every slide has a different background and image).

    +Reply

    Posted January 2011, by kie_ken

    What you have there is a CSS misconception. The .handle has 800% width and the .slide has 100%. You would probably expect the slide to take its percentage from the window, but it does from its parent, which is .handle and has 800% width. Catch my drift? In other words, in your example only, the .slide should have 12.5% width.

    +Reply

    Posted January 2011, by Ovidiu Cherecheș

    it works! Thx

    +Reply

    Posted January 2011, by kie_ken

  • Hi, I'm new to JS and having great difficulties using this slider control!

    I'm trying to get the value (x?) of the horizontal handle position to update the value of a speed variable. But I don't understand how to get this value on a handle position change. I tried to understand how one determines the value of x from the demos, but I didn't succeed!

    Could someone please provide me with a "for-dummies" explanation!

    Thkx

    +Reply

    Posted December 2010, by Olivier

  • Hi! Your slider is quite a good solution for us people that are looking for lite javascript libraries. And you made quite a work :-)

    I'm now testing it but I don't know how to settle a minimum and maximum value for x and a step interval. For isntance I want the slide go from 100 to 5000 and step 500 each time. How can I achieve, this? I tried different solutions but none work. There is one of them:

    window.onload = function() {
    var progresso = new Dragdealer('slider2', {
    x: [100, 5000],
    callback: function(val_slider) {
        document.getElementById("vals").innerHTML = val_slider; // this is OK
    }});
    progresso.setValue(x0, x1, true);
}

    Thanks,
    Miguel

    +Reply

    Posted November 2010, by Miguel

  • I attached a click event to a slide, but that get also fired when you slide, how can I fix this?

    +Reply

    Posted November 2010, by arne

    Very nice and small package! I'm also playing with drag-n-drop in JavaScript. My lib uses HTML table to define drop positions and allows dragging table content.

    Anyway, your sliders looks impressive. Thank you!

    +Reply

    Posted November 2010, by Darko | www.redips.net

  • Hi,
    sometime happen to match this error in firebug console:

    tipElement.ownerDocument is null
    [Break on this error] Filtered chrome url chrome://browser/content/browser.js

    Someone could help me ?
    thanks in advance

    +Reply

    Posted August 2010, by gex.rossi

  • Are you available for contract work? I have a project that I need help with and I love your stuff. Please let me know. Thanks.

    +Reply

    Posted August 2010, by Michelle

  • It works great, but is there a reason that you never stop the setInterval() call and even when nothing is dragged your animate() function is being called every 25 milliseconds, which is A LOT. I am making some web-apps using this slider and the pages all use AJAX so will not be refreshed often, and I think all those unnecessary calls can significantly affect the performance, especially when used on mobile device browsers.

    G.

    +Reply

    Posted July 2010, by Georgi

    I think initializing the interval every time a user interacts or a method is being called is an even bigger effort. Having AJAX calls changes everything, but the condition should be placed in your callback.

    +Reply

    Posted July 2010, by Ovidiu Cherecheș

  • This is seriously amazing. Your super flexible, super simple API enables me to do exactly what I want with very little effort. Great job, and thanks a lot!

    +Reply

    Posted July 2010, by Bojan

  • Hi, thanks for this script! Got it working in iPad using uiwebview. Encountered 1 issue though, if I have an element inside let's say a link inside <div class="handle">, there's no way I can click/tap on that link. Already tried disable() method, but I still can't get it to work. Any ideas? Thanks again!

    +Reply

    Posted July 2010, by Jan

  • verry good Jquarry i have ever seen
    Сафари Ҳилларӣ Клинтон ба Қафқоз

    +Reply

    Posted July 2010, by ismonov

  • I can't click slide inside handle (Map by jquery)

    $("#slideshow .handle .slice").click(function() {
    alert('click');
});

    It's work find in PC browser but not work in iPad :p

    +Reply

    Posted July 2010, by chutawat

    That's because you don't click on iPad, you touch. There are separate events for click and touch. I don't know if jQuery has both implemented though.

    +Reply

    Posted July 2010, by Ovidiu Cherecheș

    Thank you !. i found that event. I use

    $("#slideshow .handle .slice").bind('touchend', function() {
    alert('click');
});

    :D

    +Reply

    Posted July 2010, by chutawat

  • Сan i cancel the animation on dragdiler. (That is, the faster the move the mouse farther will move the slider.)

    +Reply

    Posted June 2010, by Ilya

    If you're referring to the sliding (upon mouse release) than yes, it's the option parameter called "slide" and can be set to false.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • neat sliders :D i love how you put it.

    +Reply

    Posted June 2010, by carl

  • Great work. I am using this in a production environment now and have a jquery API for it.

    One constructive comment:

    When you want to use both steps (via scroll arrows) AND dragging in the same interface, the 'dealer' should recognize what step you are nearest to so when you decide to shift from dragging to using scroll arrows it does not think you are still closest to your last set step. This can be confusing to the user.

    +Reply

    Posted June 2010, by Ben

    I'm sorry, I don't really understand the scenario you are talking about. You can send me an email if you have a live example of that behavior or to show me the jQuery API you were talking about. You can find my contact details at ovidiu.ch. Thanks!

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • It's a cool script and I love the way you've used it for your "Post comment" button, but alas it doesn't work at all on my Symbian S60v5 phone... I've logged the details as an issue here: code.google.com/p/dragdealer/issues/detail?id=2

    +Reply

    Posted June 2010, by Marcus Tucker

    Your phone/browser might not dispatch mouse nor touch events, but we'll have to test. Thanks for opening that issue ticket! I'll look more into it and find some way to identify the nature of the problem and continue the discussion there.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • Very Nice!

    +Reply

    Posted June 2010, by James Stansell

  • When used within a div that is hidden by style="display:none" and then toggled to display:block to show, the red scroll doesn't work...any ideas?

    +Reply

    Posted June 2010, by opacity

    When the script inits, it does some calculations based on html elements' sizes. When their display is set to none, those values are null. You could use visibility:hidden instead of display:none but that might not be suited for your case. A viable solution is to (re)init the script just after you displayed it to block.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • Great stuff, I'm trying to implement the Slideshow w/ controls on my site. But I cannot get it to work. I even tried saving the entire demo page and then progressively chopping away the unneccesary code. It won't display the actual pictures (changed all the urls in all files, css and all), only the controls. When I take away the demos above, even this halts. Can you put up a simple demo of this application, with the neccessary javascript in the header? That way it would be clear what is needed.

    Also, I'm wondering if this could be accomplished by referencing the images in the html instead of the css, (probably with a style attribute). This makes it much easier to implement into a wordpress theme, plugin or other dynamic backends for easy content update.

    Good, sturdy and innovative work!

    +Reply

    Posted June 2010, by lastafa

    Thanks for your appreciation. OK, I think a demo page in the release archive would've been useful so you didn't need to go trough the webpage source. I'll consider this for the new release. I also sent you a private email requesting more details on the particular case so I can help you work it out.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • you are a superstar, thanks for sharing.
    just curious, how iE handles this plugin?
    IE 7 works well?

    +Reply

    Posted June 2010, by pol moneys

    IE6, IE7, IE8, you name it. :)

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • love the slider component

    +Reply

    Posted June 2010, by Riyadh

  • Great job... Works great on an iPad.

    +Reply

    Posted June 2010, by Amir

  • Greaaaaaaaaat!

    +Reply

    Posted June 2010, by Neurus

  • Cann you give us a hint, how to integrate it in WordPress as Comment Slider. Like here.
    Thank you!

    +Reply

    Posted June 2010, by Timmy

    Well as far as front-end goes, I see no problems. But you're probably looking for a compact plugin thingie to bind with the back-end, which I currently don't have. Maybe someone with WP experience is willing create it, in case I don't find the time.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • Great Job! WOW : )

    +Reply

    Posted June 2010, by Wayne

  • fantastic. But I have newbie question. How does drag-dealer know which DOM element to affect? As I read the code examples, I don't see a connection -- such as a named element ID. Any feedback would be appreciated as I'm clearly missing something.

    +Reply

    Posted June 2010, by rick

    The first parameter that the Dragdealer takes is the element ID. Read the description for "wrapper" under JS API.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • This is some good stuff, I need to learn some javascript but the tutorials I have been doing are really boring and pointless, like alerts and write.document and log.console, I want to do stuff like this !
    thanks for keeping me interested in javascript :)

    Cheers

    +Reply

    Posted June 2010, by pixelBender67

  • Look good but is it possible to have 2 handlers in the same range? And if so, is it also possible that they cannot pass each other? So they block each other and you cannot drag on over the other? Hope this explanation makes any sense :)

    And how to do this?

    Kind regards,

    +Reply

    Posted June 2010, by Maurice

    I understand what you mean. I was even thinking about the exact same thing a few days ago, since it's a common drag and drop scenario. However, it's not supported at the moment. I am thinking about implementing this somehow, but I'm also trying not to over complicate the script. I'll let you know.

    +Reply

    Posted June 2010, by Ovidiu Cherecheș

  • Good job, easy to use :)

    +Reply

    Posted June 2010, by Manmohanjit Singh

  • Finally! A *simple* slider control!

    +Reply

    Posted June 2010, by Dave

  • Works as expected on an Android phone

    +Reply

    Posted June 2010, by Twidi

  • Yeah! Great piece of JavaScript *library agnostic*

    Such a shame you don't have an RSS feed on your blog ;)

    +Reply

    Posted June 2010, by Kemar

  • Works on both my Android 1.6 and 2.1 phones. Also tested with Skyfire and it works. Sweeta!!!

    +Reply

    Posted June 2010, by Ciprian

What do you think?

And you are?

...