Articles tagged with Browser

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'

The joy of calc()

calc() is a modern css function that allows you to do basic maths in a css file. You can use it to make semi fluid layouts with great ease. This means that you can have layouts with 1 fixed width column (or more) and the rest fluid. It doesn't just stop at columns, but that is the easiest and quickest example to discuss.

The setup of calc is very simple. If we take a 2 column layout as an example, the side column always has 200px of width, the main will take up the rest, so 100% less 200px!

 /* Fixed columns */
.side {
    width: calc (200px);
}
 
.main {
    width: calc (100% - 200px);
}

The only minor issue is support , which extends to almost all browsers except Android and Opera Mini which currently have no support and Blackberry which has partial. IE9+ all have full support.

So using it responsibly just needs some simple fallbacks. There are some compromises, but these are the same as any pre calc fluid layout.

 /* Fixed columns with fallback */
.side {
    width: 20%;
    width ...
Read post... Posted in 'Web development'

Creating a chrome extension - an update

Since I wrote my last post on creating a chrome extension , there have been a few changes to how the extensions are built - mainly that the manifest version has changed to version 2. The original post is still fine, but there are a few tweaks needed. This post is mean mainly as an update to the original, so rather than rehash the old content too much I will skim over the basics quickly.

  • Create a folder for your plugin - name it after your extension so you can find it later!
  • In a text editor create 4 documents.
  • Save them as manifest.json, background.js, background.html and customStyles.css
  • Create a 20px x 20px png file using your favorite image editor!
  • Get a copy of jQuery . and add it to the folder.

manifest.json

 {
  "name": "plugin name",
  "version": "0",
  "description": "What do I do as an extension",
  "background": {"page": "background.html"},
  "manifest_version": 2,
  "browser_action": {
    "name": "Manipulate DOM",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "js": [ "jquery-2.0.2.min.js", "background.js" ],
    "css": ["customStyles.css ...
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'

Creating a chrome extension that uses jQuery to manipulate the DOM of a page

There are plenty of tutorials and guides on how to make a chome extension and there are hundeds for jQuery manipulation of the DOM. There are also a few about using jQuery in a chome extension, but only for the popup window. There seems to be a lack of using jQuery to actually do something on a page.This is something that too me a while to get my head around and a bit of googling to figure out, so now it's time to share.

Create a folder for the extension files. It's probably best to name it after your extension so you can find it later on.

In a plain text editor such as Notepad, Textmate or TextEdit create 3 blank documents. You can save the files as manifest.json, background.js and background.html. Using your favorite image editing software create a png icon with a transparent background (20px x 20px should be ok for now). Chome should scale the icon for the different areas it shows. Later we can create ...

Read post... Posted in 'Web development'