Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • October 4, 2018 at 12:35 am #1017641
    StormWebDesign

    Hi Guys,
    I’ve added some code to give the socket a fixed position using:

    #socket {
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    width:100%;
    }

    This works fine.

    However, in my home page, is it possible to add some CSS to only display the socket once the user has scrolled down (i.e. the socket isn’t visible when the page loads). I’ve tried adding this code to try and apply it to just one particular page.

    .page-id-10 #main {
    min-height: 100vh
    }

    .page-id-10 #socket {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    }

    I only want the socket to appear when the user has clicked on the down arrow in the page (see website details in Private).

    Thanks in advance!!

    October 7, 2018 at 4:09 pm #1018665
    Mike

    Hey StormWebDesign,
    Sorry for the late reply, I believe what you would like is to show the socket only on scroll, and when not scrolling to fadeout.
    I used this CodePen for the function.
    I added this css to your Quick CSS:

    #socket {
    position: fixed;
    z-index: 99999;
    bottom: 0;
    display: none;
    width: 100%;
    background-color: #ffffff;
    cursor: pointer;
}
.show, #socket:hover {
    display: block;
}

    But I was unable to add the script needed to your functions.php:

    function custom_socket_script(){
  ?>
  <script>
$(window).scroll(function(event) {
	function socket()
    {
        var scroll = $(window).scrollTop(); 
        if(scroll > 50)
        { 
            $("#socket").fadeIn("slow").addClass("show");
        }
        else
        {
            $("#socket").fadeOut("slow").removeClass("show");
        }
        
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function() {
            if ($('#socket').is(':hover')) {
	        	socket();
    		}
            else
            {
            	$("#socket").fadeOut("slow");
            }
		}, 2000));
    }
    socket();
});
</script>
  <?php
  }
  add_action('wp_footer', 'custom_socket_script');

    Try adding this code to the end of your functions.php file in Appearance > Editor via ftp or your webhost file manager.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.