Aug 10 2006

Rounded Corners With Rico

I’ve seen and tried a ton of HTML/CSS/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easiest way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML:

<DIV id="mydiv" style="background-color: #FFE6BF">
  some text
</DIV>

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

Rico.Corner.round('mydiv');

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

Rico.Corner.round('mydiv', {corners:'tr bl'});

And of course, br and tl also work.

As a convenience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

new Rico.Effect.Round('div', 'roundCssClass');

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.


Jul 23 2006

CSS Hackary

A friend of mine recently asked me what was my most used CSS hack. The first thing I said was that I am not a web designer, I just play one on TV. I have found that everybody knows or can easily look up how to apply a border, text alignment, background image, etc to an HTML element using CSS. What I have discovered through experimentation is that browsers allow you to define more than one CSS class per element. I have recently been using the Yahoo UI Library and their yui-u CSS class that defines a layout block. But for that block I wanted to apply some additional style attributes. I was able to combine the yui-u layout and my style CSS class by doing the following:

<DIV class="yui-u content">CONTENT HERE</DIV>

Technorati Tags: , , ,


Jul 15 2006

Acts As Taggable Tag Cloud

If you are using the Ruby on Rails acts_as_taggable plugin you may want to display the top tags in a tag cloud. To generate a tag cloud you will to write some code beyond just writing the controller action. You will need to augment the taggable plugin itself and create a function in the application helper. Lets start by adding a new method in the Tag model provided by the acts_as_taggable plugin. Open the vendor/plugins/acts_as_taggable/lib/tag.rb file and add this method:

def self.tags(options = {})
  query = "select tags.id, name, count(*) as count"
  query << " from taggings, tags"
  query << " where tags.id = tag_id"
  query << " group by tag_id"
  query << " order by #{options[:order]}" if options[:order] != nil
  query << " limit #{options[:limit]}" if options[:limit] != nil
  tags = Tag.find_by_sql(query)
end

This method will return the id, name, and usage count for each tag. This method also provides a way to limit and order the tags. Once we have added the new method in the Tag model we will need to add a method to the application helper which will help in selecting the right style class for each tag. Add the following function to app/helpers/application_helper.rb:

def tag_cloud(tags, classes)
  max, min = 0, 0
  tags.each { |t|
    max = t.count.to_i if t.count.to_i > max
    min = t.count.to_i if t.count.to_i < min
  }

  divisor = ((max - min) / classes.size) + 1

  tags.each { |t|
    yield t.name, classes[(t.count.to_i - min) / divisor]
  }
end

The implementation for the tag_cloud method is based on the work done by Tom Fakes. With the tags method in the Tag model and the tag_cloud method in the application helper we can now focus on the controller and view. In the controller you can use the following bit of code to get the the first one hundred tags order by name:

@tags = Tag.tags(:limit => 100, :order => "name desc")

In the view we will use the tag_cloud method so that it will select the right css class based on the tag usage count. Here is the view code:

<% tag_cloud @tags, %w(nube1 nube2 nube3 nube4 nube5) do |name, css_class| %>
  <%= link_to name, {:action => :tag, :id => name},
    :class => css_class %>
<% end %>

Please note that nube1 through nube5 are css class names which will need to be defined in your stylesheet to generate the cloud effect. Just completeness sake here are my css classes:

.nube1 {font-size: 1.0em;}
.nube2 {font-size: 1.2em;}
.nube3 {font-size: 1.4em;}
.nube4 {font-size: 1.6em;}
.nube5 {font-size: 1.8em;}
.nube6 {font-size: 2.0em;}

Technorati Tags: , , , ,


Nov 6 2005

Style And Class

With JavaScript you can access and update an element’s style and even its class. Say that you have two CSS classes:

.warning {color: yellow;}
.error {color: green;}

You can update or switch an element’s CSS class with the following JavaScript code:

var element = document.getElementById('element');
element.className = 'warning';

But you can access individual CSS attributes via an element’s style object, such as

var element = document.getElementById('element');
element.style.color  = 'green';

Of course, you might update an element’s style based on some event or in conjunction of an Ajax call.


Nov 5 2005

JavaScript FX

A lot of peeps are talking about Ajax this and Ajax that. Since JavaScript is the J in Ajax, what a lot of people have set out to do is create JavaScript effects libraries. There are several libraries available such as dojo toolkit, prototype framework, script.aculo.us, and others. I wanted to us some effects on several projects, including this site, and decided to try out moofx but because a restriction in use I opted to write some JavaScript code of my own. The issue with moofx was that you could not apply padding or borders to your element if you wanted to use the Height and/or Width effect. Since I wanted to minimize the height of an element and those elements had borders and padding I could not use moofx. So instead I just developed a bit of JavaScript code to change the element’s CSS. Here is the code:

function fxToggle(id) {
    var element = document.getElementById(id);
    if(element && element.style) {
        var isBlank = true;
        if(element.style.display != 'none') {
            element.style.display = 'none';
        }else {
            element.style.display = 'block';
        }
    }
    return false;
}

This code will toggle an element’s display from none to block. When the display is set to none the element is not visible or takes up any real estate. I use a link to toggle an element’s display like this:

<A href="#" onclick="return fxToggle('elemId');">
  Meta
</A>

Sep 27 2005

Import Script, Import CSS, Import PHP

Just because sometimes I forget, here are some code fragments to import JavaScript, CSS, and PHP files.

JavaScript:

<script
   type='text/javascript'
   src='directory/file.js'>
</script>

CSS:

<style type='text/css'  media='all'>
   @import 'directory/file.css';
</style>

Icon:

<link
   rel='Shortcut Icon'
   href='directory/file.ico'
   type='image/x-icon'>

PHP:

<?php @ require_once ('directory/file.html'); ?>

For the PHP import, by placing the @ symbol before require_once suppresses any error messages that might be generated in the included PHP file.

JSP:

<%@ include file='jspfile.jspi' %>

And, well, I guess the list can go on and on. You can use Struts Tiles to include other JSP snippets. I am sure that other languages and frameworks have the same functionality.