My browser window has a side tab that slides in when clicked using jQuery. The issue I'm facing is that the tab overflows the body due to its absolute positioning. However, the overflow stops when the tab is pulled in by jQuery. It only happens when the tab is hidden.
JS:
$(tabs).click(function(event) {
event.preventDefault();
var block = '#block-webform-client-block-12';
if($(tabs).hasClass("isDown")) {
$(block).animate({ right: '+=380'}, 500 ),
//$(block).css({ position: 'absolute' });
$(tabs).removeClass("isDown");
$('.block-webform .quote-tab.open').hide();
$('.block-webform .quote-tab.close').show();
} else {
$(block).animate({ right: '-=380' }, 500 )
//$(block).css({ position: 'fixed'});
$(tabs).addClass("isDown");
$('.block-webform .quote-tab.open').show();
$('.block-webform .quote-tab.close').hide();
}
return false;
});
CSS:
#block-webform-client-block-12 {
position: absolute;
top: 20%;
right: -380px;
background: $button-color;
padding: 15px;
width: 350px;
color: white;
z-index: 99;
@include zen-grid-container();
.quote-tab {
position: absolute;
top: 0;
left: -46px;
}
HTML:
<div id="block-webform-client-block-12" class="block block-webform contextual-links-region last even">
<h2 class="block-title">
Get a Quote
</h2>
<article class="node-12 node node-webform node-promoted contextual-links-region view-mode-full node-by-viewer clearfix" about="/get-quote" typeof="sioc:Item foaf:Document">
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<img src="/sites/domain.com/files/close-quote-tab.png" class="quote-tab close"> <img src="/sites/domain.com/files/open-quote-tab.png" class="quote-tab open">
<p>
Fill out this form to request a quote or set up an appointment. For more information, <strong>call 123-456-7890</strong>.
</p>
</div>
</div>
</div>
<form class="webform-client-form" enctype="multipart/form-data" action="/get-quote" method="post" id="webform-client-form-12" accept-charset="UTF-8">
...form_components...
Screenshot
I aim to show only the tab when the form is off-screen, preventing users from scrolling to see the rest of the form.