2009 May | Aaron Saray

My Blog

contains PHP and other web related content. (Sometimes there are some off topic things - don't freak out!)

Archive for May, 2009

Elgg Plugin: Friend AutoComplete Box Replaces Select Box

Sunday, May 31st, 2009

One of the most irritating things to me about the Elgg messaging plugin is the requirement to choose my friends from the select box. This SHOULD be generated using the input/pulldown view in Elgg. Unfortunately, they are doing it by hand. However, I’ve patched my plugin to do it using the proper view. Then, I wanted to have an Auto Complete type box to choose a friend. With JQuery I was able to do this. Check out the specs and download below:

What This Plugin Solves:

This plugin extends the input/pulldown view in Elgg to create an Autocomplete box instead (theoretically, this could be used for any pulldown, not just friends).

How do I use it?

Imagine you have a view in Elgg that uses the following code:

^?View Code PHP

1 2	$friends = amazing_function_formats_this($_SESSION['user']->getFriends()); echo elgg_view('input/pulldown', array('name'=>'friends', 'options_values'=>$friends);

This generates a pull down that will have the option text the friend name, and the option value – the friend GUID.

To use this plugin, enable it – and then modify the elgg_view statement like so:

^?View Code PHP

1
2

$friends = amazing_function_formats_this($_SESSION['user']->getFriends());
echo elgg_view('input/pulldown', array('class'=>'OHT_ElggFriendsAutocomplete', 'name'=>'friends', 'options_values'=>$friends);

What Happens?

The plugin automatically hides the select box and displays the autocomplete input field using all of the select box options as values to suggest. Then, when a proper option is selected, the hidden select box value gets updated to the value correlated to the text that was typed. Pretty simple and unobtrusive!

Do I Have to Do Anything Different?

Just add the class to the pulldown – and you should be good to go.

Ok Let Me Download It!

OK here: Elgg Friends AutoComplete

Tags: elgg, PHP
Posted in PHP, elgg | 2 Comments »

Using PHP to find distance between Zip Codes

Wednesday, May 27th, 2009

Today marked the second time I had to write this code from scratch. To save my self time – and hopefully you too! – I’m going to post what I’ve developed.

(more…)

Tags: PHP
Posted in PHP | 1 Comment »

Enabling Javascript Specific CSS

Monday, May 11th, 2009

While reading the blog post about Enabling Javascript specific CSS and the comments, I started thinking about my own ways to implement this. And how to do it validly.

Why Use Javascript Specific CSS

Believe it or not, we still have visitors to our websites that disable javascript. It could be a configuration setting on purpose, a malfunction or even an older browser (or a mobile one…?) At any rate, if you can make portions of your site accessible without javascript, you should do so. (I know some would argue that you should always make your site accessible without javascript enabled… but thats a whole other discussion.)

Before this method we’re going to talk about, the only way to display stuff to users without javascript was to use the NOSCRIPT tag. Luckily, this takes it one step further. You are not limited to using that tag. Instead, CSS attributes can be added to items that you would like to be visible (or invisible) if no javascript is enabled. Conversely, other stylings can take affect if javascript is on. One of the commentors on the previous link suggests using this technique to limit the visibility of icons that represent more dynamic behavior when javascript is disabled. Other usability enhancements include expanding hidden content automatically if no javascript controls are available.

How are people doing this?

The consensus after comments and edits appears to be to create the following type of code (this is just for an example)

main.css

^?View Code CSS

1 2	.no_js a { color: #f00 } .js a { color: #0f0 }

test.html

^?View Code HTML

<html class="nojs">
  <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script type="text/javascript">
      document.documentElement.className = 'js';
    </script>
  </head>
  <body>
    <h1>Hello!</h1>
    <a href="http://www.somewhere.com">Link!</a>
  </body>
</html>

Basically, when javascript is enabled, it replaces the html’s class of ‘nojs’ with ‘js’ – then any of the CSS qualified with ‘.js’ is executed.

Not a bad idea.

How I Would Do It

I like the idea – but I have to point to the HTML tag reference and note that using a class attribute in your HTML tag is illegal.

You can use it on your body tag though. This is how I would do it.

^?View Code HTML

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body class="nojs">
    <script type="text/javascript">
      document.body.className = 'js';
    </script>
    <h1>Hello!</h1>
    <a href="http://www.somewhere.com">Link!</a>
  </body>
</html>

This should execute the javascript as the very first part of the body rendering. Then, the CSS will work fine – and its valid.

Thoughts?

Tags: CSS, javascript
Posted in CSS, javascript | No Comments »

Elgg Plugin: Generate Groups

Monday, May 4th, 2009

The Elgg Generate Users Plugin made me wonder why there was no group functionality… So…

Enter the Elgg Group Generation Plugin

This plugin has the following functionality:

Creates Groups
Adds Group Images
Joins existing members to groups
Fills in some group descriptions

More about this after the file download:
Elgg Generate Groups

Creates Groups

Since I didn’t see any easy way to create a massive amount of groups, this plugin does it. Specify how many groups to create and that’s all.

Adds Group Images

Normally, you can specify a group image or leave it blank. If you choose to have group images added to your automatically created groups, 2 out of 3 groups will have one of the random avatars as their group image.

Join Existing Members To Group

After a successful group creation, the plugin will join a random amount of unique members of that site to each group.

Fill in some group information

Other group information like short description and description are automatically filled in – along with group name. These are random bits of information. For any other hook that is associated with the group, there is an option to enable or disable it for the group generation – just like normal creation. There is another feature called mixed/random which chooses one of the previous two choices randomly for each group.

Tags: elgg
Posted in elgg | No Comments »

AaronSaray

Programming

Writing

Music & Art