CSS, Web Development

Responsive images via background-size

As I was doing some image uploading work on a project recently I decided to understand, truly, if I should resize and cut corners off to keep ratio or thumbnail and keep the independant size of the image but risk making it difficult to put into the page.

As an example, I have an image of 700px x 418px. I have a choice between cutting it down to 400px x 400px cutting off 300px or bringing it down to about 400px x 238px and make it more difficult to add to a Bootstrap powered gallery.

So I looked at what Facebook did here and I noticed they actually use the 400×238 image as a background image and then used background-size:cover to fix any problems. Forutnately, despite what caniuse.com (http://caniuse.com/#feat=background-img-opts) says, background-size is supported on IE8 (I actually got a Win 7 VM with IE8 on it from modern.ie and tested it) but, with no content, the media queries for resizing the colums could not function right.

So I need something to tell both IE8 and later browsers how to size this image.

The CSS solution at this link works pefect: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images

In short: here is the post summarised.

<div style="width: 400px">
    <span id="image">
        <span id="image-inner">
        </span>
    </span>
</div>


#image {
    display: inline-block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(image.jpg); 
}


#image-inner {
    display: block;
    height: 0;
    padding-top: 63.3%;
}
CSS

CSS styling browser Consistent Buttons

This CSS will allow for buttons to show the same in IE7 as they do in Firefox 3.6 and other standards compliant browsers. From what I know Facebook, Youtube and Google all use this trick to display browsers consistent buttons. Enjoy :).

span.primaryOuter{
	border-bottom:1px solid #E7E7E7;
	border-right:1px solid #E7E7E7;
	margin:3px 0 4px 4px;
	height:32px;
	position:relative;
	z-index:100;
	display:inline-block;
}

span.primaryInner{
	background:none repeat scroll 0 0 #EEEEEE;
	border-color:#CCCCCC #999999 #999999 #CCCCCC;
	border-right:1px solid #999999;
	border-style:solid;
	border-width:1px;
	height:30px;
	display:inline-block;
}

span.primaryInner input{
	background-position:center bottom;
	background-image:url("/images/bigButtonBack.png");
	border:medium none;
	color:#000000;
	cursor:pointer;
	font:15px arial,sans-serif;
	height:30px;
	margin:0;
	vertical-align:top;
	padding:0 6px;
	width:auto;
	overflow:visible;
}

span.primaryInner input:active{
	background:none repeat scroll 0 0 #CCCCCC;
}
CSS, Javascript, JQuery

Facebook style top bar/ bottom bar navigation thing

I said some while ago now I would post a more elegent version of the facebook drop down JQuery…Well here it is. It works per menu item. It can work from the container div only but I wanted it this way it made ore sense for me. Sorry I didn’t post this earlier I am so busy lately.

The Javascript:

var SubMenutimer;
var last_o;

$(".mainbar").ready(function() {
	$(".staticMenu dt a").click(function() {
		
		$(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
		$(".staticMenu dt a").not($(this)).removeClass("selected");
		$(this).parents(".staticMenu").find("ul").toggle();
		
		if($(this).parents(".staticMenu").find("ul").css("display") == "none"){
			$(this).removeClass("selected");		
		}else{
			$(this).addClass("selected");		
		}
								   
	});

	$(".staticMenu dd ul li a").click(function() {
		var text = $(this).html();
		$(".staticMenu dt a span").html(text);
		$(".staticMenu dd ul").hide();
	}); 

	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("staticMenu")){
			$(".staticMenu dd ul").hide();
			$(".staticMenu dt a").removeClass("selected");	
		}
	
	});						 
});

function openSubMenu(o){
	cancelSubMenuClose();

	if(last_o) $(last_o).parent().find("div").hide();

	last_o = o;
	$(o).parent().find("div").show();
}

function closeSubMenu(){
	SubMenutimer = setTimeout("close()",500);
}

function cancelSubMenuClose(){
	clearTimeout(SubMenutimer);	
}

function close(){
	$(last_o).parent().find("div").hide();
}

The css:

@charset "utf-8";
/* CSS Document */

div.mainbar{
	top:0; 
	z-index:99;
	padding:0;
	position:fixed;
	width:100%;	
}

div.mainbarInner{
	background:url(/images/pre_top.png);
	border:1px solid #bcb6aa;
	border-top:0;
	border-bottom:0;
	margin:0 15px;
}

ul.mainMenu{
	list-style:none;
	
}

ul.mainMenu li{
	float:left;
	border-right:1px solid #bcb6aa;
}

.mainMenu li a{
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}

.mainMenu li a:hover{
	background:white;
	text-decoration:none;
}


.staticMenu dl{ }
.staticMenu dd { position:relative; }

/* DT styles for sliding doors */
.staticMenu dt a {	
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}
		
.staticMenu dt a.selected{
	background:white;
	position:relative;
	z-index:99;
	padding-bottom:6px;
}

/* UL styles */
.staticMenu dd ul { 
	display:none;
    list-style:none; 
	position:absolute; 
    cursor:pointer;
}
	
ul.mainMenuSub{
	position:absolute;
	top:-2px;
	left:-1px;
	padding:2px;
	border:1px solid #b4a291;
	background: white;
}

ul.mainMenuSub li{
	border:0;
	width:223px;	
}

ul.mainMenuSub li.seperator{
	width:223px;
	height:2px;
	display:block;
	background:url(/images/mainmenusep.png) repeat-x;
	margin-bottom:6px;
	margin-top:4px;
	overflow:visible;
}

ul.mainMenuSub li a:link{
	display:block; 
	font-weight:bold;
	text-align:left;
	overflow:hidden;
	padding:2px 4px 3px 19px; 
	color:#444444; 
	text-decoration:none;
}

ul.mainMenuSub li a:hover{
	background:#444444;
	color:white;
	text-decoration:none;
}

ul.mainMenuSub li a img{

	border:0;
}

ul.mainMenuSmall li{
	width:173px;
}

div.mainMenuSubTwo{
	display:none;
	left:220px; 
	position:absolute;
	top:3px;
	z-index:99;
	background:white;
}


div.mainMenuSubTwo ul{
	border:1px solid #b4a291;
	padding:2px;
	background:white;
}

a.MainSubExpandable{
	background:white url(/images/mainmenuexpandable.png) no-repeat right top;

}

ul.mainMenuSub li a.MainSubExpandable:hover{
	background:#444444 url(/images/mainmenuexpandable.png) no-repeat;
	background-position:right -20px;
}

Some sample html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="content-language" content="en"/>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		
		<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/presence_bar.css" type="text/css" media="screen, projection"/>
		
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/presence_bar.js"></script>
	
	</head>
	
	<body>	
<div class="mainbar">
	<div class="mainbarInner" style="overflow:visible; position:relative; display:block; height:26px;">
				<ul class="mainMenu">
                	<li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/applications" onclick="return false;">Applications</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a>There are no applications here</a></li>
                                </ul>
                            </dd>
                        </dl>
            		</li>             
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/places" onclick="return false;">Places</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Library</a> 

                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Videos</a></li>
                                        		<li><a href="#">Favourites</a></li>                                                
                                            	<li><a href="#">Playlists</a></li>
                                            	<li><a href="#">Subscriptions</a></li>
                                            </ul>
                                       	</div>
									</li>
                                    <li class="seperator"><!-- --></li>                               
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Networks</a></li>                                       
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Groups</a></li>                                    
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Friends</a></li>                                    
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Inbox</a></li> 
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Channel</a></li>                                   
                                </ul>
                            </dd>
                        </dl>                    
                    </li>
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/settings" onclick="return false;">Settings</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Preferences</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">About Me</a></li>
                                        		<li><a href="#">Appearence</a></li>  
                                                <li><a href="#">Main Menu</a></li>                                              
                                            	<li><a href="#">Privacy</a></li>
                                            	<li><a href="#">Notifications</a></li>
                                            	<li><a href="#">Adverts</a></li>  
                                            	<li><a href="#">Safe Search</a></li>                                                                                                
                                            </ul>
                                       	</div>                                    
                                    </li>
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Administration</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Block List</a></li>
                                        		<li><a href="#">Parental Controls</a></li>                                                
                                            	<li><a href="#">Email Options</a></li>
                                            	<li><a href="#">Username</a></li>
                                            	<li><a href="#">Password</a></li>  
                                            	<li><a href="#">Payments</a></li>                                                
                                            	<li><a href="#">Linked Accounts</a></li>                                                                                                
                                            	<li><a href="#">Security Question</a></li>                                                                                                                                                
                                            	<li><a href="#">Deactivate Account</a></li>                                                                                                                                                
                                            </ul>
                                       	</div>                                      
                                    </li>
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Help Center</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">About StageX</a></li>                                 
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Developers</a></li>                                                                           
                                </ul>
                            </dd>
                        </dl> 
                     </li>                    
                </ul>
                <div style='float:right;'>
                <ul class="mainMenu" style="float:right;">
                	<li style="border-right:0;">
                        <dl class="staticMenu">
                           <dt><a href="/settings" onclick="return false;">Sam</a></dt>
                             <dd>
                                    <ul class="mainMenuSub" style="right:-1px; left:auto;">
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="A" style="cursor:pointer;">Available</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Busy</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Away</a></li>  
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Appear Offline</a></li>                                                                                
                                        <li class="seperator"><!-- --></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Log out</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Switch User</a></li>                                 
                                    </ul>
                             </dd>
                       </dl>  
                   </li>
               </ul>               
                	<div class="notificationArea" style='float:right;'>
                    	Notification Icons
                    </div>                    
                </div>
	</div>
</div>
</body>
</html>
CSS, Web Development

My Theme CSS

A couple of people have been asking me what CSS I use for this theme. Well today is your lucky day I am releasing the CSS. It’s not the greatest or even most elegant CSS but it’s some I made up one night.

In order to achieve this theme you must first use the Sandbox 1.6.1 theme. I use the CSS from this as a basis so I don’t have to write all the basics again…yes, I am lazy! Anyway add this to your custom CSS code telling wordpress to add it onto the end of Sandbox. Some say this is slow but actually browsers can load 2 style sheets at the same time so it’s max of 0.000000000000000000000000000000001 ms slower (which is stupid). If you really wanted to make an impact with WordPress loading you would get a CDN, make sub domains and put all your JS and CSS etc onto CDN translated into sub-domains on your site (but this is pointless unless your getting over 100K views a day).

Anyway here’s the code for my theme, enjoy:

* {
margin:0;
padding:0;
}

html {
margin:0;
padding:0;
}

a:link {
color:#3B5998;
text-decoration:none;
}

a:visited {
color:#3B5998;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

body {
font-size:12px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}

div#wrapper {
min-width:960px;
margin:0 40px;
}

div#header {
padding-top:15px;
height:50px;
text-align:left;
}

h1#blog-title,h1#blog-title>a {
font-size:18px;
}

div#menu {
margin-bottom:0;
font-size:12px;
background:white;
position:relative;
height:25px;
}

div#menu ul {
margin-left:0;
position:absolute;
border-top:1px solid #bcb6aa;
border-left:1px solid #bcb6aa;
}

div#menu ul a {
float:left;
display:block;
font-weight:bold;
font-size:11px;
height:16px;
background:url('http://173.203.115.147/images/wordpress/top_menu_tabs.png');
margin-right:0;
border-right:1px solid #bcb6aa;
color:#555555;
padding:4px 5px;
}

div#menu ul a:visited {
color:#565656;
}

div.skip-link {
display:none;
}

div#container {
float:left;
margin:0 0 0 -220px;
}

div.sidebar {
float:right;
right:40px;
top:35px;
font-size:11px;
z-index:99;
width:200px;
}

h2.entry-title {
font-size:14px;
font-weight:bold;
padding-bottom:10px;
border-bottom:1px solid #cccccc;
}

div.entry-date {
color:#808080;
font-size:9px;
}

div#secondary {
clear:right;
}

div#nav-above,#nav-below {
background-color:#EDEFF4;
border:1px solid #D8DFEA;
padding:10px 15px;
}

div#nav-above {
border-top:1px solid #bcb6aa;
}

div#nav-above,#nav-below a {
color:#3B5998;
text-decoration:none;
font-weight:bold;
}

div#nav-above,#nav-below a:hover {
text-decoration:underline;
}

div#nav-above,#nav-below a:visited {
color:#3B5998;
text-decoration:none;
}

widget_recent_entries ul {
list-style-image:url('//173.203.115.147/images/wordpress/');
}

div.post {
margin-bottom:10px;
padding:10px;
}

div.entry-content {
font-size:9pt;
line-height:22px;
padding:10px 0;
}

div.entry-content p {
margin:5px 0;
}

div.entry-content h3 {
margin:10px 0 0;
}

div.entry-meta {
border-top:1px solid #cccccc;
font-size:11px;
padding:10px;
}

div.possibly-related {
margin-top:20px;
}

div.possibly-related ul {
margin-left:25px;
}

ul {
margin-left:25px;
}

div.page {
border-top:1px solid #bcb6aa;
padding:10px;
}

div#comments-list {
padding:10px;
}

div#comments-list h3 {
padding-bottom:10px;
}

li.comment {
background:url('http://173.203.115.147/images/wordpress/comment_deliminator.png') no-repeat top left;
list-style:none outside none;
font-size:9pt;
line-height:22px;
padding:10px 0 10px 56px;
}

div#comments-list ol {
list-style:none outside none;
margin-left:15px;
}

div.comment-meta {
padding-top:0;
margin-bottom:10px;
color:#808080;
font-size:9px;
line-height:12px;
padding-left:36px;
}

div.comments ol li {
margin:0;
}

img.avatar {
vertical-align:middle;
float:left;
}

div.comment-author span {
font-weight:bold;
}

span.fn {
margin-left:5px;
}

h3.widgettitle {
line-height:18px;
min-width:10em;
background:url('http://173.203.115.147/images/wordpress/sidebar_headings.png') repeat-x;
font-weight:bold;
color:#333333;
}

div.sidebar h3 {
border-left:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
font-size:12px;
padding:5px 5px 7px;
}

div#primary {
margin-top:0;
}

div#content {
margin:0 0 0 220px;
}

div.sidebar input#s {
font-size:13px;
height:16px;
width:100px;
margin:0;
padding:3px 3px 4px;
}

div.sidebar input.button {
cursor:pointer;
display:inline-block;
font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
font-weight:bold;
outline:medium none;
white-space:nowrap;
margin:0;
padding:2px 6px;
}

div.sidebar div {
padding-left:10px;
padding-top:10px;
}

div.sidebar ul ul {
margin:0 0 0 25px;
}

li.widget_recent_entries li {
list-style:none outside none!important;
background:url('http://173.203.115.147/images/wordpress/page.png') top left no-repeat;
padding-left:20px;
padding-bottom:5px!important;
margin:5px 0!important;
}

li.widget_recent_entries ul {
margin-left:10px!important;
margin-top:10px!important;
}

li.widget_categories ul {
margin-top:10px!important;
font-size:12px!important;
}

li.widget_categories li {
line-height:15px;
}

h2.page-title {
border-top:1px solid #BCB6AA;
font-size:18px;
padding:10px 0!important;
}

input#s-no-results {
font-size:13px;
height:16px;
width:263px;
margin:0;
padding:3px 3px 4px;
}

div.no-results input.button {
cursor:pointer;
display:inline-block;
font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
font-weight:bold;
outline:medium none;
white-space:nowrap;
margin:0;
padding:2px 6px;
}

li.cat-item ul.children {
margin-top:0!important;
}

input.text {
border:1px solid #BCB6AA;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
}

textarea {
border:1px solid #BCB6AA;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
width:400px;
padding:5px!important;
}

form#commentform .form-input {
width:50%;
}

form#commentform .button {
cursor:pointer;
display:inline-block;
font-family:'Lucida Grande',Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
font-weight:bold;
outline:medium none;
white-space:nowrap;
float:right;
margin:10px 0;
padding:2px 6px!important;
}

textarea#comment {
width:100%;
}

form#commentform {
width:40%;
margin-left:auto;
margin-right:auto;
}

input#author,input#email,input#url {
width:100%!important;
padding:5px!important;
}

div#respond h3 {
width:40%;
margin-left:auto;
margin-right:auto;
}

div.form-option {
margin-top:5px;
}

div.form-option p {
line-height:18px;
}

form#commentform #comment-notes {
font-size:11px!important;
}

form#commentform #login {
font-size:11px!important;
}

li.comment p {
margin:1em 0;
}
CSS, Firefox, Internet Explorer, JQuery, MySQL, PHP

Zune Quickplay Inspired JQuery Gallery with Tooltips

Hello and welcome I have been off recently working on something new for my video site.

I thought I would produce some sort of tutorial on here so others can understand how to customize their JQuery galleries. I will be starting to talk you through the process of producing the end product in a couple of days but I thought I would post the initial screen shot now so you can all see what the end product will look like:

Zune Inspired JQuery Gallery
Zune Inspired JQuery Gallery

What we are looking at is the big gray strip across the middle of the page, ignore the header or footer. There are three parts to the gallery, “hot” (popular) videos, default spotlight videos and editors pick. The JQuery gallery will scroll between each part when one the links is clicked and the links will change accordingly (I could have done it all by normal AJAX but I wanted the scroll effect so meh).

The sections themselves are broken down into videos. There is one main highlight video which has information about it (length and rating) and four smaller image representing other videos. When the user hovers over one of the images and tooltip will show displaying the title of the video.

In this tutorial I will be using, HTML, CSS, JQuery (Scroll and AJAX), PHP and MySQL and I will be checking this product in IE7 (IE8 is emulated as IE7) and Firefox (just the two browsers I have at hand, no IE is not running under Wine, it’s in a VM :P).

One last tip before I say bye for a couple of days whilst I get the finishing touches done, this tutorial is really only for professionals I would recommend the newer users stick to the JQuery gallery post I uploaded some time ago. This tutorial will be using the full Monty.

CSS, Internet Explorer

IE Button Fix – Fix those stupid button widths

I know this hack is old and everything but I thought I’d repost this on here since I forgot how to do this today and it took ages for me to find out how to do this again. This hack basically stops buttons from expanding their widths in IE to stupid levels and is standards mode compliant.

/* IE6 */
* html input {
overflow: visible;
width: 1px;
}

/* IE7 */
*+html input {
overflow: visible;
}