Category: Guides

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();
});

Disable Word-Wrap – Sublime Text

Hey everyone,

This one is pretty obvious, but just in case anyone is having trouble finding it:

- View > Word Wrap

If you want to alter the default settings, the following seems to work:

  • Preferences
  • Settings – User
  • Add the following and then save:
{
	"word_wrap": "false"
}

Once unchecked any overflow simply results in a horizontal scroll bar.

Warning: S3::putObject(): RequestTimeTooSkewed – CarrierWave (Ruby on Rails)

Hey everyone,

Another issue I came across while working with CarrierWave. After rebooting a VM Amazon started too complain “request time too skewed”:

Warning: S3::putObject(): RequestTimeTooSkewed The difference between the request time and the current time is to large. in x on line 14

This one is another simple fix, just make sure your system time is correct. I’d been using a VM and it had run forward by a few hours. Setting it back manually resolved the error.

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

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

Refresh Folder Hotkey – Sublime Text 2

Hey everyone,

Just a quick post on how to setup a refresh hotkey in Sublime on Windows. All you have to do is the following:

1) Open sublime
2) Select Preferences from the top menu and then click “Key Bindings – Default”
3) Go to the end of the file and add a comma to the last entry:

        //Original
	{ "keys": ["enter"], "command": "hide_panel", "context":
		[{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	},
	{ "keys": ["shift+enter"], "command": "find_prev", "context":
		[{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	},
	{ "keys": ["alt+enter"], "command": "find_all", "args": {"close_panel": true},
		"context": [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	}

        //Modified
        //Original
	{ "keys": ["enter"], "command": "hide_panel", "context":
		[{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	},
	{ "keys": ["shift+enter"], "command": "find_prev", "context":
		[{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	},
	{ "keys": ["alt+enter"], "command": "find_all", "args": {"close_panel": true},
		"context": [{"key": "panel", "operand": "incremental_find"}, {"key": "panel_has_focus"}]
	}

4) Add the following entry:

//Custom
{ "keys": ["f5"], "command": "refresh_folder_list" }

Now all you have to do is save the file and F5 will now refresh your project! If you want to change the hotkey, simply switch [“f5”] for another value.

Leave a comment below if you have any issues or tips!