Content dock show trigger

Support
#1

Hi does anyone know how to set up content dock to only show when certain button is clicked? e.g. Button “Contact us” would make content dock to slide in.

Thanks!!

#2

Hi,

You can set it to manually display with css class

Then add the class to your button element

Hope that helps

#3

Can you explain in more detail please? Where is this ‘manual’ display? I can only see one page containing ‘content dock’ options and nothing resembling your screengrab. And is the ‘button’ creation within Pro’s content creator? Also, would this method disable the automatic triggering of the content dock set in “Display (%) Valid inputs are between 5 and 95 in increments of 5.” - I have a requirement for both automatic triggering and then user triggering if they decide to close the dock.
Thanks.

edit: my name’s Kia btw :slight_smile:

#4

Not ideal but I’m in a rush so amended the javascript within the plugin. x-open-content-dock should be a button as a class to activate. It’s hardly a very drastic amendment to the script so would be good if it could be considered for a future update:

#5 
  <script id="x-content-dock-js">

jQuery(document).ready(function($) {

  $.fn.scrollBottom = function() {
    return $(document).height() - this.scrollTop() - this.height();
  };
  var executed             = false;
  var open_executed        = false;
  var windowObj            = $(window);
  var body                 = $('body');
  var bodyOffsetBottom     = windowObj.scrollBottom();
  var bodyHeightAdjustment = body.height() - bodyOffsetBottom;
  var bodyHeightAdjusted   = body.height() - bodyHeightAdjustment;
  var contentDock          = $('.x-content-dock');

  function sizingUpdate() {
    var bodyOffsetTop = windowObj.scrollTop();
    if ( bodyOffsetTop > ( bodyHeightAdjusted * <?php echo $x_content_dock_display / 100; ?> ) ) {
      if ( ! executed ) {
        executed = true;
        openExecuted = true;
        contentDock.toggleClass('x-content-dock-off').toggleClass('x-content-dock-on').css('<?php echo $x_content_dock_position ?>', '20px');
      }
    }
    $('.x-open-content-dock').click( function( e ) {
	  if ( ! openExecuted ) {
		  e.preventDefault();
		  openExecuted = true;
		  contentDock.toggleClass('x-content-dock-off').toggleClass('x-content-dock-on').css('<?php echo $x_content_dock_position ?>', '20px');
	  }
    });
    $('.x-close-content-dock').click( function( e ) {
      e.preventDefault();
      openExecuted = false;
      contentDock.toggleClass('x-content-dock-off').toggleClass('x-content-dock-on').css('<?php echo $x_content_dock_position ?>', '<?php echo -$x_content_dock_width - 100; ?>px');
    });

    <?php if ( isset( $x_content_dock_cookie_timeout ) && $x_content_dock_cookie_timeout > 0 ) : ?>
    $('#x_content_dock_do_not_show').change( function( e ) {
      e.preventDefault();
      openExecuted = false;
      contentDock.toggleClass('x-content-dock-off').toggleClass('x-content-dock-on').css('<?php echo $x_content_dock_position ?>', '<?php echo -$x_content_dock_width - 100; ?>px');
      var data = {
      		'action': 'x_content_dock_do_not_show',
      		'x_content_dock_do_not_show': 1
    	};
    	// We can also pass the url value separately from ajaxurl for front end AJAX implementations
    	$.post(
        '<?php echo admin_url( 'admin-ajax.php' ); ?>',
        data,
        function( response ) {
    		// done silently
    	});
    });
    <?php endif; ?>

  }

  <?php if ( isset( $x_content_dock_trigger_timeout ) && $x_content_dock_trigger_timeout > 0 ) : ?>
    window.setTimeout( function() {
      if ( ! executed ) {
        executed = true;
        openExecuted = true;
        contentDock.toggleClass('x-content-dock-off').toggleClass('x-content-dock-on').css('<?php echo $x_content_dock_position ?>', '20px');
      }
    }, <?php echo (int) $x_content_dock_trigger_timeout * 1000; ?>);
  <?php endif; ?>

  windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
  sizingUpdate();

});
#6

Hi,

Sorry for the confusion, the instructions I provided was for convert plug.

I will forward this as a feature request.

Thanks

#7

Where do I place this script ? Any issues with it?

When you say button as a class to activate … you mean the class name is pre set as “button” ?

#8

This is based upon the version 1.0 of the plugin. The jQuery script replaces the script contained within: views/site/content-dock.php

x-open-content-dock should be added as a class in any form of link. The link will only action after the dock has been closed.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.