meteoracle

Javascript back links and Firefox 3.6

Fri, 02 Nov 2012 22:01:00 +0000

Whenever I needed to do a back link, I used to use this:

javascript:history.go(-1);

As I learned today, Firefox 3.6 doesn’t like this. So instead, you can use this:

javascript:history.back();

Hope that helps anyone who may have come across the same issue.

Generating a list of months for a select box

Mon, 30 Jan 2012 14:41:07 +0000

I came across an issue in generating a list of months for a select input. This particular issue will crop up on the 29th, 30th and 31st of any month.

The code I was using is below:

<select name="fld_month" id="fld_month"> <?php for ($x=1;$x<=12;$x++){ ?> <option value="<?php echo $x; ?>"><?php echo date( 'M', mktime(0, 0, 0, $x) ); ?></option> <?php } ?> </select>

The mktime function highlighted in bold is the reason for the issue. For an example of the issue, I can use today. Today is the 30th January 2012. As I wasn’t passing the current day to the mktime function, it was automatically assuming that it should use todays date.

Unfortunately, there is no 30th of February, so my select list looked like this:

Jan
Mar
Mar
Apr
May

So in order to correct this (and the same issue that would occur on the 31st with any month with only 30 days), we updated the mktime function to use the first day of the month (see below).

<select name="fld_month" id="fld_month"> <?php for ($x=1;$x<=12;$x++){ ?> <option value="<?php echo $x; ?>"><?php echo date( 'M', mktime(0, 0, 0, $x, 1) ); ?></option> <?php } ?> </select>

Do you have a better way of generating a list of months, date of birth or general date selectors? Let me know…

Create a custom 'tweet this' link including hashtags

Wed, 16 Nov 2011 11:22:00 +0000

Want to create your own Tweet this button so it fits in with your design (or just doesn’t look like the official button) AND you want to include a hashtag?

Well, here’s what you can do:

Create your link around text, an image or whatever else you can think of
Point your href to http://twitter.com/share
Add some querystring variables to generate the tweet
That’s it!

So, the querystring variables I’ve used (for a basic tweet including hashtags) are:

url (this is needed in order to get someone to visit your site from the tweet)
text (this is the body of the tweet)
hashtags (a comma seperated list of hashtags placed at the end of the tweet)

Here’s the resulting link:

http://twitter.com/share?url=http://yourdomain.com&text=This+is+where+your+tweets+goes…&hashtags=hash,tags,here

There is also a list of the other variables you can use at https://dev.twitter.com/discussions/512

Create a date ordinal with javascript

Tue, 11 Oct 2011 17:32:38 +0100

Here’s a little javacript function that will get the date ordinal (the bit after the date which can be st, nd, rd or th). It’s by no means perfect, and there’ most likely a more efficient way of doing it, but thought it useful enough to share

function get_date_ordinal(num) {
  var end_num = num.charAt(num.length - 1);
  var start_num = num.charAt(0);
  var abbrev = 'th';
  if (end_num == '1' && start_num != '1') abbrev = 'st';
  if (end_num == '2' && start_num != '1') abbrev = 'nd';
  if (end_num == '3' && start_num != '1') abbrev = 'rd';
  return num + abbrev;
}

I knocked this together as I was pulling in a daily RSS feed, and wanted to present the date in a slightly different way to what was provided.

Add a 'Clear Cache' shortcut to the Drupal 7 admin toolbar

Fri, 19 Aug 2011 11:46:27 +0100

I don’t know about you, but I just don’t like waiting for different admin panels to load up just to get to the place where I can clear the cache so I can see the changes I just made.

So, I’ve added a shortcut to the Configuration > Performance area of the Drupal admin to my admin toolbar, and this is how I did it:

Click the ‘Edit shortcuts’ link in the admin toolbar, then click ‘Add shortcut’.
Enter ‘Clear cache’ in the Name field (or copy and paste if you’re like me)
Enter ‘admin/config/development/performance’ in the Path field
Click ‘Save’

You may need to refresh, but now you have a direct shortcut to the Performance panel which you can jump to for that lovely ‘Clear all caches’ button.

Fix for MAMP when MySQL is not starting

Mon, 27 Jun 2011 16:19:48 +0100

Fix for MAMP when MySQL is not starting:

This just helped me out, so this is for those having the same problem, but mainly posted here so I have a reference of it!

Stop the iPad from auto-scaling your background image

Fri, 24 Jun 2011 14:17:08 +0100

I was just in the midst of building a site with a rather large background that spills well outside of the 960 grid the site is built on (2000px of rather large to be exact).

It looked great on the large monitors in the office with this bit of CSS displaying this huge background nicely:

 #sitebg {
  background-image: url(../img/sitebg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  left: 50%;
  margin-left: -1000px;
  min-height: 1200px;
  position: fixed;
  width: 2000px; }

As the particular image I was working with had a central piece of text that a number of absolutely positioned divs relate to in positioning, the iPad pulled a lovely trick on me by automatically resizing the background image to fit the width of the screen.

All of a sudden my absolutely positioned divs looked like they were all over the shop due to the resizing of the background image. After a bit of digging, it turns out you need to tell the iPad the specific size of the background like this:

-webkit-background-size: 2000px 1200px;

Adding this to the CSS rule sorts the issue and everything displays at the correct size.

\o/

Plan, Then Build.: Writer's Block

Wed, 26 Jan 2011 15:36:45 +0000

Plan, Then Build.: Writer's Block:

Its an awkward one this. We don’t like to admit it, but as developers or programmers sometimes we just pull a blank card.

You can’t shift into gear. You can’t quite pick yourself up. You’re neurons are just not firing right.

Other metaphors.

You’re trying to, but its just not kicking off for…

Adding styles to the drop-down in Wygwam

Fri, 22 Oct 2010 15:54:41 +0100

Wygwam by Pixel & Tonic is a WYSIWYG editor powered by CKEditor 3.4 and CKFinder 2.0.1 and is available as a module for Expression Engine.

It makes it very easy to set up a custom WYSIWYG editor with the just options you want to make available to the website content administrators. It’s dead simple. Until you want to change the styles available in the drop-down.

It would be great if you had an easy way of editing the available styles directly from the Module configuration, but unfortunately we can’t, so I had to hunt down the file which I eventually found here (I’m using Expression Engine 2):

/themes/third_party/wygwam/lib/ckeditor/plugins/styles/styles/default.js

This javascript file, hidden deep within the folder structure, contains the script we need to edit to get the styles we want to be easily available to the administrator whilst editing their content.

Here’s a shortened version of what you’ll find (I’ve adjusted the formatting to make it easier to read):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}}
]);

As an example, I’d like to add a style that will highlight a paragraph with a a light green background colour, my javascript would now look like this:

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{'background-color':'#EAF5F4'}}}
]);

At the moment, we’re only adding a single style element to our intended target element. What is we want a whole bunch of style rules? Well, in that case we can do this (again I’ve formatted this to be easily readable, the whole script should be kept to a single line):

CKEDITOR.stylesSet.add('default',[
  {name:'Purple Title',element:'h3',styles:{color:'Purple'}},
  {name:'Red Title',element:'h3',styles:{color:'Red'}},
  {name:'Boxout Text',element:'p',styles:{
    'background-color':'#EAF5F4',
    'border-left':'2px solid #08B1A2',
    'color':'#08B1A2',
    'font-style':'italic',
    'margin':'0 auto 1em',
    'padding':'1em'}}
]);

So there we go, we’ve given the website content administrator the ability to style their content, without giving them enough rope to hang themselves with (by which I mean make the site look awful with different fonts, colouring and styles).

Formatting the email produced by the Expression Engine Email Module

Fri, 24 Sep 2010 16:06:29 +0100

With my first attempt at producing a ‘simple’ contact form I realised that the email sent by this module is very basic indeed. It reall only caters for a user to enter their name, email address, subject (which you may well have as a hidden field) and message.

It just so turned out that the firtst site I’ve attempted to use this module on is a corporate site, and they generally want the company name of whoever is using the contact form. So my contact form looked like this:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

Unfortunately when the email is sent (in plain text of course), there’s no formatting to tell what the info in the email is. For example, the body of the email from this form would look something like:

Widgets Ltd
I am writing you to find out more about your wonderful widgets. 
Please send me lots of widget based gubbins.

So, in order to tidy the format up slightly I’ve used the message field a few extra fields:

{exp:email:contact_form user_recipients="false" 
recipients="info@domain.com" charset="utf-8" form_id="contact"}
  <label for="name">Your Name: </label>
  <input type="text" name="name" id="name" value="" />
  
  <label>Company Name: </label>
  <input type="hidden" name="message[]" id="companytitle" 
value="Company:" />
  <input type="text" name="message[]" id="company" value="" />
  
  <label for="from">Email Address: </label>
  <input type="text" name="from" id="from" value="" />
  
  <label>Message: </label>
  <input type="hidden" name="message[]" id="messagespacer" value="" />
  <input type="hidden" name="message[]" id="messagetitle" 
value="Message:" />
  <textarea name="message[]" id="message"></textarea>
  
  <input type="hidden" name="subject" value="A message from your 
website." />
  <input type="submit" value="Submit" class="form-submit" />
{/exp:email:contact_form}

This will now produce something along the lines of:

Company:
Widgets Ltd

Message:
I am writing you to find out more about your wonderful widgets. 
Please send me lots of 
widget based gubbins.

Admittedly not the most beautiful email you’ll ever get, but it’s now much easier to understand what’s been sent in the body of the email, and still only utilise the simple tags available in the Email Module.

How To: Apply jQuery Masonry correctly when using images

Mon, 28 Jun 2010 10:16:00 +0100

jQuery Masonry, by David DeSandro is an excellent jQuery plugin to enhance the layout of a page.

However, you may find that when using images in the content of the divs you are aligning with Masonry, you may get some overlapping where the script has lodaed before your images.

In order to fire the Masonry script once your images have loaded on the page, use the following code:

$(window).load(function() {
  $('#athediv').masonry({ columnWidth: 200 });
});

Why isn't my Expression Engine SAEF being displayed?

Thu, 27 May 2010 08:44:29 +0100

Depending on who you want to see the SAEF (Stand Alone Entry Form), you’ll need to assign the relevant weblog to their Member Group.

In my case I have a form that a registered member can submit news to, but it’s not displaying on the front end. In order to correct this, log in to the Expression Engine control panel and go to:

Admin > Members and Groups > Member Groups > Edit Group > Weblog Assignment

Here you’ll have a list of all your weblogs and you can simply select ‘Yes’ for the weblogs you wish to allow a member to add content to.

Hey presto, your form is now visible on the front end and your users can add their content.

Change how often users can search in Expression Engine

Fri, 30 Apr 2010 16:20:14 +0100

Some settings can be an absolute nightmare to find in the Expression Engine Control Panel, and the setting for how often a user can search your site is one of them.

By default, these are the restrictions on the search priveleges for member groups:

Admins = No restriction
Members = 10 seconds
Guests = 15 seconds
Pending = 15 seconds
Banned = 60 seconds

In order to change these, you’ll need to go to:

Admin > Members and Groups > Member Groups > Edit Group > Search Privileges

There you’ll find ‘Number of seconds between searches’. Change this and the selected user group will then be able to search however many times you want.

Hopefully you can now avoid that awful grey box telling the user “You are only allowed to search every 15 seconds”.

Blog comments: The fuel of the design community fire?

Fri, 09 Apr 2010 10:26:35 +0100

I’m not much of an article writer, especially on opinions, although I did do one a while ago about my iPhone, and there are some rangom things on here. But the majority of stuff I post is intended as a record of things I’ve learnde which may help me again in future, or hopefully benefit others who come across the same development issues. With that said, here I go anyway:

I used my friend Google to search for ‘define:Weblog’. Here’s a selection of the results:

A blog (a contraction of the term weblog) is a type of website, usually maintained by an individual with regular entries of commentary …

A website in the form of an ongoing journal; a blog

a website which contains posts or short dated entries in reverse chronological order.

Not once is it mentioned that a blog is for other people to commment on. And I believe they shouldn’t be. At least not directly.

If you’re writing a blog it’s basically a journal, whatever the subject matter, just one that anyone with access to an internet connection can read. If it was your journal, offline, would you be letting people write their comments on it?

If you want to discuss a topic of your chosing you’d use a forum. The Google results for ‘define:Forum’?

a public meeting or assembly for open discussion

A forum, or message board, is an online discussion site. It is the modern equivalent of a traditional bulletin board, and a technological evolution of the dialup bulletin board system.

If you want a good discussion on any matter, why not use a forum.

If you don’t want this so-called back-patting ‘designer clique’, disable comments on your blog. Sure it won’t stop it totally, but at least you won’t be encouraging it.

People can pat backs all day long by sharing things via social media, just don’t encourage it on your own site.

If people want to comment about your article or article or piece of work, they can do it on their own blog and reference it. At least then they’ll have to put some thought into a response. Which is exactly what you’ll have to do with this one.

A Non-Blog: Weirdness in Expression Engine.

Thu, 25 Mar 2010 15:46:34 +0000

A Non-Blog: Weirdness in Expression Engine. :

The text should say something like, “xx posts in xx categories have generated xx comments.”

Including the post you’re reading, the weblog called blog (I know, right) has 5 posts, 6 categories, and 22 comments (mind you, this is all in experimental phase right now).

My solution spits out 5…

Convert a Unix Timestamp using a MySQL Query

Mon, 15 Mar 2010 15:27:53 +0000

Many, many times have I had to convert a MySQL timestamp (YYYY-MM-DD HH:MM:SS) into a more human readable format directly from a MySQL query. I’ve always done this with DATE_FORMAT.

Today, however, I needed to do something a little different. A Unix formatted timestamp held in the database needed to be converted to a human readable format.

And this is the answer I came across, the rather useful FROM_UNIXTIME.

How To: Log member login activity in ExpressionEngine

Wed, 10 Mar 2010 11:48:00 +0000

I was looking for a way to create a historical log of every member that logged into an ExpressionEngine site. I came across the Statistics module which I was hoping would do the job, but this module only worked to display statistics of users currently logged in to the site, very much akin to what you would see in the footer of a forum.

What I needed to do in this case was to log a timestamp of when a member logged in to the site, and the members ID so that I can pull other data available on that member to generate reports at a later date.

So, first of all I need a new database table to hold this data. It’s very simple, and here’ the SQL I used to create it:

CREATE TABLE `UserLog` (

  `ID` mediumint(9) NOT NULL auto_increment,

  `MemberID` mediumint(9) NOT NULL,

  `LoginTimestamp` int(10) NOT NULL,

  PRIMARY KEY  (`ID`)

)

Now that we have our database table, we need the code to fill it.

The code below was added into the page which the user is redirected to once they have logged in. We need to make sure that this template has ‘Allow PHP?’ is enabled and the ‘PHP Parsing Stage’ is set to ‘Output’ for this to work.

{exp:member:custom_profile_data}

  <?php

    if ({current_time} == {last_activity}){

      global $DB;

      $DB->query('INSERT INTO UserLog (MemberID, LoginTimestamp)

        VALUES ({member_id}, {last_activity})');

    }

  ?>

{/exp:member:custom_profile_data}

There we go, you can copy and paste to your hearts content, but if you’d like to know what’s going on, and perhaps learn a little something, please read on.

Firstly we need to get the {last_activity} timestamp from the member that is logging in. This is basically the most recent time the user has logged in to the site, so we employ the {exp:member:custom_profile_data} tag to let us grab it.

Inside this tag we include our PHP. We compare the {last_activity} timestamp to the {current_time} timestamp. If they match, we know the user has just logged in, and that’s when we want to add a record to our UserLog database table.

We then use the ExpressionEngine database class to insert the {member_id} and {last_activity} timestamp into the table.

So there we have it. You’re now logging every member as they log in to your site. Once you’ve got some data in there you can explore the possibilities of generating reports and statistics on this data. I’ll be doing this myself soon, so I’ll be sure to share my ideas on this.

ExpressionEngine Edit Menu Extension

Tue, 23 Feb 2010 09:29:44 +0000

ExpressionEngine Edit Menu Extension:

Extremely useful extension for the ExpressionEngine Control Panel. It adds a drop-down menu to the Edit tab in the same mould as the Publish tab. This will save you a LOT of time when editing content.

What can Apple do to make me keep an iPhone?

Wed, 10 Feb 2010 12:14:37 +0000

It was the best timing possible for me. My Orange contract was up in less than a month, and Apple go and sell their flagship mobile talkie device on a service provider other than O2. Rejoicing occured.

Before jumping ship on my Nokia n95 8GB, I considered the drawbacks;

Poor camera in comparison. Ah, I don’t use it that much anyway.
Storage limited to iTunes. That 16GB iPhone may be twice the capacity, but I can’t just wang any old files on it. I’ll have to get a passport hard drive for that now.
Applications aren’t (neccessarily) free. You could stick pretty much any application on that Nokia. I could even play Secret of Monkey Island!
Would the syncing and backup of calendars, emails and texts work as well?
Battery life. I got ~5 days from the Nokia. The iPhone is a lot less.

Then there were the advantages;

All data included in tariff. Internet anywhere with a signal and nothing extra to pay? Brilliant.
Great screen for watching TV and movies. Basically a bundled media player with the phone.
Great design, and the touch screen interface. My 3 year old boy can use it to play games on. The interface is so intuitive that he learnt to swipe to a new screen without even being shown.

So after a good few months of use, the things I’ve realised my next iPhone needs, if I’m going to get one, are;

I use the camera a lot more than I thought. It needs to be better. A lot better.
I don’t mind charging it everyday during the week on my PC, but weekends I can struggle. Longer battery life please. 2 days instead of 1 is all I’m asking.
Oh, and a louder speakerphone would be nice.

That’s it. Nothing outrageous. These are all hardware based, for lack of a better word, requests. So, if Apple can do just these 3 things, I may well get the next generation iPhone. Let’s see what they can do.

Disclaimer
This statement will not prevent me from changing my mind in the future if something better comes along. This is a completely personal opinion on the way I use my phone on a daily basis, and what I’m looking for from a mobile phone.

I’m fully aware other people have different requirements from their mobiel phone. They should always choose a phone on their own needs and weigh the pros and cons.

Unless they’re a blindly obedient fanboy.

How to: Allow duplicate screen names in ExpressionEngine

Tue, 09 Feb 2010 09:07:00 +0000

I’ve been working on a site which users must register to gain access. I’ve removed the need for a user to create a unique username by using their email address for their username. This also removes the need for the email field on the registration form.

However, the screen name, which I’m currently using to welcome the user to the site in a personal fashion, has to also be unique. Luckily the verification for unique screen names can be removed, so John Smith doesn’t have to call himself JSmith79 just to be able to register.

In order to remove the validation you’ll need to:

Go into /system/core/
Open core.validate.php
Find “Is screen name taken?”
Comment out the if statement below there

The resulting code should look like this:

/** --------------------------------

/**  Is screen name taken?

/** --------------------------------

if (strtolower($this->cur_screen_name) !=
strtolower($this->screen_name))

{

  $query = $DB->query("SELECT COUNT(*) AS count FROM exp_members

  WHERE screen_name = '".$DB->escape_str($this->screen_name)."'");

  if ($query->row['count'] > 0)
  {

    $this->errors[] = $LANG->line('screen_name_taken');

  }

}*/

And that’s it, users will now be able to choose whatever screen name they want, without the worry of duplicating that of another user.