From f49a137e11a1d05b8de4955e017ddbd1efdc8ea9 Mon Sep 17 00:00:00 2001 From: NilsNH Date: Wed, 20 Feb 2013 10:13:14 +0100 Subject: [PATCH] Adjusted banner size. And floated images right. --- README.md | 11 +++-------- index.html | 30 +++++++++++++++++++++++++++++- scripts/bannerMaker.coffee | 15 ++++++++++----- scripts/bannerMaker.js | 16 +++++++++------- 4 files changed, 51 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 303a745..af1d1b1 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,5 @@ -#Interim specification +#What do I need? -Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html using inline styling. - -#TODO - -1. Better control of grid -2. Use jquery to allow for click-drag-adjustments -3. Ability to save out a screenshot. +Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html that contains stylesheets. +#Resources diff --git a/index.html b/index.html index cc0ae93..0ef2b8f 100644 --- a/index.html +++ b/index.html @@ -17,12 +17,40 @@ #banner, #bannerSource { margin: 10px; } - + + /** + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * contenteditable attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that are clearfixed. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + .cf:before, + .cf:after { + content: " "; /* 1 */ + display: table; /* 2 */ + } + + .cf:after { + clear: both; + } + + /** + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ + .cf { + *zoom: 1; + } +

Simple Facebook image banner creator

+
Banner source
\ No newline at end of file diff --git a/scripts/bannerMaker.coffee b/scripts/bannerMaker.coffee index e5413e5..2214722 100644 --- a/scripts/bannerMaker.coffee +++ b/scripts/bannerMaker.coffee @@ -14,6 +14,7 @@ fbuserNameObj = 'Hedvig Elisabeth Andersland': 'hedvig.andersland' 'Ida Maria Dahr': 'ida.m.nygaard' 'Torjus Nafstad': 'torjus.nafstad' + 'Nicolai Gulbrandsøy': 'niccoboss' cssOptionsObj = 'margin-bottom': '-5px' @@ -26,17 +27,21 @@ cssOptionsObj = createImageGridHtml = (userNameObj) -> graphFBAddress = 'https://graph.facebook.com/' imageArray = [] + styling = "float: right;" for fullName, username of userNameObj - imageArray.push "" + imageArray.push "" resultStr = imageArray.join('') - resultStr = "" + resultStr = "" styleBanner = (divId) -> - $("#{divId}").css 'width', '600px' + #851px x 315 facebook banner size + $("#{divId}").css 'width', '851px' + $(document).ready -> console.log 'Starting script' console.log fbuserNameObj $('#banner').replaceWith(createImageGridHtml(fbuserNameObj)) - styleBanner('#banner') - $('#bannerSource').text(createImageGridHtml(fbuserNameObj)) \ No newline at end of file + $('#bannerSource').text(createImageGridHtml(fbuserNameObj)) + + styleBanner('#banner') \ No newline at end of file diff --git a/scripts/bannerMaker.js b/scripts/bannerMaker.js index 8e12a89..fe19343 100644 --- a/scripts/bannerMaker.js +++ b/scripts/bannerMaker.js @@ -16,7 +16,8 @@ 'Bjørnar Fjeldstad': '739398715', 'Hedvig Elisabeth Andersland': 'hedvig.andersland', 'Ida Maria Dahr': 'ida.m.nygaard', - 'Torjus Nafstad': 'torjus.nafstad' + 'Torjus Nafstad': 'torjus.nafstad', + 'Nicolai Gulbrandsøy': 'niccoboss' }; cssOptionsObj = { @@ -29,27 +30,28 @@ }; createImageGridHtml = function(userNameObj) { - var fullName, graphFBAddress, imageArray, resultStr, username; + var fullName, graphFBAddress, imageArray, resultStr, styling, username; graphFBAddress = 'https://graph.facebook.com/'; imageArray = []; + styling = "float: right;"; for (fullName in userNameObj) { username = userNameObj[fullName]; - imageArray.push(""); + imageArray.push(""); } resultStr = imageArray.join(''); - return resultStr = ""; + return resultStr = ""; }; styleBanner = function(divId) { - return $("" + divId).css('width', '600px'); + return $("" + divId).css('width', '851px'); }; $(document).ready(function() { console.log('Starting script'); console.log(fbuserNameObj); $('#banner').replaceWith(createImageGridHtml(fbuserNameObj)); - styleBanner('#banner'); - return $('#bannerSource').text(createImageGridHtml(fbuserNameObj)); + $('#bannerSource').text(createImageGridHtml(fbuserNameObj)); + return styleBanner('#banner'); }); }).call(this);