Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 1, 2013 at 11:27 pm #169023
    Michae1

    If there is a lot of content in an entry, and you scroll down to click the next entry, the whole item can move off the screen.

    How can I set the accordion menu system to automatically scroll to the the top of the opened item?

    October 2, 2013 at 8:22 am #169168
    Ismael

    Hello Michae1!

    Can you give us a link to the website? A screenshot will help.

    Cheers!
    Ismael

    October 2, 2013 at 8:42 am #169177
    Michae1

    Here you go : http://bit.ly/12D6erM

    Click on California under locations, and then scroll down and click any other state, and you’ll see what I mean.

    Need a way to have some kind of dynamic anchor / scroll-to point attached to the clicking of each item

    October 2, 2013 at 11:43 pm #169600
    Devin

    Hello!

    You could turn off the option that only one toggle can be open at a time so that the others don’t close and the user is only left on the single one they are opening at that time.

    But I don’t know of a quick fix for automatically moving the user to the newly opened tab right now. I’ll add it as a request/issue however and see if Kriesi can think of something.

    Regards,
    Devin

    October 3, 2013 at 7:23 am #169774
    Michae1

    Thanx for the suggestion Devin, unfortunately the client does not want to do that :(

    Maybe Kriesi has a fix for it? I’m ok with doing hardcode edits to the PHP (or additional functions, as I’m using a child theme), just wouldn’t know where / what to add.

    October 5, 2013 at 9:59 am #170764
    Dude

    Hello!

    We’ll fix this in the next version. If you need a quick solution open up enfold/js/shortcodes.js and replace

    
		heading.each(function(i)
		{
			var thisheading =  $(this), content = thisheading.next(options.content, container);

			if(content.css('visibility') != "hidden")
			{
				thisheading.addClass('activeTitle');
			}

			thisheading.on('click', function()
			{
				if(content.css('visibility') != "hidden")
				{
					content.slideUp(200, function()
					{
						content.removeClass('active_tc').attr({style:''});
					});
					thisheading.removeClass('activeTitle');

				}
				else
				{
					if(container.is('.toggle_close_all'))
					{
						allContent.not(content).slideUp(200, function()
						{
							$(this).removeClass('active_tc').attr({style:''});
						});
						heading.removeClass('activeTitle');
					}
					content.addClass('active_tc').slideDown(200,
					
					function()
					{
						//check if toggle title is in viewport. if not scroll up
						var el_offset = content.offset().top,
							scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
						
						if(win.scrollTop() > el_offset)
						{
							$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
						}
					}
					
					);
					thisheading.addClass('activeTitle');
					location.replace(thisheading.data('fake-id'));
				}
			});
		});

    with

    
		heading.each(function(i)
		{
			var thisheading =  $(this), content = thisheading.next(options.content, container);

			function scroll_to_viewport()
			{
			    //check if toggle title is in viewport. if not scroll up
			    var el_offset = content.offset().top,
			        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);

			    if(win.scrollTop() > el_offset)
			    {
			        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
			    }
			}

			if(content.css('visibility') != "hidden")
			{
				thisheading.addClass('activeTitle');
			}

			thisheading.on('click', function()
			{
				if(content.css('visibility') != "hidden")
				{
					content.slideUp(200, function()
					{
						content.removeClass('active_tc').attr({style:''});
					});
					thisheading.removeClass('activeTitle');

				}
				else
				{
					if(container.is('.toggle_close_all'))
					{
						allContent.not(content).slideUp(200, function()
						{
							$(this).removeClass('active_tc').attr({style:''});
							scroll_to_viewport();
						});
						heading.removeClass('activeTitle');
					}
					content.addClass('active_tc').slideDown(200,
					
					function()
					{
                        if(!container.is('.toggle_close_all'))
                        {
                            scroll_to_viewport();
                        }
					}
					
					);
					thisheading.addClass('activeTitle');
					location.replace(thisheading.data('fake-id'));
				}
			});
		});

    Regards,
    Peter

    October 5, 2013 at 7:25 pm #170841
    Michae1

    Dude,

    Excellent! That’s good to hear. And thank you for the fix in the interim, looking forward to trying this out tonight. Cheers!

    October 5, 2013 at 8:57 pm #170855
    Michae1

    Works! Thanx again Dude. Hopefully in the next version fix, Kriesi will be able to add a smooth animated scroll for this, instead of just jumping to it. But as a quick fix, it’s great! Thanx!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Accordion Menu : Scroll to Opened Item’ is closed to new replies.