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:
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:
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();
});
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: 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.
I’ve been mucking around with FullCalendar recently and decided to share one of the prototypes I’ve ended up with. It basically lets the user change the events without having to do a postback. A user simply has to click the event, type in the changes and hit update.
I’ve posted the code below, however there’s also a zip which is a little easier to manage. Note that you’ll probably want to clean it up a little if you plan to use it in production. The following libraries and plugins are also used:
– jQuery
– jQuery UI
– jQuery FullCalendar
– jQuery miniColors
What it Looks Like:
Full Calendar Example with Client Side Edits
How to Use It:
It’s all pretty straight forward, but just in case any one runs into issues there are two parts to this example. First, you generate an event template. You can then drag and drop this template onto the calendar as many times as you want.
The second part allows you to edit existing events without posting back to the server. To do this, simply click an event and then make the necessary adjustments using the top panel on the right. Once you’re done, just press update event.
The example uses the standard title property, but also includes a few others: descriptions, price, available. You can change/remove these to suit your needs, just remember to pull them out of the JavaScript as well.
You can also close the modal popup manually by using the following JavaScript:
$('#test_modal').modal('hide')
Adjust Modal Width:
In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:
$('#test_modal').modal({
backdrop: true,
keyboard: true,
show: false \remove this if you don't want it to show straight away
}).css({
width: 'auto',
'margin-left': function () {
return -($(this).width() / 2);
}
});
body .modal-admin {
//new custom width
width: 750px;
//must be half of the width, minus scrollbar on the left (30px)
margin: -345px 0 0 -375px;
}
Show modal when the user scrolls past certain div
I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.
/* Wait for document to load */
$(document).ready(function(){
$(window).scroll(function(){
//Retrieve scroll distance from top
var top = $(window).scrollTop();
//Retrieve the divs distance from top of page
var div_distance = $('my_div').offset().top;
//Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
var buffer_distance = 150;
//Check if scrolled past div
if(top >= div_distance && top <= (div_distance + buffer_distance)){
//Show modal - you may want to add checks etc to see if it's already show
$('#test_modal').modal('show');
} else {
//Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
$('#test_modal').modal('hide');
}
});
});
I finally decided to replace all my existing code to handle images with Paperclip. I was following the screencast by Emerson Lackey, #134 Paperclip, however I ran into a couple of issues. Thankfully they were all very easily fixed, and probably wouldn’t have occurred at all if I’d simply watched the whole screencast instead of trying to rush on ahead.
Issue #1:
The first issue I encountered was that my asset fields weren’t appearing on the page:
I spent way too much time trying to work this one out, especially considering how obvious the solution is – the screencast is simply missing an “=” after the initial “<%" in "<% f.fields_for". Simply amend it as follows:
Issue #2:
The second one is actually encountered and addressed by Emerson himself. Unfortunately I started trying to find a solution before seeing his, so just in case someone else does a Google search I’ll include the issue here:
undefined method `symbolize_keys!' for "/system/assets/1/original/mack_truck.jpg?1329550205":String
The problem here is simply that the parenthesis are in the wrong place, simply amend your code as follows:
Anyway, hopefully this helps someone else out – let me know if there are any issues.
Update: Don’t name your model assets!
Unfortunately I followed the tutorials naming example and called my model Asset. While this may have been fine in earlier version of rails it causes quirky conflicts with the asset pipeline. I strongly encourage you to use a different name i.e. Uploads
In the middle of doing up some documentation I realised that the formatting and colors aren’t kept when you copy and paste from Notepad++ to Microsoft Word. Luckily Google was able to help out by showing me default plugin that lets you keep all the syntax highlighting etc.
1: Hightlight any of the text you want copied
2: From the menu select Plugins > NppExport > Copy all formats to clipboard
3: Paste into Microsoft Word
This is a problem that had me confused for an embarrassingly long time. Rails wraps button_to elements within a form and a div. Unfortunately this will take up 100% of the available width. Thankfully the solution is pretty straight forward – simply wrap buttons in a div and float them left like so:
'button'%>
'button' %>
A wrapper div isn’t strictly necessary however I usually add one just to be safe. While this will probably give a bunch of designers another reason to hate developers, I find that wrapping floated elements seems to save a lot of headaches when making changes down the track.
Using the code above you may also find that the divs aren’t filling as expected, simply add a div with a ‘clear:both’ style to the bottom of the wrapper:
'button'%>
'button' %>
Hopefully that doesn’t take anywhere near as long for you guys to figure out as it did me, time for a coffee break I think. Good luck!
What I Broke - Programming and Web Development 