CODEWITHSUNDEEP
javascriptjqueryhtmltextbox
Jeffrey
Jeffrey

Reputation: 1667

How can I create an HTML text field that has scrolling background images before it is clicked?

I'm looking to add a textbox on my website that captures a single email address. Behind it, I would like scrolling (or sliding) images to be a "hint" for what the field should be.

Example: http://steamboat.com/ - the "Newsletter sign up" toward the top of the page.

I can find plenty of jQuery plugins that provide a plain text "hint". Where should I start looking to add this additional affect?

Note: I do not want to add any flash elements on the page.

Upvotes: 1

Views: 1051

Answers (4)

lincolnk
lincolnk

Reputation: 11238

you can do this with plain javascript.

initialization: get a reference to your input element. set the background image using the style property

emailInput.style.backgroundImage = "url('emailbackground.png')";
emailInput.style.backgroundPosition = '0px 0px';

also declare variables to track running y offset, the height of the image in pixels, and if you want a staggered roll like on steamboat, how many steps you've moved and a timerID.

you'll have two functions- one will start an interval timer where the position of the image will change, the other will call the first function to restart the interval whenever you pause the background.

first the 'start' method:

function startScrolling() {
    // start the process of moving the image
    stepCounter = 0;
    timerID = setInterval(updateScrolling, 10);
}

the 'update' method :

function updateScrolling() {

    // update the y offset
    stepCounter++;
    y = (stepCounter * 1) % imageHeight;
    emailInput.style.backgroundPosition = '0px ' + (-y).toString() + 'px';

    // check for changes to timing
    if (stepCounter >= steps) {
        clearInterval(timerID);
        timerID = setTimeout(startScrolling, 1000);
    }
}

this example is set up to move 1 pixel for every step taken. you can provide a fixed value or derive it based on image height or whatever. if we've completed all the steps for this cycle, the interval is stopped and a longer timeout is set for the restart function.

Upvotes: 1

RubyDubee
RubyDubee

Reputation: 2446

Try this :

<body onload="changingBG()">
<input type="text" id="thisBox">
</body>

here is the script: you need to have an array of images that you want to keep in background, change the timer as u want:

function changingBG(){
   var inboxEle = document.getElementById("thisBox");
   inboxEle.style.backgroundImage = varArray[x] //this array contains various images
   t=setTimeout("changingBG()",1000);
}

Upvotes: 1

Chris Wagner
Chris Wagner

Reputation: 20993

These are the steps I would take...

Create the text input field and give it a class with a background-image attribute that points to an image that has the text you want to display in the order you want listed vertically.. So your image would look like

Newsletter Sign Up

Enter your Email Address

Then you can use a CSS Sprite approach to shift the image up at the rate you want using a library like jQuery to animate it, getting the same effect....

Then you need an event binder on the input box that would clear out the background image when the user clicks in the box OR if the box contains text

Upvotes: 1

Nathan Osman
Nathan Osman

Reputation: 73165

Well, this is just a vague idea, but it might get you started.

You could:

  • Give the text box a class at startup that has a grey font color and displays the message
  • When the user clicks on the item, it checks to see if the grey class is being used in the control
  • If it is, it clears the control and assigns it a black font-color

This way subsequent click events won't find the grey class and the text box won't clear the user's stuff.

Upvotes: 1

Related Questions