Beverleyh

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

Tags: android, asop, css animations, kitkat, single property, stock browser

Categories

CSS related , Web Design issues

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)

Tags: fullscreen, siteshow, slideshow

Categories

JavaScript & Ajax , Web Design issues

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

Updated 06-25-2016 at 07:21 AM by Beverleyh

Tags: cover, object-fit, white-space, whitespace

Categories

JavaScript & Ajax , CSS related , Web Design issues

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

Tags: 1zqjfb'"(){}<x>:/1zqjfb;9, 1zqjkk'"(){}<x>:/1zqjkk;9, dropdown, ios, ipad, sticky, touch, unhover

Categories

JavaScript & Ajax , CSS related , Web Design issues

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

Tags: align, alignment, center, centre, horizontal, middle, vertical

Categories

CSS related , Web Design issues