Support » Plugin: Tabby Responsive Tabs » Add margin-top when clic tabs to open (automatic scroll)

  • Resolved becaneweb

    (@becaneweb)


    Hi,

    I purchased premium version.

    When I click on a tab, the title is automatically “pasted” at the top of the screen (whith an smooth scroll).
    This feature is interesting but my main mobile menu is also fixed at the top of the screen and the title of the tabs disappears below.

    QUESTION : What should I change in the JS to put a margin-top (a space -40px) when opening the contents of a tabs ?

    Thanks for your help

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author cubecolour

    (@numeeja)

    This question applies to the free tabby responsive tabs plugin when no optional add-ons are installed.

    I don’t think I have come across this issue previously, possibly due to it being fairly unusual to have a fixed header on the mobile view of a site as that would occupy valuable screen space which could be used for content.

    I have been able to reproduce this on a test site using tabby responsive tabs and I have made a simple plugin to add a jquery function which should help by adding an offset to allow for the static header after an accordion heading is clicked. I have copied the code for this below.

    Please try this plugin. If the default value of 40 is not optimum for the height of your fixed header, experiment with different values for the $offset variable.

    
    <?php
    /*
    Plugin Name: Tabby Accordion Offset
    Description: Allow for the presence of a fixed header when scrolling to the active accordion section
    Author: cubecolour
    Version: 1.0.0
    Author URI: http://cubecolour.co.uk/wp
    License: GPL
    */
    
    if ( ! defined( 'ABSPATH' ) ) exit;
    
    function cc_tabby_accordion_offset() {
    
    	$offset = 40;
    	$scrollduration = 400;
    
    	echo "\n" . '<script>
    	jQuery( document ).ready(function($) {
    
    		$( ".responsive-tabs__heading" ).on( "click", function() {
    			$("html, body").animate({scrollTop: "-=' . $offset . 'px"}, ' . $scrollduration . ');
    		});
    	})
    	</script>' . "\n";
    }
    add_action('wp_footer', 'cc_tabby_accordion_offset', 50);
    
    • This reply was modified 2 years, 8 months ago by cubecolour.

    Hi,

    Thank you, it’s perfect.

    Best regards

    Plugin Author cubecolour

    (@numeeja)

    Great! I’m glad that helped

    Came her looking for the same thing. This works perfectly, but I think you should consider to add this to Tabby Responsive Tabs Customiser. Many mobile menus feature a slideout menu bar at the top, that slides away when you start scrolling.

    Anyway, thanks!

    Plugin Author cubecolour

    (@numeeja)

    I believe this is unnessesary as this usage is likely to be an edge case which should affect very few sites.

    This only affects the tabs when output as an accordion, a view which is intended for display on mobile devices, and in most cases there would not be a compelling reason for a responsive design to impose a fixed header on a site when it is displayed on a mobile device as this will reduce the amount of content that can be shown on valuable screen space.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add margin-top when clic tabs to open (automatic scroll)’ is closed to new replies.