Amity Web Solutions Technical Blog
Checkout our cushions! Very apt.

Checkout our cushions! Very apt.

Flash of Jquery hidden content before JS is called to hide it

This applies to when you use Jquery to hide an element, and not the CSS. What happens is the element you want to hide in Jquery briefly gets shown after the page is rendered and before the JQuery is called to hide it.

A common solution is just hide the element in the CSS. The problem then is people with JS disabled browsers will not be able to see the content, because they don’t have JS to show it.

I found a great solution online(http://oncemade.com/adding-hasjs-class-when-javascript-is-available/).

Add in a line of Javascript at the top of the page to add a class to the HTML tag. Then in your stylesheets you can hide the elements, referencing the JS added tag in the HTML.

e.g.

// In your HTML <head>
<script type=”text/javascript”>document.getElementsByTagName(‘html’)[0].className+=’js’</script>

// In your Stylesheet
.js .myHiddenElement
{
    display: none;
}

Now JS disabled browsers will see the content, and JS enabled browsers will hide it before the page is rendered by referencing the JS added class in the <html> tag.

Brilliant

META Tags for Expression Engine Template/Index Pages

I am completely new to Expression Engine, and although its quite flexible it does have it’s shortcomings.

One of the main issues I can see with it is its inability to manage META information. The in-built way would be to create a Channel Field for each Channel so when you publish data you can add in the META information and then display in in the template or header file. BUT if you have many channels, you need different names for each of these and it becomes a lot of fields to manage in conditional statements in the template. You cannot add fields to the main template index file either (e.g. a blog list).

I guess the above reasons is why so many forums online show data being embedded in the template files themselves. Well, although EE may be a great system, this is a massive NO NO for content managed websites. All information like this must be accessible in the CMS by the website owners who are likely not to have HTML experience.

So I installed SEO Lite (http://www.addonbakery.com/expressionengine-addons/seolite.html).

This works very well on a per page basis (.e.g. an about us, or actual blog page). Because it adds the META fields to the entry for the page.

But this too will not allow an individual template index page to be managed. It seems these template index pages in EE are quite hard to add your own data to.

So I have combined Global Variables with SEO Lite and now have the perfect CMS managed META data.

The following code first checks is a page exists, e.g. blog/blog_post and take META info from there or use the default. If we are not on an individual page, but a template/index file which we don’t have data for (e.g. blog listing).

The second IF statement takes the segment name from the URL and prepends it to some text such as ‘_meta_title’. What this produces is a call to a global variable based on the segment name, e.g. ‘blog_meta_title’. All you need to do is then create the Global Variables based on the segment name.

The last IF statement is for the home page, and will get the META info you add in the Home page.

{if segment_2 != “”}
    {exp:seo_lite use_last_segment=’yes’}
{if:elseif segment_1 != “”}
    {exp:seo_lite
        default_title=’{{segment_1}_meta_title}’
        default_keywords=’{{segment_1}_meta_keywords}’
        default_description=’{{segment_1}_meta_description}’
    }
{if:else}
    {exp:seo_lite
        url_title=’home’
    }
{/if}

Further work I would like to do is if the global variables do not exist, then to show the default SEO Lite content. 

VirtualBox faster than Parallels

Am finding the FREE VirtualBox for Mac MUCH faster to run Windows 7 than Parallels Desktop 5.

Mac Documents Folder Clutter Fix

For some reason Apple and App developers, one or the other or both, decided to dump a tonne of software data files and folders into what should be your nicely organised, personal documents folder. If you like to be organised like me this probably annoys you some. I mean, how are we supposed to easily find our own personal folders amongst all this unnecessary clutter.

To solve this I have abandoned the Documents folder all together. Here is my solution…

1. Create a new folder the same level as Documents. Call it what you want, mine is called My Documents.
2. Move all your personal folders into it
3. Hide the Documents folder (see below for command)
4. Remove the Documents folder from the sidebar
5. Add your new documents folder to the sidebar

Yo can even copy the main Documents folder icon to use on your own folder (but not the sidebar icon).

To hide a file or folder there are a few low cost apps available but i like to keep it simple and use he command line:-

cd ~
/Developer/Tools/setfile -a V Documents

Using ffmpeg on a Mac the easy way!

There are various complicated posts online about installing ffmpeg on a mac so you can use it from the command line. I never quite have the patience for command line installations and often things did not work.

But then I stumbled upon a much easier way…

First install Video Monkey, which as a GUI video processor is fantastic and my app of choice for video processing. http://videomonkey.org/. The drawback is you cannot customise the variables like video size and bitrate. You need ffmpeg on the command line.

Well I notice Video Monkey is only a GUI for ffmpeg which is installed with it anyway, its in:

“/Applications/VideoMonkey.app/Contents/Resources/bin/ffmpeg”

So you can just call this line from the command line, with your required arguments after it, and use that ffmpeg!

To make life easier, just add this to the command line path by making a symbolic link to it in /usr/local/bin/ so you can use just ffmpeg on the command line instead of the full path above:

sudo ln -s /Applications/VideoMonkey.app/Contents/Resources/bin/ffmpeg ffmpeg

So much easier than all the other websites on this topic!

Replace Special Characters with HTML Codes in PHP

I always struggle to properly convert special characters into HTML when adding to a web page or importing into a database… the foreign characters with accents like Umlauts etc.

Although PHP has a few functions that claim to do it (e.g. htmlentities() ) , it does not work for all characters I have, just some of them.

So I have written a script to do a find and replace on the characters without using PHP built in functions. This allows me to fine control what characters are converted. If I have missed any I can just add them to the list. It would be great to find a complete list of all characters possible so I don’t have to check content all the time for any not included.

$entities = array(
    ’À’=>’&Agrave;’,
    ’à’=>’&agrave;’,
    ’Á’=>’&Aacute;’,
    ’á’=>’&aacute;’,
    ’Â’=>’&Acirc;’,
    ’â’=>’&acirc;’,
    ’Ã’=>’&Atilde;’,
    ’ã’=>’&atilde;’,
    ’Ä’=>’&Auml;’,
    ’ä’=>’&auml;’,
    ’Å’=>’&Aring;’,
    ’å’=>’&aring;’,
    ’Æ’=>’&AElig;’,
    ’æ’=>’&aelig;’,
    ’Ç’=>’&Ccedil;’,
    ’ç’=>’&ccedil;’,
    ’?’=>’&ETH;’,
    ’?’=>’&eth;’,
    ’È’=>’&Egrave;’,
    ’è’=>’&egrave;’,
    ’É’=>’&Eacute;’,
    ’é’=>’&eacute;’,
    ’Ê’=>’&Ecirc;’,
    ’ê’=>’&ecirc;’,
    ’Ë’=>’&Euml;’,
    ’ë’=>’&euml;’,
    ’Ì’=>’&Igrave;’,
    ’ì’=>’&igrave;’,
    ’Í’=>’&Iacute;’,
    ’í’=>’&iacute;’,
    ’Î’=>’&Icirc;’,
    ’î’=>’&icirc;’,
    ’Ï’=>’&Iuml;’,
    ’ï’=>’&iuml;’,
    ’Ñ’=>’&Ntilde;’,
    ’ñ’=>’&ntilde;’,
    ’Ò’=>’&Ograve;’,
    ’ò’=>’&ograve;’,
    ’Ó’=>’&Oacute;’,
    ’ó’=>’&oacute;’,
    ’Ô’=>’&Ocirc;’,
    ’ô’=>’&ocirc;’,
    ’Õ’=>’&Otilde;’,
    ’õ’=>’&otilde;’,
    ’Ö’=>’&Ouml;’,
    ’ö’=>’&ouml;’,
    ’Ø’=>’&Oslash;’,
    ’ø’=>’&oslash;’,
    ’Œ’=>’&OElig;’,
    ’œ’=>’&oelig;’,
    ’ß’=>’&szlig;’,
    ’?’=>’&THORN;’,
    ’?’=>’&thorn;’,
    ’Ù’=>’&Ugrave;’,
    ’ù’=>’&ugrave;’,
    ’Ú’=>’&Uacute;’,
    ’ú’=>’&uacute;’,
    ’Û’=>’&Ucirc;’,
    ’û’=>’&ucirc;’,
    ’Ü’=>’&Uuml;’,
    ’ü’=>’&uuml;’,
    ’?’=>’&Yacute;’,
    ’?’=>’&yacute;’,
    ’Ÿ’=>’&Yuml;’,
    ’ÿ’=>’&yuml;’
);

foreach ($entities as $key => $value)
{
    $ent[] = $key;
    $html_ent[] = $value;
}

$new_string = str_replace( $ent, $html_ent, $string );

Yes, this is a shameless plug for a family member’s caravan in West Wales that is available to rent. Situated on Pencarnan Farm, it is in beautiful surrounds and gorgeous views.

Extract Files from an iPhone Backup

Due to downgrading an iPhone 3G from iOS 4 to iOS3, I needed to then extract all the media/images files from the iOS 4 backup so I can put back onto the iOS 3.

The iPhone/iPod Touch Backup Extractor program works like a charm:

http://supercrazyawesome.com/

Adding a module position (loadposition) inside another module in Joomla

Here is a good way to use {loadposition} inside another module without hacking core files or using extensions in Joomla…

1) First copy templates/system/html/modules.php into your_template/html/ override folder so we dont change the core file.

2) Then copy the loadposition plugin code (see below) into this file as new functions.

3) I change reference to plgContentLoadModule, plgContentProcessPositions and plgContentLoadPosition to plgModuleLoadModule, plgModuleProcessPositions and plgModuleLoadPosition so we dont get conflict with the actual loadposition functions.

4) I also change reference to $row->text to $module->content

5) I then call the function plgModuleLoadModule($module, &$params); to replace the module content with the new content with the loadposition content in it. e.g.

Code:<?php $module->content = plgModuleLoadModule($module, &$params); ?>


Code to add into modules.php:-

Code:

function plgModuleLoadModule( &$module, &$params, $page=0 )
{
   $db =& JFactory::getDBO();
   // simple performance check to determine whether bot should process further
   if ( JString::strpos( $module->content, ‘loadposition’ ) == false ) {
      return $module->content;
   }

   // expression to search for
   $regex = ‘/{loadposition\s*.*?}/i’;

   $pluginParams = new JParameter( $plugin->params );

   // check whether plugin has been unpublished
   if ( !$pluginParams->get( ‘enabled’, 1 ) ) {
      $module->content = preg_replace( $regex, ”, $module->content );
      return true;
   }

   // find all instances of plugin and put in $matches
   preg_match_all( $regex, $module->content, $matches );

   // Number of plugins
   $count = count( $matches[0] );

   // plugin only processes if there are any instances of the plugin in the text
   if ( $count ) {
      // Get plugin parameters
       $style   = $pluginParams->def( ‘style’, -2 );

      plgModuleProcessPositions( $module, $matches, $count, $regex, $style );
   }
   
   return $module->content;
}

function plgModuleProcessPositions ( &$module, &$matches, $count, $regex, $style )
{
   for ( $i=0; $i < $count; $i++ )
   {
      $load = str_replace( ‘loadposition’, ”, $matches[0][$i] );
      $load = str_replace( ‘{‘, ”, $load );
      $load = str_replace( ‘}’, ”, $load );
      $load = trim( $load );

      $modules   = plgModuleLoadPosition( $load, $style );
      $module->content    = str_replace($matches[0][$i], $modules, $module->content );
   }

     // removes tags without matching module positions
   $module->content = preg_replace( $regex, ”, $module->content );
   
   return $module->content;
}

function plgModuleLoadPosition( $position, $style=-2 )
{
   $document   = &JFactory::getDocument();
   $renderer   = $document->loadRenderer(‘module’);
   $params      = array(‘style’=>$style);

   $contents = ”;
   foreach (JModuleHelper::getModules($position) as $mod)  {
      $contents .= $renderer->render($mod, $params);
   }
   return $contents;
}