I have website with a form sliding from the right when you click on a blue button:
As you can probably see, the horizontal scrollbar allows visitors to see the sliding form before and after it becomes active.
That’s the problem, I hope someone can help me solve it.
This is the jQuery code I’m using:
<script type="text/javascript">
$(document).ready(function()
{
function positioningForm()
{
$('#insider').css({"right": "-535px"}).show();
}
function slideFromRight()
{
$('#insider').animate(
{right: "0px"},
{duration: 'slow',easing: 'easeOutElastic'});
}
function slideToBeginning() {
$('#insider').animate(
{right: "-535px"},
{duration: 'slow',easing: 'easeOutElastic'});
}
// Positioning the insider at the time of page loading
positioningForm();
var state = 0;
$('.right_btn').click(function() {
if(state == 0) {
//do the magic :)
slideFromRight();
state = 1;
} else if( state == 1) {
//unroll the magic :)
slideToBeginning();
state=0;
}
});
});
</script>
add this to css:
body{overflow-x:hidden;}if you don’t have an organized block of css, just add style=”overflow-x:hidden” to your body tag like so:
<body style="overflow-x:hidden;">solved. 😉