O'Reilly

iPhone Click Effect Using MooTools or jQuery

By on  

One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that on any page? We can easily do so using MooTools or jQuery.

The CSS

.clicked { padding:1px 2px; -moz-border-radius:5px; background:#aaa; }

Style as you wish!

The MooTools JavaScript

window.addEvent('domready',function() {
	var lynx = $$('a');
	lynx.addEvent('click',function(e) {
		lynx.removeClass('clicked'); //remove from others
		this.addClass('clicked');
	});
});

The syntax between the two frameworks is very similar.

The jQuery JavaScript

$(document).ready(function() {
	var lynx = $('a');
	lynx.click(function(e) {
		lynx.removeClass('clicked');
		$(this).addClass('clicked');
	});
});

My example shows the gray background but what's great is that since the snippet uses a CSS class, you can make the background any color you'd like. You could add a spinner next to the link or italicize the link text. Of course when a link is clicked there's only a moment where you can see the added effect but I think it's worth it!

Track.js Error Reporting

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • Create Spinning Rays with CSS3: Revisited

    Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I...

Incredible Demos

  • “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

  • CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...

Discussion

  1. You’re right, this effect very subtle, but incredibly effective.

    Curious how a linked transparent gif/png would be affected? I’m assuming you would see the ‘clicked’ background on those as well?

  2. Nice stuff, but shouldn’t it be e.preventDefault(); on the mootools version too?
    I would like to know how you did this textmate snippet integration too, your awesome!

  3. My bad — I forgot to remove the “stop” and “preventDefault()” ‘s from when they were demos. We don’t want to stop or prevent anything.

  4. Mr.X.

    I love it! I’ve made a hover effect a while back and this is a great add to it since a lot of my site uses ajax!

    Here is my hover-effect script:

    $$('a[not!=e]').each(function(el){
    	
    		el.addEvent('mouseover', function(event){
    			var morph = new Fx.Morph(el, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
    			var bgcolor = el.getStyle('background-color');
    			morph.start({
    			'padding-top': [0 , 5],
    			'padding-bottom': [0 , 5],
    			'background-Color':'#cfffff'
    			});
    	
    		});
    		el.addEvent('mouseout', function(event){
    			morph_delay = function(){
    				var morph = new Fx.Morph(el, {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
    				morph.start({
    				'padding-top': [5 , 0],
    				'padding-bottom': [5 , 0],
    				'background-Color':this.bgcolor
    				});
    			}
    			morph_delay.delay(50)
    		});
    })
    
  5. Thomas

    Excuse me, but why just not use the :active CSS-pseudo class?

  6. Thomas

    @Thomas: CSS-pseudo selector* even

  7. Couldn’t you mostly do this with CSS? the a:active pseudo-class will give you something when they click on it.

    It’ll go away when they release the mouse button (so I wouldn’t do it if you wanted a spinner or something fancy) but if you just want to visually register that they clicked a link, :active might be enough.

  8. “:active” is a great option but prefer the javascript method because it gives me more options.

  9. Mr.X.

    Is it my imagination or lynx is named by new Ubuntu 10.04: Lucid Lynx ?

  10. Thomas

    @David Walsh: I don’t see what additional options you’re referring to in the above example that can’t be solved with the :active pseudo-selector.

    I found a nice article that pretty much sums up my thoughts about the use of (redundant) Javascript: http://css-tricks.com/you-know-you-should-use-javascript-when/
    “JavaScript: If it can be done in another language, it should be done in another language.”

    Regards

  11. Don’t waste resources and just remove the class from the active link ;)

    http://paste.davidwalsh.name/99

  12. Good call Kassens!

  13. Thomas: I realize that. One thing I wanted to toy with was leaving the class on anything clicked. Maybe a different color for those that weren’t the most recent clicked. In that case I’d definitely JS. I do, however, see where you’re coming from.

  14. I hardly see anything that resembles the iPhone UI, but thanks for the post and the mootools & jQuery comparison code. Also I love your code preview, it is FTW.

  15. I don’t mean to repeat what others have already stated, but I have to agree that CSS is the right tool for this task.

    I believe that :focus is what you’re after, not :active. The link remains “focused” even after the mouse button is released.

  16. Agree, the :active selector is there for a reason, and you don’t need any javascript at all for it!

  17. Andrew

    Personally, I don’t think he was trying to show a better than css way, simply showing up to do. Also, if we’re doing this for Safari, should we not be using the -webkit-border-radius? I was under the impression Safari doesn’t use the -moz. Cheers.

  18. Al

    Would like to know how to apply it to a specific div so that it’s not applied to all clickable links including pics, thx.

  19. I’d humbly suggest a mousedown for the addClass and mouseup and mouseout for removeClass to better resemble iPhone functionality.

  20. Hamid

    i think it is better if you use this :

    a {
    outline: none;
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Making Data Management Easy with Transpose

    One problem with data collection is that we all want capture to be quick and we all want data to be organized -- but there's seldom a utility that allows both. Evernote allows note-taking but it can lose its structure...and no one wants...

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...