Auf das Bild klicken und deinen Browser identifizieren!
Mit dem JQuery Plugin BOWSER erhalten wir die genaue Browser Kennung und Version.
So geht's in Joomla:
Wir binden das Plugin nur in den Beitrag ein, damit keine unnötigen Skripte auf jeder Seite geladen werden.
{#source}
<?php $doc=& JFactory::getDocument(); $doc->addScript( JURI::root( true ).'/templates/DEIN-TEMPLATE/js/bowser.min.js' ); ?>
<?php $doc=& JFactory::getDocument(); $doc->addScript( JURI::root( true ).'/templates/DEIN-TEMPLATE/js/webtec-bowser.js' ); ?>
{#/source}
die # vor source weglassen damit sourcerer funktioniert!
In dem Custom Skript "webtec-bowser.js" können wir nun die Funktionalität von Bowser nutzen:
(function($) {
$(document).ready(function(){
// detect browser properties
$("#detect_browser").click(function() {
if (bowser.name == 'Chrome') {
$('.browser-logo').attr('src', '/images/browser_logos/Chrome.png');
}
if (bowser.name == 'Opera') {
$('.browser-logo').attr('src', '/images/browser_logos/Opera.png');
}
if (bowser.name == 'Firefox') {
$('.browser-logo').attr('src', '/images/browser_logos/Firefox.png');
}
if (bowser.name == 'Internet Explorer') {
$('.browser-logo').attr('src', '/images/browser_logos/IE.png');
}
if (bowser.name == 'Safari') {
$('.browser-logo').attr('src', '/images/browser_logos/Safari.png');
}
$('#name').html(bowser.name + ' <span style="color:#4878A8;">Version </span>' + bowser.version);});
console.log ("bowser!" + bowser.name);
});
})(jQuery);