Tag: guide

How to Customise ShareThis Settings – ShareThis

Hey everyone,

I’ve just added ShareThis to a website I’m currently working on. It’s basically a generator for all your typical social network plugins (Facebook Like, Twitter Share, Google+ etc). The main advantage I’ve found with using it is the detailed analytics.

While I haven’t had any major issues, there were a few customisations I had to make:

Change Title in ShareThis
Changing the title is pretty easy, simply use the st_title attribute:

Change/Set the URL that is Shared
I needed to set this when generating content via ajax to ensure that the correct URL was shared. Again, it’s pretty straight forward – just use the st_url attribute.

Re-initialising ShareThis buttons when using ajax
A follow on from the last issue is that ShareThis buttons will need to be reinitialised if additional content is generated via ajax:

//Re-initialise ShareThis
if (stButtons){
     stButtons.locateElements();
}

There’s a bit more info here, via this StackOverflow post:

Stop a Link from Going Anywhere – CSS/JavaScript

Hey everyone,

Another quick one – how to stop a link from doing anything. I’ve just come across a need to use a link that acts as a button. A slight UI issue with this is that clicking a hyperlink will with an href value of ‘#’ will push scroll to the top of the page.

There are a couple of ways to go about fixing this. Note the href value in the following:

<a href='javascript:void(0)' class='btn_show_reply' data-comment_id="">Reply

The second option is probably already familiar to anyone using ajax forms, simply have your function return false:

<a href='javascript:void(0)' onClick='myFunction()' id='my_awesome_link' data-comment_id="">Reply


function myFunction(){

   //Do some awesome stuff
   // ...

   //Return false to prevent link from affecting anything
   return false;
}

The third option is simply a jQuery-ish rehash of number 2:



/* Does some awesome stuff while preventing the calling link from directing the user */
$('#my_awesome_link').click(function(e) {

   //Do some awesome stuff and then prevent the link from directing user
   e.preventDefault();
});

Retrieving Thumbnail from an Animated Gif – CarrierWave

Hey everyone,

I’ve been mucking around with CarrierWave today and ran into a bit of an issue. When creating a thumbnail from an animated gif the thumbnail was also animated. Unfortunately this led to some of my image-heavy pages hanging for a bit.

This StackOverflow post offers the following solution:


#Add this method in your uploader
def remove_animation
  manipulate! do |img, index|
    index == 0 ? img : nil
  end
end


#Adjust your thumbnail process so that it now includes a call to the new function
version :thumb do
  process :remove_animation
  process :resize_to_limit => [75, 75]
  process :convert => 'jpg'
end

Simple Staging/Test Environment with Heroku – Ruby on Rails

Hey everyone,

This is just a quick guide on how to create a test/staging environment with Heroku.

-- Create staging environment
heroku create --remote staging

-- Push to staging app
heroku push staging master

-- Run rake db:migrate on staging app
heroku run rake db:migrate --remote staging

-- Add pgbackups add ons
heroku addons:add pgbackups --remote staging
heroku addons:add pgbackups --remote heroku

-- Create backup of production data
heroku pgbackups:capture --remote heroku

-- Copy to staging environemnt
heroku pgbackups:restore DATABASE `heroku pgbackups:url --remote heroku` --remote staging

-- Create a new config file called staging.rb (/config/environments/staging.rb)

-- Add environment variables
heroku config:add RACK_EVN=staging RAILS_ENV=staging --remote staging

-- Ready to go !

For those of you using git branches etc, the following may come in handy as well:

-- Create local development branch
git branch development

-- Switch to dev branch
git checkout development

-- Make your changes and commit them
git init
git add .
git commit -m "My changes"

-- Push to staging environment (local development branch to staging environment master branch)
git push staging development:master

If you run into any trouble, I found the following links pretty helpful:

http://stackoverflow.com/a/6931462/522859
https://devcenter.heroku.com/articles/pgbackups#transfer
https://devcenter.heroku.com/articles/multiple-environments

Let me know if you’ve got anything to add.

Assets:Precompile (Rake Aborted) – Heroku

Hey everyone,

I ran into the following error over the weekend while trying to push to heroku:

Running: rake assets:precompile
rake aborted!
could not connect to server: Connection refused
Is the server running on host “127.0.0.1” and accepting
TCP/IP connections on port 5432?

This stackoverflow post helped to solve the issue. All you need to do is add the following line to your application.rb file:

#Applicication.rb
config.assets.initialize_on_precompile = false

Let me know if you have any problems.

Browser Out of Date – JavaScript Plugin

Hey everyone,

I’m about to launch a new site and was looking into a quick and easy way to advise users with older browsers to upgrade. A bit of a Google revealed Browser-Update.org. They have a simple script that you add to your site and it will not only inform them that their browser is outdated, but also provide them with instructions on how to replace it.

All you’ve got to do is place their script on your site somewhere:

 
var $buoop = {} 
$buoop.ol = window.onload; 
window.onload=function(){ 
 try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
 var e = document.createElement("script"); 
 e.setAttribute("type", "text/javascript"); 
 e.setAttribute("src", "http://browser-update.org/update.js"); 
 document.body.appendChild(e); 
}

You can customise the versions by visiting their site and using the script generator. Once you’ve got it setup, users with older browsers will see a bar at the top of their page:

Browser-Update.org plugin
Browser-Update.org plugin

Let me know if you come across any other useful plugins.

Cheers,
Chris

Dropdown Button – Twitter Bootstrap

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button
A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

Change Current Day Color – jQuery FullCalendar

Hey everyone,

Just a quick post on how to change a few of the styles in FullCalendar. All you need to do is add these after the default styles are loaded:

Current Day Background Color

.fc-today{
   background-color: blue;
}

Change Calendar Background Color

#calendar .fc-content{
	background-color: #FFFFFF;
	font-size: 80%;
}

Add Box Shadow to Events

#calendar .fc-event{
	box-shadow: 2px 2px 2px #706868;
}

Style Times and Days – Add border radius to headings

#calendar .fc-agenda-axis, #calendar .fc-widget-header{
	background-color: #C2E6FF;
	border-color: #AED0EA;
	font-weight: normal;
	padding: 3px;
	border-radius: 3px;
}

How to Block PayPal eCheque Payments

Hey everyone,

Just a quick post on how to block eCheque payments. These are payments that take up to seven days to process and be approved. The site I am currently working on is in no position to reserve services for such a long period of time, so the request has been made to block non-instant payment methods.

In the sandbox environment, you just need to do the following:

  • Login to your applications PayPal account at sandbox.paypal.com
  • Press the My Account tab
  • Select profile (just underneath my account)
  • Under selling preferences, click Payment Receiving Preferences
  • Under Block the following payments, check ‘Payments by eCheque on your website. Note: You may not block echeque payments on eBay’

The credit card statement name can also be set here. Let me know if you have any trouble.

Cheers,
Chris

The Name is Either Already Used or Reserved by Ruby on Rails

Hey everyone,

I ran into the following error while attempting to create a new model called calendar today:

chris@chris-VirtualBox:~/calendar$ rails g model calendar
      invoke  active_record
      The name 'Calendar' is either already used in your application or reserved by Ruby on Rails. Please choose an alternative and run this generator again.

It turns out that this was due to the fact that my application was also called Calendar. In order to get around this I decided to rename the application. This required a little bit of searching and thanks to this Stackoverflow post I found references in the following files:

– config/application.rb
– config/environment.rb
– config/environments/development.rb
– config/environments/production.rb
– config/environments/test.rb
– config/initializers/secret_token.rb
– config/initializers/session_store.rb
– config/mongoid.yml (if using Mongoid)
– config/routes.rb
– config.ru
– Rakefile
– app/views/layouts/application.html.erb, in title tag
– initializers/secret_token.rb
– initializers/session_store.rb

Let me know if you find any more spots that I’ve missed!