Skip to content

Instantly share code, notes, and snippets.

@fhdalikhan
Created May 27, 2019 10:00
Show Gist options
  • Save fhdalikhan/e4784571a147dfe7e24066879c4e1f0c to your computer and use it in GitHub Desktop.
Save fhdalikhan/e4784571a147dfe7e24066879c4e1f0c to your computer and use it in GitHub Desktop.
Change font sizes dynamically for a web page
var StylingHelper = function(){
this.id = 'dynamic-styles';
this.step = 2;
this.count = 1;
this.h1Size, this.h2Size, this.h3Size, this.h4Size, this.h5Size, this.h6Size, this.pSize;
};
StylingHelper.prototype.increment = function() {
this.count++;
this.step = this.step + 2;
this.updateStyling();
};
StylingHelper.prototype.decrement = function() {
if ( this.count < 2 ) {
return;
}
this.step = this.step - 2;
this.count--;
this.updateStyling();
};
StylingHelper.prototype.updateStyling = function() {
var $el = $('#dynamic-styles');
this.h1Size = 26;
this.h2Size = 24;
this.h3Size = 22;
this.h4Size = 20;
this.h5Size = 18;
this.h6Size = 16;
this.pSize = 19;
if ( this.count > 1 ) {
this.h1Size = 26 + this.step;
this.h2Size = 24 + this.step;
this.h3Size = 22 + this.step;
this.h4Size = 20 + this.step;
this.h5Size = 18 + this.step;
this.h6Size = 16 + this.step;
this.pSize = 19 + this.step;
}
$el.text(`
.welcomeSec h1 {
font-size: ${this.h1Size}px;
}
.welcomeSec h2 {
font-size: ${this.h2Size}px;
}
.welcomeSec h3 {
font-size: ${this.h3Size}px;
}
.welcomeSec h4 {
font-size: ${this.h4Size}px;
}
.welcomeSec h5 {
font-size: ${this.h5Size}px;
}
.welcomeSec h6 {
font-size: ${this.h6Size}px;
}
.welcomeSec p {
font-size: ${this.pSize}px;
}
`);
};
StylingHelper.prototype.init = function() {
if( !document.getElementById(this.id) ) {
var style = document.createElement('style');
style.id = 'dynamic-styles';
$('head').append(style);
}
};
var stylingHelper = new StylingHelper();
stylingHelper.init();
$('body').on('click', '#increaseFontSize', function(event) {
stylingHelper.increment();
});
$('body').on('click', '#decreaseFontSize', function(event) {
stylingHelper.decrement();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment