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

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;

...

Tags: 1zqjyq'"(){}<x>:/1zqjyq;9, close, contract, expand, javascript, jquery, open, slidedown, slideup, toggle, transition, velocity

Categories

JavaScript & Ajax , CSS related , Web Design issues