All Blog Entries

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

Often PDF-files will not open in Internet Explorer if we just use the regular PDF-URL in the address bar or for the iframe in which we want to embed the file. And often PDF-files are not readable on iOS, or only display the first page of the document.
These problems don't seem to occur if we use the Google Document Viewer for displaying PDF. Here's some useful code for using the viewer. Its only disadvantage is that it does not allow momentum scroll on iOS.

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

I know there's an excellent YouTube Video Gallery on DD. But I wanted a gallery that
- shows the videos inside the box containing the thumbnails for the videos, giving them the dimensions of the box;
- allows the videos to also be shown at full window size (maximize and minimize buttons for the videos);
- removes the Youtube ads;
- makes it possible to put text at the top of the thumbnails and at the top of the videos themselves.

So I made a gallery myself. ...

Tags: 1'", 1à§à¢%2527%2522

Categories

Uncategorized

Back in September last year, I wrote about making a content filter where items are filtered by class. A big limitation to this script is that it uses radio buttons to make selections, and as we all know, only one radio button can be selected at any time.

I decided to revisit the content filter, adding 'refine' functionality, so that multi-category selections can be made. A welcome refinement, and much more usable in the real world for sure.

First I should draw your ...

Updated 04-20-2016 at 12:11 PM by Beverleyh

Tags: 1zqjdm'"(){}<x>:/1zqjdm;9, 1zqjpp'"(){}<x>:/1zqjpp;9, :not(), chained selectors, content filter, css3, exclusive, hide selected, inclusive, javascript, join(), queryselectorall, show selected

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop