HTML

Redirect certain IP address .htaccess

If you ever wanted to prevent certain IP addresses from accessing your site, you can easily acheive this in the .htaccess file.

Simply list the IP addresses and then redirect them to the desired URL:

RewriteEngine on 
RewriteCond %{REMOTE_ADDR} ^xxx\.xxx\.xxx\.xxx$ [OR]
RewriteCond %{REMOTE_ADDR} ^xxx\.xxx\.xxx\.xxx$
RewriteRule ^(.*)$ http://www.redirection-url.com [L]

If you want to add more then do so, but notice there is no [OR] on the last condition.

Now, this could get messy if you have loads, and I am unsure of the performance hit, but its a quick and easy way of redirecting users. A site I work on has 5 servers located worldwide, and I wanted to send LA users attempting to access the UK server back to their designated server

Google Fonts – nasty bold

Say you are using Google Web fonts for some CSS. Well, if you don’t include the correct bits you may encounter this problem.

Say, you use the Ubuntu font, for instance, and you have this in your <head>  block:

<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css" />

Then, you use this font everywhere, and this includes a <th> section. You may find that the font displays like this:

Odd bold variant on Google Webfonts

Why has this happened? Well, its because you’ve not included the bold variant of the font in the header link.

For this particular font, it should be:

<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,700" rel="stylesheet" type="text/css" />

700 is the bold variant. Once you’ve changed this, you should find that the bold is rendered correctly:

Fixed version of Google Webfont bold

CSS not loading, Firebug states ‘Aborted’

Had some CSS that worked in Chrome, but not Firefox or Opera. Firebug reported this:

Aborted CSS

 

 

 

 
Turns out, that my media atributes were incorrect,

media="screen print"

will not work in FF and Opera, but

media="screen, print"

does work

However, if this does not fix your problem, or you are not using media selectors, then it will probably be due to an extension to your Firefox browser. I have heard the Foxyproxy and FireQuery cause this sometimes. Best bet is to remove any extensions you’re not using. If you’re still getting it, then it’ll be down to you to decide if you want to use the extension or get rid of the errors.

Toggle radio buttons by clicking the label

I’ve seen a few methods of this using over-elaborate JavaScript, when its really not necessary.

All you need to do is wrap the <input with a <label – as a label will inherently become a ‘clicky’ for its children:

<label><input type="radio" name="radio-option" value="cake" />cake</label>
<label><input type="radio" name="radio-option" value="biscuits" />biscuits</label>

 

Easy

preventDefault not firing on onkeyup event

Simple one.

$(document).on('#element', 'keyup', function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
        //do some other stuff
    }
});

This doesn’t actually work as the Key Up event is too late down the event queue for preventDefault() to have any effect. Change your code to utilise the keydown or keypress event instead and you should be fine.

Ajax Loading GIF

So you want a little funky AJAX loader?

Add this to your JS main core file…:

$(document).ready(function() {
    //initiate an ajax start message
    $(document).ajaxStart(function() {
       //show the message
       $('#ajax_loading_indicator').show();
    });
    //when ajax is completed
    $(document).ajaxStop(function() {
       //hide the message
       $('#ajax_loading_indicator').hide();
    });
});

And create a nice little div somewhere:

<div id="ajax_loading_indicator">
    <img src="/public/images/ajax_loading.gif" alt="Loading" />
    PLEASE WAIT
</div>

I use the following CSS to style mine, so its unobtrusive but visible:

#ajax_loading_indicator {
    position: fixed;
    right: 2px;
    top: 2px;
    background-color: #efec9f;
    border: 1pt orange solid;
    padding: 5px 30px 5px 30px;
    display: none;
}

TIP: If you can’t be bothered to find an AJAX loading GIF, then there is a great little website that will create you one for free. Its, www.ajaxload.info

Easy!

You do need to have jQuery (version 1.0+) for this, in case you didn’t work that out… www.jquery.com

 

 

Preventing an element getting split over several pages

If you are trying to add a ‘total’ or a report footer and its getting split over the penultimate and final page, then just add this css to the element class:

page-break-inside: avoid;

Works a treat for me – I think its only for the @print containers but it successfully keeps my DIV in one piece on the last page, or if it won’t fit, on another page.

Absolute positioning within another container

Say you want to position something within its container, then the element you are trying to position needs to have:

position: absolute;

But the parent container can simply have:

position: relative;

So in full:

<div class="container">
    <div class="abs-position">
        Hello world!
    </div>
</div>

And then simple CSS:

.container {
    position: relative;
}

.abs-position {
    position: absolute;
    left: 100px;
    height: 200px;
}

Easy solution to an age old problem.

Netbeans – Goto matching brace/bracket

If using Netbeans for your development and you have a horrendous spagetti coded “if” statement, you can use a keyboard shortcut to go to the matching opening or closing bracket.

Simply click on the first (or last) bracket, and then press CTRL + [ and Netbeans will move the cursor to the matching bracket. Its not CTRL + ] for the reverse, its CTRL + [ for both.

I can confirm that this works in Netbeans 7.0.1 on Linux and Mac (seeing as its a Java app, it should be the same on Windows too)

 

Using mod_rewrite for clean URLs

Say your message board on your blog uses the following request URL to find and display the correct data:

http://www.mysite.com/blog/index.php?category=news&year=2012&month=1

This is a rather simple request, but it is not very nice looking or easy on the eye, and it can be improved, for the user end experience.

Take this for instance:

http://www.mysite.com/blog/news/2012/1

That’s much nicer, and easier to read and understand even for a non technical person. They may understand the category, year and month without any input from you,

How do you convert your site? Well you don’t need to, but you can use a .htaccess mod_rewrite to change the url in the background.

RewriteRule blog/([a-z0-9]+)/([0-9]{4})/([0-9]) /blog/index.php?category=$1&year=$2&month=$3 [L]

This takes the first quantifier after blog (a-z0-9) and says any characters, put into $1. The second is a 4 digit number, and the third, any number.

The [L] tells the re-write engine that if this rule matches, don’t do any more rule processing (last one)

If you implement this way of displaying your links, then your site should be better off in the big wide world of search engines. A lot of search engine spiders ignore URL’s with & in them as it can cause recursive looping and its easier to just ignore them.

Also, if you come to rewrite your blog in a new language, ASP for instance (shudder at the thought) then you can change the rule simply:

RewriteRule blog/([a-z0-9]+)/([0-9]{4})/([0-9]) /blog/index.asp?category=$1&year=$2&month=$3 [L]

Thinking about your user experience, even if you are considering the search engines, is important.

If you want to read more about the Apache re-write module, you can go here