Hi, I need to make a switcher that switch on hover instead of click on desktop, and on click on mobile, any idea?
I don't find anything on UIkit doc.
Hey Alex,
There isn't anything built in UIkit but you could add a simple trigger event. Here is a quick proof of concept:
<ul id="example-swither-hover" data-uk-switcher="{connect:'#my-id'}">
<li><a href="">Tab 1</a></li>
<li><a href="">Tab 2</a></li>
</ul>
<ul id="my-id" class="uk-switcher">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<script>
jQuery( '#example-swither-hover a' ).on( 'hover', function() {
jQuery( this ).trigger( 'click' );
} );
</script>I will let you write the media query condition (plenty of tutorials available if you don't know how) and adapted to your project 🙂
Have fun,
Thank you, I am going to try that ! I already looked in the source code, unminifying it, and changing click by hover, it was working, but i know this is not the good way !
It doesn't work this is my code, the html output from the site, (i cannot put there the code i write, as it is with custom fields, and breaked in several parts)
<div class="people-switcher">
<ul class="switcher-nav uk-grid uk-grid-width-1-4 uk-grid-width-medium-1-8" data-uk-switcher="{connect:'#people', animation: 'uk-animation-fade'}">
<li class="dn uk-active" aria-expanded="true"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
<li class="people" style="height: 129px; background: url('http://alexandras-imac.local:5757/wp-content/uploads/2016/09/team.jpg') 0% 0% / cover no-repeat;" aria-expanded="false"><a href="#"></a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="people" class="uk-switcher">
<li class="people-content grey-area uk-text-center uk-active" aria-hidden="false">
<h4>You want credibility?</h4>
<h5 class="white">Check out our team principals</h5>
<div class="uk-width-medium-1-2 uk-container-center">The RMA team is ridiculously well qualified to deliver
everything you could possible want in the wonderful world of digital solutions. Total awesomeness in
the business and client serices domains, coolness and mega talent in user experience design
consultancy, and technical delivery chops like you wouldn’t believe.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Kirsty Weston</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 2</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 3</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 4</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 5</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 6</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 7</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
<li class="people-content grey-area uk-text-center" aria-hidden="true">
<h4>Name 8</h4>
<h5 class="white">VP, Client Services</h5>
<div class="uk-width-medium-1-2 uk-container-center">Kirsty is our Client Services Director and the world of digital is her natural habitat. She has over a decade’s experience in sales and client management, working on large global accounts spanning sectors as diverse as art – The Tate and MOMA – and finance – Barclays, Deutsche Bank and UBS. She’s no stranger to projects that range from digital strategies and roadmaps to multi-territory website redesigns and social media campaigns. These days, when she’s not head down stage-managing the design and build of complex systems and platforms, you’ll find her back rolling into the deep blue – she’s a scuba diving fanatic.
</div>
</li>
</ul>
</div>And the js code:
(function ($) {
$(document).ready(function () {
$( '.switcher-nav a' ).on( 'hover', function() {
$( this ).trigger( 'click' );
} );
})(jQuery);Hey Alex,
You JavaScript is invalid, you are not closing your document ready function. Here is the correct snippet:
( function( $ ) {
$( document ).ready( function() {
$( '.switcher-nav a' ).on( 'hover', function() {
$( this ).trigger( 'click' );
} );
} );
} )( jQuery );Kindly always make sure to check your console to see if you have errors before posting on the forum 😉
Have fun,
Still doesn't work 🙁
In fact my function was not bad, i just didn't copy all the code as there was other js in it, and forget to copy the last closing tags .
I think i am going to do it manually, without the switcher component, with show and hide text, it will be a good exercise as i really need to practise js.
But i understand the code you gave me, and don't understand that it doesn't work
Hey Alex, could you post a link to your page so that I can take a look at the code please?
Thanks,