Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn't overlap with other screen elements. In some cases, after resizing and then maximizing the window again, the div might end up in the wrong position due to the resize function.
I am trying to prevent this issue by checking for certain conditions during the resize event. Unfortunately, the syntax I'm using to check for the style attribute of the div doesn't seem to work as expected.
$(window).resize(function() {
// Check
if ( $('#comBrand').css('top') == '155px')
{
// Additional check for incorrect positioning when window is not maximized
if ( ($('#comBrand').attr('style') == 'top: 155px;margin-left: -615px;left: 50%;') && (window.screen.width > window.screen.availWidth))
{
$('#comBrand').css({'top': '155px', 'margin-left': '-615px', 'left': '50%'});
}
else
{
$('#comBrand').css({'top': '141px', 'margin-left': '0', 'left': '0'});
}
}
else
{
$('#comBrand').css({'top': '155px', 'margin-left': '-615px', 'left': '50%'});
}
});
Although it may be a bit confusing and unconventional, I still hope to make it functional.
I attempted to add two classes and manually set the class of comBrand to 'maximized' in the HTML code. However, the code within the resize function did not produce the desired outcome...
$(window).resize(function() {
if ($('#comBrand').hasClass('maximized'))
{
$('#comBrand').removeClass('maximized');
$('#comBrand').addClass('minimized');
}
else {
$('#comBrand').removeClass('minimized');
$('#comBrand').addClass('maximized');
}
});