Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Archive for the “JavaScript” 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

  ---

• A Simple WordPress Carousel Plugin

  Monday, May 9th, 2011

  I recently wrote a custom plugin for WordPress that created a carousel. I then decided to open source it, so, here it is: https://github.com/ahmednuaman/ahmeds-wordpress-carousel

  Simply download it, stick it into your wp-content/plugins folder and off you go!

  Tags: carousel ~ jquery ~ PHP ~ plugin ~ wordpress
  Posted in Development ~ JavaScript ~ PHP

  ---

• A Simple Date Of Birth Validation With JavaScript

  Thursday, May 5th, 2011

  Here’s a simple way to validate DOB with JS:

  That is all

  Tags: form ~ html ~ JavaScript ~ jquery ~ validation
  Posted in Development ~ JavaScript

  ---

• 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

  ---