I created a TemplateVariable-based filter system of the page content with jquery ui tabs
http://jqueryui.com/tabs/#defaultand catch the date with getresource as described here
http://rtfm.modx.com/display/revolution20/Loading+Pages+in+the+Front-End+via+AJAX+and+jQuery+Tabs.
So far it is working fine in Firefox. Can be found here
http://www.free-mmo.com/online-games.html but
in IE and Chrome the results are not pulled or not displayed.
Script-Code on the page:
<script type="text/javascript">
$(function() { $("#tabs").tabs(); });
</script>
HTML-Code on the page:
<div id="tabs">
<ul>
<li><a href="[[~322]]">ALL</a></li>
<li><a href="[[~321]]">RPG</a></li>
<li><a href="[[~319]]">RTS</a></li>
<li><a href="[[~324]]">MOBA</a></li>
<li><a href="[[~325]]">TCG</a></li>
<li><a href="[[~326]]">Shooter</a></li>
<li><a href="[[~327]]">Race</a></li>
<li><a href="[[~328]]">Sports</a></li>
<li class="tabs-small"><a style="width: 189px;height:19px;padding-top:2px" href="[[~329]]">RELEASE DATE</a></li>
<li class="tabs-small"><a style="width: 189px;height:19px;padding-top:2px" href="[[~330]]">ADDED DATE</a></li>
<li class="tabs-small"><a style="width: 189px;height:19px;padding-top:2px" href="[[~332]]">FREE TO PLAY</a></li>
<li class="tabs-small"><a style="width: 189px;height:19px;padding-top:2px" href="[[~331]]">BUY TO PLAY</a></li>
<li class="tabs-flag"><a style="width: 46px" href="[[~334]]"><img style="margin-top: 4px;" alt="1.jpg" src="/assets/images/us-icon.png"></a></li>
<li class="tabs-flag"><a style="width: 46px;" href="[[~333]]"><img style="margin-top: 4px;" alt="1.jpg" src="/assets/images/de-icon.png"></a></li>
<li class="tabs-flag"><a style="width: 46px;" href="[[~336]]"><img style="margin-top: 4px;" alt="1.jpg" src="/assets/images/fr-icon.png"></a></li>
<li class="tabs-flag"><a style="width: 46px;" href="[[~337]]"><img style="margin-top: 4px;" alt="1.jpg" src="/assets/images/pl-icon.png"></a></li>
<li class="tabs-flag"><a style="width: 46px;" href="[[~335]]"><img style="margin-top: 4px;" alt="1.jpg" src="/assets/images/es-icon.png"></a></li>
</ul>
<div id="tabs-1">
</div>
</div>
Code from the Template assigned to [[~322]]
(here the script is only for swapping the content so not relevant on the IE+Chrome problem, it is only running if I put it in the template)
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$("li").hover(function () {
$(this).find("div.hide").show();
$(this).find("div.front").hide();
},
function () {
$(this).find("div.hide").hide();
$(this).find("div.front").show();
});
});
// ]]>
</script>
<div class="genrebuttonsarea ">
[[!getResources? &parents=`3` &tpl=`teaser` &limit=`50`]]
</div>
Code from the Template assigned to [[~323]]
(showing the Filtering by TV)
<div class="genrebuttonsarea ">
[[!getResources? &parents=`3` &tpl=`teaser` &includeTVs=`1` &processTVs=`1` &tvFilters=`fact-genre==RTS` &limit=`50`]]
</div>
Code from the Chunk `teaser`
(I think not further relevant for IE+Chrome issue)
<div class="teaser">
<ul class="nav">
<li>
<div class="front">
<div class="frontout">
<div class="frontin">
[[+pagetitle]]
</div>
</div>
<div style="z-index:-1">
[[!Gallery? &tag=`[[+pagetitle]]` &thumbWidth=`250` &thumbHeight=`142` &thumbTpl=`galItemThumbTeaser` &dir=`DESC` &limit=`1`]]
</div>
</div>
<div class="hide">
<div class="backout">
<div id="[[+id]]z" class="backin" >
<!--<div class="mygame">
<div>
<a href="[[~[[+id]]]]"><img src="/assets/images/mygameadd.png"></a>
</div>
</div>-->
<div class="screen">
[[!Gallery? &tag=`[[+pagetitle]]` &thumbWidth=`400` &thumbHeight=`238` &thumbQuality=`100` &thumbTpl=`thumbsicon` &dir=`ASC` &limit=`1` ]]
[[!Gallery? &tag=`[[+pagetitle]]` &thumbWidth=`400` &thumbHeight=`238` &thumbQuality=`100` &thumbTpl=`thumbsiconhide` &dir=`DESC` &limit=`3` ]]
</div>
<div class="video">
<a class="various fancybox.iframe" href="http://www.youtube-nocookie.com/embed/[[+introtext]]?rel=0&autoplay=1&?hd=1"><img src="/assets/images/trailer.png"></a>
</div>
<div class="rating">
</div>
<div class="playbuttonareasmall">
<a href="[[~[[+id]]]]" class="playbuttonsmall ">GO !</a>
</div>
</div>
<div style="z-index:-1">
[[!Gallery? &tag=`[[+pagetitle]]` &thumbWidth=`250` &thumbHeight=`142` &thumbTpl=`galItemThumbTeaser` &dir=`DESC` &limit=`1`]]
</div>
</div>
</div>
</li>
</ul>
</div>
I have made some modification to the .css of jquery.ui for styling but I think its not further relevant for the IE+Chrome issue since the getresource content also isn't displayed if I use the original .css from the jquery-page.
Does anyone has an idea what might be the problem?
Cheers
[ed. note: sh0ck23 last edited this post 13 years, 5 months ago.]
