View RSS Feed

Beverleyh

  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

    Categories
    CSS related , Web Design issues
  2. SiteShow with Controls - Fade-in a list of web pages/URLs as a fullscreen 'SiteShow'

    Last year I wrote about my digital signage work and the mechanics of how I displayed news and updates on a web page in a Simple Sweep-in News Scroller (CSS3/JS). The web page was displayed on a large TV screen that was mounted in a lobby/reception area, with several more installations visible around the grounds. At the time, I didn't explain that along with a web page of scrolling updates, there were many additional web pages that all displayed on a cycle, with each page redirecting to the next ...

    Updated 08-11-2016 at 07:27 AM by Beverleyh (formatting code a little better)

    Categories
    JavaScript & Ajax , Web Design issues
  3. 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.

    Backstory
    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, ...
  4. 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

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  5. 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
Page 1 of 7 123 ... LastLast