I've tried multiple solutions, but I can't seem to get this functionality to work properly on my website. I'm attempting to create a "schedule a demo" button similar to the one on www.bamboohr.com
Currently, I have the following html, css, and javascript code. It works fine on jsfiddle, but when I add it to my WordPress child theme, it doesn't work. I added the html in the header.php of my child theme, the css in a custom stylesheet, and the javascript linked in the header.php file.
Can anyone help me figure out why this isn't working?
This code snippet goes right before the main content <div>:
<div class="askFloater">
<a href="http://workforcematters.hubicle.com" target="_blank">
<i class="icon-question-sign"></i><br />
Ask Us Anything
</a>
</div>
The following script loads in the <head> section:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://dev.workforcematters.com/wp-content/themes/swatch-child-theme/javascripts/askFloater.js"></script>
This is the css in the stylesheet:
.askFloater {
display: none;
position: fixed;
bottom: 20px;
right: 0;
width: 70px;
height: 100px;
text-align: center;
background-color: #3498db;
border-radius: 3px 0 0 3px;
padding: 16px 16px 0;
z-index: 1;
}
.askFloater a {
color: #fff;
font-size: 18px;
text-transform: lowercase;
font-family: 'Muli', 'Lucida Grande', sans-serif;
}
.askFloater:hover {
background-color: #4ea5db;
}
And finally, this is the content of the "askFloater.js" file:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$('.askFloater').fadeIn();
} else {
$('.askFloater').fadeOut();
}
});