Links to accordion tabs and viewport position - Support | Kriesi.at

Tagged: Accordion, anchor tags, links, viewport

Viewing 23 posts - 1 through 23 (of 23 total)

Author

Posts
October 23, 2017 at 1:10 pm #867597

Fionadee
Participant

Hi,
I have links to items in an rather long accordion. At present the accordion tabs open nicely but, depending on their position in the list, they are not always visible in the viewport. Those near the top of the list are obscured by the header, those near the bottom open beyond the visible area.
Is there a way that I can have the opened tab appear in the centre of the viewport?

October 23, 2017 at 5:57 pm #867767

Victoria
Inactive Moderator

Hey Fionadee,

Can you point us to the page with the accordion, please?

Best regards,
Victoria

October 23, 2017 at 6:06 pm #867779

Fionadee
Participant

Thanks for getting back to me.
Sorry I didn’t make myself clear – see pages in private content …

October 24, 2017 at 12:28 pm #868148

Victoria
Inactive Moderator

Hi Fionadee,

That will need some JavaScript to scroll the toggle a bit higher.

Best regards,
Victoria

October 24, 2017 at 12:32 pm #868149

Fionadee
Participant

OK, I have seen several Javascript solutions on this forum, can you point me in the right direction please?
Many thanks!

October 26, 2017 at 6:43 pm #869282

Basilis
Inactive Moderator

Hi,

Most of them work properly, so just try one and let us know if you are facing any issues after.

Thank you very much for your time

Best regards,
Basilis

October 27, 2017 at 12:01 pm #869520

Fionadee
Participant

Hi Basilis,

Most of the items on the list are fine, I agree, but those near the bottom of the list open beyond the viewport and those near the top are obscured by the header.

I think I will reduce the size of the text in the list which will make the list shorter and avoid items opening beyond the viewport. Then for those near the top of the list I may try some JavaScript.

Also if I want to move the + symbol in the accordion list to align with the text, which css do I target please?

Thanks for you help.

October 27, 2017 at 1:55 pm #869549

Fionadee
Participant

Hi Basilis,

I found that the issue of tabs opening beyond the viewport was browser related. OK in Chrome, I upgraded Firefox and now OK there. Internet Explorer still opens tab beyond viewport.
I have reduced the size of the accordion list which should help.

Reducing text size sorted out the aligning of the + symbol, but I would still be interested to know which css to target – for future reference!.

Best regards,

Fiona

October 29, 2017 at 11:01 pm #870242

Mike
Moderator

Hi,
I didn’t find the accordion, has your page changed?

Best regards,
Mike

October 30, 2017 at 4:25 pm #870554

Fionadee
Participant

Hi Mike,

I’m about to move the site over to another domain, I’ll let you know new urls when this is complete.

Thanks for getting back to me!

November 1, 2017 at 8:28 am #871091

Rikard
Keymaster

Hi,

Thanks for the feedback, let us know when you are done and we’ll have a closer look at it.

Best regards,
Rikard

November 12, 2017 at 6:45 pm #875784

Fionadee
Participant

Many thanks for you help on this. I am still interested to know, when using links from another page, how to avoid items near the top of the accordion list being obscured by the header image?

November 14, 2017 at 6:53 am #876462
Ismael
Moderator
Hi,

Thank you for the info. Please use the following filter in the functions.php file to adjust the scroll position.
```
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header) {
	$header['header_scroll_offset'] = $header['header_scroll_offset'] - 48;
	return $header;
}
```
Adjust the value “48” as needed.

Best regards,
Ismael
November 15, 2017 at 1:00 am #876881

Fionadee
Participant

Hi,

Thanks for your reply. Would that be added to the chlld theme functions.php?

November 16, 2017 at 5:57 am #877373

Ismael
Moderator

Hi,

Yes, please add it in the child theme’s functions.php file. Adjust the value as needed.

Best regards,
Ismael

November 16, 2017 at 4:57 pm #877611

Fionadee
Participant

Hi Ismael,
Thanks for getting back to me.
This does not seem to work, I’m testing with Chrome and Firefox.
Any ideas?

November 18, 2017 at 7:31 am #878373

Ismael
Moderator

Hi,

Thank you for the update.

Please post the FTP details in the private field so that we can test it further. We may need to create a custom script for it.

Best regards,
Ismael

November 26, 2017 at 1:28 pm #881880

Fionadee
Participant

Hi Ismael,

Thanks for your reply, and apologies for my late reply! The ftp details are in private area.
Regards,

Fi

November 27, 2017 at 6:41 am #882106

Ismael
Moderator

Hi,

Thank you for the info. The FTP login credentials are not working. Please check.

Best regards,
Ismael

November 27, 2017 at 11:37 am #882166

Fionadee
Participant

Hi Ismael, Sorry about that – see private area…

November 29, 2017 at 8:09 am #882959
Ismael
Moderator
Hi!

Thank you for the info.

We modified the script in the functions.php file.
```
// custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
  function a() {
      $(window).on('load', function(e) {
          var anchor, loc, cur, hash, tab, parent, pos;
          url = window.location.href;
          hash = url.substring(url.indexOf('#'));

					if(hash.indexOf('toggle') == 0) return;

          anchor = $('p[data-fake-id='+ hash +']');
          pos = anchor.offset();
					
					setTimeout( function() {
						$(this).scrollTop( pos.top - 170 );
					}, 1000);
      });
  }

  a();
})(jQuery);
</script>
<?php
}
```
Please remove browser cache before checking the page.

Regards,
Ismael
November 29, 2017 at 1:13 pm #883032

Fionadee
Participant

Thanks so much Ismael, just what I needed – fantastic!

Best regards

Fi

November 30, 2017 at 2:28 pm #883433

Ismael
Moderator

Hi,

Glad we could help. Please feel free to open a new thread if you need anything else. :)

Best regards,
Ismael
Author

Posts