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>
Monday, 17 June 2013
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.
<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();
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.
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 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.
Monday, 15 April 2013
Create unordered lists from lines of text using Emmet in Sublime text 2
Designers and developers of web sites often find they're having to convert text into HTML at the micro level despite all the tools we have available. Here is just one example of how Sublime Text 2 with the Emmet plugin can help. You may have to use alternative keys for macs.
Let's say we have 10 lines of text that we want turning into a HTML unordered list. OK, with Emmet we can select all the lines and wrap them with <ul></ul> using ctrl+alt+enter and typing ul, then enter again.
What we don't want to do from here is have to select each line individually, then press ctrl+alt+enter and typing li, then enter again.
What we can do is select all the lines, then ctrl+shift+l to split the selection into lines, then press ctrl+alt+enter and typing li, then enter again.
As you can imagine, this technique is useful across other circumstances where we have the text, but need to turn it into HTML.
Thursday, 11 April 2013
Yet more fun with IE
I've been working with a good designer recently. To be fair to him, I've made more of an effort to accurately represent his work in IE 7 and 8. My layout has used twitter bootstrap and I discovered 2 things about CSS in IE along the way:
1. To style the <legend> tag, you need to encase your form elements in a <fieldset> tag.
2. To specifically target IE 7 and 8 in your styles, you need to add /9 to the end of styles. These will not affect your styles targeting good browsers. I put these specific styles at the bottom of my stylesheet so that I don't have to hunt round for them at a later date. Here are some examples below. Very quirky.
/*All IE 7 and 8 stuff*/
hr.bluehr
{
width:104.3%\9;
}
#formholder legend
{
margin-left:-6px\9;
}
input[type='text'], input[type='password']
{
width:94%\9;
}
.btn
{
border:1px dotted #EEEEEE\9;
margin-left:-0px\9;
}
1. To style the <legend> tag, you need to encase your form elements in a <fieldset> tag.
2. To specifically target IE 7 and 8 in your styles, you need to add /9 to the end of styles. These will not affect your styles targeting good browsers. I put these specific styles at the bottom of my stylesheet so that I don't have to hunt round for them at a later date. Here are some examples below. Very quirky.
/*All IE 7 and 8 stuff*/
hr.bluehr
{
width:104.3%\9;
}
#formholder legend
{
margin-left:-6px\9;
}
input[type='text'], input[type='password']
{
width:94%\9;
}
.btn
{
border:1px dotted #EEEEEE\9;
margin-left:-0px\9;
}
Subscribe to:
Posts (Atom)