MaartenPAC MaartenPAC - 18 days ago 8
Javascript Question

Assigning new classes to bootstrap elements at screen resize not working

Im trying to change a FONT-AWESOME glyphicon class from fa-3x size to fa-2x size when the window reaches 991px or smaller. It also needs to change when the window loads at 991px or smaller... here's two options I tried:

JAVASCRIPT METHOD 1:



/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING DOCUMENT READY*/
if( $(window).innerWidth() <= 991)
{document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";}
else if( $(window).innerWidth() > 991)
{document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";}

/*CHANGE CLASS OF #glyph2 AT 991 OR LESS VW DURING RESIZE*/
$(window).resize(function () {
if( $(window).innerWidth() <= 991)
{document.getElementById('#glyph2').className = "fa fa-caret-right fa-2x";}
else if( $(window).innerWidth() > 991)
{document.getElementById('#glyph2').className = "fa fa-caret-right fa-3x";};
});


AND

JAVASCRIPT METHOD 2:



(function($) {
var $window = $(window),
$glyph2 = $('#glyph2');

function resize() {
if ($window.width() <= 991) {
return $glyph2.addClass('fa fa-caret-right fa-2x');
}
$glyph2.addClass('fa fa-caret-right fa-3x');
}

$window
.resize(resize)
.trigger('resize');
})(jQuery);


Neither of these two options works.. Any ideas or fixes would be greatly appreciated thanks!

Answer

EASIER CSS AND MEDIA QUERIES METHOD:

Probably the best and easiest method - using only Media Queries and CSS:

HTML CODE:

<button id="btn6" type="button" class="btn btn-default"><p id="btn6Text">READ MORE ABOUT US<i id="glyph2" class="fa fa-caret-right fa-3x"></i></p></button>

CSS CODE:

/* When SCREEN VW <= 991px ----------- */
@media only screen
and (max-width : 991px) {

/* Styles */
#glyph2 {
    font-size: 2em !important;
}

}

JSFIDDLE DEMO HERE

Comments