html5/js: filling ring on slide

i'd like to fill and empty a html div on slide up and down. if the user slides up on the #screen the #ring filling increases and if he slides down, it decreases. see the figure: http://imageshack.com/a/img607/5898/zdpv.jpg

hope you can help :)

<div id="screen" style="position:absolute; with:100%; heigh:100%;"></div>
<div id="ring" style="height:500px; width:500px; border:2px solid #000000; border-radius: 50%;"></div>

Answers


Here is another solution using clip

http://jsfiddle.net/user2314737/D9Xwj/

HTML:

<div id="circle">

Javascript/JQuery:

$(document).bind('mousemove', function (e) {
    $('#circle').css({
        "clip": "rect(" + e.pageY + "px,204px,204px,0px)"
    });
});

CSS:

#circle {
    height:200px;
    width:200px;
    border:2px solid #330099;
    border-radius: 50%;
    background-color: #330099;
    position: absolute;
}

Explanation: as you move the mouse the top value of the clipping rectangle is changed to the current mouse position.


Maybe you're looking for something like this.

HTML

<div id="ring" style="">
    <div id="content"></div>
</div>

As you can see, the #content is the black div that will change with the mouse. Next you've the css associated to the html.

CSS

#ring {
    position:absolute;
    overflow:hidden;
    height:200px; 
    width:200px; 
    border:2px solid #000000; 
    border-radius: 50%;
    margin-top:200px;
}
#content {
    position:absolute;
    width:100%;    
    background-color:#000;
    bottom:0px;
}

Finally, the javascript. I used jquery to do the variations about height. As you can see, I've made the variations with the mouse movement. Take a look and if it's what are you looking for, you only have to apply some script or some change to make it works for smartphone or tablet or some touchable device.

JAVASCRIPT

$("#ring").mouseenter(function() {
    $(this).mousemove(function(e) {
        var p_of = $(this).parent().offset();        
        var offset = $(this).offset();
        mouse_y = $(this).height() - e.pageY + offset.top;
        $("#content").css({'height' : mouse_y});
    });   
});

I've made a jsfiddle, so you can change whatever you want.


Need Your Help

NSAppleEventDescriptor to NSArray

objective-c xcode macos cocoa applescript

I'm trying to create an NSArray with list values from an NSAppleEventDescriptor. There was a similar question asked some years back, although the solution returns an NSString.

PostMessage does not trigger Message Handler

c++ winapi visual-c++

I have a VC++ code that uses PostMessage to trigger a function call. Although the function gets called eventually, I see that the function does not get called right after PostMessage is executed. I...