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

Avatar yannicklepogam asked

CLOSED offcanvas onclick on anchor link (for dummies) - where I am wrong?

Hello,

I am using Joomla 3.7, yoo pro latest version. So sorry if my question below is basic for you, but these are my very 1st steps either in javascript world, and I need a starting point with 1 example to be able to learn and play alone with ulkit3. I know from the past the patience of Michael .. so Yooteam might have some minutes to help me here ... I hope, txs.

As example in the page : https://getuikit.com/docs/offcanvas#offcanvas-usage I understand everything in the documentation before ... "JavaScript - Initialization UIkit.offcanvas(element, options);". From this point and after the "Events ...". it is still chinese for me because I miss a practical example to understand how to put that into practice.

CONCRETELY : Using page builder, I have 1 page with different sections (each have an ID).
AND THIS IS WHAT I TRY TO ACHIEVE : I want a small icon always on center-right and when you click on the icon you see the list of IDs of the page (as links). If you click on 1 link, then the offcanvas disappears and the page scrolls at the right IDs

So, I have added an html element into a section to create an offcanvas view with links to anchors into the page. The offcanvas opens correctly, display the links, when I click on 1 link I see page scrolling on the page below the offcanvas BUT IT STOPS AT THIS POINT. The offcanvas remains open (no close onclick) and when I click in the page out of the offcanvas then the offcanvas disappears and the page scroll again on top instead of staying to the anchor (ID of the clicked link) ... not really what I want.

In forum I found that the solution is to use onclick="jQuery.UIkit.offcanvas.offcanvas.hide();" BUT it doesn't work or as I said I am beginner and I did not instantiate javascript properly or ...?

My code into html element inside a section :
<div class="uk-offcanvas-content">
<button class="uk-button uk-button-default uk-position-center-right uk-position-fixed" style="right: 0px;padding-left: 5px; padding-right: 5px; background: rgba(0, 0, 0, 0.73) none repeat scroll 0 0; color:#ffffff;" type="button" uk-toggle="target: #offcanvas-nav"><span uk-icon="icon: chevron-left;"></span></button>
<div id="offcanvas-nav" uk-offcanvas="mode: reveal; overlay: true; flip: true; ">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#tastingmenu" onclick="jQuery.UIkit.offcanvas.offcanvas.hide();">Tasting Menu</a></li>
<li><a href="#coldstarters" onclick="jQuery.UIkit.offcanvas.offcanvas.hide();">Cold Starters</a></li>
</ul>
</div>
</div>
</div>

Maybe I need to add a script before but this is where I have never done that before and I don't know?
<head>
<script>
WHAT TO PUT HERE ??????????????????????????????????????????
</script>
</head>
<body>
<div class="uk-offcanvas-content">
<button class="uk-button uk-button-default uk-position-center-right uk-position-fixed" style="right: 0px;padding-left: 5px; padding-right: 5px; background: rgba(0, 0, 0, 0.73) none repeat scroll 0 0; color:#ffffff;" type="button" uk-toggle="target: #offcanvas-nav"><span uk-icon="icon: chevron-left;"></span></button>
<div id="offcanvas-nav" uk-offcanvas="mode: reveal; overlay: true; flip: true; ">
<div class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#tastingmenu" onclick="jQuery.UIkit.offcanvas.offcanvas.hide();">Tasting Menu</a></li>
<li><a href="#coldstarters" onclick="jQuery.UIkit.offcanvas.offcanvas.hide();">Cold Starters</a></li>
</ul>
</div>
</div>
</div>
</body>

Thank you
YooRegards
Yannick

  • Joomla
  • UIkit

Edited

20 Answers

2

Avatar eyespacedigital answered

Any news on this being fixed yet, as its still not working in 1.8.5.
Its a deal breaker for any one page sites that are built with YTP.

0

Avatar yannicklepogam answered

As opposed to modal where the close onclick it works perfectly :
<a class="uk-button uk-button-default uk-position-top-right uk-position-fixed" style="right: 0px;padding-left: 5px; padding-right: 5px; background: rgba(0, 0, 0, 0.73) none repeat scroll 0 0; color:#ffffff;" href="#modal-overflow" uk-toggle><span uk-icon="icon: chevron-left;"></span></a>
<div id="modal-overflow" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header">
<h1 class="uk-modal-title">Menu</h1>
</div>
<div class="uk-modal-body" uk-overflow-auto>
<p>
<ul class="uk-nav uk-dropdown-nav" uk-scrollspy-nav="closest: li; scroll: true">
<li class="uk-active uk-modal-close"><a href="#tastingmenu">Tasting Menu</a></li>
<li class="uk-modal-close"><a href="#coldstarters">Cold Starters</a></li>
</ul>
</p>
</div>
</div>
</div>

I feel stupid not to find a way to close offcanvas the same way I closed modal ...

Edited

0

Avatar philipp Yootheme answered

Hi Yannick,
I am sorry for the late response and maybe you already found a solution for your problem.
The solution you found was targeting UIkit version 2 which is not used in YOOtheme Pro here Version 3 is used which has changed a lot especially on the JavaScript side.

So when the offcanvas is opened and you click on the link to scroll down to the section with the given ID it needs to close the offcanvas and stay on the sections position. ( Just repeating what you said above, just to avoid misunderstandings :) )

Here you would need to add an click event on the link to your sections ID. This will be a function which is called when you click on this event.
To do this I would recommend to use jQuery which is an JavaScript library which helps you to simplify HTML modifications.
So your JavaScript should look like this:

jQuery('LINKSELECTOR').click(function (e) {  
    UIkit.offcanvas('#OFFCANVASID').toggle();  
});

The LINKSELECTOR is a CSS selector which applies to all ( or only one ) elements which should have this click-Event ( in your case the links within the offcanvas element ). Within this click-Event you call the toggle function of an offcanvas with a given ID. Since your offcanvas is always opened when you click the links, this will close the offcanvas again.

I couldn't test this code but I think it should work, so let me know if it does, if this is not the case please add a link to your page so that I could test this and adjust the code if needed :)

Kind Regards
Philipp

Edited

0

Avatar lewax answered

I have the same problem... On mobile, offcanvas stay open after i clicked a link (to an anchor because i want a one page site) and when i click on the close logo of the offcanvas, the page scroll up...

I tried to add Philipp's code but it doesn't change anything...

0

Avatar jan Yootheme answered

Thanks, this will be resolved with the next update.

0

Avatar lewax answered

Thanks Jan for this answer.
You know approximatively when it will arrive? Because at this time, it's unusable on mobile.
Thanks for your help.

0

Avatar lewax answered

Hi Jan.
Just installed version 1.8 but the problem remains...
Hope you can find a solution because on mobile it's unusable.
Thanks in advance

0

Avatar jan Yootheme answered

Do you have a link, where we can inspect the issue?

0

Avatar lewax answered

Yes.
zermattensarl.ch

0

Avatar jan Yootheme answered

Please remove the / in front of your links. Currently they are in the form /#ID.

0

Avatar lewax answered

my links where like that: index.php/#ID
I changed for #ID but the problem remain on iOS (cannot test on android)

Smoothscroll doesn't work now on safari and firefox (mac). I don't know if it's due to the latest update of the template

Edited

0

Avatar lewax answered

1.8.5 doesn't solve the problem....

0

Avatar jan Yootheme answered

Are you guys running the latest Widgetkit and YOOtheme Pro versions?

0

Avatar jan Yootheme answered

@lewax The issue seems to be triggered by your custom theme code:

jQuery(function(){jQuery('a[href^="#"]').click(function(){var target=jQuery(this).attr('href');jQuery('html, body').animate({scrollTop:jQuery(target).offset().top},800);return false;});});

try removing the

return false;

Edited

0

Avatar lewax answered

Problem remains with yootheme pro 1.9 and widgetkit 2.9.11
It begin to be really problematic...

0

Avatar lewax answered

Sorry Jan, i didn't see that this answer was addressed to me...
It works now without the code.
Many thanks.

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