Elgg Plugin: Friend AutoComplete Box Replaces Select Box
May 31st, 2009 by Aaron
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:
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:
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
Using PHP to find distance between Zip Codes
May 27th, 2009 by Aaron
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.
Continue reading Using PHP to find distance between Zip Codes
Enabling Javascript Specific CSS
May 11th, 2009 by Aaron
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
1 2 | .no_js a { color: #f00 } .js a { color: #0f0 } |
test.html
1 2 3 4 5 6 7 8 9 10 11 12 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 | <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?
Elgg Plugin: Generate Groups
May 4th, 2009 by Aaron
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.
IE JS Error: Expected identifier, string or number
April 30th, 2009 by Aaron
I just ran into this a bunch - works fine in FireFox … of course.
Well apparently, Internet Explorer won’t allow you to have a trailing comma in a array or object definition. Let me show you:
1 2 3 4 | functionCall({ options: {1,2,3}, others: {1,2,3}, }); |
The trailing comma after the other’s line is making IE expect another identifier. So, just strip it out so that line is now:
1 | others: {1,2,3} |
And you should be golden!
Now, if only IE told me what line the error was on 
(For those who need a tip, I loaded up the site in firefox with jsview extension - and went to view all js. Then do ctrl-L to jump to a line - and type in the line number that IE mentions… see if there is something around there that looks like this scenario)
Flash of Unstyled Content - in FireFox 3
April 28th, 2009 by Aaron
So I’ve heard of the Flash of Unstyled Content before - but never really had this problem. I always use a LINK tag for my stylesheets.
However, I just ran into it today - in FireFox even with a LINK tag…
Fixing Flash of Unstyled Content in Firefox
Simple really - I was loading way too much javascript before my stylesheet (not my fault on the large amount of js!!) - and the delay was causing the flash. I moved the link to the very first part of the content - and presto - good to go.
So, instead of
1 2 3 4 5 6 7 | <head> <script src="#"></script> <script src="#"></script> <script src="#"></script> <script src="#"></script> <link href="#" type="text/css" rel="stylesheet" /> </head> |
Just move it to the top:
1 2 3 4 5 6 7 | <head> <link href="#" type="text/css" rel="stylesheet" /> <script src="#"></script> <script src="#"></script> <script src="#"></script> <script src="#"></script> </head> |
… next battle, getting rid of sooo much js
Licensing of Code
April 24th, 2009 by Aaron
Up until now, I have not licensed my code properly. I’m going to try to do so from now on.
How is this code licensed?
The BSD license is how I’m going to proceed: http://creativecommons.org/licenses/BSD/
Elgg Development Tools - Elgg Plugin
April 24th, 2009 by Aaron
After working some with the open source Community building application Elgg, I found some settings to be irritating. I had to keep hacking my plugins to get these settings activated the way I wanted. Also, I really wanted to put useful settings in the same location.
Enter The Elgg Development Tools Plugin
This plugin has the following functionality:
- Integrates FirePHP
- Quick option to turn off view caching
- Changes Error Reporting/Display
- Copies other useful dev settings to one place
More about this after the file download:
Elgg Dev Tools
Integrates FirePHP
The package includes the latest distribution of FirePHP. When you enable FirePHP in the admin control panel under the Dev tools option, you can now use the FirePHP functionality in your plugins. Sometimes coders remember to turn off the functionality later, but forget to remove all of the FirePHP calls. A mock FB class is created to handle this - it basically accepts any method call and logs an error in the error log that you still have that line in there.
Turn off View Caching
Normally, you have to either run the update.php script or enable/disable your plugin. During development, this got super irritating. Instead, enable this option. It will make the site run a bit slower, but you won’t have to keep enabling/disabling the plugin when you add new views.
Display Errors
By default, Elgg hides the errors in the .htaccess file. This will turn them back on without editing the elgg installation.
Other Useful Dev Settings
I always forgot where simple cache options were. I copied the setting to the plugin as well. It basically does the same thing as under site admin. I find it useful to have all of these settings in one place.
Any feedback is greatly appreciated.
When PHP’s dirname() saved the day
April 23rd, 2009 by Aaron
Now, I won’t bore you with the actual details of how I came across this - lets just skip to the explanation and example:
First, even when it makes ’sense’, you should not be using relative paths in your command line PHP scripts. I am so used to writing web PHP that I fell into this bad habit.
Show Me Why dirname() is your hero
Imagine a directory structure on windows like this:
C:\DEVELOPMENT\local>dir Volume in drive C has no label. Volume Serial Number is 1122-45E1 Directory of C:\DEVELOPMENT\local 04/23/2009 08:40 PM. 04/23/2009 08:40 PM .. 04/23/2009 08:37 PM includes 04/23/2009 08:40 PM testdirname 0 File(s) 0 bytes 4 Dir(s) 67,484,995,584 bytes free
We have two files:
testdirname/script.php
1 2 | require_once '../includes/include.php'; print "I've done ran, ya'll."; |
includes/include.php
1 | print "I'm an include!\n"; |
Now, let’s run the script as it is:
C:\DEVELOPMENT\local\testdirname>php script.php I'm an include! I've done ran, ya'll.
Not too bad - but note how we’re actually in the script.php’s working directory. What if we wanted to run it in a different directory?
C:\DEVELOPMENT\local>php testdirname\script.php Warning: require_once(../includes/include.php): failed to open stream: No such file or directory in C:\DEVELOPMENT\local\testdirname\script.php on line 2
Well this makes sense because I programmed with that relative path.
Instead, change the require line in script.php to this:
1 | require_once dirname(__FILE__) . '/../includes/include.php'; |
This way, it always gets the full directory of the file itself (__FILE__ constant) - and THEN you can path to the file any which way you’d like.
Let’s check the output:
C:\DEVELOPMENT\local>php testdirname\script.php I'm an include! I've done ran, ya'll.
Yep - I KNOW - Simple. Its embarrassing to say it bit me - but it did 
Form Submit: Internet Explorer behaving badly
April 14th, 2009 by Aaron
I just want to make a micro blog here. Just a tiny lil blog.
Internet Explorer Does Not Submit Form on Enter
Correct! Instead, I load my page with this jquery
1 2 3 4 5 6 | $('input').keydown(function(e){ if (e.keyCode == 13) { $(this).parents('form').submit(); return false; } }); |
Button Element Not Submitting in Internet Explorer
Correct! Mainly because I was lazy.
But in FireFox
In IE - don’t forget to add type=”submit”
1 2 3 4 5 | <!-- wrong --> <button>Works in FF</button> <!-- right! --> <button type="submit">Works and is probably what you SHOULD do</button> |
That is all.
Subscribe