Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Archive for the “CSS” Category

• Working with local and production JS files

  Monday, December 26th, 2011

  If you’re like me and you enjoy compressing all your text based static files (such as CSS and JS) ready for production then I’m sure you’ve been in the pickle where you’ve wanted to use the local uncompressed files but also not need to edit anything before deployment. Well, here’s a little bit of code I like to use, in this case it’s been adapted for WordPress’s footer:

  <?php if ( $_SERVER[ 'HTTP_HOST' ] === 'workshops.dev' ): ?>
      <script>
      <!--
          var s   = [
              'jquery', 'modernizr', 'suitcase'
          ];
          var t   = ( new Date() ).getTime();
         
          while ( s.length )
          {
              document.write( '<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/' + s.shift() + '.js?x=' + t + '"></' + 'script>' );
          }
      -->
      </script>
  <?php else: ?>
      <script src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/js/packaged.js"></script>
  <?php endif; ?>

  I’m very organised and I like to keep my theme directory like so:

  a_theme
  - index.php
  - style.css (this actually only contains the meta data, no CSS, just a linked to my compressed stuff)
  - more php files...
  - assets
  - - js
  - - - packaged.js (this is for the production and the <b>only</b> JS file uploaded)
  - - - more js files...
  - - css
  - - - styles.less (again this is watched by the <a href="http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=lesscss">LESSCSS</a> daemon so it compresses as I save)
  - - - styles.css (this is the css file that the standard 'style.css' links to)
  - - image (you can guess what this is)

  And so on.

  Tags: compress ~ deployment ~ JavaScript ~ production
  Posted in CSS ~ HTML ~ JavaScript ~ WordPress

  ---

• Quickly Detect If A Browser Supports HTML5 Attributes

  Monday, February 7th, 2011

  Wow, I’m on fire today! So, here’s a quick code snippet to check to see if a browser supports HTML5 attributes, in this case the <input> tag’s ‘number’ type:

  var input   = document.createElement( 'input' );
  
  input.setAttribute( 'type', 'number' );
  
  if ( input.type == 'text' )
  {
      $( 'html' ).addClass( 'no_inputs' );
  }

  Tags: CSS ~ detection ~ html ~ html5 ~ input ~ JavaScript ~ type
  Posted in CSS ~ Development ~ HTML ~ JavaScript

  ---

• Quite Possibly the Easiest (and Smallest?) jQuery Carousel

  Monday, February 7th, 2011

  Here’s a quickie: a nice and small jQuery carousel…

  Take some list items:

  <div id="carousel">
  <ul>
      <li>Hello!</li>
      <li>Why hello again?</li>
      <li>We need to stop meeting like this...</li>
  </ul>
  </div>

  And apply some CSS:

  ul,
  li
  {
      margin: 0;
      padding: 0;
  }
  #carousel
  {
      display: block;
      position: relative;
      width: 400px;
      height: 250px;
      overflow: hidden;
  }
  #carousel ul
  {
      display: block;
      width: 5000px;
      height: 250px;
  }
  #carousel li
  {
      display: block;
      float: left;
      width: 400px;
      height: 250px;
      background: #0080FF;
      color: #FFFFFF;
      font-size: 12pt;
  }

  And finally sprinkle with some JS:

  $( document ).ready( function()
  {
      var t   = $( '#carousel' );
      var m   = $( 'li', t ).length;
      var w   = $( 'li:first', t ).outerWidth();
      var i   = 0;
  
      setInterval( function()
      {
          if ( i >= m )
          {
              i   = 0;
          }
  
          $( 'ul', t ).animate({
              'margin-left'   : i * w * -1 + 'px'
          }, 1000, 'easeInOutQuint' );
  
          i++;
      }, 3000 );
  });

  And voila:

  Tags: carousel ~ CSS ~ JavaScript ~ jquery ~ simple ~ small
  Posted in CSS ~ Development ~ HTML ~ JavaScript

  ---

• Manipulating Touch Events

  Thursday, February 3rd, 2011

  2010 has been a good year for a geek’s ego. Now that tablets are all the rage, we need to make sure that the web sites and apps we build can function on both traditional keyboard and mouse based machines and these shiny new puppy-powered tablets.

  Having a read through the most used touch browser’s (WebKit) touch event spec, you’ll be mistaken for thinking that you can’t do very much. Yes it’s a shame that the DOM doesn’t update until the event/gesture has finished and you can’t capture events such as pan, hold, double-tap, and pinch, but we can do our best to hack our app to handle these in the best way.

  Without going in to super amounts of detail (since the project I’ve been working on hasn’t gone live yet), I’m going to knock up a little scrolling pane that we can scroll with our mouse (by dragging) and by touch (using one finger, that’s right one, not two, just one, uh huh).

  So we first start with some HTML code like this:

  <style type="text/css" media="screen">
  <!--
      #scrollarea
      {
          height: 300px;
          overflow: hidden;
          overflow-y: scroll;
      }
  -->
  </style>
  <div id="scrollarea">
      <div id="scrollpane">
          <p>Hizzle ipsizzle dolizzle boom shackalack dope, consectetizzle adipiscing ass. ... </p>
      </div>
  </div>

  This’ll give us something like:

  Hizzle ipsizzle dolizzle boom shackalack dope, consectetizzle adipiscing ass. Nullam sapien velit, break it down volutpizzle, suscipit check it out, yo vel, arcu. Pellentesque for sure away. Fo break it down. Fusce break it down the bizzle black turpis tempizzle shit. Maurizzle izzle check it out et shiznit. Vestibulum bling bling ass. Pellentesque dawg rhoncus black. In away habitasse pizzle dictumst. Ma nizzle dapibizzle. Shut the shizzle up tellizzle things, pretizzle stuff, mattizzle stuff, eleifend vitae, nunc. Fizzle suscipizzle. Fo shizzle break yo neck, yall velizzle sizzle fo shizzle my nizzle.

  Maecenizzle izzle mi. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle bling bling. Izzle boom shackalack, turpizzle non congue consectetizzle, boofron libero shiz , eget ullamcorpizzle funky fresh boom shackalack non quizzle. Cras faucibizzle elit. Dizzle fizzle uhuh … yih!, gangsta sizzle, ornare crackalackin, i’m in the shizzle izzle, black. Prizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle urna. Cras yo mamma shizznit gangsta check out this. Pellentesque hendrerit euismizzle felis. Donizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle nisl a erizzle. Etizzle posuere rizzle mi. Ut check it out. Sed nisl metus, euismizzle gangsta, shiz sed, malesuada pimpin’, nisi. Vivamus vulputate its fo rizzle nisl.

  Stuff tellizzle fo shizzle my nizzle, pulvinar ac, condimentizzle crunk, vehicula id, hizzle. Dizzle sizzle leo uhuh … yih! dizzle izzle mattizzle. Pellentesque shizzlin dizzle magna boom shackalack eros commodo ullamcorpizzle. My shizz lobortis fermentum shiznit. Nizzle fo shizzle. Maecenas quis check out this phat dolor iaculis break it down. Away sagittis viverra dang. Curabitizzle i saw beyonces tizzles and my pizzle went crizzle massa you son of a bizzle purizzle. Check out this gangsta sizzle amet i saw beyonces tizzles and my pizzle went crizzle. Shiznit lobortis shizzlin dizzle vitae owned. Cum sociis sure funky fresh et funky fresh dizzle parturient montizzle, that’s the shizzle ridiculus mus.

  Vestibulum ante ipsizzle primis izzle shizzlin dizzle bow wow wow luctus mammasay mammasa mamma oo sa i saw beyonces tizzles and my pizzle went crizzle posuere cubilia Curae; Sizzle vitae we gonna chung quizzle pizzle shiz fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Phasellus dawg dizzle. Boofron mammasay mammasa mamma oo sa accumsan velizzle. Owned diam i saw beyonces tizzles and my pizzle went crizzle, adipiscing vitae, gravida shizzlin dizzle, interdum doggy, ante. Etiam own yo’ check out this shiz. Sed boom shackalack stuff et augue porta laoreet. Nizzle sed fo shizzle my nizzle. Brizzle sagittis. Praesent lacus quizzle lacus posuere things. Get down get down id tellus shizzlin dizzle ass dang mollis. Fizzle we gonna chung. Gangsta scelerisque. Boofron magna shizzle my nizzle crocodizzle, dignissizzle vitae, porttitizzle for sure, gangster egestizzle, orci. Shizzle my nizzle crocodizzle commodo sodales lectus. Etiam sollicitudizzle yippiyo crunk. Phasellus mi fo shizzle, convallis gangster, pellentesque break yo neck, yall, ultricizzle izzle, nibh. Boofron ghetto go to hizzle, daahng dawg away, sollicitudizzle fo shizzle, aliquizzle a, lectizzle. Fusce maurizzle pot, varizzle molestie, adipiscing ut, blandizzle black amet, enizzle.

  Proin pot purus. Check out this sizzle amizzle dizzle et massa we gonna chung pellentesque. In et erat. Vivamus bling bling sapizzle, bow wow wow shizzlin dizzle amizzle, vulputate things, condimentizzle check out this, nunc. Break yo neck, yall sit yo mauris. Nullizzle fermentum ass nunc. Ghetto vulputate, elizzle bizzle ultrices facilisizzle, cool tellizzle cool justo, sizzle condimentizzle gizzle purizzle quis ghetto. Sed fermentizzle fo own yo’. Fizzle daahng dawg. Its fo rizzle hizzle ghetto platea yo mamma. Nam sizzle amet crackalackin. Gangsta sed dizzle. Aenean in go to hizzle. Nizzle lobortizzle, gizzle check it out adipiscing fo shizzle, massa nulla pretizzle lorem, quizzle the bizzle ipsizzle shit shiznit sure.

  Crizzle yippiyo pede yo bling bling. You son of a bizzle socizzle penatibizzle et magnizzle dizzle parturient shiz, go to hizzle mizzle. Ut purus da bomb, the bizzle quizzle, convallizzle izzle, sollicitudizzle egizzle, fo shizzle. My shizz fizzle urna commodo check it out. Donec break it down. Nullam augue orci, dizzle bizzle, aliquizzle fizzle, condimentum izzle, nizzle. Gizzle imperdiet, nulla dawg amizzle brizzle gravida, dui yo mamma ornare enizzle, my shizz hendrerizzle nunc shizzlin dizzle scelerisque velit. Pellentesque crunk odio. Nizzle nonummy dolor crackalackin metizzle. Nulla facilisi.

  Now the smarter people out there will notice that you can scroll this pane with your mouse’s wheel and by using the two finger gesture on your magical touch device. But we want one finger and to use our mouse, so the first thing we do is disable any text selection (as this stops the events getting mixed up):

  #scrollarea
  {
      height: 300px;
      overflow: hidden;
      overflow-y: scroll;
      user-select: none;
      -o-user-select: none;
      -moz-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
  }

  Now try and select some text:

  Hizzle ipsizzle dolizzle boom shackalack dope, consectetizzle adipiscing ass. Nullam sapien velit, break it down volutpizzle, suscipit check it out, yo vel, arcu. Pellentesque for sure away. Fo break it down. Fusce break it down the bizzle black turpis tempizzle shit. Maurizzle izzle check it out et shiznit. Vestibulum bling bling ass. Pellentesque dawg rhoncus black. In away habitasse pizzle dictumst. Ma nizzle dapibizzle. Shut the shizzle up tellizzle things, pretizzle stuff, mattizzle stuff, eleifend vitae, nunc. Fizzle suscipizzle. Fo shizzle break yo neck, yall velizzle sizzle fo shizzle my nizzle.

  Maecenizzle izzle mi. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle bling bling. Izzle boom shackalack, turpizzle non congue consectetizzle, boofron libero shiz , eget ullamcorpizzle funky fresh boom shackalack non quizzle. Cras faucibizzle elit. Dizzle fizzle uhuh … yih!, gangsta sizzle, ornare crackalackin, i’m in the shizzle izzle, black. Prizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle urna. Cras yo mamma shizznit gangsta check out this. Pellentesque hendrerit euismizzle felis. Donizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle nisl a erizzle. Etizzle posuere rizzle mi. Ut check it out. Sed nisl metus, euismizzle gangsta, shiz sed, malesuada pimpin’, nisi. Vivamus vulputate its fo rizzle nisl.

  Stuff tellizzle fo shizzle my nizzle, pulvinar ac, condimentizzle crunk, vehicula id, hizzle. Dizzle sizzle leo uhuh … yih! dizzle izzle mattizzle. Pellentesque shizzlin dizzle magna boom shackalack eros commodo ullamcorpizzle. My shizz lobortis fermentum shiznit. Nizzle fo shizzle. Maecenas quis check out this phat dolor iaculis break it down. Away sagittis viverra dang. Curabitizzle i saw beyonces tizzles and my pizzle went crizzle massa you son of a bizzle purizzle. Check out this gangsta sizzle amet i saw beyonces tizzles and my pizzle went crizzle. Shiznit lobortis shizzlin dizzle vitae owned. Cum sociis sure funky fresh et funky fresh dizzle parturient montizzle, that’s the shizzle ridiculus mus.

  Vestibulum ante ipsizzle primis izzle shizzlin dizzle bow wow wow luctus mammasay mammasa mamma oo sa i saw beyonces tizzles and my pizzle went crizzle posuere cubilia Curae; Sizzle vitae we gonna chung quizzle pizzle shiz fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Phasellus dawg dizzle. Boofron mammasay mammasa mamma oo sa accumsan velizzle. Owned diam i saw beyonces tizzles and my pizzle went crizzle, adipiscing vitae, gravida shizzlin dizzle, interdum doggy, ante. Etiam own yo’ check out this shiz. Sed boom shackalack stuff et augue porta laoreet. Nizzle sed fo shizzle my nizzle. Brizzle sagittis. Praesent lacus quizzle lacus posuere things. Get down get down id tellus shizzlin dizzle ass dang mollis. Fizzle we gonna chung. Gangsta scelerisque. Boofron magna shizzle my nizzle crocodizzle, dignissizzle vitae, porttitizzle for sure, gangster egestizzle, orci. Shizzle my nizzle crocodizzle commodo sodales lectus. Etiam sollicitudizzle yippiyo crunk. Phasellus mi fo shizzle, convallis gangster, pellentesque break yo neck, yall, ultricizzle izzle, nibh. Boofron ghetto go to hizzle, daahng dawg away, sollicitudizzle fo shizzle, aliquizzle a, lectizzle. Fusce maurizzle pot, varizzle molestie, adipiscing ut, blandizzle black amet, enizzle.

  Proin pot purus. Check out this sizzle amizzle dizzle et massa we gonna chung pellentesque. In et erat. Vivamus bling bling sapizzle, bow wow wow shizzlin dizzle amizzle, vulputate things, condimentizzle check out this, nunc. Break yo neck, yall sit yo mauris. Nullizzle fermentum ass nunc. Ghetto vulputate, elizzle bizzle ultrices facilisizzle, cool tellizzle cool justo, sizzle condimentizzle gizzle purizzle quis ghetto. Sed fermentizzle fo own yo’. Fizzle daahng dawg. Its fo rizzle hizzle ghetto platea yo mamma. Nam sizzle amet crackalackin. Gangsta sed dizzle. Aenean in go to hizzle. Nizzle lobortizzle, gizzle check it out adipiscing fo shizzle, massa nulla pretizzle lorem, quizzle the bizzle ipsizzle shit shiznit sure.

  Crizzle yippiyo pede yo bling bling. You son of a bizzle socizzle penatibizzle et magnizzle dizzle parturient shiz, go to hizzle mizzle. Ut purus da bomb, the bizzle quizzle, convallizzle izzle, sollicitudizzle egizzle, fo shizzle. My shizz fizzle urna commodo check it out. Donec break it down. Nullam augue orci, dizzle bizzle, aliquizzle fizzle, condimentum izzle, nizzle. Gizzle imperdiet, nulla dawg amizzle brizzle gravida, dui yo mamma ornare enizzle, my shizz hendrerizzle nunc shizzlin dizzle scelerisque velit. Pellentesque crunk odio. Nizzle nonummy dolor crackalackin metizzle. Nulla facilisi.

  Magic eh? We’re nearly there now so pay attention. The next thing we need to do is apply some mathematical code to allow us to use our mouse to drag the pane up and down:

  $( document ).ready( function()
  {
      $( '#scrollpane' ).mousedown( function(e)
      {
          // we need to find the start y, this acts as an anchor for our movements
          var startY  = e.clientY;
  
          // so we've captured the mousedown, we now need to listen for the mousemove and mouseup event
          $( this ).unbind( 'mousemove' ).mousemove( function(e)
          {
              // get the current y
              var y   = Number( $( this ).css( 'margin-top' ).replace( 'px', '' ) ) || 0;
  
              // calculate the max and min
              var max = 0; // 'zero?!' I hear you ask? Correct, we don't want the pane's Y to be > than 0
              var min = $( this ).parent().eq( 0 ).outerHeight() - $( this ).outerHeight(); // this calculates the difference between its height and its parent's height, this is as far up (or as little Y) it can go
  
              // let's get the movement y
              var m   = e.clientY - startY;
  
              // now we calculate the target
              var t   = y + m;
  
              // is the target movement within our bounds?
              if ( t <= max && t >= min )
              {
                  // yay, let's move it
                  $( this ).css({
                      'margin-top'    : t + 'px'
                  });
              }
              else if ( t > max )
              {
                  // let's reset it to the max
                  $( this ).css( 'margin-top', max + 'px' );
              }
              else if ( t < min )
              {
                  // let's reset it to the min
                  $( this ).css( 'margin-top', min + 'px' );
              }
  
              // we then need to reset the anchor to the last mouse position
              startY  = e.clientY;
          }).unbind( 'mouseup, mouseleave' ).bind( 'mouseup, mouseleave', function()
          {
              // stop the binding
              $( this ).unbind( 'mousemove' );
          });
      });
  });

  This gives us:

  Hizzle ipsizzle dolizzle boom shackalack dope, consectetizzle adipiscing ass. Nullam sapien velit, break it down volutpizzle, suscipit check it out, yo vel, arcu. Pellentesque for sure away. Fo break it down. Fusce break it down the bizzle black turpis tempizzle shit. Maurizzle izzle check it out et shiznit. Vestibulum bling bling ass. Pellentesque dawg rhoncus black. In away habitasse pizzle dictumst. Ma nizzle dapibizzle. Shut the shizzle up tellizzle things, pretizzle stuff, mattizzle stuff, eleifend vitae, nunc. Fizzle suscipizzle. Fo shizzle break yo neck, yall velizzle sizzle fo shizzle my nizzle.

  Maecenizzle izzle mi. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle bling bling. Izzle boom shackalack, turpizzle non congue consectetizzle, boofron libero shiz , eget ullamcorpizzle funky fresh boom shackalack non quizzle. Cras faucibizzle elit. Dizzle fizzle uhuh … yih!, gangsta sizzle, ornare crackalackin, i’m in the shizzle izzle, black. Prizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle urna. Cras yo mamma shizznit gangsta check out this. Pellentesque hendrerit euismizzle felis. Donizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle nisl a erizzle. Etizzle posuere rizzle mi. Ut check it out. Sed nisl metus, euismizzle gangsta, shiz sed, malesuada pimpin’, nisi. Vivamus vulputate its fo rizzle nisl.

  Stuff tellizzle fo shizzle my nizzle, pulvinar ac, condimentizzle crunk, vehicula id, hizzle. Dizzle sizzle leo uhuh … yih! dizzle izzle mattizzle. Pellentesque shizzlin dizzle magna boom shackalack eros commodo ullamcorpizzle. My shizz lobortis fermentum shiznit. Nizzle fo shizzle. Maecenas quis check out this phat dolor iaculis break it down. Away sagittis viverra dang. Curabitizzle i saw beyonces tizzles and my pizzle went crizzle massa you son of a bizzle purizzle. Check out this gangsta sizzle amet i saw beyonces tizzles and my pizzle went crizzle. Shiznit lobortis shizzlin dizzle vitae owned. Cum sociis sure funky fresh et funky fresh dizzle parturient montizzle, that’s the shizzle ridiculus mus.

  Vestibulum ante ipsizzle primis izzle shizzlin dizzle bow wow wow luctus mammasay mammasa mamma oo sa i saw beyonces tizzles and my pizzle went crizzle posuere cubilia Curae; Sizzle vitae we gonna chung quizzle pizzle shiz fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Phasellus dawg dizzle. Boofron mammasay mammasa mamma oo sa accumsan velizzle. Owned diam i saw beyonces tizzles and my pizzle went crizzle, adipiscing vitae, gravida shizzlin dizzle, interdum doggy, ante. Etiam own yo’ check out this shiz. Sed boom shackalack stuff et augue porta laoreet. Nizzle sed fo shizzle my nizzle. Brizzle sagittis. Praesent lacus quizzle lacus posuere things. Get down get down id tellus shizzlin dizzle ass dang mollis. Fizzle we gonna chung. Gangsta scelerisque. Boofron magna shizzle my nizzle crocodizzle, dignissizzle vitae, porttitizzle for sure, gangster egestizzle, orci. Shizzle my nizzle crocodizzle commodo sodales lectus. Etiam sollicitudizzle yippiyo crunk. Phasellus mi fo shizzle, convallis gangster, pellentesque break yo neck, yall, ultricizzle izzle, nibh. Boofron ghetto go to hizzle, daahng dawg away, sollicitudizzle fo shizzle, aliquizzle a, lectizzle. Fusce maurizzle pot, varizzle molestie, adipiscing ut, blandizzle black amet, enizzle.

  Proin pot purus. Check out this sizzle amizzle dizzle et massa we gonna chung pellentesque. In et erat. Vivamus bling bling sapizzle, bow wow wow shizzlin dizzle amizzle, vulputate things, condimentizzle check out this, nunc. Break yo neck, yall sit yo mauris. Nullizzle fermentum ass nunc. Ghetto vulputate, elizzle bizzle ultrices facilisizzle, cool tellizzle cool justo, sizzle condimentizzle gizzle purizzle quis ghetto. Sed fermentizzle fo own yo’. Fizzle daahng dawg. Its fo rizzle hizzle ghetto platea yo mamma. Nam sizzle amet crackalackin. Gangsta sed dizzle. Aenean in go to hizzle. Nizzle lobortizzle, gizzle check it out adipiscing fo shizzle, massa nulla pretizzle lorem, quizzle the bizzle ipsizzle shit shiznit sure.

  Crizzle yippiyo pede yo bling bling. You son of a bizzle socizzle penatibizzle et magnizzle dizzle parturient shiz, go to hizzle mizzle. Ut purus da bomb, the bizzle quizzle, convallizzle izzle, sollicitudizzle egizzle, fo shizzle. My shizz fizzle urna commodo check it out. Donec break it down. Nullam augue orci, dizzle bizzle, aliquizzle fizzle, condimentum izzle, nizzle. Gizzle imperdiet, nulla dawg amizzle brizzle gravida, dui yo mamma ornare enizzle, my shizz hendrerizzle nunc shizzlin dizzle scelerisque velit. Pellentesque crunk odio. Nizzle nonummy dolor crackalackin metizzle. Nulla facilisi.

  But now we need to get this to function correctly for a touch device. Touch devices don’t have a mouse, so we need to add gesture events to support the mouse events, like so:

      $( document ).ready( function()
      {
          $( '#scrollpane' ).unbind( 'mousedown touchstart' ).bind( 'mousedown touchstart', function(e)
          {
              // we need to find the start y, this acts as an anchor for our movements
              var startY  = ( e.type == 'mousedown' ? e.clientY : e.originalEvent.touches[ 0 ].clientY );
             
             
              // stop the event in its tracks, this means we can scroll our pane and still scroll the rest of the page
              e.originalEvent.preventDefault();
              e.stopPropagation();
             
              // so we've captured the mousedown, we now need to listen for the mousemove and mouseup event
              $( this ).unbind( 'mousemove touchmove' ).bind( 'mousemove touchmove', function(e)
              {
                  // get the current y
                  var y   = Number( $( this ).css( 'margin-top' ).replace( 'px', '' ) ) || 0;
                 
                  // calculate the max and min
                  var max = 0; // 'zero?!' I hear you ask? Correct, we don't want the pane's Y to be > than 0
                  var min = $( this ).parent().eq( 0 ).outerHeight() - $( this ).outerHeight(); // this calculates the difference between its height and its parent's height, this is as far up (or as little Y) it can go
                 
                  // let's get the movement y
                  var m   = ( e.type == 'mousemove' ? e.clientY : e.originalEvent.touches[ 0 ].clientY ) - startY;
                 
                  // now we calculate the target
                  var t   = y + m;
                 
                  // is the target movement within our bounds?
                  if ( t <= max && t >= min )
                  {
                      // yay, let's move it
                      $( this ).css({
                          'margin-top'    : t + 'px'
                      });
                  }
                  else if ( t > max )
                  {
                      // let's reset it to the max
                      $( this ).css( 'margin-top', max + 'px' );
                  }
                  else if ( t < min )
                  {
                      // let's reset it to the min
                      $( this ).css( 'margin-top', min + 'px' );
                  }
                 
                  // we then need to reset the anchor to the last mouse position
                  startY  = ( e.type == 'mousemove' ? e.clientY : e.originalEvent.touches[ 0 ].clientY );
              }).unbind( 'mouseup mouseleave touchend touchcancel' ).bind( 'mouseup mouseleave touchend touchcancel', function()
              {
                  // stop the binding
                  $( this ).unbind( 'mousemove' );
              });
          });
      });

  And this produces:

  Hizzle ipsizzle dolizzle boom shackalack dope, consectetizzle adipiscing ass. Nullam sapien velit, break it down volutpizzle, suscipit check it out, yo vel, arcu. Pellentesque for sure away. Fo break it down. Fusce break it down the bizzle black turpis tempizzle shit. Maurizzle izzle check it out et shiznit. Vestibulum bling bling ass. Pellentesque dawg rhoncus black. In away habitasse pizzle dictumst. Ma nizzle dapibizzle. Shut the shizzle up tellizzle things, pretizzle stuff, mattizzle stuff, eleifend vitae, nunc. Fizzle suscipizzle. Fo shizzle break yo neck, yall velizzle sizzle fo shizzle my nizzle.

  Maecenizzle izzle mi. Fo shizzle mah nizzle fo rizzle, mah home g-dizzle bling bling. Izzle boom shackalack, turpizzle non congue consectetizzle, boofron libero shiz , eget ullamcorpizzle funky fresh boom shackalack non quizzle. Cras faucibizzle elit. Dizzle fizzle uhuh … yih!, gangsta sizzle, ornare crackalackin, i’m in the shizzle izzle, black. Prizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle urna. Cras yo mamma shizznit gangsta check out this. Pellentesque hendrerit euismizzle felis. Donizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle nisl a erizzle. Etizzle posuere rizzle mi. Ut check it out. Sed nisl metus, euismizzle gangsta, shiz sed, malesuada pimpin’, nisi. Vivamus vulputate its fo rizzle nisl.

  Stuff tellizzle fo shizzle my nizzle, pulvinar ac, condimentizzle crunk, vehicula id, hizzle. Dizzle sizzle leo uhuh … yih! dizzle izzle mattizzle. Pellentesque shizzlin dizzle magna boom shackalack eros commodo ullamcorpizzle. My shizz lobortis fermentum shiznit. Nizzle fo shizzle. Maecenas quis check out this phat dolor iaculis break it down. Away sagittis viverra dang. Curabitizzle i saw beyonces tizzles and my pizzle went crizzle massa you son of a bizzle purizzle. Check out this gangsta sizzle amet i saw beyonces tizzles and my pizzle went crizzle. Shiznit lobortis shizzlin dizzle vitae owned. Cum sociis sure funky fresh et funky fresh dizzle parturient montizzle, that’s the shizzle ridiculus mus.

  Vestibulum ante ipsizzle primis izzle shizzlin dizzle bow wow wow luctus mammasay mammasa mamma oo sa i saw beyonces tizzles and my pizzle went crizzle posuere cubilia Curae; Sizzle vitae we gonna chung quizzle pizzle shiz fo shizzle mah nizzle fo rizzle, mah home g-dizzle. Phasellus dawg dizzle. Boofron mammasay mammasa mamma oo sa accumsan velizzle. Owned diam i saw beyonces tizzles and my pizzle went crizzle, adipiscing vitae, gravida shizzlin dizzle, interdum doggy, ante. Etiam own yo’ check out this shiz. Sed boom shackalack stuff et augue porta laoreet. Nizzle sed fo shizzle my nizzle. Brizzle sagittis. Praesent lacus quizzle lacus posuere things. Get down get down id tellus shizzlin dizzle ass dang mollis. Fizzle we gonna chung. Gangsta scelerisque. Boofron magna shizzle my nizzle crocodizzle, dignissizzle vitae, porttitizzle for sure, gangster egestizzle, orci. Shizzle my nizzle crocodizzle commodo sodales lectus. Etiam sollicitudizzle yippiyo crunk. Phasellus mi fo shizzle, convallis gangster, pellentesque break yo neck, yall, ultricizzle izzle, nibh. Boofron ghetto go to hizzle, daahng dawg away, sollicitudizzle fo shizzle, aliquizzle a, lectizzle. Fusce maurizzle pot, varizzle molestie, adipiscing ut, blandizzle black amet, enizzle.

  Proin pot purus. Check out this sizzle amizzle dizzle et massa we gonna chung pellentesque. In et erat. Vivamus bling bling sapizzle, bow wow wow shizzlin dizzle amizzle, vulputate things, condimentizzle check out this, nunc. Break yo neck, yall sit yo mauris. Nullizzle fermentum ass nunc. Ghetto vulputate, elizzle bizzle ultrices facilisizzle, cool tellizzle cool justo, sizzle condimentizzle gizzle purizzle quis ghetto. Sed fermentizzle fo own yo’. Fizzle daahng dawg. Its fo rizzle hizzle ghetto platea yo mamma. Nam sizzle amet crackalackin. Gangsta sed dizzle. Aenean in go to hizzle. Nizzle lobortizzle, gizzle check it out adipiscing fo shizzle, massa nulla pretizzle lorem, quizzle the bizzle ipsizzle shit shiznit sure.

  Crizzle yippiyo pede yo bling bling. You son of a bizzle socizzle penatibizzle et magnizzle dizzle parturient shiz, go to hizzle mizzle. Ut purus da bomb, the bizzle quizzle, convallizzle izzle, sollicitudizzle egizzle, fo shizzle. My shizz fizzle urna commodo check it out. Donec break it down. Nullam augue orci, dizzle bizzle, aliquizzle fizzle, condimentum izzle, nizzle. Gizzle imperdiet, nulla dawg amizzle brizzle gravida, dui yo mamma ornare enizzle, my shizz hendrerizzle nunc shizzlin dizzle scelerisque velit. Pellentesque crunk odio. Nizzle nonummy dolor crackalackin metizzle. Nulla facilisi.

  So now it works on a touch device and you can drag it with your mouse, yay! You can take this further and implement mouse wheel scrolling using the awesome jQuery Mousewheel plugin.

  Tags: Android ~ drag ~ ios ~ ipad ~ iphone ~ pane ~ panel ~ scroll ~ touch
  Posted in Android ~ CSS ~ Development ~ HTML ~ iOS ~ iPad ~ iPhone ~ JavaScript

  ---

• Fun with Radio Buttons

  Wednesday, February 2nd, 2011

  The humble radio button is a bit, well boring…

  Look at it, all round and what not; Why not have some fun with it?

  I’ve been working on a backend for a few clients of mine and thought I’ll add some form to enhance the function of the humble radio button.

  So, where to begin? Well let’s take some HTML like this:

  <label>
      <input type="radio" name="group" value="1" checked="checked" />
      <img src="1.jpg" />
  </label>
  <label>
      <input type="radio" name="group" value="2" />
      <img src="2.jpg" />
  </label>
  <label>
      <input type="radio" name="group" value="3" />
      <img src="3.jpg" />
  </label>

  So this gives us something like:

  
  
  

  
  
  

  
  

  But this isn’t very magical, so we apply some simple CSS:

  label
  {
      display: block;
      float: left;
      margin: 5px;
      cursor: pointer;
  }
  label input
  {
      display: none;
  }
  label img
  {
      border: 4px solid #ffffff;
  }
  label input:checked + img
  {
      border-color: #0080FF;
  }

  And this gives us something like:

  
  

  
  

  
  

  And with this you get all the features of the radio button but it looks much nicer!

  Tags: CSS ~ html ~ input ~ radio ~ style ~ styling
  Posted in CSS ~ Design ~ Development ~ HTML

  ---