Posts Tagged ‘Quick tip’

Content equal to browser height & centered

Friday, October 3rd, 2014

15 October 2014: updated to include feedback from comments.

A current design pattern on some scroll-hijacking sites is to have each section as tall as the browser window so you see that content without distraction before moving onto the next.

This is a demo of content equal to browser height using CSS with a fall-back coffeescript solution for browsers that don’t understand css transforms. It is also responds to any adjustment in height and width of the browser window. (more…)

Correct use of tabindex

Monday, September 29th, 2014

Definition of tabindex from w3.org:

This attribute specifies the position of the current element in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.

In general you shouldn’t need to explicitly set the tabindex of an element on a page, however there are a few exceptions to this (more…)

Autoprefixer – the write once works everywhere Gem

Friday, September 19th, 2014

Are you bored of looking up which vendor-prefixes are still required for a particular rule on a particular day, or you want to remove the bloat that a catch-all mixin gives you? Then read on. (more…)

Five front-end links for Friday

Friday, June 13th, 2014

A few links I found interesting this week. (more…)

Highlight dates from selection to hover position

Tuesday, May 13th, 2014

This would be useful on a calendar when selecting a range between two dates.

View the demo (more…)

Problem: Background image overlapping right-hand-side of the grid

Friday, November 22nd, 2013

The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.

This technique is for when you need to place a background-image more than 100% to the right of the page. (more…)

CSS opacity not working in iOS

Friday, August 16th, 2013

I was having a problem where adding a basic css opacity on an element wouldn’t work when viewing in iOS. Looked fine on desktop.

I didn’t come across a specific solution to my problem, but someone else had a similar thing when using opacity with transitions. (more…)

IE8 password input field displays square characters

Friday, August 2nd, 2013

Ever seen this when testing a website in IE8… Instead of the usual obfuscation using dots or stars, you see a square/rectangular symbol which usually shows up when the browser doesn’t have the entity available to display. The usual reason is that there is a custom font or webfont in use on the fields. (more…)

Fluid width squares in CSS

Wednesday, June 5th, 2013

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript? (more…)

Click event handler iPhone: non-anchor elements

Friday, March 15th, 2013

I have a results table where each row is a form and the user continues by pressing the submit button for that result. At smaller widths I collapse the table, hide the submit button and add a click event handler to the tr – it works fine, up to a point.

A filter bar was added that uses AJAX to reorder and add to the results so now the DOM is being generated with JS. Usually you can use .on(event, selector, handler) to catch any generated elements, but this won’t work on iPhone or iPad*. (more…)

Same page references, or named anchors

Wednesday, August 22nd, 2012

Named anchors have been around since HTML was created and allowed you to link to a different part of a page. They can be referenced by external page by using a hash then the identifier after the URL (more…)

Chrome won’t center button using auto margins

Thursday, March 3rd, 2011

Note: I’m not American, but it feels weird writing ‘centre’ if you code in CSS all day.

I’ve come across a problem I need solving and Google is not being my friend. I need to center a button on the page without specifying its width, because the text inside is of various lengths. The following works how I want in Firefox, Safari, Opera and even IE6, 7 and 9 (thanks to Sarah for testing). (more…)

jQuery Cookie problem – persistence and duplication

Wednesday, January 5th, 2011

I’ve started to use cookies to maintain user state and the jQuery Cookie plugin provides simple functions to create, read and delete cookies. However, I came across a problem where state didn’t appear to be persisting and on viewing the cookie information, using the web developer toolbar, I had multiple versions of the same cookie. (more…)