i have a problem with my test site:
http://devauth.labscope.de/htmlapp/report-overview.html
My problem is this: when I scale the browser window to 768px width, a header appears with two icons (left and right). When I click them the respective menu is toggled with a sliding animation. When I click the right-hand icon a second time nothing happens. Can you tell me why this happens?
Here my jQuery Code:
jQuery('#content, #footer').each(function() {
$(this).data('left', this.style.left);
});
jQuery('.category').on("click", function(e){
e.preventDefault();
var state = $(this).data('state'),
wrapper = $('#content').data('left'),
footer = $('#footer').data('left');
jQuery("#content").animate({
left: state ? wrapper : 250,
duration: 1000
}, "normal");
jQuery("#footer").animate({
left: state ? footer : 250,
duration: 1000
}, "normal");
jQuery(this).data('state', !state);
});
jQuery('#content, #footer').each(function() {
$(this).data('right', this.style.right);
});
jQuery('.filter').on("click", function(e){
e.preventDefault();
var state = $(this).data('state'),
wrapper = $('#content').data('right'),
footer = $('#footer').data('right');
jQuery("#content").animate({
right: state ? wrapper : 250,
duration: 1000
}, "normal");
jQuery("#footer").animate({
right: state ? footer : 250,
duration: 1000
}, "normal");
jQuery(this).data('state', !state);
});
I hope someone can help me to fix this bug.
