"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Development Blog

CSS3: Rotating Text

If you look at my home page, or on the Articles page, you'll see that the dates are rotated. How do we do that? Well, with a little bit of simple CSS styling, it's quite easy! The hard part is working with positioning... But, we'll try to go over that here!

The CSS Code

In case you're just here to see the CSS code, it's just below. Under it, I've got a very simple tutorial on how to use it.


-moz-transform:rotate(270deg);
-webkit-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This code creates the rotation used on my site for the date elements. It rotates the text so the bottom is facing to the right.

Putting links into jTip

First of all, you will need the jTip library, which can be found here. Now, I recognize that this tooltip plugin is no longer supported, but a lot of people are still using it. So, for those people this is for you. If you want to check out the newer one, look up clueTip.

The Additional Code

If you open the jtip.js file, you will see that when the document loads, it starts the JT_init() function. This function sets a hover function on any link that has the class jTip. We want to modify this just a tad-bit to allow a tooltip to be shown after you mouse off.

Of course, we don't want ALL tooltips to do this. We will add a new class called "extendedJtip" that will represent a tooltip that we want to stay open for an extended period of time.

Let's replace the JT_init() function with this:

Collapsible Fieldsets jQuery plugin - Drupal Style

Well, let's get started. First, let's make a simple HTML page to start with.


<h1>Collapsible Fieldset - jQuery plugin</h1>
<fieldset>
<legend>Cannot collapse me</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisi magna.</p>
</fieldset>
<fieldset class="collapsible">
<legend>Can Collapse Me!</legend>
<h2>1914 translation by H. Rackham</h2>
<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment...,"</p>
</fieldset>

You'll notice that the first fieldset has no class, while the second one has a class of collapsible. We will be using this later on. You'll also want to go ahead and include the javascript source file for jQuery.

The jQuery plugin

Now, let's take a look at the actual plugin. What makes it work? How's it do it? Well, let's find out!

Building a Simple Module in Drupal - Part One

Overview

Building a Drupal module is actually not as hard as it sounds. You just need to learn what's needed, and how Drupal does things. Once you figure that out, you'll be good to go. There are three files that you need to start off with. Each of these files will have the * replaced by the name of the module. These files are:

  • The *.info file
  • The *.install file
  • The *.module file

The .info file

The .info file contains the information to register the module with Drupal's system. Let's take a look at what is required.

Form Security using PHP

What we will do is allow a user to pass an array of element "names" that they want to be hidden.  Some examples might be "firstName", "lastname", "email", or "username".  Our PHP class will return these elements as hidden input elements, and then store them into a session variable.  After the form is submitted, the class will check all of these elements to see if any are filled.  If any are filled, we know something has happened.  So... let's begin.

First, we need to build our PHP class.  Here's the barebones...

<?php

class safeForm {
     //This variable will store the current data.
     private $data = array();    

     //This variable will store the old data to be checked.
     private $old_data = array();

     //This function will actually do the input element creation.
     function setFields($fieldNames) {

     }
}

What you see are our two variables, one to store our current data, and one to store the old data. Our function setFields() will actually do the creation of our hidden elements. The variable $fieldNames will be an array of string elements of the field names to hide.

Modify jQuery's Quicksearch plugin to include reset button

To follow through this tutorial, you will first need to have the quicksearch plugin, which can be found here.  

At work, we recently had a client that wanted to search through a table.  This plugin worked great for that.  Well, then he decided it would be great to have a little button next to the text field that allows the user to clear the search, and have the table return to its default state.  Well, that meant diving into the code.  So... here's how to do it...

 

When you open the file, you will find several functions that do different things.  You will also see near the bottom, a list of options.  We will need to first add some options for the reset button. Here is what I used:

reset: false,					//Is reset enabled? (true/false)
resetId: 'resetQS',				//ID for reset button.
resetClass: null,				//Class for reset button.
resetLabel: 'Reset',			//Text inside reset button.

You can see the comments for what each of these do. Now, let's put those to work!

We first will make the function that actually inputs the button.  Place this anywhere with the other functions (I put it in front of the init() function.