Drupal in-page jquery demo

This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a script file in the theme folder and declare it in the theme's .info file, but using this in-page method will allow for quick-and-dirty demo pages like this one.

The Drupal page is a custom content type with 2 CCK fields: Code and Description. These words you are reading are in the Descrioption field. The red, orange, and green boxes above are in the Code field.

The trick to getting the Code field to work is creating a new Imput Format called "As is". When creating this format, uncheck all filters, so Drupal serves up whatever is in it "as is" without inserting line breaks or filtering for HTML. Choosing "As is" for the format of the Code field allows us to enter HTML, CSS, and Javascript code in the field without it getting mangled.

Here is what I entered in the Code field of this page:


<style>
  div.mybox { width: 60px; height: 60px; float: left; margin: 10px; }
  div#mybox1 { background-color: #f00; }
  div#mybox2 { background-color: #f93; }
  div#mybox3 { background-color: #090; }
  div.clear { display: block; clear: both; }
</style>

<div class="mybox" id="mybox1"></div>
<div class="mybox" id="mybox2"></div>
<div class="mybox" id="mybox3"></div>
<div class="clear"></div>

<script>
  $("div.mybox").click(function() {
    $(this).fadeOut(2000);
    $(this).fadeIn(6000);
  });
</script>

So first, there is some CSS which styles any div with the class of mybox to be 60 by 60 pixels and to float to the left and have a margin of 10 pixels. The next bit of CSS assigns colors to the divs by id.

In the HTML section, there are three divs with a class of mybox which, of course, are styled by the CSS above.

And then there's a little script with some jquery in it which specifies that a click on a div with a class of mybox causes it to fade out in 2 seconds and then fade in over the course of 6 seconds.

Click on the colored boxes and try it out.