Erweiterung tabcontrol klappt nicht
Hallo,
ich nun echt sehr unschlüssig darüber, warum das Tabcontrol bei mir leider nicht funktionieren mag.
Ich habe vorsichtshalber alles was jquery ist im meinem Template entfernt.
Leider funktioniert das Tabcontrol gar nicht.
Im Firebug sehe ich keine JS Fehler oder sonstiges. Lediglich Warnings vom Modernizr.
Hat wer eine Idee, ob ich ein anderes JS noch benötige oder sonst was?
Mein Quelltext sollte einigermaßen clean sein, oder?
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<!--
This website is powered by Contao Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2012 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at http://www.contao.org for more information
//-->
<title> Impressum und AGB - Leroi - Poloshirts made in switzerland</title>
<base href="http://dev.the-webring.at//">
<meta name="robots" content="index,follow">
<meta name="description" content=" Allgemeine Geschäftsbedingungen und Impressum">
<meta name="keywords" content="">
<link rel="stylesheet" href="system/scripts/51b53dfc8da0.css" media="all">
<link rel="stylesheet" href="templates/leroi/css/style.css" type="text/css" media="screen" >
<link rel="stylesheet" href="templates/leroi/css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/MenuMatic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/topnav.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/teaser.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/formular.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/jquery.jqzoom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="templates/leroi/css/shop.css" type="text/css" media="screen" />
<script src="plugins/tabcontrol/tabcontrol.js"></script>
<!-- Load jquery for jquerytools -->
<!--<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>-->
<!--<script type='text/javascript' src='templates/leroi/js/jquery-1.6.js'></script>-->
<!-- <script type='text/javascript' src='templates/leroi/js/jquery.jqzoom-core.js'></script>-->
<script src="system/scripts/e53a815ab435.js"></script>
<!--[if lt IE 9]><script src="plugins/html5shim/html5-3.js"></script><![endif]-->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" type="image/ico" />
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="templates/leroi/js/libs/modernizr-2.5.2.min.js"></script>
</head>
<body id="top" class="win chrome ch18">
<div id="double-line-top">
<div class="basic firstline"></div>
<div class="basic secondline"></div>
<div class="thirdline"></div>
<div class="basic fourthline"></div>
<div class="basic fifthline"></div>
</div>
<div id="container">
<header id="header">
<div id="page-container">
<div id="schmucklinie-left"></div>
<div id="logo">
<h1>Polo Shirts</h1>
<a href="index.php/leroi-de.html" title="Startseite aufrufen">
<img alt="Leroi Polo Logo" src="tl_files/layout/leroi-logo-165px.png"/></a>
</div>
<!-- indexer::stop -->
<nav class="mod_customnav block" id="top-nav">
<a href="index.php/LeRoi_Impressum_und_AGB.html#skipNavigation3" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/warenkorb.html" title="Leroi - Poloshirts Warenkorb" class="first">Warenkorb</a></li>
<li class="last"><a href="index.php/versandkosten.html" title="Leroi - Poloshirts Versandkosten" data-lightbox="width:600;height:400;" class="last">Versand</a></li>
</ul>
<div class="clearer"></div>
<a id="skipNavigation3" class="invisible"> </a>
</nav>
<!-- indexer::continue -->
<!-- indexer::stop -->
<nav class="mod_navigation block" id="main-nav">
<a href="index.php/LeRoi_Impressum_und_AGB.html#skipNavigation5" class="invisible">Navigation überspringen</a>
<ul id="nav" class="level_1">
<li class="sibling first Start"><a href="index.php/leroi-startseite-poloshirts.html" title="Leroi - Poloshirts made in switzerland" class="sibling first">Start</a></li>
<li class="submenu sibling Produkte"><a href="index.php/Produkte.html" title="Leroi Produkte" class="submenu sibling">Produkte</a>
<ul class="level_2">
<li class="herren first Herren"><a href="index.php/Herrenprodukte.html" title="Leroi - Poloshirts Herrenprodukte" class="herren first">Herren</a></li>
<li class="damen Damen"><a href="index.php/Damenprodukte.html" title="Leroi - Poloshirts Damenprodukte" class="damen">Damen</a></li>
<li class="schals last Schals"><a href="index.php/Schals.html" title="Leroi - Schals" class="schals last">Schals</a></li>
</ul>
</li>
<li class="shophightlighter sibling Shop"><a href="index.php/Onlineshop.html" title="Leroi Polo Shirts Onlineshop" class="shophightlighter sibling">Shop</a></li>
<li class="submenu sibling Leroi"><a href="index.php/Das_Unternehmen_Leroi.html" title="Das Unternehmen Leroi" class="submenu sibling">Leroi</a>
<ul class="level_2">
<li class="presse first Presse"><a href="index.php/Presse.html" title="Leroi - Poloshirts Presse" class="presse first">Presse</a></li>
<li class="vision Vision"><a href="index.php/Vision.html" title="Leroi - Unternehmensvision" class="vision">Vision</a></li>
<li class="team last Team"><a href="index.php/Team.html" title="Leroi - Team" class="team last">Team</a></li>
</ul>
</li>
<li class="kontakt sibling last Kontakt"><a href="index.php/Kontakt.html" title="Kontaktieren Sie Leroi" class="kontakt sibling last">Kontakt</a></li>
</ul>
<a id="skipNavigation5" class="invisible"> </a>
</nav>
<!-- indexer::continue -->
<div id="schmucklinie-middle-right"></div>
<div class="clearer"></div>
<div id="schmucklinie-right"></div><!-- indexer::stop -->
<nav class="mod_breadcrumb block">
<span class="breadscrumbinfo">Ihre Position:</span>
<a href="index.php/leroi-startseite-poloshirts.html" title="Leroi - Poloshirts made in switzerland">Leroi Start</a> >
<span class="active">Leroi Impressum und AGB</span>
</nav>
<!-- indexer::continue -->
</div>
</header>
<div id="main-page">
<div id="main-page-inner">
<div class="main-page-content">
<div class="main-page-content-inner">
<div class="mod_article block" id="impressum_agb">
<!-- indexer::stop -->
<div class="pdf_link">
<a href="#" rel="nofollow" title="Diese Seite drucken" onclick="window.print();return false"><img src="system/modules/frontend/html/print.gif" width="16" height="16" alt=""></a>
<a href="index.php/LeRoi_Impressum_und_AGB.html?pdf=24" rel="nofollow" title="Artikel als PDF drucken"><img src="system/modules/frontend/html/pdf.gif" width="16" height="16" alt=""></a>
</div>
<!-- indexer::continue -->
<div class="ce_text block">
<h1>Impressum</h1>
<p><strong>Leroi GmbH</strong><br>Adresse<br>Adresse<br>E-Mail: office@leroi.ch<br>Telefon: <br>WWW: <a href="http://www.leroi.ch">www.leroi.ch</a> </p>
</div>
<!-- indexer::stop -->
<script type="text/javascript">
/* <![CDATA[ */
function loadTabControl_59() {
window.TC_59 = new Array();
i = 0;
$$('#Impressum_agb').each(function(s) {
i++;
elements = s.getElements('.tabs');
if(elements.length){
window.TC_59[i] = new TabControl(s, {
delay: 2500,
behaviour: 'click',
tabs: s.getElements('.tabs'),
panes: s.getElements('.panes'),
selectedClass: 'selected',
hoverClass: 'hover'
});
}
});
}
/*
* Bootstrap
*/
window.addEvent('domready', loadTabControl_59);
/* ]]> */
</script>
<!-- indexer::continue -->
<div class="ce_tabcontrol_tabs block">
<ul>
<li class="tabs">AGB</li>
<li class="tabs">Datenschutzrichtlinie</li>
<li class="tabs">Google Analytics</li>
<li class="tabs">Datenschutzerklärung zu Facebook Social Plugins</li>
</ul>
</div><div class="ce_tabcontrol_pane block">
<div class="panes"><div>
<div class="ce_text block">
<p>AGB Text</p>
</div>
</div></div>
</div>
<div class="ce_tabcontrol_pane block">
<div class="panes"><div>
<div class="ce_text block">
<p>Die Einhaltung der geltenden gesetzlichen Bestimmungen zum Schutz personenbezogener Daten ist für uns selbstverständlich. Gemäß Datenschutzgesetz sind personenbezogene Daten Informationen, die genutzt werden können, um die Identität von Web-Benutzern zu erfahren.</p>
<p>Darunter fallen Informationen wie Name, Adresse, Postanschrift, Telefonnummer etc. Sämtliche Informationen, die nicht direkt mit der tatsächlichen Identität des Benutzers in Verbindung gebracht werden können fallen somit nicht darunter. <br>Bei einem Besuch dieser Website erheben wir ohne Ihrer freiwilligen Anmeldung keine personenbezogenen Daten von Ihnen. Es fallen jedoch automatisch Daten an, die über Cookies in einer Protokolldatei auf unserem Server gespeichert und <br>ausschließlich anonym zu Statistikzwecken ausgewertet werden. Bei Bedarf und sofern Sie einen personalisierten, interaktiven bzw. Mail-Dienst auf unserer Website verwenden, erfassen wir von Ihnen persönliche Informationen. <br>Wir verwenden diese personenbezogenen Daten nur innerhalb unseres Unternehmens. Diese Daten werden nicht an Dritte weitergegeben, es sei denn, dies ist zur Vertragserfüllung erforderlich oder wir werden gesetzlich dazu verpflichtet.</p>
</div>
</div></div>
</div>
<div class="ce_tabcontrol_pane block">
<div class="panes"><div>
</div></div>
</div>
<div class="ce_tabcontrol_pane block">
<div class="panes"><div>
<div class="ce_text block">
<p>Der Internetauftritt von Leroi verwendet Social Plugins (“Plugins”) des sozialen Netzwerkes facebook.com, welches von der Facebook Inc., 1601 S. California Ave, Palo Alto, CA 94304, USA betrieben wird (“Facebook”). Die Plugins sind an einem der Facebook Logos erkennbar (weißes „f“ auf blauer Kachel oder ein „Daumen hoch“-Zeichen) oder sind mit dem Zusatz “Facebook Social Plugin” gekennzeichnet. Die Liste und das Aussehen der Facebook Social Plugins kann hier eingesehen werden: <a href="http://developers.facebook.com/plugins" target="_blank">http://developers.facebook.com/plugins</a>.<br>Wenn Sie die Webseite von Leroi aufrufen, die ein solches Plugin enthält, baut Ihr Browser eine direkte Verbindung mit den Servern von Facebook auf. Der Inhalt des Plugins wird von Facebook direkt an Ihren Browser übermittelt und von diesem in die Webseite eingebunden. Leroi hat daher keinen Einfluss auf den Umfang der Daten, die Facebook mit Hilfe dieses Plugins erhebt und informiert Sie daher entsprechend unserem Kenntnisstand:<br>Durch die Einbindung der Plugins erhält Facebook die Information, dass Sie die entsprechende Seite unseres Internetauftritts aufgerufen haben. Sind Sie bei Facebook eingeloggt, kann Facebook den Besuch Ihrem Facebook-Konto zuordnen. Wenn Sie mit den Plugins interagieren, zum Beispiel den Like Button betätigen oder einen Kommentar abgeben, wird die entsprechende Information von Ihrem Browser direkt an Facebook übermittelt und dort gespeichert. Falls Sie kein Mitglied von Facebook sind, besteht trotzdem die Möglichkeit, dass Facebook Ihre IP-Adresse in Erfahrung bringt und speichert.<br>Zweck und Umfang der Datenerhebung und die weitere Verarbeitung und Nutzung der Daten durch Facebook sowie Ihre diesbezüglichen Rechte und Einstellungsmöglichkeiten zum Schutz Ihrer Privatssphäre entnehmen Sie bitte den Datenschutzhinweisen von Facebook: <a href="http://www.facebook.com/policy.php" target="_blank">http://www.facebook.com/policy.php</a>.<br>Wenn Sie Facebookmitglied sind und nicht möchten, dass Facebook über unseren Internetauftritt Daten über Sie sammelt und mit Ihren bei Facebook gespeicherten Mitgliedsdaten verknüpft, müssen Sie sich vor Ihrem Besuch unseres Internetauftritts bei Facebook ausloggen.<br>Ebenfalls ist es möglich Facebook-Social-Plugins mit Add-ons für Ihren Browser zu blocken, zum Beispiel mit dem “Facebook Blocker“.</p>
</div>
</div></div>
</div>
</div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<footer id="footer">
<div class="inside">
<div id="inner">
<div id="sitemap">
<ul class="firstlevel">
<li>Produkte
<ul class="secondlevel">
<li><a href="index.php/Herrenprodukte.html" title="Leroi - Poloshirts Herrenprodukte">Herren</a></li>
<li><a href="index.php/Damenprodukte.html" title="Leroi - Poloshirts Damenprodukte">Damen</a></li>
<li><a href="index.php/Schals.html" title="Leroi - Schals">Schals</a></li>
</ul>
</li>
<li>Leroi
<ul class="secondlevel">
<li><a href="index.php/Presse.html" title="Leroi - Poloshirts Presse">Presse</a></li>
<li><a href="index.php/Vision.html" title="Leroi - Unternehmensvision">Vision</a></li>
<li><a href="index.php/Team.html" title="Leroi - Team">Team</a></li>
</ul>
</li>
</ul>
</div>
<div id="footeraction">
<div id="hinweistext"><p class="footerinfo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis augue augue, suscipit aliquet laoreet ut. </p></div>
<div id="impressumagb"><p class="footerinfo"><a href="index.php/LeRoi_Impressum_und_AGB.html" title="Impressum & AGB">Impressum<br/>&<br/> AGB</a></p></div>
<div id="newsletteranmeldung"><h3>Newsletteranmeldung</h3><p><input type="text" class="newsletterinput"/> <input type="button" class="newsletteranmelden" value="Los!"/></p></div>
</div>
<div id="bezahlwege"><p class="footerinfo">Sicher &<br/> einfach<br/> bezahlen</p>
<img src="tl_files/layout/footer-bezahlwege.jpg" alt="leroi Bezahlwege"/>
</div>
</div>
</div>
</footer>
</div>
<script src="plugins/mediabox/1.4.6/js/mediabox.js"></script>
<script>
Mediabox.scanPage = function() {
var links = $$('a').filter(function(el) {
return el.getAttribute('data-lightbox') != null;
});
$$(links).mediabox({
// Put custom options here
}, function(el) {
return [el.href, el.title, el.getAttribute('data-lightbox')];
}, function(el) {
var data = this.getAttribute('data-lightbox').split(' ');
return (this == el) || el.getAttribute('data-lightbox').match(data[0]);
});
};
window.addEvent('domready', Mediabox.scanPage);
</script>
<script>
(function($) {
window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
alwaysHide: true,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>
</body>
</html>
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
xchs
Es liegt vermutlich auch daran, dass Du zwei JavaScript-Frameworks einbindest. TabControl benötigt jedenfalls MooTools. Wenn das zusammen mit jQuery-Skripten laufen soll, dann muss man diese vermutlich im sogenannten "noConflict"-Modus betreiben.
Korrekt bzgl. noconflict. Davon gehe ich aus, sobald das Tabcontrol mal funktioniert.
Ich habe nun mal accordion und mediabox im Layout deaktiviert.
Derzeit lade ich folgende JS Frameworks:
- Mootools (von Google API laden) (wird anscheinend auch lokal über mootools-more.js nachgeladen)
- Modernizr
- Tabcontrol.js
Meine Tabcontrol Reiter und Panes hätte ich wohl richtig angelegt, oder? siehe screenshot
Anhang 7590
