blog entry

Browser Detection Pop-up in Contao

2011-04-21 by John Brand Comments: 1 contao

Getting Started

Easily create a mediabox pop-up that only displays when a browser is too old for your site's design.

When dealing with websites, you often have to code the design of the CSS to match a specific browser. Fortunately there is an easy way to add this to your Contao CMS site.

First you need to install the extension:

View Browser Detection Extension on contao.org.

Adding the Code

Then you can enter the following script into the templates folder, as a mootools template,

e.g. TL_ROOT/templates/moo_browserdetect.tpl

You can modify the hard-coded values:

$browserlist - which is an array containing all the browser checks you want to do
- Browser Name, e.g. Internet Explorer
- Browser minimum version, e.g. 8.0
- Redirect for upgrade URL e.g. http://www.microsoft.com/ie
$color - sets the headline and download link color
$imageurl - which is the smiley I've re-designed (this is included in the download)

Code

<?php

$browserlist = array(
	array('Internet Explorer', '8.0', 'http://www.microsoft.com/ie/'),
	array('Safari', '3.2', 'http://www.apple.com/safari/'),	
	array('Firefox', '3.5', 'http://www.mozilla.com/firefox/'),	
	array('Opera', '10.6', 'http://www.mozilla.com/firefox/'),	
	array('Chrome', '7.0', 'http://www.google.com/chrome/'),	
);

$this->Import('Browser');
$imageurl = 'tl_files/yourtheme/icon-sadsmiley.png';

$color =  #E77802';

$upgradeurl = '';

if (!$this->Browser->isRobot())
{
	foreach ($browserlist as $browser)
	{
		if ($this->Browser->getBrowser() == $browser[0] && intval($this->Browser->getVersion()) < $browser[1])
		{
			$upgradeurl = $browser[2];
			break;
		}
	}
}

?>
<?php if ($upgradeurl): ?>
<div id="mb_browserupgrade" style="display:none; text-align:center;">
  <h2 style="color:<?php echo $color; ?>; text-align:center; margin:10px 0 10px 0; background: url(<?php echo $imageurl; ?>) no-repeat center top; padding:80px 0 0 0; font:30px/30px ZagBold,sanserif; text-transform:uppercase;">Upgrade your Browser!</h2>
  <p style="color:#fff; text-align:center;">
  You are currently using <?php echo $this->Browser->getBrowser(); ?> version <?php echo $this->Browser->getVersion(); ?>.</p>
  <p style="color:#fff; text-align:center;">To view this website correctly, you will need to upgrade your browser to a more recent version.</p>
  <p style="text-align:center;"><a href="<?php echo $upgradeurl; ?>" style="color:#E0052B" <?php echo LINK_NEW_WINDOW ?>>Upgrade Now!</a></p>
</div>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
   Mediabox.open('#mb_browserupgrade', '', '380 230');
});
//--><!]]>
</script>
<?php endif; ?>

Download the Code

moo_browserdetect.zip (7.5 kB)

Result

And here is the result.

Why not an extension?

You might ask why you can't setup this as an extension, but I quickly realised that there isn't a single nice place to provide the settings. Page Layout seems like the best choice I can think of, so perhaps using my code, someome can to the extension.

Thanks

Thanks to Chris Schuld for writing (on commission) this very handy extension. Perhaps he can include the mootools script in his distribution to make things easier for people to understand how to use it. Also, thanks to Contao's leo for letting me rip the script's look and feel from the #name-change he did.

add acomment

Hello...this is what I am looking for....but is it possible to integrade it to a .html or .php website? Please help and thank you for the answer!

Comment by saso2011-12-06