View RSS Feed

Recent Blogs Posts

  1. Android (≤4.4) stock browser-friendly CSS Animations

    While I've been rolling out my Sweep-in News Scroller with Controls on a school website (cutting out jQuery for performance gains), I was handed an older Android device that didn't display it. In place of the news scroller was... well, nothing at all! zilch! Just empty nothingness with no sign of what *should* be there. I was perplexed and annoyed. What was going on?!

    Identifying the problem
    Day-to-day I use newer Android devices for general testing, which have Chrome installed ...

    Updated 08-25-2016 at 02:51 PM by Beverleyh

    CSS related , Web Design issues
  2. Img Src to Background-Image - Dealing with images inserted via a CMS

    This small JavaScript function converts the src attribute of an <img> tag into a CSS background-image, where background-size:cover; kicks in for visual containment and faux-cropping. In other words, it forces image size to be consistent.

    While I've been working with folks who update their own web pages - training them to use a CMS and the likes - one common issue that crops up has to do with the arrangement of images on a web page. Inevitably, at some point, ...
  3. 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 05-30-2016 at 12:20 PM by Beverleyh

    JavaScript & Ajax , CSS related , Web Design issues
  4. 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;
    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

    CSS related , Web Design issues
  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 7 123 ... LastLast