Docs

[Josh]

Hi,

I wanted to have my content dock appear and disappear based on how far users have scrolled. I’ve added the following to my custom.js:

jQuery(document).ready(function($) {
	$(window).scroll(function(event) {
		if( $(window).scrollTop() < $(document).height()*.30 || $(window).scrollTop() > $(document).height()*.50){
			$(".x-content-dock").css('right', '-350px');
		} else {
			$(".x-content-dock").css('right', '20px');
		}
	});
});

However, clicking the X in the corner only hides the content dock temporarily. If the user scrolls back into the region above (currently between 30% and 50% of the document height), the dock comes back.

Is there any way to permanently close the dock once it’s been closed by the user (for that particular loading of the page)?

Here’s my site URL: http://www.playrightimprov.com/

[Rue Nel]

Hello There,

Thanks for writing in! Your code is almost correct. You just need to add a condition to check the state of the content dock whether it is on or not. Please use this code instead:

  jQuery(document).ready(function($) {
	$(window).scroll(function(event) {
	  if ($(".x-content-dock").hasClass('x-content-dock-on') {
                if( $(window).scrollTop() < $(document).height()*.30 || $(window).scrollTop() > $(document).height()*.50){
			$(".x-content-dock").css('right', '-350px');
		} else {
			$(".x-content-dock").css('right', '20px');
		}
	  }
	});
  });

Please let us know if this works out for you.

[Josh]

That works perfectly! Thank you so much.

[Josh]

Sorry, it looks like I posted too soon. The code worked in the Cornerstone preview, but now on the live site the dock stays in place as I scroll down. It no longer auto-hides as I scroll past the 50% mark.

[Josh]

This is bizarre–the first few times I re-loaded the site after putting in the code, the dock showed itself and closed with the page scroll, and also stayed hidden if I clicked the X. Now, however, the dock doesn’t hide with the scroll (but it does stay hidden after being closed–essentially standard functionality).

[Joao]

Hi There,

I have tested your website and I couldn’t replicate your issue. I have tested it on Chrome and Firefox and content dock will appear once I scroll down to the blue section, once I close it, if I scroll all the way up and back down again it won´t appear a second time.

Are you still experiencing this issue?

Please be sure to clean cache before testings,

In case you are still experiencing the issue please let us know which device and browser you are using.

Thanks,

Joao

[Josh]

Hi Joao,

Thank you for testing. The initial functionality was this:

1. User scrolls down to the blue section, which shows the content dock.
2. If user scrolls beyond the blue section (or whatever breakpoint I set), content dock auto-hides.

The first version of the code I posted above accomplishes both of these. However, with just this code, if the user closes the dock, simply scrolling within the target area again re-opens the dock. So I was hoping to add the following functionality:

3. If user closes the content dock manually, it stays closed, even if the user scrolls back into the blue section.

This worked temporarily with the code provided by Rue Nel. Now, however, the auto-hiding feature of the dock (function 2., above) no longer works when I scroll past the breakpoint.

I would even be happy if the content dock stayed hidden after being closed for any reason (whether scrolling or manual close) but the dock hiding on scroll AND remaining hidden once closed is the feature I’m trying to implement.

I am testing in Firefox, IE, and Chrome. Thank you.

[Josh]

I think I’ve figured it out. I just set a variable to change when the X is clicked, and only display the dock if it is set to false. Thank you for pointing me in the right direction.

jQuery(document).ready(function($) {
  var close_click = false;
	$(".x-close-content-dock").click(function(){
    close_click = true;
  })
  if (close_click == false)
	{  $(window).scroll(function(event) {
    if ($(".x-content-dock").hasClass('x-content-dock-on')) 
  	{
        if( $(window).scrollTop() < $(document).height()*.25 || $(window).scrollTop() > $(document).height()*.40){
			$(".x-content-dock").css('right', '-350px');
		}
   else {
			$(".x-content-dock").css('right', '20px'); 
  }}
	});
  }
  else {
    $(".x-content-dock").css('right', '-350px');
  }
})

[Darshana]

Glad you were able to figure it out 🙂

[Author]

Posts