View RSS Feed

All Blog Entries

  1. Responsive Multi-Level, Fly-Out Menu

    The earlier version of this menu utilises the same checkbox hack and "off-canvass" pattern in desktop view as it does in mobile - apart from being always-visible on a large screen, it looks and works the same, regardless of what device is accessing it (modern browsers and IE9+).

    Thanks to the increasing popularity of touch devices, where tappable/clickable triggers now seem more favourable than hover actions, this has the benefit of consistency. Minus the initial trigger ...

    Updated 06-04-2014 at 11:43 AM by Beverleyh

    Categories
    CSS related
  2. Responsive Multi-Level, Push/Slide Menu

    I was emailed the other day by somebody asking if my earlier CSS-Only Multi-Level, Off-Canvass Mobile Menu could be visible on desktop too.

    At its most basic level, the following CSS inside of a desktop media query will do that;
    Code:
    #menu { left:0 }
    .container { padding-left:13.75em }
    Except this stumps IE8 and under because of no media query support and no checkbox hack support. So I set to work on creating a version that is visible (and works) on desktop and older browsers. ...

    Updated 05-22-2014 at 07:22 PM by Beverleyh

    Categories
    CSS related
  3. Nicer YouTube Search

    A couple of days ago I discovered http://www.yvoschaap.com/youtube.html on the web. It provides code for searching YouTube videos. I adapted the script to my needs, see http://mesdomaines.nu/youtube_search.

    I prefer my script (http://mesdomaines.nu/youtube_search) to YouTube's https://www.youtube.com/results?search_query=bla for several reasons, among which the cleaner look (no ads and other disturbing info) and the possibility of playing the videos on my own 'search page'.

    Updated 05-12-2014 at 12:48 AM by molendijk

    Categories
    Uncategorized
  4. Responsive Modal Gallery with keyboard nav controls (CSS3/JS)

    In an effort to make my previous (version 1) CSS-only Modal Gallery more user-friendly, I've now created a version that incorporates simple keyboard navigation from inside the modal overlay, using a small amount of JavaScript.

    Please see version 3 - the Responsive CSS3 Modal Gallery (+ additional JavaScript keyboard controls)

    This version of the gallery works a little more like how modern image galleries are expected to work (or rather, how users have learned to expect ...
  5. Responsive CSS3 Modal Gallery (no JavaScript)

    The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element.

    The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small ...

    Updated 04-28-2014 at 12:39 PM by Beverleyh

    Categories
    CSS related
Page 3 of 19 FirstFirst 1234513 ... LastLast