jQuery Coverflow inspired Slider plugin

A fun project I’m working on required the use of a jQuery Coverflow type content slider. I searched high and low for a plugin to do the job but nothing quite fit the bill so I set out to write my own. I already had a jQuery content slider plugin that I wrote about a year ago which I decided to use as my starting point.

This coverflow plugin is inspired by Apple’s popular coverflow seen the iPhone, iPad, OSX – just about all their devices. When a “cover” is selected, either by clicking on it or by being navigated to with the arrows, it is centered and brought into focus.

jQuery Coverflow slider

DEMO HERE | GRAB THE PLUGIN ON GIT HUB

The plugin, while far from a one size fits all implementation, suits my requirements perfectly and should be a good starting point to anyone wanting similar functionality.

Installation

Installation of the jQuery plugin is relatively simple…

1. Include the CSS in the head of your document:

<head>
....
<link rel="stylesheet" type="text/css" href="jquery.coverflow.slider.css" />
</head>

2. Specify the cover images in an unordered list (ul) wrapped in a div:

<div id="contentSlider">
	<ul>
		<li><img src="cover1.jpg"></li>
		<li><img src="cover2.jpg"></li>
		<li><img src="cover3.jpg"></li>
		<li><img src="cover4.jpg"></li>
		<li><img src="cover5.jpg"></li>
		<li><img src="cover6.jpg"></li>
		<li><img src="cover7.jpg"></li>
		<li><img src="cover8.jpg"></li>
	</ul>
</div>

3. Include jQuery and jquery.coverflow.slider.js before the closing body tag of your document.

....
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.coverflow.slider.js"></script>
</body>

4. Initialise the plugin below the inclusion of the coverflow js file

$('#contentSlider').coverFlow()

5 (optional). Options:

$('#contentSlider').coverFlow({
	'initialFocus' : 0, //the index of the slide you want to be focused on load
	'speed' : 200, // the speed of the animation
	'addClasses' : "", //classes to add to the slider
	afterChange: function(index){
		console.log('Slide in focus: ' + index);
	} //executes after the slide has changed
});

Feel Free to ask any questions below. I’ll try and help where I can.

Pure CSS3 Tooltips

pure-css3-tooltipVery simple pure CSS3 Tooltips using :hover for the tip itself, the CSS3 ‘transition’ property for a nice effect when the tooltip comes in, rgba for the background property for slight transparency on the tooltip and the :after pseudo class for a small arrow to complete the effect.

SEE THE DEMO HERE

The HTML is very simple. Just put your tooltip trigger text/image/other content within a standard <a> tag (with the toolTip class so we know to target it) and put the tooltip text in a nested <span>:

<a href="#null" class="toolTip">(?)
<span>There are many variations of passages of Lorem Ipsum available, 
but the majority have suffered alteration in some form, by injected 
humour, or randomised words which don't look even slightly 
believable.</span>
</a>

You must relatively position the <a> so the toolTip knows where to base itself as it will be absolutely positioned:

.toolTip{
	position: relative;
        text-decoration:none;
}

You will want the toolTip to be hidden initially, so when you declare it’s appearance in the CSS, you must also hide it. You also set up the transition here to allow the animation to occur when it opens. When I put this together, safari still required the -webkit prefix for transition. Chrome and Firefox were fine, however for peace of mind, I put in all the prefixes. At sometime in the near future these will not be needed:

.toolTip span{
	/*hiding it by moving it behind the main content*/
	z-index: -5;
 
	/*Set the start opacity to 0 so we can fade it in nicely using transitions*/
	opacity: 0;
 
	background: rgba(0, 0, 0, 0.8);
	border-bottom: 30px none transparent;
	border-radius: 5px 5px 5px 5px;
	bottom: 25px;
	color: #FFFFFF;
	font-size: 12px;
	padding: 10px;
	position: absolute;
	left: -10px;
	text-align: justify;
	width: 300px;
	transition: all 0.3s ease-out 0s;
        -webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
}

When the <a> is hovered, we need to show the toolTip, we also change the position and the opacity from those declared above so we get a nice animation when it appears:

.toolTip:hover span{
	bottom: 30px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	display: block;
	opacity: 1;
	left: -5px;
	z-index: 9;
}

And finally, to complete the effect, use the :after pseudo class to apply a small arrow:

.toolTip span:after {
	border-color: rgba(0, 0, 0, 0.8) transparent;
	border-style: solid;
	border-width: 15px 15px 0 0;
	bottom: -15px;
	content: "";
	display: block;
	position: absolute;
	left: 20px;
	width: 0;
}

And you have pure CSS3 tooltips. Any questions or comments? I’d love to hear them!

Removing default input styles in iOS Safari

iOS Safari (and other mobile device browsers) apply their own default styling to HTML form input elements with rounded corners, drop shadows and bevels.

If you want to remove this styling, leaving you with a blank canvas to apply your own styles, you will struggle to using just the standard CSS properties such as “border”, “border-radius”, “box-shadow”, etc.

You can simply use the CSS “appearance” property to remove these styles:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Diagnosing a white space issue at the top of the page – UTF-8 BOM

I had a frustrating issue on a site I’ve been working on where I was getting a block of white-space at the top of the web page. I made sure I had no padding or margin on my <body> element and no margin on my page header causing it to sit lower than it should.

Notice the whitespace above the header and it highlighted in Firebug

Notice the whitespace above the header and it highlighted in Firebug

When, inspecting the DOM in firebug, the white space could be clearly seen. It was not showing up, however, when I viewed the page source.

After a decent amount of research, I came a useful post on Stack Overflow (http://stackoverflow.com/questions/10199355/php-include-causes-white-space-at-the-top-of-the-page). The issue turned out to be related to the file encoding. The header on my page was created in Notepad++ by one of my colleagues and it seems to have been saved in UTF-8 format with BOM (byte order mark) which is a signature at the start of the file.

The BOM was invisible to me in my text editor – Sublime 2 but was being picked up by the browser when the header file was included in my template.

Sublime 2 has a “Save with encoding” feature which allows you to save as UTF-8 with our without BOM. My solution was to simply Save with encoding > UTF-8.

sublime