digg

Facebook Connect Join Digg About

Cool Javascript Effect -- Timeout Your Mousovers

pjhyett.com — From TFA: "The problem with most menu systems is that they're really touchy whether you're too fast or slow with the mouse. The trick is to use a timeout with the effect, so it will wait a fraction of a second to pop-up, and a fraction of a second to go away...just enough to make the effect feel solid and not finicky. "

Who dugg this? Made popular Jul 6, 2006

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

57 Comments

show profanity settings
expand all
  • Complexium, on 10/12/2007, -2/+17Nice effect, but horrible design. :P
  • InternetUser, on 10/12/2007, -4/+16BREAKING NEWS EVERYONE!
  • gamekid, on 10/12/2007, -2/+13Especially since we're already used to timeouts in the OS menus, and we hate when someone decides to do it a different way.

    This is cool.
  • crilen007, on 10/12/2007, -4/+13Is it just me, or is the the IQ of the Digg user base inversely effected by the version numbers?
  • jlachowin, on 10/12/2007, -27/+33This will change the face of the intarweb as we know it!
  • Bdog2g2, on 10/12/2007, -1/+7@snds

    You obviously haven't worked for a bunch of managers or supervisors who could care less about what an app does, but rather the link is pink instead of blue.
  • digga, on 10/12/2007, -3/+8How about we not say "From TFA:" ever again...
  • ericdfields, on 10/12/2007, -1/+6what the crap?

    setTimeout() is the core function used in this library. its built in to JS. rather than tack on yet another JS to your site, just modify whatever function your're calling to do setTimeout() before it finishes the routine.

    and then, you know... rtfm: http://www.w3schools.com/js/default.asp
  • rubicante, on 10/12/2007, -3/+8This is basic script.aculo.us functionality, nothing more.
  • jerrygofixit, on 10/12/2007, -3/+7Is it just me or did he use the word 'effected' improperly in a sentence regarding IQ?
  • Negyxo, on 10/12/2007, -5/+9Jesus christ lord all mighty have mercy on our souls! Has anyone ***** looked at the js files? They're ridiculously complicated for a almost purely aesthetic "trick". I mean , don't get me wrong, it's cool, but come on now..
  • blong, on 10/12/2007, -5/+9Doesn't everybody use timeouts?
  • Bradl3y, on 10/12/2007, -1/+5Too bad it doesnt function correctly, while if you mvoe the mouse away, and move it back over while it is rolling away, it will not roll back out, even though your mouse is over it.
  • JakeMcMahon, on 10/12/2007, -2/+6"Cool Javascript Effect" is an oxymoron.
  • Xoligy, on 10/12/2007, -0/+3Exactly. Clicking is much cleaner, quicker, and way move obvious. It's like trying to re-invent the wheel to make it "cooler".
  • rasty, on 10/12/2007, -1/+4Where have I seen this before and before and before?
  • inactive, on 10/12/2007, -0/+3Do you people live under rocks or something?

    How is it a nice effect? It's just delaying the div showing.

    I fail to see how this is useful in any way. Why hover and wait for something? Why not just set the event so it goes when you click on it? Would make a lot more sense making it 500% faster than making someone wait.
  • Xoligy, on 10/12/2007, -0/+2Oooh, you mentioned the forbidden word. You'll get modded down for that. Oh and no it IS NOT web 2.0. This is Web 0.1. It's DHTML, something that's been around way before this Ajax hype.
  • punisherdude, on 10/12/2007, -3/+5Yeah, that is alot of JS. Not sure if it's worth it for the effect.
  • Xoligy, on 10/12/2007, -1/+3It's exactly the oposite to everything you listed.
  • killa62, on 10/12/2007, -0/+2hmm, doesn't seem right, at first, i thought i was mousingover the wrong link..
    maybe make the onmouseover without a timeout but keep the timeout on the other
  • suprchunk, on 10/12/2007, -0/+2I noticed that also and was going to comment as such. Luckily someone as smart as I think I am bothered to test it also and reply before me. Do people not test stuff anymore before raving about it and publishing it?
  • andreas1999, on 10/12/2007, -3/+5unfortunately this is the internet where it's not always obvious if it's a menu or not. which is why the hover effect has to start straight away, people won't leave their cursors hovering a link for 0.4 seconds unless told to do so.
  • andyperfect, on 10/12/2007, -1/+2That's not the point Klaus. Not all web designers who are just testing the waters and experimenting are fluent in javascript.

    Also, please don't use the word 'noob'...ever...please?
  • Terc, on 10/12/2007, -1/+2You didn't like the pink/yellow blocks combination?
    Hmm, I can imagine a nice shadowed milk theme for this...
  • andr3, on 10/12/2007, -0/+1Maybe even make it redundant and have a click behave just like a mouseover. The user might try to click it, but if you put a visual cue, like an arrow or a plus sign, it will signal the user that it is collapsable. Either by mouseovering it or by clicking it.

    Good tip.
  • sahala, on 10/12/2007, -3/+4Aren't you guys overreacting a bit? His code isn't 90k. Those are scritaculous (and prototype) libraries. He could replace the Effect calls with a style change call and the $() function with document.getElementById, and the code would be whatever is in the block.
  • j4s0n, on 10/12/2007, -1/+2Might have been better if he have taken out prototype and scriptaculous for just an effect
  • SuperSloth, on 10/12/2007, -0/+1No, I think I'll have to go with the "not cool" category.

    Part of Web 2.0 is the idea that JavaScript should not do anything with layout or formatting. JS should be for programatic things like form validation (which should be server-side if possible) or AJAX, but content should display properly and links should work properly with scripting disabled. That why CSS is pushed so hard to replace ye olde DHTML crap from 5 years ago.
  • Xoligy, on 10/12/2007, -0/+1@snds

    I don't care.
  • Skinner72, on 10/12/2007, -0/+1Just one more (un)cool feature that turns a perfectly good page into an angry fruit salad.
  • kalleanka, on 10/12/2007, -1/+2OMG! This made it to the front page?

    If this was 1995 I surelly would have digged this too.

    But seriously, even my grandma has seen cooler stuff on the internet than this.
  • polvero, on 10/12/2007, -1/+2No need for Prototype + Scriptaculous to show the trick. Indeed it's clever, but a simple example would have sufficed. The important part of the script is the setTimeout window method. But hey, it had the cool effect. yay.
  • bs0d, on 10/12/2007, -0/+1Nice effect; but Im not too thrilled about the 85kb worth of javascript tacked on to my pages.

    I would like to see the same effect, but with less weight to it.
  • Klaus1250, on 10/12/2007, -3/+3Summerholidays and invasion of the n00bs. No ofence, but ehm, any decent javascript programmer can pull this off and the effect isn't exactly new.
  • tunac, on 10/12/2007, -0/+0http://www.mad4milk.net/tag/weblog/moo.fx Better and lighter version....
  • Mertas, on 10/12/2007, -1/+1No API. Why not make an object with this effect for silmpler use?
    I don't like realization of BlindDown in effects as well, it's buggy with complexed DOM.
  • tallguy78, on 10/12/2007, -1/+1Nice effort but what would be better is to time mouseover on top of a link and if it exceeds say.. 500 ms then show the menu. If you roll over the mouse across you'll have dropdown wave effect. Just an idea.
  • snds, on 10/12/2007, -1/+1Why is it that people are critical about the *look* of a proof of concept application? If you want to make it pretty then implement it yourself, don't just sit there and say "Horrible design"

    It's obviously a nice way of thinking about the prototype.js rollover effects and design wasn't the first thing on his mind.
  • Xoligy, on 10/12/2007, -2/+2Any old ***** will get front page now-a-days. This is not anything special, it has been used by many sites before, and it's the most over complicated way to do it. I done something similar with about 10 lines of code. A few simple timeouts, and some checking of the box state.
  • inkswamp, on 10/12/2007, -4/+3No offense to anyone who found this useful, but this is pretty basic stuff. I've written code to produce a similar effect many times. You shouldn't really need a tutorial to do this. A good, thorough knowledge of javascript/dhtml would be far more useful. (Not trying to be condescending, but it's the truth.)
  • Xoligy, on 10/12/2007, -3/+2I would expect someone who is trashing other peoples' IQs to understand the basic difference between 'effect' and 'affect'.
  • snds, on 10/12/2007, -2/+1@Bdog2g2

    I work in a magazine publishing company, yes I have experienced what you speak of, all too often. However, you're taking it out of context, this is a Web 2.0 proof of concept. Granted the idea has been done before in other types of applications, but this is a good attempt to get this idea into the web mainstream and get other developers to adopt a proven concept for accessibility and functionality.

    If this guy was doing this for a manager a la OfficeSpace style, I'd accept your post as a good point. However, this is not the case, at least in the context of this guys article. He made it for a website he built of his own time and volition.
  • jinexile, on 10/12/2007, -2/+1Andrea that's why you give a visual cue something is happening, in stand alone apps the menus generally highlight/raise/inset/etc when you mouse over them.
  • somerandomnerd, on 10/12/2007, -6/+5Oh, I see. "intarweb." It's as if someone had got confused between "internet" and "world wide web." Hi-larious- or at least it would be if it wasn't something that grumpy old men have been saying on TV for the last year to try and look like they're too aloof to read things that aren't in print.

    But seeing someone calling Digg's moderators idiots is almost as funny as seeing someone on a Star Trek message board calling someone else on a Star Trek message board a nerd, so you get a +1 for that.
  • inactive, on 10/12/2007, -1/+0@somerandomnerd

    I don't even own a television so I've never heard of this clever quip "intarweb". I think the original poster is a genius for coming up with that one. At least I assume it's original.
  • xe54, on 10/12/2007, -1/+0that would be me :-D nice one! _z.
  • snds, on 10/12/2007, -1/+0@Xoligy

    90% of "Web 2.0" is Cross-Browser Compliant DHTML. Ajax is only a small (but integral) portion of it. The idea of AJAX isn't necessarily new Flash has been doing XML calls for years. It's just a more sophisticated form of html that's working in conjunction with Javascript to make the general web experience to have the dynamic sophistication that Flash has provided but without the excessive load times. And now people are adding flash-like effects using DHTML, or Web 0.1 as you so eloquently put it to make the interaction feel more elegant not just raw functionality. So don't be so quick to say that Web 2.0 isn't directly connected with DHTML as people find it adds the level of interactivity that they see in their desktop GUI's on a daily basis. Sure programmers see no need for it but the end user does, and it makes them happy.

    I think a good analogy is that AJAX is RedHat5, not many sophisticated effects if any, just functionality *still buggy but functional* and Web 2.0 (AJAX+DHTML) is the latest build of Ubuntu Linux fancy lookin but retains the functionality of its bretheren.

    I haven't seen the need to dive into the Web 2.0 bandwagon yet when the rest of the world is stuck in Web 1.0. I think the developers are great in making this technology more and more feasible for the rest of the world to interact with including the guy who built the little code this article references. I take it all with a grain of salt until people outside the Open Source Design community start implimenting it.
  • EmmSee, on 10/12/2007, -3/+1Slick. Simple. Less is always more. Nice little code.
  • danieldl, on 10/12/2007, -9/+71998 anyone?
    Isn't this how drop-down menus work(ed)?
  • Fetching more discussions...
    Show 51 - 57 of 57 discussions

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.