Click

Click highlights with CSS transitions

When you watch screencasts from time to time you’ll see that some software adds growing dots to the clicks the person explaining does to make them more obvious. Using CSS transitions this can be done very simply in JavaScript, too.
click highlighting with CSS

Check out the following demo on JSFiddle and you see what we mean. When you click on the document a dot grows where you clicked and it vanishes again. If you keep the mouse pressed the dot stays and you can move it around.

Moving the dot

The code is incredibly simple. We generate a DIV element and move it with the mouse. For this, we need JavaScript. Check the comments to see what is going on:

(function(){
 
  // create a DIV element, give it an ID and add it
  // to the body
  var plot = document.createElement('div'),
      pressed = false;
  plot.id = 'clickhighlightplot';
  document.body.appendChild(plot);
 
  // define offset as half the width of the DIV 
  // (this is needed to put the mouse cursor in
  // its centre)
  var offset = plot.offsetWidth / 2;
 
  // when the mouse is moved and the mouse button is pressed, 
  // move the DIV to the current position of the mouse cursor
  document.addEventListener('mousemove', function(ev) {
    if (pressed) { moveplot(ev.pageX, ev.pageY); }
  }, false);
 
  // when the mouse button is pressed, add a class called 
  // 'down' to the body of the element and define pressed
  // as true. Then move the DIV to the current mouse 
  // position.
  document.addEventListener('mousedown', function(ev) {
    document.body.classList.add('down');
    pressed = true;
    moveplot(ev.pageX, ev.pageY);
  }, false);
 
  // when the mouse is released, remove the 'down' class 
  // from the body and set pressed to false
  document.addEventListener('mouseup', function(ev) {
    document.body.classList.remove('down');
    pressed = false;
  },  false);
 
  // move the DIV to x and y with the correct offset
  function moveplot(x, y) {
    plot.style.left = x - offset + 'px';
    plot.style.top = y - offset + 'px';
  }
})();

This takes care of creating and moving the DIV and also gives us classes on the body element to play with.

Growing the dot

The growing of the dot uses CSS transitions. We change the scale of the dot from 0,0 to 1,1 in a certain amount of time. Notice that we need to scale down rather than up as Webkit zooms scaled elements instead of leaving crisp outlines like Firefox does (the first iteration of this script scaled a 10×10 pixel dot upwards and looked horrible).

#clickhighlightplot {
  cursor: pointer;
  pointer-events: none;
  background: rgba(255, 255, 10, 0.7);
  width:100px;
  height: 100px;
  position: absolute;
  border-radius: 100px;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
      -ms-transition: -ms-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
   -webkit-transform: scale(0, 0);
      -moz-transform: scale(0, 0);
       -ms-transform: scale(0, 0);
        -o-transform: scale(0, 0);
           transform: scale(0, 0);
}
.down #clickhighlightplot {
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
          transform: scale(1, 1);
}

Fixing the “covered clickable elements” issue

The main annoyance with the way the script works now is that you cover elements with the growing dot making them effectively unclickable. That might not be what you want which is why we need to make sure the dot covers them but still allows for clicks to go through. The good news is that there is a thing called pointer events for that. This is supported in Firefox and Webkit but sadly enough not in IE and Opera.

Moving from JS and CSS to pure JS (but using CSS)

Now, whilst it is cool to be able to maintain all the look and feel in CSS, the issue is that we need to repeat all the vendor prefixes and we run into issues that browsers might not support what we want to do. That’s why sometimes it makes more sense to move the whole functionality into JavaScript as we have the chance to test support there and write less code.

Clickhighlight.js does all that. Instead of keeping the maintenance in the CSS (and requiring you to add all the vendor prefixes) you can now have the effect by simply adding the script and calling its init() method:

<script src="clickhighlight.js"></script>
<script>clickhighlight.init();</script>

Elements with the class “nohighlight” will not get the effect. You can change the look by passing an initialisation object:

clickhighlight.init({
  size:        '300px', // the maximum size of the dot
  duration:    '2s',    // duration of the effect (seconds) 
  colour:      'green', // the dot colour - RGBA = transparency 
  nohighlight: 'notme'  // class of elements not highlighted
});

You can see it in action in this video on YouTube:

The next steps could be to add touch support and to turn this into a bookmarklet so you can use it on any page. Any other ideas?

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Click Consult Publishes Latest Client Web Development Performance Reviews

Cheshire-based market leading agency specialising in internet marketing, Click Consult, are expanding their portfolio of client testimonials by publishing the latest performance reviews from some of their most esteemed clients.(PRWEB) July 02, 2011 Cheshire-based market leading agency specialising in internet marketing, Click Consult, are expanding their portfolio of client testimonials by …

View full post on web development – Yahoo! News Search Results

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Click Consult Showcase Positive Client Reviews of Web Development Services

Click Consult, a leading UK-based agency specialising in online marketing and website development, have published a review of their web development services by one of their most notable clients. (PRWeb June 24, 2011) Read the full story at http://www.prweb.com/releases/2011/6/prweb8592618.htm

View full post on web development – Yahoo! News Search Results

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)