Over the past few days, I've dedicated my time to developing a new project. I've been focusing on creating the HTML, CSS, and Java layout to ensure everything works seamlessly.
After completing most of the work, the design looks great on desktop and tablet browsers, except for one major issue - it doesn't function properly on Chrome for Android.
The problem arises when I attempt to move the sidebar off the screen using fixed positioning and then adjust its left position by -280px (the width of the bar). When clicking the menu, an animation is supposed to bring the sidebar back into view, alongside adjusting the margin-left of the content to create a visual effect of being pushed by the side bar.
Initially, everything seems perfect on Chrome for Android, but upon closing and reopening the menu, all the sidebar content disappears.
Below is the JavaScript code I'm currently using for this functionality:
$('#list').click(function() {
var toggleLeft = $("#left_bar").css('left') == "-280px" ? "0px" : "-280px";
var toggleWidth = $("#left_bar").css('left') == "-280px" ? "280px" : "0px";
$('#left_bar').animate({ left: toggleLeft }).toggleClass('active');
$('#right_bar').animate({ marginLeft: toggleWidth }).toggleClass('noscroll');
$('#overlay').toggle();
});
You can view the entire layout by visiting: www.dosh.dk/pread/