jQuery Colorbox not showing but background shows

I was using Colorbox for some lightbox type effects to show larger images when clicking on thumbnails, but for some reason the background was showing up but the pretty little box in the middle where the larger image is supposed to show never showed up, so this is how I made it finally appear after many failed attempts!

$("document").ready(function(){
   $(".theCssClass a[rel='forGroupingRelCodeGoesHere']").colorbox({ onLoad: function () { $("#colorbox").show(); } });
});

So the “real” code that fixed it was the:

{ onLoad: function () { $("#colorbox").show(); } }

This worked because the DOM was loading all the right things but the actual main parent element of the colorbox wasn’t changing it’s CSS to show the image.

Get Value of Checkbox using jQuery

This one is quite an easy one, but a good one to mention non-the-less as it does definitely come in really handy.

If you would like to get a checkbox’s value to send to the backend using jQuery you can always do the following:

Firstly let’s draw some HTML to illustrate our example.

<input id="chkOurCheckbox" type="checkbox" />

Now we need some jQuery to do the real work.

var ourCheckboxValue = ($("#chkOurCheckbox:checked").val()=="undefined") ? 0 : 1

In our above example we draw an HTML checkbox to the screen and then use jQuery to return the value of it.

Bare in mind that the $(“#chkOurCheckbox:checked”) is an object so we need to get the value of it using .val().

Also bare in mind that it can have two values, either “on” or “undefined”, “undefined” means “not checked” and “on” means checked.

We perform a short if condition on the value and if it isn’t checked(/undefined) then we set our variable to be 0, alternatively if it is set then we set our variable to 1.

We now have a variable called “ourCheckboxValue” with a boolean value of our checkbox.

Everybody's a web host

To cut straight to the point, “we’re living in the age where everybody’s a web host”. Whether it be small and quite pathetic or just another reseller of a larger service trying to get their cut of things, everybody truly is spamming the world with more and more web hosting packages.

Just a few short years ago this problem didn’t exist and getting web hosting was quite expensive, unless you went with free services such as the good ol’ “geocities” and co, but then larger companies started up their shared hosting and reseller hosting packages which immediately led to everybody thinking all it took to become a web host was to get themselves a reseller account and start trading. For the most part that isn’t so far off, as 95% of the websites out there sit mostly idle while almost nobody visits them and therefore it’s perfectly fine to share a single machine between multiple clients and call it “excellent web hosting”, but these small guys also try and compete with the larger players in the industry and end up creating quite a mess of things, all while flooding search engines and web development and hosting forums with “hosting deals and specials”.

For all the companies that got in right in the beginning, this was a very viable business model and something they can do really well at, for the rest of you, rather just close shop and make the web that much less hosting spammy!

Restrict PHPMyAdmin to IP Address

Would you like to restrict PHPMyAdmin from being accessible to the whole world?

Firstly you need to SSH into your box if you are not on the local machine where PHPMyAdmin is installed along with Apache.

cd /etc/phpmyadmin/
vi apache.conf

You will need to look for the following text “<Directory /usr/share/phpmyadmin>” and add in the below code:

Remember that you need to press “i” in order to start editting text if using VI.

AllowOverride All
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
Allow from xxx.xxx.xxx.xxx

Obviously you will need to replace your IP Address where the xxx.xxx.xxx.xxx is.
If you don’t know what you IP Address is then you can get it here.

So the <Directory /> block should look something like this:

<Directory /usr/share/phpmyadmin>
Options FollowSymLinks
DirectoryIndex index.php
<IfModule mod_php5.c>
AddType application/x-httpd-php .php
php_flag magic_quotes_gpc Off
php_flag track_vars On
php_flag register_globals Off
php_value include_path .
</IfModule>

AllowOverride All
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
Allow from xxx.xxx.xxx.xxx

</Directory>

Now you need to save your changes, to do this press ESC and then type “: x” (without quotes or a space inbetween) and hit ENTER. You should now be back at a command prompt.

Once you have completed this you will need to restart the apache webserver, you can do this as follows.

sudo /etc/init.d/apache2 restart

You have now restricted public access to your PHPMyAdmin install and you can feel safe again :)

2014 – Commands out of sync; you can't run this command now

#2014 – Commands out of sync; you can’t run this command now

Now that can be a really annoying error!

It happens when querying stored procedures in phpMyAdmin as mysqli seems to return 2 sets of results opposed to the usual 1 that mysql returns.

You cannot call anything else until you have “flushed” or “cleared” the second result.

You can try using COMMIT to resolve this.

Image corrupt or truncated: <unknown>

What is “Image corrupt or truncated: <unknown>” and what does it mean?

This can often be seen while using Firebug in Firefox, but it actually has nothing to do with either and is just the error being reprinted in in firebug in most cases.

It comes from an image that has had it’s extension changed from say .gif to .png or .png to .ico. Eventhough .png and .ico file types are very similar, they are not the same, so an error occurs.

This will occur quite often when a website’s favicon was originally a .png and got changed to a .ico.

The image itself will in most cases still open and be visible in browsers etc but should be re-saved using an imaging program.

WordPress wp-admin use different language for user

I needed to do some work on a WordPress site a little while ago and all the admins were French – and I cannot speak French other than the popular swear words – so had no idea what was going on in the /wp-admin/ so needed some way of enabling my newly created user account to be in english while letting everybody else use french as they had been up til that point.

This wasn’t something that wordpress did out of the box so I did some scavenging around and found a plugin called “Bogo” that did it really well.

You can get it here: http://wordpress.org/extend/plugins/bogo/

Once you have installed and activated the plugin you need to navigate to the user account you want to modify (wp-admin/profile.php) and select the dropdown next to “Locale” and change it to English.

Replace all spaces in HTML with   except in HTML tags using PHP

If you would like to replace all the spaces in an HTML string with &nbsp; so that you can render it out to the browser but you also want to retain current spaces in HTML tags you can use the below method:

$inputString = ‘<span class="color:red">1</span> 2        3′;
$outputString = preg_replace_callback("#&gt;[^&lt;]+&lt;#","relSpaces",$inputString);

function relSpaces($match){return str_replace(" "," ",$match[0]);}

This will replace:
“<span>1</span> 2        3″

..to look like this:
“<span>1</span>&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3″

General Site Update

We are a Management Consultancy company and are split into IT and HR. Up until a short while ago our website had be quite general in it’s views to show the services of both divisions but we have decided to let our IT division take it’s own path so the website will be undergoing a transformation to show this.

This will not affect any of our customers’ services or packages.