Mick Redman

Wednesday 26 June 2013

At last the HTML5 main element

For those of us who've been using HTML5 for a long time, it's been a bit frustrating to step back to those old divs. Now we finally have the element we've been waiting for <main>. Now look at our page.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1>This is the header</h1>
</header>
<main>
<p>The main content</p>
</main>
<footer>Copyright mine</footer>
</body>
</html>

Monday 17 June 2013

Your first jQuery plugin

Here is a quick tutorial in how to create a jQuery plugin. Below is my basic page with a call to:
A file called 'first.plugin.js' containing the plugin (in red).
A call to a method called 'changetored' within that plugin (in blue).

<!DOCTYPE html>
<html lang="en">
<head>
<title>First jquery plugin test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>

<script src="first.plugin.js"></script>
<script>
(function()
{
/*
* changetored is a method declared in first.plugin.js
*/
$('p').changetored();
})();
</script>
</html>
Now for the plugin. Here is the file 'first.plugin.js'.

(function($)
{
$.fn.changetored = function()
{
/*
* In the context of a call like $('p').changetored();
* $(this) would become all paragraphs
*/
$(this).addClass('red');
};
})(jQuery);

Catching browser buttons

I was recently putting together an application. My test user did something I wasn't expecting. Rather than using the buttons within the application, he went for the browser buttons. It prompted me to provide a warning for the user that the application wouldn't work so well if he did this. See code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;

$('a').click(function()
{
catchBrowser = false;
});

$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>

Wednesday 12 June 2013

Removing Twitter Bootstrap modal link outlines

Developers who use Twitter Bootstrap may have noticed a problem when they use the navigation controls to launch a modal. This could be a link at the top which launches a contact form for example. The problem is, that an outline to the link is left behind. I've seen a few 'solutions' to this on the web. None of which worked for me, because they were CSS solutions and the outline is created using JavaScript. So, here's what a link required to launch a modal looks like:
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:

<div id="myModal" class="modal hide fade" role="dialog">
<p>Hello</p>
<button class="btn btn-primary">Save</button>
</div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:

(function()
{
$('a').data('toggle','modal').click(function()
{
$(this).css(
{
'outline':'none'
});
});
})();
Good luck.

Wednesday 22 May 2013

Two lines of PHP code which will save your sessions

So you develop PHP applications and use sessions to move data from page to page. You may then also have the problem that session data is not retained, especially if you use a line of code like this:
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:

session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.

session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();

Friday 26 April 2013

How to configure your Ubuntu localhost for PHP MVC URL routing

Step 1. Open a terminal and type
sudo gedit /etc/apache2/sites-available/default
or whatever text editor you like using to open up your apache configuration file for editing.
Step 2. Under the sections headed <Directory /> and <Directory /var/www/>:
Change the line 'AllowOverride none' to 'AllowOverride All'.

Step 3. Open up a terminal and type
hostname
This will display your hostname.

Step 4. Open up a terminal and type
sudo gedit /etc/hosts
or whatever text editor you like using to open up your hosts file for editing.
Step 5. Modify the first line so it reads
127.0.0.1 localhost localhost.localdomain yourhostname
Step 6. Open up a terminal and type
sudo a2enmod rewrite

Restart your computer.
It will now work.

How to set up sendmail on your Ubuntu LAMP localhost

This is beautifully simple:
Step 1. Open up a terminal and type

sudo apt-get install sendmail
This will install the complete sendmail application. It will take a minute or so to complete.

Step 2. Open up a terminal and type

hostname

This will display your hostname.

Step 3. Open up a terminal and type

sudo gedit /etc/hosts

or whatever text editor you like using to open up your hosts file for editing.

Step 4. Modify the first line so it reads

127.0.0.1 localhost localhost.localdomain yourhostname

Restart your computer.

It will now work.