Whenever I click on this div, it slides out smoothly.
Check out these images to get a visual of what I am aiming for:
This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png
Once slid out, the Div looks like this (highlighted)
https://i.stack.imgur.com/sy78X.png
Notice what happens when the screen size changes. The clickable div ends up positioned behind other content which is something I want to avoid.
https://i.stack.imgur.com/ykvSU.png
This is the CSS for my Div:
.sliderDiv {
z-index: -10;
position: relative;
left: 200px;
width: 240px;
}
I trigger the slide-out effect with this command:
slideItOut:function(){
var divsize=$(".sliderDiv").offset().left-150;
if(divsize>100){
$(".sliderDiv").animate({
"left":"-=194px"
},"slow");
}
else{
$(".sliderDiv").animate({
"left":"+=194px"
},"slow");
}
}
The issue arises when the window is resized, as the responsiveness is lost and the div gets hidden behind other elements. Perhaps this method is not designed for responsive behavior.
Is there any way to make this sliding feature responsive or at least make sure it maintains its position when the screen size changes? I'm looking for a solution that allows the div to resize accordingly when the window is adjusted, similar to the first two images shown above.
Keep in mind that this implementation is within a modal, so the div is not fixed on the screen.