javascript - Check if div has a specific style applied -

javascript - Check if div has a specific style applied -

on website if page first loaded , it's maximized/fullscreen, div combrand has particular css properties want applied.

during resize event apply different properties element using .css() function div doesn't overlap other screen items, however, instead of changing css appears add together style attribute div in code. depending on how resize page, resize function might have ended in such way when utilize maximize button, end wrong placement of particular div. checking few things create sure doesn't happen.

however, don't know if syntax here right checking style attribute of div during resize function because doesn't seem work expected.

$(window).resize(function() { //first check if ( $('#combrand').css('top') == '155px') { //second check see if peculiuar event reached div positioned incorrectly window isn't 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 //assume page maximized , adjust div accordingly { $('#combrand').css({'top': '141px', 'margin-left': '0', 'left': '0'}); } } else //default else, if css of div other checked for, set default location { $('#combrand').css({'top': '155px', 'margin-left': '-615px', 'left': '50%'}); } });

i know it's little confusing , of hack i'd still function.

i added 2 classes, , gave div combrand class of maximized hard coded in html, , used code in resize function, however, doesn't work or anything...

$(window).resize(function() { if ($('#combrand').hasclass('maximized')) { $('#combrand').removeclass('maximized'); $('#combrand').addclass('minimized'); } else { $('#combrand').removeclass('minimized'); $('#combrand').addclass('maximized'); } });

as apul gupta pointed out, should adding , removing classes. so, set couple classes:

css:

.firstclass { top: 155px; margin-left -615px; left:50%; } .secondclass { top:141px; margin-left:0; left:0; }

next, alter logic this:

if (!$('#combrand').hasclass('firstclass') && (window.screen.width > window.screen.availwidth)){ $('#combrand').removeclass("firstclass"); $("#combrand").addclass("secondclass"); } } else { $("#combrand").removeclass("secondclass"); $("combrand").addclass("firstclass"); }

your first nested if statement doesn't anything...you checking see if css x - , if so, setting css x. so, removed code.

i must admit if/else logic unoptimized(a bit redundant) , confusing, should give thought of need do.

javascript jquery html css