View RSS Feed

All Blog Entries

  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. A Single-Page Application without Framework

    A Single-Page Application is a website that fits on a single page. All necessary code is retrieved with a single page load or dynamically loaded and added to the page as necessary. The page does not reload at any point in the process unless it is manually refreshed. This provides a more fluid user experience.
    SPA has been adopted by several javascript frameworks such as AngularJS, Ember.js, Meteor.js and ExtJS. But these frameworks are overkill in regards to what is needed for a SPA to function ...
    Categories
    Uncategorized
  4. 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, ...
  5. 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
Page 1 of 26 12311 ... LastLast