Changing size of a text with buttons


(ism) #1

Hi friends.
Is there a way to change text size of an element with buttons? I looked at forums but cant see any working example…
here is an example.
After pressing + button, text will be bigger,
after pressing -, text size will be smaller…
Is there any way with javascript? And sync it with other scenes (localstorage)?

text2.hype.zip (48.4 KB)


(Jonathan Deutsch) #2

There’s many different ways one could do this; the approach I would take is to dynamically modify a CSS style tag that references your text class. This value can be stored in local storage.

Step one would be to Edit Head HTML… via the Document Inspector. Then I’d add a blank CSS tag that contains an ID that we can use:

<style id="mysheet"></style>

In the Head HTML I’d also include javascript for a couple utility functions, one to write the font size and one to read it. Also you can setup the default and min values. Finally make sure on load to set the style tag to the last read value (or default).

<script>

var kDefaultTexticFontSize = 36;
var kMinTexticFontSize = 6;

function setTexticFontSize(size) {
	// cleanup the size value and make sure it is not smaller than our minimum
	var sanitizedSize = parseInt(size);
	if(sanitizedSize == null) {
		sanitizedSize = kDefaultTexticFontSize;
	}
	if(sanitizedSize < kMinTexticFontSize) {
		sanitizedSize = kMinTexticFontSize;
	}

	// set the style sheet's rule for the textic class to reflect the font size
	var styleSheetElement = document.getElementById("mysheet");
	styleSheetElement.innerHTML = ".textic { font-size: " + sanitizedSize + "px !important; }";
	
	// store the value in localstorage
	window.localStorage.setItem("texticFontSize", "" + sanitizedSize);
}

function getTexticFontSize() {
	// grab from localstorage or use the default
	return parseInt(localStorage.getItem('texticFontSize') || ("" + kDefaultTexticFontSize));
}

// initial set of the text size: just read from local storage and set it
setTexticFontSize(getTexticFontSize());

</script>

Now when clicking on the plus and minus buttons, you can just use getTexticFontSize(), modify it, and then call setTexticFontSize() with the new value.

Instead of incrementing/decrementing by 10px, I’d recommend multiplying by a value. This will give smaller changes at low font sizes and larger changes at large font sizes. I find a 25% increase to be pretty good.

function increaseTexticFontSize(hypeDocument, element, event) {
	// 1.25 = (1 / 0.8)
	setTexticFontSize(getTexticFontSize() * 1.25);
}
function decreaseTexticFontSize(hypeDocument, element, event) {
	// 0.8 = (1 / 1.25)
    setTexticFontSize(getTexticFontSize() * 0.8);
}

Here is the modified project bringing it all together:

text2-fixed.hype.zip (64.5 KB)


(ism) #3

Thanks.