0

I've been trying to recreate the "Budget" slider from the Hitmo website: http://hitmo-studio.com/contact.html#budget-panel-container

But I can't get it running as smoothly as the Hitmo slider: http://jsfiddle.net/XNBMr/1/

Things I need:

  • Smoother animation
  • Change the color of the text when "current" to white (no text-shadow) addClass on a tag?
  • "Choose budget" shouldn't be selectable
  • Allow "Blue box" to move when option has been clicked (won't move whilst still hovering)
  • When hovering away from the blue box then back over it, the hover style below flashes through

I would greatly appreciate any assistance with this. I feel it's very close but I know there must be a more streamlined approached, and I want this to be as simple as possible. Thanks!

JV10
  • 891
  • 3
  • 17
  • 40
  • http://nixboxdesigns.com/projects/jquery-lavalamp/demos/original.html#Ride.. you do view source and get the all code? – Parag Aug 16 '12 at 04:08
  • No I got all the code the download. I changed it so the slider doesn't move until it's clicked. $li.not(".back").click(function() { – JV10 Aug 16 '12 at 04:12
  • if u use $li.click(function(e) { move(curr); and remove hover. it works for doubleclick – Parag Aug 16 '12 at 04:23
  • Thanks, but I want it to work using single click – JV10 Aug 16 '12 at 04:25
  • what if you use this? http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery. just change $('#lava li').hover(function () { to $('#lava li').click(function () { – Parag Aug 16 '12 at 04:30
  • you can even set var style = 'easeOutElastic'; to different effect from jquery easing plugin js file – Parag Aug 16 '12 at 04:32

1 Answers1

1

Let us see:

  • Animation: You probably want "easeout" which starts fast, and slows down.
  • White Text & Hover: Adding a class is pretty simple (but I worry about that css, it is not really created for performance; see vanseodesign or mozilla). I also removed a little of the waist but it really should be dropped and redone (it is pretty rough).
  • Click & Budget: ummm, basic jquery events (I take it you found the code and tried to modify it); and preventing the budget from getting re-selected is just a simple conditional...

-- DEMO --

SciSpear
  • 2,008
  • 18
  • 18
  • Thanks SciSpear! That's working how I hoped it would. I'll redo the CSS as it's just a mash-up at the moment. – JV10 Aug 16 '12 at 05:11