Dynamic Dates with CSS Sprites+

Size: px

Start display at page:

Download "Dynamic Dates with CSS Sprites+"

Abigayle Neal
5 years ago
Views:

1 Dynamic Dates with CSS Sprites+ Boston N.E.R.D. Chris

15 Web Benefits Smaller files! (potentially) Cleaner markup (style in CSS)! No JavaScript required (preloading) Reduced load time Round trips are expensive!

16 REQUEST INTERIOR, COMPUTER. DAY.

17 WEB BROWSER: Hey, server, you there? Cambridge, MA Timbuktu

18 SERVER:... Cambridge, MA Timbuktu

19 SERVER: Always, my browser-friend. Cambridge, MA Timbuktu

20 WEB BROWSER: Cool. You got this file? Cambridge, MA Timbuktu

21 SERVER: Hold on, let me check... Cambridge, MA Timbuktu

22 SERVER:... Cambridge, MA Timbuktu

23 SERVER: Hey, HD, got that file? Cambridge, MA

24 HD:... Cambridge, MA

25 HD: Yup, here it is? Cambridge, MA

26 SERVER: Yo, got that file you wanted. Cambridge, MA Timbuktu

27 fin

29 Fewer files == better, even if file size is bigger. Combine many images into one file.

30 When? Icons Frequently used images

31 How?

32 CSS

33 Cascading Style Sheets

34 Little Boxes Everything is a box. 1. How big is this box? 2. What s inside? 3. Where can I put it?

35 Cascading Style Sheets height width background background-position

36 Cascading Style Sheets height width background background-position How big?

37 Cascading Style Sheets height width background background-position How big? What s inside?

38 Rescuing the princss

42 width:20px;

43 width:20px; height:40px;

44 width:20px; height:40px; background:url(/images/mariosprite.gif);

45 ] width:20px; height:40px; background:url(/images/mariosprite.gif); background-position: -300px 0px;

46 width:20px; height:40px; background:url(/images/mariosprite.gif); background-position: -300px -140px;

47 Dynamic Dates with CSS Sprites+ Boston N.E.R.D. Chris

60 Little Boxes Everything is a box.

61 Little Boxes Everything is a box. 1. How big is this box? 2. What s inside? 3. Where can I put it?

62 Cascading Style Sheets height width background background-position How big?

63 Cascading Style Sheets height width background background-position How big? What s inside?

64 Cascading Style Sheets height width background background-position display position top left Where can I put it?

65 Our Little Boxes

66 Our Little Boxes 1. Container

67 Our Little Boxes 1. Container 2. Pages BG

68 Our Little Boxes 1. Container 2. Pages BG 3. Month name

69 Our Little Boxes 1. Container 2. Pages BG 3. Month name 4. First Digit

70 Our Little Boxes 1. Container 2. Pages BG 3. Month name 4. First Digit 5. Second Digit

71 1. Container.littleCal { height: 38px; width: 40px; display: inline-block; position: relative; }

72 2. Pages BG.littleCal.lc_pages { background: url(images/ littlecalsprite.png) background-position: -2px -4px; height: 38px; width: 40px; position: absolute; left: 0px; top: 0px; }

73 3. Month.littleCal.lc_month { background: url(images/ littlecalsprite.png) height: 15px; width: 28px; position: absolute; left: 7px; top: 2px; z-index: 5; text-indent: -9999em; }

74 3. Month.littleCal.lc_month { background: url(images/ littlecalsprite.png) height: 15px; width: 28px; position: absolute; left: 7px; top: 2px; z-index: 5; text-indent: -9999em; }

75 Little Boxes Everything is a box. 1. How big is this box? 2. What s inside? 3. Where can I put it?

76 Little Boxes Everything is a box. the same! 1. How big is this box? 2. What s inside? 3. Where can I put it?

77 Little Boxes Everything is a box. the same! 1. How big is this box? 2. What s inside? 3. Where can I put it? Differenté!

78 Cascading Style Sheets height width background background-position display position top left

79 Cascading Style Sheets height width background background-position display position top left

80 .lc_month_1.lc_month { background-position: -100px -16px; }.lc_month_2.lc_month { background-position: -130px -16px; }.lc_month_3.lc_month { background-position: -160px -16px; }.lc_month_4.lc_month { background-position: -190px -16px; }.lc_month_5.lc_month { background-position: -220px -16px; }.lc_month_6.lc_month { background-position: -250px -16px; }.lc_month_7.lc_month { background-position: -100px -30px; }.lc_month_8.lc_month { background-position: -130px -30px; }.lc_month_9.lc_month { background-position: -160px -30px; }.lc_month_10.lc_month { background-position: -190px -30px; }.lc_month_11.lc_month { background-position: -220px -30px; }.lc_month_12.lc_month { background-position: -250px -30px; }

81 .littlecal { height: 38px; width: 40px; } display: inline-block; position: relative;

82 " .littlecal.lc_pages { background: url(images/littlecalsprite.png) background-position: -2px -4px; } height: 38px; width: 40px; position: absolute; left: 0px; top: 0px;

83 " " .littlecal.lc_month { background: url(images/littlecalsprite.png) } height: 15px; width: 28px; position: absolute; left: 7px; top: 2px;

84 " " .littlecal.lc_month { background: url(images/littlecalsprite.png) } height: 15px; width: 28px; position: absolute; left: 7px; top: 2px;.lc_month_1.lc_month { background-position: -100px -16px; }.lc_month_2.lc_month { background-position: -130px -16px; }.lc_month_3.lc_month { background-position: -160px -16px; }.lc_month_4.lc_month { background-position: -190px -16px; }.lc_month_5.lc_month { background-position: -220px -16px; }.lc_month_6.lc_month { background-position: -250px -16px; }.lc_month_7.lc_month { background-position: -100px -30px; }.lc_month_8.lc_month { background-position: -130px -30px; }.lc_month_9.lc_month { background-position: -160px -30px; }.lc_month_10.lc_month { background-position: -190px -30px; }.lc_month_11.lc_month { background-position: -220px -30px; }.lc_month_12.lc_month { background-position: -250px -30px; }

85 " " .littlecal.lc_month { background: url(images/littlecalsprite.png) height: 15px; width: 28px;? } position: absolute; left: 7px; top: 2px;.lc_month_1.lc_month { background-position: -100px -16px; }.lc_month_2.lc_month { background-position: -130px -16px; }.lc_month_3.lc_month { background-position: -160px -16px; }.lc_month_4.lc_month { background-position: -190px -16px; }.lc_month_5.lc_month { background-position: -220px -16px; }.lc_month_6.lc_month { background-position: -250px -16px; }.lc_month_7.lc_month { background-position: -100px -30px; }.lc_month_8.lc_month { background-position: -130px -30px; }.lc_month_9.lc_month { background-position: -160px -30px; }.lc_month_10.lc_month { background-position: -190px -30px; }.lc_month_11.lc_month { background-position: -220px -30px; }.lc_month_12.lc_month { background-position: -250px -30px; }

86 July 13

87 July 13

88 July 1

89 July 1

90 July 1

95 July 13

96 July 1

97 July 1

98 July 1

99 The 1 Box What s changed? 1. How big is this box? 2. What s inside? 3. Where can I put it?

100 The 1 Box What s changed? the same! 1. How big is this box? 2. What s inside? 3. Where can I put it?

101 The 1 Box What s changed? the same! 1. How big is this box? Differenté! 2. What s inside? 3. Where can I put it?

102 .littlecal.lc_day_first { background: url(images/littlecalsprite.png) } width: 10px; height: 15px; position: absolute; left: 10px; top: 14px;.littleCal.lc_day_single { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 14px; top: 14px;.littleCal.lc_day_second { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 19px; top: 14px;

103 .lc_day_single_1.lc_day_single,.lc_day_first_1.lc_day_first,.lc_day_second_1.lc_day_second { background-position: -100px -0px; }.lc_day_single_2.lc_day_single,.lc_day_first_2.lc_day_first,.lc_day_second_2.lc_day_second { background-position: -120px -0px; }.lc_day_single_3.lc_day_single,.lc_day_first_3.lc_day_first,.lc_day_second_3.lc_day_second { background-position: -140px -0px; }.lc_day_single_4.lc_day_single,.lc_day_first_4.lc_day_first,.lc_day_second_4.lc_day_second { background-position: -160px -0px; }.lc_day_single_5.lc_day_single,.lc_day_first_5.lc_day_first,.lc_day_second_5.lc_day_second { background-position: -180px -0px; }.lc_day_single_6.lc_day_single,.lc_day_first_6.lc_day_first,.lc_day_second_6.lc_day_second { background-position: -200px -0px; }.lc_day_single_7.lc_day_single,.lc_day_first_7.lc_day_first,.lc_day_second_7.lc_day_second { background-position: -220px -0px; }.lc_day_single_8.lc_day_single,.lc_day_first_8.lc_day_first,.lc_day_second_8.lc_day_second { background-position: -240px -0px; }.lc_day_single_9.lc_day_single,.lc_day_first_9.lc_day_first,.lc_day_second_9.lc_day_second { background-position: -260px -0px; }.lc_day_single_0.lc_day_single,.lc_day_first_0.lc_day_first,.lc_day_second_0.lc_day_second { background-position: -280px -0px; }.littlecal.lc_day_first { background: url(images/littlecalsprite.png) } width: 10px; height: 15px; position: absolute; left: 10px; top: 14px;.littleCal.lc_day_single { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 14px; top: 14px;.littleCal.lc_day_second { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 19px; top: 14px;

104 July 13

105 " "

106 " " .littlecal.lc_day_first { background: url(images/littlecalsprite.png) } width: 10px; height: 15px; position: absolute; left: 10px; top: 14px;

107 " " .littlecal.lc_day_first { background: url(images/littlecalsprite.png) } width: 10px; height: 15px; position: absolute; left: 10px; top: 14px;.littleCal.lc_day_second { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 19px; top: 14px;

108 " " .lc_day_single_1.lc_day_single,.lc_day_first_1.lc_day_first,.lc_day_second_1.lc_day_second { background-position: -100px -0px; }.lc_day_single_2.lc_day_single,.lc_day_first_2.lc_day_first,.lc_day_second_2.lc_day_second { background-position: -120px -0px; }.lc_day_single_3.lc_day_single,.lc_day_first_3.lc_day_first,.lc_day_second_3.lc_day_second { background-position: -140px -0px; }.lc_day_single_4.lc_day_single,.lc_day_first_4.lc_day_first,.lc_day_second_4.lc_day_second { background-position: -160px -0px; }.lc_day_single_5.lc_day_single,.lc_day_first_5.lc_day_first,.lc_day_second_5.lc_day_second { background-position: -180px -0px; }.lc_day_single_6.lc_day_single,.lc_day_first_6.lc_day_first,.lc_day_second_6.lc_day_second { background-position: -200px -0px; }.lc_day_single_7.lc_day_single,.lc_day_first_7.lc_day_first,.lc_day_second_7.lc_day_second { background-position: -220px -0px; }.lc_day_single_8.lc_day_single,.lc_day_first_8.lc_day_first,.lc_day_second_8.lc_day_second { background-position: -240px -0px; }.lc_day_single_9.lc_day_single,.lc_day_first_9.lc_day_first,.lc_day_second_9.lc_day_second { background-position: -260px -0px; }.lc_day_single_0.lc_day_single,.lc_day_first_0.lc_day_first,.lc_day_second_0.lc_day_second { background-position: -280px -0px; }

109 " " .lc_day_single_1.lc_day_single,.lc_day_first_1.lc_day_first,.lc_day_second_1.lc_day_second { background-position: -100px -0px; }.lc_day_single_2.lc_day_single,.lc_day_first_2.lc_day_first,.lc_day_second_2.lc_day_second { background-position: -120px -0px; }.lc_day_single_3.lc_day_single,.lc_day_first_3.lc_day_first,.lc_day_second_3.lc_day_second { background-position: -140px -0px; }.lc_day_single_4.lc_day_single,.lc_day_first_4.lc_day_first,.lc_day_second_4.lc_day_second { background-position: -160px -0px; }.lc_day_single_5.lc_day_single,.lc_day_first_5.lc_day_first,.lc_day_second_5.lc_day_second { background-position: -180px -0px; }.lc_day_single_6.lc_day_single,.lc_day_first_6.lc_day_first,.lc_day_second_6.lc_day_second { background-position: -200px -0px; }.lc_day_single_7.lc_day_single,.lc_day_first_7.lc_day_first,.lc_day_second_7.lc_day_second { background-position: -220px -0px; }.lc_day_single_8.lc_day_single,.lc_day_first_8.lc_day_first,.lc_day_second_8.lc_day_second { background-position: -240px -0px; }.lc_day_single_9.lc_day_single,.lc_day_first_9.lc_day_first,.lc_day_second_9.lc_day_second { background-position: -260px -0px; }.lc_day_single_0.lc_day_single,.lc_day_first_0.lc_day_first,.lc_day_second_0.lc_day_second { background-position: -280px -0px; }

110 " " .lc_day_single_1.lc_day_single,.lc_day_first_1.lc_day_first,.lc_day_second_1.lc_day_second { background-position: -100px -0px; }.lc_day_single_2.lc_day_single,.lc_day_first_2.lc_day_first,.lc_day_second_2.lc_day_second { background-position: -120px -0px; }.lc_day_single_3.lc_day_single,.lc_day_first_3.lc_day_first,.lc_day_second_3.lc_day_second { background-position: -140px -0px; }.lc_day_single_4.lc_day_single,.lc_day_first_4.lc_day_first,.lc_day_second_4.lc_day_second { background-position: -160px -0px; }.lc_day_single_5.lc_day_single,.lc_day_first_5.lc_day_first,.lc_day_second_5.lc_day_second { background-position: -180px -0px; }.lc_day_single_6.lc_day_single,.lc_day_first_6.lc_day_first,.lc_day_second_6.lc_day_second { background-position: -200px -0px; }.lc_day_single_7.lc_day_single,.lc_day_first_7.lc_day_first,.lc_day_second_7.lc_day_second { background-position: -220px -0px; }.lc_day_single_8.lc_day_single,.lc_day_first_8.lc_day_first,.lc_day_second_8.lc_day_second { background-position: -240px -0px; }.lc_day_single_9.lc_day_single,.lc_day_first_9.lc_day_first,.lc_day_second_9.lc_day_second { background-position: -260px -0px; }.lc_day_single_0.lc_day_single,.lc_day_first_0.lc_day_first,.lc_day_second_0.lc_day_second { background-position: -280px -0px; }

111 July 1

112 " "

113 " " .littlecal.lc_day_single { background: url(images/littlecalsprite.png) } height: 15px; width: 20px; position: absolute; left: 14px; top: 14px;

114 " " .lc_day_single_1.lc_day_single,.lc_day_first_1.lc_day_first,.lc_day_second_1.lc_day_second { background-position: -100px -0px; }.lc_day_single_2.lc_day_single,.lc_day_first_2.lc_day_first,.lc_day_second_2.lc_day_second { background-position: -120px -0px; }.lc_day_single_3.lc_day_single,.lc_day_first_3.lc_day_first,.lc_day_second_3.lc_day_second { background-position: -140px -0px; }.lc_day_single_4.lc_day_single,.lc_day_first_4.lc_day_first,.lc_day_second_4.lc_day_second { background-position: -160px -0px; }.lc_day_single_5.lc_day_single,.lc_day_first_5.lc_day_first,.lc_day_second_5.lc_day_second { background-position: -180px -0px; }.lc_day_single_6.lc_day_single,.lc_day_first_6.lc_day_first,.lc_day_second_6.lc_day_second { background-position: -200px -0px; }.lc_day_single_7.lc_day_single,.lc_day_first_7.lc_day_first,.lc_day_second_7.lc_day_second { background-position: -220px -0px; }.lc_day_single_8.lc_day_single,.lc_day_first_8.lc_day_first,.lc_day_second_8.lc_day_second { background-position: -240px -0px; }.lc_day_single_9.lc_day_single,.lc_day_first_9.lc_day_first,.lc_day_second_9.lc_day_second { background-position: -260px -0px; }.lc_day_single_0.lc_day_single,.lc_day_first_0.lc_day_first,.lc_day_second_0.lc_day_second { background-position: -280px -0px; }

115 Demo

116 Bonus Topic Gluing it all together with JavaScript

117 What We re Building: " "

118 /* -- setup -- */ function buildlittlecal(divid, datestring) { // declare variables in advance var daystring; " " var prettystring; " " // get the div where we'll put our littlecal when we're done. We'll use this later. " " var thediv = document.getelementbyid(divid);

119 /* -- is input valid? -- */ // split up that datestring. We're looking for dates formatted like this: 5/11, but if they have a year, e.g. 5/11/41, it's no problem -- the second param of the split method caps our array length at 2. " " var divarray = datestring.split('/', 2); " " // if we don't have a div array, get out, and clear the prospective div... " " if (!divarray) { " " " thediv.innerhtml = ''; " " " return; " " } " " // if the div array is not 2, it's probably not representing a date. " " if (divarray.length!== 2) { " " " thediv.innerhtml = ''; " " " return; " " }"

120 /* -- make them numbers -- */ // parse these into integers. this will clear any leading 0's, whitespace, etc... " " var monthint = parseint(divarray[0], 10); // remember to use the radix parameter (10) to set the base number system. " " var dayint = parseint(divarray[1], 10);

121 /* -- double check that they are valid numbers -- */ if (monthint > 12 monthint < 1 isnan(monthint) ) { // if the month is greater than 12, less than one, or not a number, get out " " " thediv.innerhtml = ''; " " " return; " " }" " " " if (dayint > 31 dayint < 1 isnan(dayint)) { // ditto for the day " " " thediv.innerhtml = ''; " " " return; " " }

122 /* -- turn the day integer back into a string. this allows us to just take the first character if we need to w/o math. -- */ " " var daystring = dayint.tostring(10);" "

123 /* -- build our DOM elements -- */ " // formatting will differ if the number is two digits or one. " " if (dayint > 9) { " " " " // it's a double date " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " } else { " " " // solo " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " }" "

124 What We re Building: " "

125 What We re Building:

126 /* -- build our DOM elements -- */ " // formatting will differ if the number is two digits or one. " " if (dayint > 9) { " " " " // it's a double date " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " } else { " " " // solo " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " }" "

127 /* -- build our DOM elements -- */ " // formatting will differ if the number is two digits or one. " " if (dayint > 9) { " " " " // it's a double date " " " prettystring = ''; " " } else { " " " // solo " " " prettystring = ''; " " }" "

128 /* -- build our DOM elements -- */ " // formatting will differ if the number is two digits or one. " " if (dayint > 9) { " " " " // it's a double date " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " } else { " " " // solo " " " prettystring = ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " " prettystring += ''; " " }" "

129 /* -- Success! -- */ // finally, if we've gotten here, we're a success! put the new littlecal HTML in our target div. " " thediv.innerhtml = prettystring; }

130 /* -- Live updating from an input w/ jquery */ $(document).ready(function(){ " " $('input#testinput').live('keyup', function(){ " " " var thestring = $(this).val(); " " " buildlittlecal('testdiv', thestring); " " }); " });

131 Questions?

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of