All posts tagged html

blog

Treviso | A Free HTML Template

Well this freebie is a big one! A complete and sweet HTML template for showcasing your work… All the files are included in the download including the layered PSD file that started the design off! Check out a preview and save it somewhere on your HD, you never know when you might use it :)

Live Preview Download Files
blog

Corsica – A Premium App Landing Page

It’s been over 2 year since I released a ThemeForest template, and now is the time to do a new one. Say hi to corsica, a sweet and simple app landing page. It has a layered PSD file included with it. And be on the lookout this week! I’m going to be releasing a free HTML template! corsica sadly is a premium template and is for sale on ThemeForest.

Live Preview
alienimg

A Quick Coding Tip: Vertically Allign Images

So I got faced with a problem as I was coding a project up and didn’t like the solutions online that all said to use either tables or browser specific hacks. So how to vertically allign images in a div with some simple code?

Now to move on to the code… Lets say you have blog posts and they have an option for the user to upload images… How to make it buletproof? You can set the max size, and if the user uploads images that are smaller, you can use this script to make sure images will allways be centered… So put your images in a wrapper with a fixed width and height of the maximum image size, that’s where we subtract the image height from that dimension, so lets say you want your images to be maximum 120x120px. Make a 120x120px container and display the img tags in that container, now in the javascript bellow, just change out your container height.

Now this script is ready for use on the document ready statement, it will loop through each of the images with your desired class, and apply a padding based on its dimensions, and hey presto, perfect vertically alligned images.

1
2
3
4
5
6
7
8
9
10
/* Vertical Image Allign */
$('img.attachment-image').each(function() {
     var h = $(this).height();
     var height = (120-h)/2;
     if (h < 120) {
        $(this).css('margin-top', height + "px");
     }else{
        $(this).css('margin-top', '0px');
     }
});