2005-09-28

Problem hiding Blogger navbar in Firefox using strict XHTML

Blogger added some more lines to the block of HTML which is used for the navbar. When you use my XHTML strict safe hack to hide this navbar, you'll get the CDATA close tag the top of your page when you are using Firefox:

]]>

Somehow the new lines of HTML break the Firefox parser. The page's source is highlighted correctly strange enough.

There is a way to hide the CDATA close tag in this situation. Replace the existing hiding code:

<body>
<div class="hide"><![CDATA[<body>]]></div>

with:

<body>
<div class="hide">
<script type="text/javascript">
//<![CDATA[
/* <body> */
//]]>
</script>
</div>

Down side is that it will leave you with two Javascript errors. So it is far from perfect. And, yes, I know my site does not validate at the moment. Some time ago I thought it was a good idea to switch to HTML 4.01 strict which apparently was not. You will need XHTML to use this CDATA trick. I will convert my template back to XHTML soon.

Check Testvulsel to see this trick working. Testvulsel will validate as XHTML 1.0 strict.

2005-09-21

Opera's coolest feature

You must have read it on all the web technology blogs: Opera is free now. If you haven't already got it, go and download it. Make sure that you set your user style to ‘Nostalgia’. That really must be Opera's coolest feature!

Opera's Nostalgia style

2005-09-19

Google open all user script no longer needs Firefox settings

The Google open all (original post) user script for Greasemonkey now uses the GM_openInTab function. You no longer need to change any settings using about:config.

Thanks to Johan Sundström for dropping a comment on the GM_openInTab function.

Custom Blogger comments form (4): spam protection

After some problems with the regular expression I used to read cookies, I decided to do a little rewrite of the code. This cookie problem is fixed now. You'll find the new code below.

Spam protection was something I wanted to add. Too bad I didn't get it working on all my blogs in Internet Explorer (it worked fine in other browsers). I'll leave the code on this page and keep it embedded on my test blog for anyone who would like to test it. If anyone has ideas on how to get this working under Internet Explorer please let me now.

Note that you'll have to remove some lines if you want to use Blogger's spam protection and please read Blogger's help on spam protection first.

<form id="cFrm" action="http://www.blogger.com/login-comment.do" method="post">
<script type="text/javascript">
//<![CDATA[
  var expires = new Date();
  expires.setFullYear(expires.getFullYear()+1);
  function setCookie(name, value) {
    document.cookie = name +'='+ escape(value) +'; expires='+ expires.toGMTString();
  }
  function getCookie(name) {
    var key = name + '=';
    var c = document.cookie;
    var i = c.indexOf(key);
    if (i < 0) return '';
    var j = c.indexOf(';', i + key.length);
    if (j < 0) j = c.length;
    return unescape(c.substring(i + key.length, j));
  }
  function trim(text) {
    return text.replace(/^\s+|\s+$/g, '');
  }
  var bgPosted = false;
  function cFrmPost() {
    with (cFrm) {
      anonName.value = trim(anonName.value);
      anonURL.value  = trim(anonURL.value);
      postBody.value = trim(postBody.value);
      if (anonName.value == '') {
        alert('Please enter your name');
        anonName.focus();
        return false;
      }
      if (postBody.value == '') {
        alert('Please enter a comment');
        postBody.focus();
        return false;
      }
      anonURL.value = anonURL.value.replace(/^http:\/\//g, '');
    }
    bgPosted = true;
    return true;
  } 
  function bgpostLoad() {
    if (bgPosted == true) {
      if (cFrm.remember.checked) {
        setCookie('anonName', cFrm.anonName.value);
        setCookie('anonURL', cFrm.anonURL.value);
      }
      window.location.reload();
    }
  }
//]]>
</script>
<iframe style="position:absolute;left:-9999px;top:0" name="bgpost" onload="bgpostLoad()"></iframe>
<div>
  <input type="hidden" name="blogID" value="<$BlogID$>" />
  <input type="hidden" name="postID" value="<$BlogItemNumber$>" />
  <input type="hidden" name="isPopup" value="false" />
  <input type="hidden" name="iden" value="Other" />
</div>
<dl>
  <dt><label for="uname">Name</label></dt>
  <dd><input type="text" id="uname" name="anonName" maxlength="100" /></dd>
  <dt><label for="url">Homepage</label></dt>
  <dd><input type="text" id="url" name="anonURL" maxlength="100" /></dd>
<!-- START SPAM PROTECT remove comment to enable
  <dt><label for="captcha">Word verification</label></dt>
  <dd>
    <img src="http://www.blogger.com/captcha?postID=<$BlogItemNumber$>" height="70" width="200" alt="Verification image" />
    <br /><input type="text" id="captcha" name="captcha" /><br />
    This is <a href="http://help.blogger.com/bin/answer.py?answer=1203">spam protection</a>.
    Please enter the text in the image above to leave your comment.
  </dd>
END SPAM PROTECT remove comment to enable -->
  <dt><label for="comment-body">Comment</label></dt>
  <dd><textarea id="comment-body" name="postBody" cols="60" rows="10"></textarea>
<script type="text/javascript">
//<![CDATA[
  var cFrm = document.getElementById('cFrm');
  cFrm.target = 'bgpost';
  cFrm.onsubmit = function(){return cFrmPost()};
  if (document.cookie != '') {
    cFrm.anonName.value = getCookie('anonName');
    cFrm.anonURL.value = getCookie('anonURL');
  }
  cFrm.postBody.value = '';
  if (cFrm.captcha) cFrm.captcha.value = '';
  document.write(
    '</dd><dd><input type="checkbox" id="remember">'+
    ' <label for="remember">Remember me</label>'
  );
//]]>
</script>
  </dd>
</dl>
<p><input type="submit" name="post" value="Post" /></p>
</form>

How to use this code on your blog? It's simple. Search your template for </BlogItemComments>. After it you should paste the code. Now change the link to the comments. Your don't want it to point to the standard form.

<a href="<$BlogItemPermalinkUrl$>#comments">Comments (<$BlogItemCommentCount$>)</a>

You can also download an example of how to embed it in Douglas Bowman's Minima template.

2005-09-16

IE doctype prolog and strict mode

A week and a half ago I wondered what IE 7 would do if you would have comment before the doctype. IE 6 is thrown in quirks mode when you have got anything before the doctype. John A. Bilicki commented on the IEBlog that it would throw IE 7 in quirks as well.

There is a new post on IEBlog on the <?xml> prolog, strict mode, and XHTML in IE by Chris Wilson where he writes:

I realized as I read through the comments to my last blog post that I forgot to mention one important item that was in my presentation. We have fixed the DOCTYPE switch so it will skip an XML prolog, so that valid XHTML can be handled in strict compliance mode rather than quirks mode.

2005-09-15

‘Remember me’ disabled in comments

I've disabled the ‘Remember me’ option in the comments form for now. There is a problem with cookies either form Firefox extensions or Blogger. Thanks to Jhon for pointing this out. This Sunday I've got time to fix this problem. I might add some new features as well.

Update 2005-09-18: problem solved.

2005-09-08

Select element filter user script (2)

I addressed the usability issue of the select element filter user script for Greasemonkey. The list is no longer accidentally gets filtered on the text value of the selected option. I now always show the select control which is a much better way of showing the selected option.

Screenshot

There are still a few points that need attention (positioning for example). I'll post a new version later this month.

Introduction of this script can be found in a previous post.

Update 2005-10-04: improved version is available.

2005-09-07

Experimental select element filter user script

I got the idea for this Greasemonkey user script at work. We use a financial system with a HTML interface. The hour registration page has a fairly large project list. The items in the list are formatted this way: “Project code, client name abbreviation, project name”. I thought it would be a big help if I could select a project just by typing a part of the project name.

The select element filter user script was born. As the title of this post states, it is still experimental. It only converts select elements with more than 20 options, you're free to change that number if you like.

Try this script if you think it is useful to. I suggest not to use it on every page for now. There is still a small usability issue that needs to be addressed, but it works fine on select list of which you know the content. If you have any suggestions, questions or remarks, just let me know. I'll post an improved version later this week.

Update 2005-10-04: improved version is available.

2005-09-05

Root node wild card selector for IE only rules

Justin Rogers wrote a post on IEBlog about improving the CSS 2.1 strict parser for IE 7. IE 7 skips * html selectors in strict mode. I wonder what happens if you use the “comment before doctype” hack to get IE 6 in quirks mode.

<!-- IE6 in quirks -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I anticipate that IE 7 will render in strict mode using the above hack.

Update: Using this hack will cause IE 7 to render in quirks mode according to John A. Bilicki.

Tags:

2005-09-04

Javascript objects: accessing sibling functions

I was messing around in Javascript to be able to access sibling functions in an object. Let's say you have the following code:

function MyObject(){
  this.click = function(){
    // Here I want to call myFunction
  }

  this.myFunction = function(){
  }

  whatever.addEventListener('click', this.click, false);
}

I used an ugly hack to access myFunction. I passed the object instance's variable name to the object as a parameter and used it to access the function using the eval function. Eew!

There is a far more simple way to do this. Create a variable in your object and assign this to it:

function MyObject(){
  var obj = this;

  this.click = function(){
    obj.myFunction();
  }

  this.myFunction = function(){
  }

  whatever.addEventListener('click', this.click, false);
}

Vacation pictures

For those of you who are interested: I've posted some vacation pictures on my personal (Dutch) blog.

2005-09-02

Blogger keep current time user script now auto checks

The checkbox in the Blogger keep current time user script (original post) for Greasemonkey will now be automatically checked for new and for draft posts.

Screenshot

Note: I've renamed the script. You'll have to uninstall the script called ‘Blogger enhancements’ if you have the old version of the script installed.