CoffeeBreak CoffeeBreak:CoffeeBreak, the neverpanic.de blog 2010-07-30T23:14:02Z Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Germany License ExpressionEngine tag:neverpanic.de,2010-07-30:/blog/ Probably the biggest RSS icon I have ever seen tag:neverpanic.de,2008-06-13:/blog/single/probably-the-biggest-rss-icon-i-have-ever-seen/#3.61 2008-06-13T16:07:00Z 2008-07-12T13:15:37Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me There’s a certain trend in so-called web 2.0 design to have ever bigger icons for RSS feeds (What are RSS feeds?).
Now I recently saw an RSS icon that beats the pants of all other RSS icons I’ve ever seen before: ImageShack’s RSS icon (screenshot):
image
This icon is a whooping 403 per 336 pixels large - that’s 135,408 square pixels!

]]> 9-slice scaling in HTML tag:neverpanic.de,2008-05-15:/blog/single/9-slice-scaling-in-html/#3.59 2008-05-15T14:59:57Z 2009-06-27T21:24:58Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):
image

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

  1. <div class="content">
  2. 	<!-- this is the overall container -->
  3. 	<div class="content-top">
  4. 		<!-- this contains the top left, top right and top center slices -->
  5. 		<div class="content-top-left"></div>
  6. 		<div class="content-top-right"></div>
  7. 		<!-- notice the top center or top repeat slice needs to be at the end -->
  8. 		<div class="content-top-repeat"></div>
  9. 	</div>
  10. 	<div class="content-repeat">
  11. 		<!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me -->
  12. 		<div class="content-repeat-left">
  13. 			<div class="content-repeat-right">
  14. 				<!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it -->
  15. 				<div class="content-repeat-center">
  16. 					<!-- /** this is where you'd place the content **/ -->
  17. 					<div class="content-repeat-clearfix"><!-- this will prevent problems with floated stuff within the content --></div>
  18. 				</div>
  19. 			</div>
  20. 		</div>
  21. 	</div>
  22. 	<div class="content-bottom">
  23. 		<!-- this contains the bottom left, bottom right and bottom center slices -->
  24. 		<div class="content-bottom-left"></div>
  25. 		<div class="content-bottom-right"></div>
  26. 		<!-- as above the bottom center div must be after the bottom left and right divs -->
  27. 		<div class="content-bottom-repeat"></div>
  28. 	</div>
  29. </div>
  30.  

CSS

And here’s where the magic comes in - this will actually combine the images and the HTML code and make it scale perfectly. Again, read the comments for explanation:

  1. .content .content-top {
  2. 	/* No rules needed here, but for the sake of completeness */
  3. }
  4. .content .content-top .content-top-left {
  5. 	/* float this one left and .content-top-right right so they flow over .content-top-repeat, which is the top center slice */
  6. 	float: left;
  7. 	/* width and height are defined by the image */
  8. 	width: 83px;
  9. 	height: 49px;
  10. 	background: url('images/content_top_left.png') no-repeat;
  11. }
  12. .content .content-top .content-top-right {
  13. 	float: right;
  14. 	/* height needs to be the same across all top slices! */
  15. 	height: 49px;
  16. 	width: 99px;
  17. 	background: url('images/content_top_right.png') no-repeat;
  18. }
  19. .content .content-top .content-top-repeat {
  20. 	height: 49px;
  21. 	/* the margins are the width of the top left and top right slices - this is not always neccessary, but in my case I was using alpha-transparent PNG8, which broke the layout in IE6 then */
  22. 	margin-left: 83px;
  23. 	margin-right: 99px;
  24. 	/* note that we repeat-x the image here */
  25. 	background: url('images/content_top_repeat.png') repeat-x;
  26. }
  27. .content .content-repeat {
  28. 	/* No rules needed here, but for the sake of completeness */
  29. }
  30. .content .content-repeat .content-repeat-left {
  31. 	/* repeat-y the image - this div will automatically resize with the content */
  32. 	background: url('images/content_repeat_left.png') left repeat-y;
  33. }
  34. .content .content-repeat .content-repeat-left .content-repeat-right {
  35. 	/* same as center left slice */
  36. 	background: url('images/content_repeat_right.png') right repeat-y;
  37. }
  38. .content .content-repeat .content-repeat-left .content-repeat-right .content-repeat-center {
  39. 	/* Put your text formatting here */
  40. 	/* again, margins are the widths of the left and right center slice */
  41. 	margin-left: 3px;
  42. 	margin-right: 14px;
  43. 	/* and this is the solid background color */
  44. 	background: #fffbf2;
  45. }
  46. .content .content-repeat .content-repeat-clearfix {
  47. 	/* you better have this if you have floated stuff in your content */
  48. 	clear: right;
  49. }
  50. .content .content-bottom {
  51. 	/* No rules needed here, but for the sake of completeness */
  52. }
  53. .content .content-bottom .content-bottom-left {
  54. 	/* same technique as above when stying the top part */
  55. 	float: left;
  56. 	/* again, image size defines the size of this div */
  57. 	width: 12px;
  58. 	height: 46px;
  59. 	background: url('images/content_bottom_left.png') no-repeat;
  60. }
  61. .content .content-bottom .content-bottom-right {
  62. 	/* see above */
  63. 	float: right;
  64. 	width: 61px;
  65. 	/* note the height _must_ be euqal across all bottom slices */
  66. 	height: 46px;
  67. 	background: url('images/content_bottom_right.png') no-repeat;
  68. }
  69. .content .content-bottom .content-bottom-repeat {
  70. 	/* margins again defined by the width of the bottom left and right slices */
  71. 	margin-left: 12px;
  72. 	margin-right: 46px;
  73. 	/* and height is the same across all bottom slices */
  74. 	height: 46px;
  75. 	/* don't forget the repeat-x thingy */
  76. 	background: url('images/content_bottom_repeat.png') repeat-x;
  77. }

Summary

Now that was a massive amount of code, wasn’t it? A little demo would be nice, right? Check this one: http://www.mgv-oberhaid.de/ - try changing your browser’s font size and watch the content div to see the effect.

Update: Obviously all the IDs in HTML should have been classes - the CSS excerpt did style classes, which is a better idea if you want to use multiple 9-slice boxes on a page. The demo URL was outdated, too.

]]> Webmail done right tag:neverpanic.de,2008-02-22:/blog/single/web-mail-done-right/#3.55 2008-02-22T17:25:39Z 2009-06-27T21:26:40Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me I recently bought a (gs) shared hosting package at mediatemple.net. I’m not going to talk about their system now, but about their webmail client, which is provided by @Mail, their mail server. The @Mail web interface comes in 4 variations: Simple (which is plain HTML), Simple with AJAX (which is how most other webmail interfaces work today), Advanced for IE6+ (please, don’t ask me to comment on this one) and Advanced for Mozilla.
When I logged in using the Advanced for Mozilla interface I noticed something in the address bar: .webmail/parse.php?file=html/english/xul/xullogin.html&XUL=1. XUL? Wait… I’ve heard this before… A quick lookup at Wikipedia confirmed my thoughts: XUL is the XML User Interface Language, the Language the Firefox layout (i.e. XUL defines where the Home button is) is written in. But what does that mean for a webmail client? The answer is easy: It’s a hell lot faster than HTML + JavaScript, actually it’s running at the native speed of your browser, which is pretty amazing. The XUL interface also takes advantages of features your OS can do for you: The menus and lists are rendered by your OS and even sorting is done at native speed - awesome.
However, it’s still getting better: PGP built-in right into your webmail client! Unfortunately it seems you can’t upload your own key or download your private key after you generated a key using the webmail interface, but I’m sure we’ll see some improvements in the next version(s) of this software.
@Mail XUL interface screenshot

If you have a Firefox Browser at your hands, make sure to try the @Mail-Demo at http://demo.atmail.com/index.php

]]> Forms with WuFoo tag:neverpanic.de,2007-12-20:/blog/single/forms-with-wufoo/#3.49 2007-12-20T20:08:16Z 2009-06-27T21:32:17Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.

When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).

Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.

If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.

  1.  
  2. /* - - - - - - - - - - - - - - - - - - - - -
  3. Title : Wufoo Form Structure
  4. Author : Infinity Box Inc.
  5. URL : http://wufoo.com
  6. Last Updated : September 30, 2007
  7. - - - - - - - - - - - - - - - - - - - - - */
  8. .wf {
  9. 	margin:7px 0 15px 0;
  10. 	text-align:center;
  11. 	font-size:small;
  12. 	background:#fff3e8;
  13. 	font-family:Verdana,Geneva,Helvetica,sans-serif;}
  14. .wf #wf_container {
  15. 	text-align:left;
  16. 	background:#fff3e8;}
  17. .wf #wf_container, .wf #wf_top, .wf #wf_bottom, .wf #wf_footer {
  18. 	margin:0 auto;
  19. 	width:90%;
  20. }
  21. .wf #wf_top, .wf #wf_bottom {
  22. 	width:90%;
  23. 	height:10px !important;
  24. 	display:block !important;
  25. }
  26. .wf #wf_top {margin-top:10px;}
  27. .wf form.wufoo {
  28. 	margin:20px auto 0 auto;
  29. 	padding:0 0 20px 0;
  30. }
  31. /* ----- LOGO ----- */
  32. .wf h1 {
  33. 	margin:0;
  34. 	padding:0;
  35. 	min-height:0;
  36. 	background-color:#dedede;
  37. 	text-indent:-9000px;
  38. 	text-decoration:none;
  39. }
  40. .wf h1 a {
  41. 	height:100%;
  42. 	min-height:40px;
  43. 	display:block;
  44. 	/*background:url(/images/wflogo.png) no-repeat left top;*/
  45. 	overflow:hidden;
  46. }
  47. * html .wf h1 a {
  48. 	background-image: none;
  49. 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/wflogo.png", sizingMethod="crop");
  50. }
  51. .wf img {
  52. 	/*behavior: url(/images/iepngfix.htc);*/
  53. 	border:none;
  54. }
  55. .wf .hide {
  56. 	display:none !important;
  57. }
  58. /* - - - - - - - - - - - - - - - - - - - - -
  59. Title : Wufoo Form Foundation
  60. Author : Infinity Box Inc.
  61. URL : http://wufoo.com
  62. Last Updated : November 13, 2007
  63. - - - - - - - - - - - - - - - - - - - - - */
  64. .wf .wufoo {font-family:Verdana,Geneva,Helvetica,sans-serif;
  65. 	font-size:small;
  66. }
  67. .wf .wufoo li {width:62%;}
  68. .wf form ul {
  69. 	margin:0;
  70. 	padding:0;
  71. 	list-style-type:none;
  72. 	width:100%;
  73. 	font-size:100%;
  74. }
  75. .wf form li {
  76. 	margin:0;
  77. 	padding:4px 5px 2px 9px;
  78. 	position:relative;
  79. 	clear:both;
  80. }
  81. .wf form li.focused label {
  82. 	color: #fff3e8;}
  83. .wf form input.focused,
  84. .wf form textarea.focused,
  85. .wf form select.focused {
  86. 	border-color: #f00;}
  87. .wf form li:after, .wf .buttons:after {
  88. 	content:"."; 
  89. 	display:block;
  90. 	height:0; 
  91. 	clear:both; 
  92. 	visibility:hidden;
  93. }
  94. .wf form li, .wf .buttons {
  95. 	display: inline-block;
  96. }
  97.  
  98. * html .wf form li, * html .wf .buttons {
  99. 	height: 1%;
  100. }
  101. .wf form li, .wf .buttons {
  102. 	display: block;
  103. }
  104. * html .wf form li div {display:inline-block;}
  105. .wf form li div, .wf form li span {
  106. 	margin:0 4px 0 0;
  107. 	padding:0 0 8px 0;
  108. 	color:#444;
  109. }
  110. .wf form li span {float:left;}
  111. .wf form li div.address {padding-bottom:0;}
  112. .wf form li div.left {
  113. 	display:inline;
  114. 	float:left;
  115. 	width:47%;
  116. }
  117. .wf form li div.right {
  118. 	display:inline;
  119. 	float:right;
  120. 	width:47%;
  121. }
  122. .wf .clear {
  123. 	clear:both !important;
  124. }
  125. /* ----- INFO ----- */
  126. .wf .info {
  127. 	display:inline-block; 
  128. 	clear:both;
  129. 	border-bottom:1px dotted #ccc;
  130. 	margin:0 0 1em 0;
  131. }
  132. .wf .info[class] {display:block;}
  133. .wf .info h2 {
  134. 	font-weight:normal;
  135. 	font-size:160%;
  136. 	margin:0 0 3px 0;
  137. 	clear:left;
  138. }
  139. .wf .info p {
  140. 	font-size:95%;
  141. 	line-height:135%;
  142. 	margin:0 0 12px 0;
  143. }
  144. /* ----- SECTIONS ----- */
  145. .wf form hr {display:none;}
  146. .wf form li.section {
  147. 	border-top:1px dotted #ccc;
  148. 	margin-top:9px;
  149. 	padding-top:13px;
  150. 	padding-bottom:0px;
  151. 	padding-left:9px;
  152. 	width:97% !important;
  153. }
  154. .wf form ul li.first {
  155. 	border-top:none !important;
  156. 	margin-top:0px !important;
  157. 	padding-top:0px !important;
  158. }
  159. .wf form .section h3 {
  160. 	font-weight:normal;
  161. 	font-size:110%;
  162. 	line-height:135%;
  163. 	margin:0 0 2px 0;
  164. }
  165. .wf form .section p {
  166. 	font-size:85%;
  167. 	margin:0 0 10px 0;
  168. }
  169. /* ----- FIELDS AND LABELS ----- */
  170. .wf label.desc {
  171. 	line-height:150%;
  172. 	padding:0 0 1px 0;
  173. 	border:none;
  174. 	color:#222;
  175. 	display:block;
  176. 	font-size:95%;
  177. 	font-weight:bold;
  178. }
  179. .wf label.choice {
  180. 	font-size:100%;
  181. 	display:block;
  182. 	line-height:1.4em;
  183. 	margin:-1.55em 0 0 25px;
  184. 	padding:4px 0 5px 0;
  185. 	color:#222;
  186. 	width:90%;
  187. }
  188. .wf form li div label, .wf form li span label {
  189. 	margin:0;
  190. 	padding-top:3px;
  191. 	clear:both;
  192. 	font-size:9px;
  193. 	line-height:9px;
  194. 	color:#444;
  195. 	display:block;
  196. }
  197. .wf input.text, .wf input.file, .wf textarea.textarea, .wf select.select {
  198. 	margin:0;
  199. 	font-size:100%;
  200. 	color:#333;
  201. }
  202. .wf input.text, .wf textarea.textarea, .wf .firefox select.select {
  203. 	border-top:1px solid #7c7c7c;
  204. 	border-left:1px solid #c3c3c3;
  205. 	border-right:1px solid #c3c3c3;
  206. 	border-bottom:1px solid #ddd;
  207. 	background:#fff3e8;
  208. 	/*url(/images/fieldbg.gif) repeat-x top*/;
  209. }
  210. .wf input.text, .wf input.file {
  211. 	padding:2px 0 2px 0;
  212. }
  213. .wf input.currency {text-align:right;}
  214. .wf input.checkbox, .wf input.radio {
  215. 	display:block;
  216. 	line-height:1.4em;
  217. 	margin:6px 0 0 3px;
  218. 	width:13px;
  219. 	height:13px;
  220. }
  221. .wf textarea.textarea {font-family:Verdana,Geneva,Helvetica,sans-serif;}
  222. .wf select.select {font-family:Verdana,Geneva,Helvetica,sans-serif;
  223. 	margin:1px 0;
  224. 	padding:1px 0 0 0;
  225. }
  226. .wf select.select[class] {
  227. 	margin:0;
  228. 	padding:1px 0 1px 0;
  229. }
  230. *:first-child+html .wf select.select[class] {
  231. 	margin:1px 0;
  232. }
  233. .wf .safari select.select {
  234. 	margin-bottom:1px;
  235. 	font-size:120% !important;
  236. }
  237. .wf span.symbol {
  238. 	font-size:115%;
  239. 	line-height:130%;
  240. }
  241. .wf form li .datepicker {
  242. 	float:left;
  243. 	margin:.1em 5px 0 0;
  244. 	padding:0;
  245. 	width: 16px;
  246. 	height: 16px;
  247. 	cursor:pointer !important;
  248. }
  249. /* ----- BUTTONS ----- */
  250. .wf input.btTxt {
  251. 	padding:0 7px;
  252. 	width:auto;
  253. 	overflow:visible;
  254. }
  255. .wf .buttons {
  256. 	clear:both;
  257. 	margin-top:10px;
  258. }
  259. .wf .buttons input {
  260. 	font-size:120%;
  261. 	margin-right: 5px;
  262. }
  263. /* ----- TEXT DIRECTION ----- */
  264. .wf .rtl .info h2,
  265. .wf .rtl .info p,
  266. .wf .rtl label.desc,
  267. .wf .rtl label.choice,
  268. .wf .rtl div label,
  269. .wf .rtl span label,
  270. .wf .rtl input.text,
  271. .wf .rtl textarea.textarea,
  272. .wf .rtl select.select,
  273. .wf .rtl p.instruct,
  274. .wf .rtl .section h3,
  275. .wf .rtl .section p,
  276. .wf .rtl input.btTxt {direction:rtl;}
  277. /* ----- SIZES ----- */
  278. .wf .third {
  279. 	width:32% !important;
  280. }
  281. .wf .half {
  282. 	width:48% !important;
  283. }
  284. .wf .full {
  285. 	width:100% !important;
  286. }
  287. .wf input.small, .wf select.small {width:25%;}
  288. .wf input.medium, .wf select.medium {width:50%;}
  289. .wf input.large, .wf select.large, .wf textarea.textarea {width:100%;}
  290. .wf textarea.small {height:5.5em;}
  291. .wf textarea.medium {height:10em;}
  292. .wf textarea.large {height:20em;}
  293. /* ----- ERRORS ----- */
  294. .wf #wf_errorLi {
  295. 	width:99%;
  296. 	margin:0 auto;
  297. 	background:#933000;
  298. 	border:1px dotted red;
  299. 	margin-bottom:1em;
  300. 	text-align:center;
  301. 	padding-top:4px;
  302. 	padding-left:0px;
  303. 	padding-right:0px;
  304. }
  305. .wf #wf_errorMsgLbl {
  306. 	margin:7px 0 5px 0;
  307. 	padding:0;
  308. 	font-size:125%;
  309. 	color:#DF0000;
  310. }
  311. .wf #wf_errorMsg {
  312. 	margin:0 0 .8em 0;
  313. 	color:#000;
  314. 	font-size:100%;
  315. }
  316. .wf #wf_errorMsg strong {
  317. 	background-color: #FFDFDF;
  318. 	padding:2px 3px;
  319. 	color:red;
  320. }
  321. .wf form li.error {
  322. 	display:block !important;
  323. 	background-color: #FFDFDF !important;
  324. 	margin:3px 0;
  325. }
  326. .wf form li.error label {
  327. 	color:#DF0000 !important;
  328. }
  329. .wf form p.error {
  330. 	color:red;
  331. 	font-weight:bold;
  332. 	font-size:10px;
  333. 	margin:-2px 0 5px 0;
  334. 	clear:both;
  335. }
  336. .wf .leftLabel p.error, .wf .rightLabel p.error {
  337. 	margin-left:30%;
  338. 	padding-left:15px;
  339. }
  340. .wf .noI .leftLabel p.error, .wf .noI .rightLabel p.error {
  341. 	margin-left:35%;
  342. 	padding-left:15px;
  343. }
  344. /* ----- REQUIRED ----- */
  345. .wf form .req {
  346. 	float:none;
  347. 	color:red !important;
  348. 	font-weight:bold;
  349. 	margin:0;
  350. }
  351. /* ----- INSTRUCTIONS ----- */
  352. .wf form li.focused {
  353. 	background: #351008;
  354. 	color: #fff3e8;}
  355. .wf form .instruct {
  356. 	position:absolute;
  357. 	top:0;
  358. 	left:100%;
  359. 	z-index:1000;
  360. 	width:42%;
  361. 	margin:0 0 0 8px;
  362. 	padding:8px 10px 9px 10px;
  363. 	border:1px solid #e6e6e6;
  364. 	background:#f5f5f5;
  365. 	line-height:130%;
  366. 	font-size:80%;
  367. 	color:#444;
  368. 	visibility:hidden;
  369. }
  370. .wf form .instruct small {font-size:105%;}
  371. .wf form li.focused .instruct, .wf form li:hover .instruct {visibility:visible;}
  372. /* ----- ALT INSTRUCTIONS ----- */
  373. .wf li.altInstruct .instruct,
  374. .wf li.leftHalf .instruct,
  375. .wf li.rightHalf .instruct {
  376. 	visibility:visible;
  377. 	position:static;
  378. 	margin:-2px 0 0 0;
  379. 	padding:0 0 7px 0;
  380. 	background:none;
  381. 	border:none;
  382. 	width:100%;
  383. 	font-size:9px;
  384. 	clear:left;
  385. }
  386. /* ----- LABEL LAYOUT ----- */
  387. .wf .leftLabel li,
  388. .wf .rightLabel li,
  389. .wf li.leftLabel,
  390. .wf li.rightLabel {
  391. 	width:97% !important;
  392. 	padding-top:9px;
  393. }
  394. .wf .leftLabel .small,
  395. .wf .rightLabel .small {width:17%;}
  396. .wf .leftLabel .medium,
  397. .wf .rightLabel .medium {width:35%;}
  398. .wf .leftLabel .large,
  399. .wf .leftLabel textarea.textarea,
  400. .wf .rightLabel .large,
  401. .wf .rightLabel textarea.textarea,
  402. .wf .leftLabel .address,
  403. .wf .rightLabel .address {width:64%;}
  404. * html .wf .leftLabel .small,
  405. * html .wf .rightLabel .small {width:23%;}
  406. * html .wf .leftLabel .medium,
  407. * html .wf .rightLabel .medium {width:55%;}
  408. * html .wf .leftLabel .large,
  409. * html .wf .leftLabel textarea.textarea,
  410. * html .wf .rightLabel .large,
  411. * html .wf .rightLabel textarea.textarea {width:97%;}
  412. .wf .leftLabel label.desc,
  413. .wf .rightLabel label.desc {
  414. 	float:left;
  415. 	width:30%;
  416. 	margin:2px 15px 0 0;
  417. }
  418. .wf .rightLabel label.desc {text-align:right;}
  419. .wf .leftLabel .address,
  420. .wf .rightLabel .address {float:left;}
  421. .wf .leftLabel p.instruct,
  422. .wf .rightLabel p.instruct {
  423. 	width:27%;
  424. 	margin-left:5px;
  425. }
  426. .wf .leftLabel .altInstruct .instruct,
  427. .wf .rightLabel .altInstruct .instruct {
  428. 	margin-left:30% !important;
  429. 	padding-left:15px;
  430. 	width:65%;
  431. }
  432. .wf .leftLabel .buttons,
  433. .wf .rightLabel .buttons {margin-left:15px;}
  434. .wf .leftLabel .buttons input,
  435. .wf .rightLabel .buttons input {margin-left:30%;}
  436. /* ----- NO INSTRUCTIONS ----- */
  437. .wf .noI .instruct {
  438. 	display:none !important;
  439. }
  440. .wf .noI form li,
  441. .wf .noI form li.buttons {
  442. 	width:97% !important;
  443. }
  444. .wf .noI form li.section {
  445. 	padding-left:9px !important;
  446. }
  447. /* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
  448. .wf .noI .leftLabel .large,
  449. .wf .noI .leftLabel textarea.textarea,
  450. .wf .noI .rightLabel .large,
  451. .wf .noI .rightLabel textarea.textarea,
  452. .wf .noI .leftLabel .address,
  453. .wf .noI .rightLabel .address {width:60%;}
  454. * html .wf .noI .leftLabel .small,
  455. * html .wf .noI .rightLabel .small {width:23%;}
  456. * html .wf .noI .leftLabel .medium,
  457. * html .wf .noI .rightLabel .medium {width:55%;}
  458. * html .wf .noI .leftLabel .large,
  459. * html .wf .noI .leftLabel textarea.textarea,
  460. * html .wf .noI .rightLabel .large,
  461. * html .wf .noI .rightLabel textarea.textarea {width:97%;}
  462. .wf .noI .leftLabel label.desc,
  463. .wf .noI .rightLabel label.desc {width:35%;}
  464. .wf .noI .leftLabel .buttons input,
  465. .wf .noI .rightLabel .buttons input {margin-left:35%;}
  466. /* ----- FIELD FLOATING ----- */
  467. .wf form li.leftHalf,
  468. .wf form li.rightHalf {
  469. 	width:46% !important;
  470. }
  471. .wf li.leftHalf {
  472. 	clear:left;
  473. 	float:left;
  474. }
  475. .wf li.rightHalf {
  476. 	clear:none;
  477. 	float:right;
  478. }
  479. .wf li.leftHalf .medium,
  480. .wf li.rightHalf .medium,
  481. .wf li.leftHalf .small,
  482. .wf li.rightHalf .small {width:100%;}

  1. $(function() {
  2. 	$('.wf input, .wf textarea, .wf select').each(function() {
  3. 		if (this.type != 'submit' && this.type != 'button' && this.type != 'hidden') {
  4. 			$(this).focus(function() {
  5. 				var parent = $(this).parent();
  6. 				while (!$(parent).is('li')) {
  7. 					parent = $(parent).parent();
  8. 				}
  9. 				$(parent).addClass('focused');
  10. 				$(this).addClass('focused');
  11. 			});
  12. 			$(this).blur(function() {
  13. 				var parent = $(this).parent();
  14. 				while(!$(parent).is('li')) {
  15. 					parent = $(parent).parent();
  16. 				}
  17. 				$(parent).removeClass('focused');
  18. 				$(this).removeClass('focused');
  19. 			});
  20. 		};
  21. 	});
  22. });

]]>