Question

I am about to author this client-side widget slider in javascript.

As users answer questions, the slider will increment.

I’m ok with making the slider background grow and shrink, but what I’m not really sure about is have the “65%” indicator “stick” to the end of the blue-coloured div, and automagically move as the slider background grows and shrinks.

Since this is javascript, i’m cool with setting the indicator’s absolute position dynamically. OK, I havent really tried anything yet, because I’m guessing there are a number of ways to achieve this, so wanted to get some opinions. I’m even contemplating using qTip…but would be great to see this with css as a floating box anchored to another box

I’m imagining changing the width of two side-by-side divs (the completed vs incompleted), and have the indicator absolutely positioned relative to its container, so that it moves as the widths changes.

Possible?

Here’s what I’m talking about:

Working example (thanks to Philip’s answer)

http://jsfiddle.net/HP7V9/

Answer 1

I’d probably just use jQuery to anchor it to the right of the loaded div and at the halfway point of the of the height of it.

So lets say we have this DOM:

Then, assuming you have the logic to resize the bar already, this jQuery would do the trick:

$("#loaded").resize(function(){
    var loadedDiv = $("#loaded");
    var loadedPosition = loadedDiv.position();
    var percentXPos = loadedPosition.left + loadedDiv.width() - $("#percent").width()/2;
    var percentYPos = loadedPosition.top + loadedDiv.height() / 2 - loadedDiv.height() / 2;

    $("#percent").css({
        position: "absolute",
        top: percentYPos.toString() + "px",
        left: percentXPos.toString() + "px"
    });
});

Also, I don’t think there’s any reason to have a div for the not loaded part. You should make a div for the whole bar and give it a black background, then give the loaded div a higher z-index and different background color.

Keep in mind it may need minor tweaks depending on the margin, padding, etc of the elements.