Doing a text resize with Limit? Javascript

Question

Im working on a text resize project, It will resize the content, works fine, but how can I set Maximum and Minimun Limits? Here's the script:

<script>

    function increase()
    {

        obj = document.getElementById("content");
        currentSize = parseFloat(obj.style.fontSize); 
        obj.style.fontSize = (currentSize + 50) + "%";
    }

The increase function will increase the #content font-size 150% of the previous size .The #content font-size must not exceed 300%

function decrease()
{

    obj = document.getElementById("content");
    currentSize = parseFloat(obj.style.fontSize);
    obj.style.fontSize = (currentSize - 50) + "%";
}

The decrease function will decrease the #content font-size a factor two-thirds of the previous size .The #content font-size must not be below than 25%

    function reset()
    {
        document.getElementById("content").style.fontSize = "100%";
    }
</script>

This function resets the #content font-size back to 100%

Here's the body

<body>
    <div id = "main">
        <div id = "top">
            <ul id = "controls">
                <li><button onclick = "decrease()">A-</button></li>
                <li><button onclick = "reset()">A</button></li>
                <li><button onclick = "increase()">A+</button></li>
            </ul>
            <div class = "push"></div>
        </div>
        <div id = "content" style = "font-size: 100%;">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta facilisis luctus. Nulla lorem est, laoreet vitae lectus ac, luctus facilisis nibh. Morbi sit amet augue orci. Sed tristique viverra libero, a hendrerit lacus feugiat vel. Proin egestas fermentum turpis eu facilisis. Duis lacus justo, bibendum eu massa eget, ornare bibendum odio. Ut efficitur tempor bibendum. Mauris placerat neque purus, non molestie lorem eleifend sit amet. Ut euismod tortor ut neque ultrices lobortis. Maecenas placerat nunc massa, non molestie nisl fermentum sit amet. Fusce metus diam, maximus ut sem ut, lacinia lacinia nisi.</p>
            <p>Phasellus in dolor rhoncus, dignissim eros eu, suscipit velit. Donec malesuada nisl vel risus bibendum egestas. Cras rutrum ornare dui id pharetra. Donec eros dui, porta finibus massa ut, venenatis viverra nibh. Donec quis felis eget dolor feugiat faucibus vel eget erat. Duis tristique, dui non lobortis euismod, nisi libero fermentum velit, rutrum convallis sapien purus ac arcu. Sed egestas massa et convallis tincidunt. Sed pretium nisl eget blandit condimentum.</p>
            <p>Nullam in neque ut libero gravida molestie eget eu nibh. Curabitur varius ullamcorper neque, eget iaculis est volutpat sed. Praesent ultrices lectus sed nunc blandit, sed aliquam justo volutpat. Suspendisse potenti. Aliquam nec sapien tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pulvinar libero quis quam rhoncus tincidunt. Ut dapibus sem sed enim rutrum, id viverra eros placerat. Morbi vulputate, odio iaculis molestie pellentesque, augue ex cursus massa, nec placerat sem arcu vitae libero. Donec gravida mi in metus sollicitudin, sed dictum sapien tempor. Curabitur vel rhoncus leo. Phasellus ut urna tempus arcu finibus auctor. In eu arcu ut nibh consequat ultrices. Fusce nec orci eget urna venenatis volutpat. Etiam ultricies leo id dolor interdum, nec luctus ex pretium. Phasellus ac leo quam.</p>
        </div>
        <div id = "bottom">
            <ul>
                <li>Copyright &copy 2015</li>
                <li>All rights reserved.</li>
            </ul>
        </div>
    </div>
</body>

Does a simple if (currentSize < 300) { obj.style.fontSize = (currentSize + 50) + "%"; } work? — Michael McMullin
– Michael McMullin, Commented Sep 15, 2015 at 5:12

Scott G. · Accepted Answer · 2015-09-15 04:55:23Z

1

Based on your code, I would declare some variables outside of your functions as limits, then use a check to keep the value at this limit before performing the increase or decrease.

var upperLimit = 500;
var lowerLimit = 50;

// ...snippet...
newSize = currentSize + 50;
if (newSize < upperLimit) {
     obj.style.fontSize = newSize + "%";
}

answered Sep 15, 2015 at 4:55

Scott G.

3231 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher M. · Accepted Answer · 2015-09-15 04:52:54Z

0

make sure in your function before doing any increase or decrease, you get the "currentSize" first, then you use an if statement to see whether the "currentSize" is greater or equal to 300, if it is, do not increase the font. do the same for the decrease function; if the "currentSize" is less or equal to 25 do nothing else decrease. hope that was helpful

answered Sep 15, 2015 at 4:52

Christopher M.

1301 silver badge10 bronze badges

1 Comment

Joshua C. Tuonan Over a year ago

Hi, I've been trying to do all possible conditions, but it doesn't work. can you provide me an example?

Collectives™ on Stack Overflow

Doing a text resize with Limit? Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related