Replace jquery variable value with input value

Question

I want to add a screensaver container to my website when mouse is idle for X seconds. I found this piece of code to make that happen. As you can see, you set custom amount of time to wait (3000ms in the example) before displaying the screensaver. What I want to achieve is let users to add the amount of time they prefer through an input and the function take effect without reloading the page. I have poor knowledge of javascript and although I searched a lot, I am sure I do not know the right search terms to help me find a solution so I am asking here for help. Is this possible? If yes, what should I do?

Thanks in advance.

Patrick Q · Accepted Answer · 2014-03-13 19:57:00Z

This is kind of a simplified version, but should at least get you going on the right path.

HTML

<input type="text" size="3" name="screensaverDelay" id="screensaverDelay" value="3000"/>
<button id="changeDelay">Change Screensaver Delay</button>
<div id="screensaver">This is my screensaver!!</div>

Javascript

$(function(){
    setScreensaver(3000);
    $("#changeDelay").on("click", function(){
        setScreensaver($("#screensaverDelay").val());
    });
});

var timer;

function setScreensaver(delaySeconds)
{
    $(document).mousemove(function() {
        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }

        $('#screensaver').fadeOut();
        timer = setTimeout(function() {
            $('#screensaver').fadeIn()
        }, delaySeconds)
    });
}

CSS

#screensaver {
    display: none;
}

See it in action

Collectives™ on Stack Overflow

Replace jquery variable value with input value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related