admin管理员组

文章数量:1345891

I am new to JavaScript/CSS (basically the whole world of web dev) and I am really struggling to create the following widget. I created a picture of what I want to make to make it more clear.

The Play/Pause and Stop button are ready. Loop checkbox is no problem. But the progress bar is painful. The two markers are supposed to mark the point from where the file would start playing and where it would stop. The progress bar is also supposed to be click-able, so if I want to access a certain point in time, then its possible.

What I tried so far

jQuery UI slider: For a sliding progress bar and use that draggable slider to access a certain point in audio file. Works fine. But no markers and looks really ugly. Don't how to change it.

<progress> tag: not very flexible. Marker? Clicking?

<div> tag: there seems to be no way to get the point where I clicked.

So, what do you guys remend? How should I proceed?

I am new to JavaScript/CSS (basically the whole world of web dev) and I am really struggling to create the following widget. I created a picture of what I want to make to make it more clear.

The Play/Pause and Stop button are ready. Loop checkbox is no problem. But the progress bar is painful. The two markers are supposed to mark the point from where the file would start playing and where it would stop. The progress bar is also supposed to be click-able, so if I want to access a certain point in time, then its possible.

What I tried so far

jQuery UI slider: For a sliding progress bar and use that draggable slider to access a certain point in audio file. Works fine. But no markers and looks really ugly. Don't how to change it.

<progress> tag: not very flexible. Marker? Clicking?

<div> tag: there seems to be no way to get the point where I clicked.

So, what do you guys remend? How should I proceed?

• javascript
• html
• jquery-ui
• css

Share Improve this question Follow edited Jul 23, 2013 at 14:02 Jeff Noel 7,61744 gold badges4242 silver badges6666 bronze badges asked Jul 23, 2013 at 14:02 whatever123whatever123 17911 gold badge11 silver badge77 bronze badges 3

• Could you post your code on a website like JSfiddle or CodePen? – Maen Commented Jul 23, 2013 at 14:08
• I was thinking about it, but I have play/pause and stop button, and the jQuery UI slider, which clearly is not the way to do it. So, its kinda pointless. But let me see what I can do. – whatever123 Commented Jul 23, 2013 at 14:25
• Just wanted to add that I ended up using kineticjs library for dragging the marker. – whatever123 Commented Jul 31, 2013 at 12:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Canvas Alternative

You might want to use a canvas and draw your own progress bar element within it.

Here are some canvas progress bar tutorials:

• How to create a progress bar with HTML5
• A progress bar using HTML5 canvas

---

Doing it with <progress>

To access the clicked position within a DOMElement, you can proceed with the click event's properties: clientX and clientY (MDN Source), like so:

HTML

<div class="marker" id="StartMarker">^</div>
<div class="marker" id="StopMarker">^</div>
<progress id="progress" value="0" min="0" max="100">0%</progress>
<form id="choice">
    <button id="marker1">Beginning marker</button>
    <button id="marker2">Ending marker</button>
    <input type="hidden" id="markerValue" value="0" />
</form>

JavaScript (not optimized)

document.getElementById('progress').onclick = function (event, element) {
    /* Math.floor((event.offsetX / this.offsetWidth) * 100) */
    var newProgress = event.offsetX;

    document.getElementById('choice').style.display = "block";
    document.getElementById('markerValue').setAttribute('value', newProgress);

    document.getElementById('marker1').onclick = function (event) {
        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');

        var marker = startMarker;
        marker.style.display = "block";

        startMarker.style.display = "block";
        startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        startMarker.style.left = newProgress + "px";

    };

    document.getElementById('marker2').onclick = function (event) {
        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');


        stopMarker.style.display = "block";
        stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        stopMarker.style.left = newProgress + "px";
    };
};

CSS

.marker {
    position:absolute;
    top:24px;
    left:9px;
    display:none;
    z-index:8;
    font-weight:bold;
    text-align:center;
}
#StartMarker {
    color: #CF0;
}
#StopMarker {
    color:#F00;
}
#choice {
    display:none;
}
progress {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333;
    background: -webkit-linear-gradient(#2d2d2d, #444);
    background: -moz-linear-gradient(#2d2d2d, #444);
    background: -o-linear-gradient(#2d2d2d, #444);
    background: linear-gradient(#2d2d2d, #444);
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 15px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

Live Demo

Using simple blocks for that is possible. Your layout would look like this (simplified):

HTML

<div class="progressbar">
    <div class="bar">
        <div class="progress" style="width: 30%;">
        </div>
    </div>
    <div class="markers">
        <div class="right" style="width: 70%;">
            <div class="marker">
            </div>
            <div class="left" style="width: 20%;">
                <div class="marker">
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

.progressbar {
    width: 20em;
    background: grey;
    .bar {
        height: 2em;
        .progress {
            background: blue;
            height: 100%;
        }
    }
    .markers {
        height: 1em;
        background: white;
        .right {
            height: 100%;
            background: red;
            .marker {
                width: 1em;
                height: 100%;
                background: green;
                position: relative;
                float: right;
            }
            .left {
                background: white;
                height: 100%;
            }
        }
    }
}

The operations can be quite difficult

jQuery

$('.bar').click(function(e){
    $(this).find('.progress').css('width', (e.offsetX / this.offsetWidth)*100+'%');
});

will set the Progressbar properly on clicks.

For the markers though you will need mousedown, mousemove, mouseleave events, since you got 2 of them.

Example

http://jsfiddle/JXauW/

本文标签： javascriptProgress bar with slide abilityStack Overflow