Skip to content

Instantly share code, notes, and snippets.

@barbareshet
Last active December 5, 2017 09:12
Show Gist options
  • Select an option

  • Save barbareshet/d3a6a81bdb5ff72abd1bbc8cd3ce13d3 to your computer and use it in GitHub Desktop.

Select an option

Save barbareshet/d3a6a81bdb5ff72abd1bbc8cd3ce13d3 to your computer and use it in GitHub Desktop.
JS font size controller (for accessibility)
<!-- text size menu-->
<div class="container">
<div class="row">
<ul class="pagination">
<li>
<a href="#" aria-label="bigger" id="bigger">
<i class="fa fa-expand" aria-hidden="true"></i>
<span>א</span>
</a>
</li>
<li>
<a href="#" aria-label="reset" id="reset">
<i class="fa fa-ban" aria-hidden="true"></i>
<span>א</span>
</a>
</li>
<li>
<a href="#" aria-label="smaller" id="smaller">
<i class="fa fa-compress" aria-hidden="true"></i>
<span>א</span>
</a>
</li>
</ul>
<!-- /.pagination -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- /text size menu-->
<script>
//font-size control
function font_change_size(element, size) {
var init = parseInt($('body').css('font-size'));
var current = parseInt(element.css('font-size'));
var body = $('body');
if( size == 'smaller'){
var new_size = current - 2;
} else if ( size == 'bigger'){
var new_size = current + 2;
} else if ( size == 'reset'){
var new_size = init;
}
element.css('font-size', new_size + 'px');
}
$('#smaller').click(function (e) {
event.preventDefault();
font_change_size($(body), 'smaller');
});
$('#reset').click(function (e) {
event.preventDefault();
font_change_size($(body), 'reset');
});
$('#bigger').click(function (e) {
event.preventDefault();
font_change_size($(body), 'bigger');
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment