Text

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.

Text

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(000$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…

Text

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:

  1. Create your link around text, an image or whatever else you can think of
  2. Point your href to http://twitter.com/share
  3. Add some querystring variables to generate the tweet
  4. 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

Text

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.

Text

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:

  1. Click the ‘Edit shortcuts’ link in the admin toolbar, then click ‘Add shortcut’.
  2. Enter ‘Clear cache’ in the Name field (or copy and paste if you’re like me)
  3. Enter ‘admin/config/development/performance’ in the Path field
  4. 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.

Link

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!

Text

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/

Link

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…

Source: planthenbuild
Text

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).

Text

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.