Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #169023

    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?

    #169168

    Hello Michae1!

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

    Cheers!
    Ismael

    #169177

    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

    #169600

    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

    #169774

    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.

    #170764

    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

    #170841

    Dude,

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

    #170855

    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!

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

The topic ‘Accordion Menu : Scroll to Opened Item’ is closed to new replies.