View RSS Feed

All Blog Entries

  1. iOS 'Sticky Hover' Fix - Unhovering dropdown CSS menus

    One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

    What's the problem?
    In the opening paragraph, I state that a problem with hover activated CSS on iOS is that hover styles aren't removed until another element takes focus. A notable case for this is with CSS-only dropdown menus - ...

    Updated Yesterday at 12:20 PM by Beverleyh

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  2. A URL-driven tabbing system

    There are many 'tab content scripts' on the web that let you organize hidden DIV contents into a tab interface, with the desired content appearing when a tab is clicked on.
    But most of the time, these scripts merely do that and nothing else. They don't add entries to the browser's history, which implies that the 'panels' are not bookmarkable / that the native browser's back/forward button does not change the state of the selected tabs. And if the scripts use the hash tag for correcting this, ...
    Categories
    Uncategorized
  3. The Easy Way to Absolute Center (vertical + horizontal alignment)

    I hit a snag recently when I wanted to absolutely center a responsive image and couldn't use my 'go-to' method of CSS3 transforms, due to other conflicting CSS3 keyframe animations that were cancelling it out;
    Code:
    img { 
    	max-width: 100%; 
    	max-height: 100%; 
    	position: absolute; 
    	top: 50%; 
    	left: 50%; 
    	-webkit-transform: translate(-50%,-50%);
    	-ms-transform: translate(-50%,-50%);
    	transform: translate(-50%,-50%)
    }
    Here's ...

    Updated 05-28-2016 at 07:23 AM by Beverleyh

    Categories
    CSS related , Web Design issues
  4. Using the Google Document Viewer for embedding PDF / opening it in a new window/ tab

    Often PDF-files will not open in Internet Explorer if we just use the regular PDF-URL in the address bar or for the iframe in which we want to embed the file. And often PDF-files are not readable on iOS, or only display the first page of the document.
    These problems don't seem to occur if we use the Google Document Viewer for displaying PDF. Here's some useful code for using the viewer. Its only disadvantage is that it does not allow momentum scroll on iOS.

    Updated 05-23-2016 at 09:19 AM by molendijk (English)

    Categories
    Uncategorized
  5. SlideUp / SlideDown content without jQuery (VelocityJS)

    The SlideUp/SlideDown methods in jQuery are said to be the "Holy Grail" of vertical animations, because they are able to (reasonably) smoothly change the height of a matched element with a sliding motion, while allowing sibling elements to move in to the empty space. If you're unsure of what I mean, take a look at this jQuery-powered Q&A/FAQs script I cobbled together, and watch how the pretty-coloured bars move to leave no gaps, when other boxes are opened and closed;

    ...
Page 1 of 26 12311 ... LastLast