YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar marcadiferencia.sl asked

Open slideset tag using data-uk-filter

I support,

I want to choose the tag on page load:

I try to do it with this code:

<script>
var hash, hashMap = {
'#filter-a': 'Tag one',
'#filter-b': 'Another tag',
'#tag-with-characters': 'Tag with & characters',
'#tag4': 'Tag 4'
};
UIkit.on('afterready.uk.dom', function () {
if (hash) return;
var grid = UIkit.$('[data-uk-grid]').data('grid');
hash = document.location.hash;
if (hash && hashMap[hash]) {grid.filter(hashMap[hash]);}
UIkit.$('[data-uk-filter]').click(function () {
var active = UIkit.$(this).attr('data-uk-filter'), activeHash;
UIkit.$.each(hashMap, function (hash, title) {if (title === active) {activeHash = hash;}});
if (activeHash) {document.location.hash = activeHash;}
});
});
</script>
<ul id="my-id" class="uk-subnav">
<li data-uk-filter=""><a href=""></a></li>
<li data-uk-filter="filter-a"><a href=""></a>1</li>
<li data-uk-filter="filter-b"><a href=""></a>2</li>
</ul>

<!-- Dynamic Grid -->
<div data-uk-grid="{controls: '#my-id'}">
<div data-uk-filter="filter-a">123</div>
<div data-uk-filter="filter-b">456</div>

</div>

But it doen't work

Here there are the filters:

<ul class="uk-subnav uk-subnav-pill uk-flex-center">
<li data-uk-filter="Eco" class="uk-active"><a href="#">Eco</a></li>
<li data-uk-filter="Kids" class=""><a href="#">Kids</a></li>
<li data-uk-filter="Square"><a href="#">Square</a></li>
<li data-uk-filter="Teens"><a href="#">Teens</a></li>
<li data-uk-filter="Tiles"><a href="#">Tiles</a></li>
<li data-uk-filter="young"><a href="#">Young</a></li>
</ul>

How can I chose if I want the open tag is "Teens" for example

Help me please. Thanks

  • WordPress
  • Widgetkit
  • Tutorial

1 Answer

0

Avatar florian Yootheme answered

At first glance, the could looks like it could do what you want. However, it is quite difficult to say why exactly it's not working. Can you provide a live example on your website, or (even better) a Codepen (https://codepen.io/pen) for us to play around with the code? Thanks. Also, this is a UIkit related question, so you might want to also post that example to https://gitter.im/uikit/uikit and see if anyone has some advice.

Know someone who can answer? Share a link to this question via email or twitter.