Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 18, 2016 at 5:30 pm #600444
    thestaff

    Hallo,

    I would like to use “deeplinking” to a certain accordion toggle in an FAQ. For example: on my Welcome page I have a link to an “Question X” toggle on my FAQ page, and that will open correctly, just like described here on your demo page:

    “Deeplinking support via hashtag (click on one item and see how the page url changes. You can link to the site with this url and the correct toggle will be opened)”

    My problem is that if I – like in my case – have a lot of questions in my FAQ the opened item might not be visible in the viewport. Is there a way to get each toggle to open at the very top of the browser window? What I understand (or at least what it looks like) the hash is pointing to the accordion container itself – which align top viewport, it would be handier if it scrolled/jumped to the selected toggle.

    See attached images with examples from your demo page (http://kriesi.at/themes/enfold/shortcodes/toggles-accordions/#toggle-id-20).

    This is how it is opened now:
    http://picpaste.com/Screen_Shot_2016-03-18_at_3.53.33_PM-6SaDKVgV.png

    This is how I would like to have it (would be most efficient and visible for the visitor):
    http://picpaste.com/Screen_Shot_2016-03-18_at_3.53.54_PM-u09MaTho.png

    Would be grateful for any help!

    Best regards, Staff

    March 22, 2016 at 3:30 am #601640
    Josue

    Hey,

    Try the following, open js/shortcodes.js and look for this block:

    function trigger_default_open(hash)
{
	if(!hash && window.location.hash) hash = window.location.hash;
	if(!hash) return;
	
	var open = heading.filter('[data-fake-id="'+hash+'"]');
	if(open.length)
	{
		if(!open.is('.activeTitle')) open.trigger('click');
		window.scrollTo(0, container.offset().top - 70);
	}
}

    Change it to:

    function trigger_default_open(hash)
{
	if(!hash && window.location.hash) hash = window.location.hash;
	if(!hash) return;
	
	var open = heading.filter('[data-fake-id="'+hash+'"]');
	if(open.length)
	{
		if(!open.is('.activeTitle')) open.trigger('click');
		window.scrollTo(0, open.offset().top - 160);
	}
}

    Best regards,
    Josue

    March 29, 2016 at 3:21 pm #604620
    thestaff

    Thank you for you reply!

    Unfortunately this was not really what I meant. What I want is that when I deeplink into an accordion (fi: example.com/faq/#question-75), I want the item that I am linking to to appear at the very top of the site (and it should be the same whether it’s #question-75 or #question-23). So I guess the code should be something like:

    function trigger_default_open(hash)
    {
    if(!hash && window.location.hash) hash = window.location.hash;
    if(!hash) return;

    var open = heading.filter(‘[data-fake-id=”‘+hash+'”]’);
    if(open.length)
    {
    if(!open.is(‘.activeTitle’)) open.trigger(‘click’);
    window.scrollTo(THE OPEN ACCORDION ITEM WITH CORRESPONDING DATA FAKE ID HASH);
    }
    }

    JS is beyond my knowledge, but this seems to be logic to me. Would this be possible to achieve?

    Best regards, Staff

    March 31, 2016 at 8:38 pm #606217
    Josue

    This line does exactly that:

    window.scrollTo(0, open.offset().top - 160);

    – open.offset().top refers the current toggle open
    – 160 is the height of the header which could vary depending on the site

    Can you post a link to the page where you’re trying this?

    April 1, 2016 at 12:08 am #606373
    thestaff

    Yes it does work, thank you very much!

    And I’m sorry for wasting your time due to me clowning around with the provided code.

    Best regards, Staff

    April 1, 2016 at 12:10 am #606375
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    June 15, 2016 at 11:02 pm #648894
    Jochen

    I want to open a new thread but I don´t see any place to do this! Help please … 

    June 16, 2016 at 12:53 pm #649170
    Josue

    Hi,

    Here:

    Enfold

    Best regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.