CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ivan Soler
Ivan Soler

Reputation: 153

Change font size on window width resize and change document height when font size changes

var fontSize = $('.basic_unit').css('font-size');
if (fontSize == '6px') {docHeight=32000;} else if (fontSize == '8px') {docHeight=48000;} else { docHeight = 11000; }

var winWidth = $(window).width();
if (winWidth <= 700){
	$('.basic_unit').css.('font-size','2px')
	}
	else if (winWidth > 701 && winWidth <= 1200) {
		$('.basic_unit').css.('font-size','6px') 
		}
	else 
	$('.basic_unit').css.('font-size','8px'); 
var variableXXX = false;
$(window).scroll(function() {

var scrollPercent = 100 * $(window).scrollTop() / docHeight;

 if ( scrollPercent >= 5 && variableXXX == false){
    variableXXX = true;
      alert($(document).scrollTop()); 
  }
});

I need this code to work as explained in the title:

After this:

After this:

Upvotes: 0

Views: 1753

Answers (2)

Patron
Patron

Reputation: 11

if you work for newer browsers, try vw and vh parameters:

font-size: 3vw

Documentation W3Schools

Upvotes: 1

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34150

$(window).resize(function(){
var winWidth = $(window).width();
if (winWidth <= 700){
    $('.basic_unit').css('font-size','2px')
    }
    else if (winWidth > 701 && winWidth <= 1200) {
        $('.basic_unit').css('font-size','6px') 
        }
    else 
    $('.basic_unit').css('font-size','8px'); 

});

But I suggest avoiding Javascript and doing it with css media:

@media screen and (max-width: 700px) {
    .basic_unit {font-size:2px}
}

@media screen and (min-device-width: 701px) and (max-device-width: 1200px) { 
       .basic_unit {font-size:6px}
}

@media only screen and (min-device-width: 1021px) {
        .basic_unit {font-size:8px}
}

Upvotes: 3

Related Questions