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/ Keeping yourself out of your Google Analytics statistics tag:neverpanic.de,2008-01-31:/blog/single/keeping-yourself-out-of-your-google-analytics-statistics/#3.51 2008-01-31T20:54:22Z 2009-06-27T21:28:23Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me Based on Count me out on Analytics Talk I’m keeping myself out of my sites’ statistics. However Google released a new version of their tracking JavaScript in December and they’re no longer adding new features to the old urchin.js. So updating is a god idea, but I still want to keep my hits out of my site statistics.

A quick glance at the Google Analytics help center told me there was a way to set custom variables in the new JavaScript, too, so I modified my keep-me-out files:

  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>removing you from GoogleAnalytics...</title>
  5. <script type="text/javascript">
  6. 	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  7. 	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
  9. <script type="text/javascript">
  10. 	var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
  11. 	pageTracker._initData();
  12. 	pageTracker._trackPageview();
  14. <script type="text/javascript">
  15. function setSegment(next) {
  16. 	pageTracker._setVar('someSpecialTextYoullUseInACustomFilterInGoogleAnalytics');
  17. 	if (next.length > 0) {
  18. 		document.location.href =  next;
  19. 	} else {
  20. 		window.close();
  21. 	}
  22. }
  24. </head>
  25. <body onload="setSegment('http://location.of/the.same.script.on.another.site.of.yours.to.redirect')">
  26. </body>
  27. </html>

So what is this doing? First, it loads the Google Analytics JavaScript (lines 5-8), then it initializes the tracking (lines 9-13) and last but not least the function (lines 14-23) that sets the custom value in the tracking class and redirects if you passed another URL to it (useful for chaining all your sites). Finally in line 25, the function gets called on page load.
Combined with “dom.allow_scripts_to_close_windows” in Firefox’ about:config you can add this page as a new start page tab and have it exclude you automagically every time you press the home button (and the window closes automatically after this, which keeps your tab bar clean).

]]> 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. });

]]> Google announces OpenSocial API tag:neverpanic.de,2007-11-04:/blog/single/google-announces-opensocial-api/#3.46 2007-11-04T12:06:00Z 2007-11-04T12:27:32Z Clemens Lang neverpanic@gmail.com http://www.neverpanic.de/about-me OpenSocial is an API for social networks. There’s nothing new about APIs, but the Google is taking a flying leap by standardizing the different APIs of different social networks into one API. You might ask: “Why Google?” Actually Google is just developing the OpenSocial API, but it’s not an idea Google had on their own - they have a couple of influential partners in the social web business: hi5, MySpace, Ning, Facebook and Xing, just to name a few.

I can already hear some people moan about Google doing it - but in this case the fear-mongering that Google will soon know everything about us doesn’t seem quite eligible. To quote one of the social networking companies’ CEOs that was giving a demo of an OpenSocial app at the Google Campfire One: “This is Flixter working directly with MySpace. [...] Google doesn’t control the data in any way” (Joe Greenstein, CEO of Flixter, approx. 55:00 on Campfire One: Introducing OpenSocial on YouTube)

I can’t wait to see what developers are going to do with OpenSocial - would be nice, if Google got everyone together using OpenSocial.

[via Kaffeeringe]

]]>