I have a main container div that holds two smaller divs side by side. When one of these smaller divs is clicked, it moves to the far left or right side of the browser window depending on which one was clicked. This functionality works perfectly as intended.
However, I encounter an issue when I attempt to resize the browser window manually by dragging the bottom right corner to adjust its dimensions. The div that moved to the far right initially does not follow along with the resizing and ends up falling out of view. It is crucial for me that this div remains anchored to the far right no matter how the browser window changes in size.
Even though I have set the CSS property of the div to 'right: 0', it seems that the JavaScript animation effect is not taking this into account and keeps the div in its original position on the far right based on the initial dimensions of the browser window.
Below is a simplified version of my current code structure:
HTML:
<span id='one'>
<span id='two'> </span>
<span id='three'> </span>
</span>
CSS:
#one {
height:100px;
width:210px;
background-color:red;
position:absolute;
left:0;
}
#two {
height:100px;
width:100px;
background-color:blue;
float:left;
}
#three {
height:100px;
width:100px;
background-color:green;
float:right;
}
JavaScript:
$(document).ready(function(){
$('#two').click(function(){
window_width = $(document).width();
element_width = $('#one').width();
edge = window_width - element_width;
$('#one').animate({right:edge, left:0}, 100).delay(0);
console.log($('#one').css('left'));
});
});
$(document).ready(function(){
$('#three').click(function(){
window_width = $(document).width();
element_width = $('#one').width();
edge = window_width - element_width;
$('#one').animate({left:edge, right:0}, 100).delay(0);
console.log($('#one').css('left'));
});
console.log($('#one').css('left'));
});
I would greatly appreciate any assistance with this issue as I've been searching through various resources without finding a suitable solution. Thank you in advance to anyone who can help.