Do not ‘draw’ any Divs on your FW page - that is not how it works!
Everything is unseen in the FW layout.
In my example I have added the following in Page>Html Markup in the before slot
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="slideout.js"></script>
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'contact_tab.gif', //path to the image for the tab //Optionally can be set using css
imageHeight: '122px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<style type="text/css">
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: 1px solid #29216d;
}
</style>
In Page>Html Markup in the before slot I added the following
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users">Content</a>
<h3>This is extra content</h3>
<p>Something that wasn't important enough to be in your main body,
but that you wanted to hide off the side of your screen for some reason.
</p>
<p>Could be a form to submit feedback, or contact info</p>
</div>
I uploaded the contact_tab.gif and the slideout.js files alongside the html page.
Ok I got it working. You were right. I had drawn the divs on my page and gave them a class. That’s what I thought that website was telling me to do. It says “create a div”.
Ok so I noticed that when you use click the slide out sticks until one clicks again to close it. However mouseover does not let the slideout stick. Do ya think it’s possible to add to the this to the code?
But I do. The tab will have a link inside of it. So on a touch device the tab will behave basically the same as on click but still allows for hover on desktops and laptops. It’s just the hover won’t stick on mobile devices without some extra code.
You can see the desired behavior i’m after on this website:
Notice the slide out on the upper left. View the behavior on mobile and desktop.