An Obsessed Web Developer

1.18.2009

How to Implement Syntax Highlighter on Blogger

Download SyntaxHighlighter
Create/Use a google pages account to upload the following files
- SyntaxHighlighter.css
- clipboard.swf
- shCore.js
- shBrushCss.js
- shBrushJava.js
- shBrushJScript.js
- shBrushSql.js
- shBrushXml.js

Inside of the <head> tag, link to those files

      <link type="text/css" rel="stylesheet" href="http://you.googlepages.com/SyntaxHighlighter.css" />
      <script type="text/javascript" src="http://you.googlepages.com/shCore.js"></script>
      <script type="text/javascript" src="http://you.googlepages.com/shBrushCss.js"></script>
      <script type="text/javascript" src="http://you.googlepages.com/shBrushJava.js"></script>
      <script type="text/javascript" src="http://you.googlepages.com/shBrushJScript.js"></script>
      <script type="text/javascript" src="http://you.googlepages.com/shBrushSql.js"></script>
      <script type="text/javascript" src="http://you.googlepages.com/shBrushXml.js"></script>

and this javascript

      dp.SyntaxHighlighter.ClipboardSwf = "http://you.googlepages.com/clipboard.swf";
      dp.SyntaxHighlighter.BloggerMode();
      dp.SyntaxHighlighter.HighlightAll("code");

Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use.

      <pre><textarea name="code" class="xhtml" cols="60" rows="1">
        ... some code here ...
      </textarea></pre>

      

      <pre name="code" class="xhtml">
        ... some code here ...
      </pre>

      

      <pre class="xhtml" title="code">
        ... some code here ...
      </pre>

If done my way using the title attribute instead of name, also add this bit of jquery in the <head> tag (or any other sort of javascript that will add the name attribute to the <pre> tag).

      $("pre[title=code]").attr("name", "code");

On your blogger blog, turn off the "Convert Line Breaks" option in Admin > Formatting. If this is not turned off, all of your code will show up on one line. I prefer to have this turned off by default anyways.

1.09.2009

How to Find and Fix IE6 Double Margin Bug Using jQuery Custom Selectors

I ran into the ie6 double margin bug and I decided that I wanted to be able to find these bugs (and fix them) with jQuery. I could just have fixed the bug using this solution, but I wanted to create a way to fix it if I bypass an error of this sort and also log it.

In order to create a fix, I had to find out if the selected element was floating and did not have a display of inline.

jQuery.fn.fixMargin = function() {
  return this.each(function() {
    if (jQuery(this).css("float") === "left" || jQuery(this).css("float") === "right") {
      jQuery(this).css("display", "inline");
    }
  });
}

When I finished writing that code, I wondered if things could be a heck of a lot easier if I could just use a couple custom jQuery selectors to find elements that might need fixing. Therefore, I made a couple custom selectors to make this process easier.

jQuery.extend(jQuery.expr[':'],{
  float: function(a) {
    return (jQuery(a).css("float") === "left" || jQuery(a).css("float") === "right");
  },
  inline: function(a) {
    return jQuery(a).css("display") === "inline";
  },
  marginx: function(a) {
    return ((parseInt(jQuery(a).css("margin-left")) > 0) || (parseInt(jQuery(a).css("margin-right")) > 0));
  },
  marginx: function(a) {
    return ((parseInt(jQuery(a).css("margin-bottom")) > 0) || (parseInt(jQuery(a).css("margin-top")) > 0));
  },
  margin: function(a) {
    return ((parseInt(jQuery(a).css("margin-left")) > 0) || (parseInt(jQuery(a).css("margin-right")) > 0) || (parseInt(jQuery(a).css("margin-bottom")) > 0) || (parseInt(jQuery(a).css("margin-top")) > 0));
  }
});

I don't really need the marginy and margin selectors, but I figured that I should just create them because the belong with the marginx selector. Now, all that is needed to find and fix an element that falls victim to this bug is the following.

jQuery.ie6log = new Array();

jQuery.fn.fixMargin = function() {
  return this.each(function() {
    if (jQuery(this).is(":float:margin:not(:inline)")) {
      jQuery(this).css("display", "inline");
      jQuery.ie6log.push("fixMargin: id=" + jQuery(this).attr("id") + " class=" + jQuery(this).attr("class"));
    }
  });
}

jQuery("*").fixMargin();

This could also be used to find bugs so that you can fix them in your css.

How to Use sIFR with jQuery to Use Your Own Fonts

Scalable Inman Flash Replacement (sIFR) allows you to use custom typography on your site by using JavaScript, Flash, and CSS. With the jQuery Sifr Plugin, you can easily display dynamic, on-the-fly text using the font(s) of their choice, regardless of the visitor's currently installed fonts, web browser, or operating system. This plugin provides a very simple configuration process.

Step 1: Download jQuery
Step 2: Download the jQuery sIFR Plugin
Step 3: Include this code in the head tag of your page

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.flash.min.js"></script>
<script type="text/javascript" src="path/to/jquery.sifr.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $.sifr({ path: "path/to/resources/", save: true });
    $("h1").sifr({ font: "AvantGarde Bk BT" });
  });
</script>

Step 4: Find true type fonts on your computer or download them at 1001freefonts (I'd be interested to hear about other place to download fonts) and convert them using sIFR Generator for sIFR version 2.

Here are some examples of the jQuery sIFR Plugin in use.

1.01.2009

Dreaming about jQuery

I dreamed about javascript coding last night. For some reason I was dreaming about using both jQuery and Prototype together because of some external script that was built upon Prototype. I was in the process of using $$ in place of $ for jQuery to allow for some sort of shorthand instead of having to use jQuery(selectors). During the day, I was thinking that $j or $$ would be good substitutes.

This is the first, and hopefully only, time that I have dreamed about coding. It is unfortunate that I have to be working even when I am asleep.

An Obsessed Web Developer

1.18.2009

How to Implement Syntax Highlighter on Blogger

1.09.2009

How to Find and Fix IE6 Double Margin Bug Using jQuery Custom Selectors

How to Use sIFR with jQuery to Use Your Own Fonts

1.01.2009

Dreaming about jQuery

Subscribe

Blog Archive

Tags

About Me

Recent Comments