Articles tagged with HTML5

Hide number input spinners using CSS

HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers. On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows. Obviously you want to put them back on focus since they are meant to be there by default.

// Webkit:
  // Hide number picker
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  // Show number picker on focus
  input[type=number]:focus::-webkit-inner-spin-button,
  input[type=number]:focus::-webkit-outer-spin-button,
  input[type=number]:hover::-webkit-inner-spin-button,
  input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0 2px 0 0 ;
  }

  // Firefox:
  // Hide number picker
  input[type=number] {
    -moz-appearance:textfield;
  }

  // Show number picker on focus
  input[type=number]:focus,
  input[type=number]:hover {
    -moz-appearance:number-input;
  }
  // Note: Example is written in Sass not CSS!
  
Read post... Posted in 'Web development'

Jelly and Micecream.com

Over the last few months I have been wanting to polish up some existing skills and learn some new ones. Over this time I haven't had much time to work on projects that had the scope to play around with these skills so I decided to find a simple project that I could use as a test bed. Since the vet had recently estimated my cat's age I decided on a cat age calculator.

Does the internet need more cat based websites? Probably not, but the internet loves cats and I needed a project. The project needed a suitable name and so jellyandmicecream.com was born.

I prototyped the basic functionalities and interactions in javascript and jQuery. It could have continued as a js only app but I made the decision to move the calculations to the backend so that I could use some server side languages. I did consider creating a Rails app for the project, but not knowing enough about ruby or rails I decided it would be better to work ...

Read post... Posted in 'Projects'

Updated site

I have spent the last few months working on this update to my site. The update is due in part to some of the skills I have developed over the past 6 months.

Apart from the style change to the overall site design the main changes are the responsive mobile first layout, responsive image, web fonts and the addition of a new comments system. There are of course a few other updates to the backend code and html, for enhancing load times and adding some extra enhancements here and there.

Take a look at my portfolio , read another random blog post or get in touch .

Read post... Posted in 'News'

A Responsive Image jQuery Plugin

There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript or css. My solution is no different and uses javascript (in the form of jQuery) as the coordinator of the images.

responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.

 <img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />

If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D

Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ

Pros:

  • Can add as many breakpoints as needed.
  • Breakpoints ...
Read post... Posted in 'Web development'

My first responsive website for a client

Recently I have been working on an interesting project. Not only is the subject of it close to my heart, but the technical aspects of it are fascinating (to me at least). For those of you with no patience, I can reveal that the project is the website for The Tappy App Co. Ltd , who are a mobile app development company, focused on iOS apps (for the moment at least). 

If you know me at all you will know I have a fascination with Apple and many of their gadgets and philosophies so working on something in the same industry is a joy. As for the technical side of things that is where it gets much more interesting.

The site has been developed with what is known as responsive design. That means an end of having the page seeming to be fixed at a certain size in your browser window. You might think this odd at first, but the more you think about it the more sense it makes. You can view a site ...

Read post... Posted in 'News'