javascript - Enyo JS Vertical Sliders -


i trying code vertical slider in enyo (like control on mixing desk). trying avoid starting scratch started tweaking onyx.slider class. changed styles left top , width height , few other tweaks, it's working. i'm stuck on getting slider fill bottom top @ minute vertical fills top down. in advance help.

here code changes have done:

in progressbar.js:

updatebarposition: function(inpercent) {     this.$.bar.applystyle("height", inpercent + "%"); },

in slider.js (dividing 64 temporary hack):

valuechanged: function() {     this.value = this.clampvalue(this.min, this.max, this.value);     var p = this.calcpercent(this.value);     this.updateknobposition(p/64);     if (this.lockbar) {         this.setprogress(this.value);     } }, updateknobposition: function(inpercent) {     this.$.knob.applystyle("top", inpercent + "%"); }, calcknobposition: function(inevent) {     var y = inevent.clienty - this.hasnode().getboundingclientrect().top;     return (y / this.getbounds().height) * (this.max - this.min) + this.min; },

css:

/* progressbar.css */ .onyx-progress-bar {   margin: 8px;   height: 400px;   width: 8px;   border: 1px solid rgba(15, 15, 15, 0.2);   border-radius: 3px;   background: #b8b8b8 url(./../images/gradient-invert.png) repeat-x;   background-size: auto 100%; } .onyx-progress-bar-bar {   height: 100%;   border-radius: 3px;   background: #58abef url(./../images/gradient.png) repeat-x;   background-size: auto 100%; }

tom

there couple of approaches take. obvious (except fact didn't occur me first) swap background/gradient of bar , bar-bar. give appearance of filling bottom. recommend this.

the other method did in jsfiddle here: http://jsfiddle.net/roysutton/b9pma/ (do ignore doubled updatebarposition function)

instead of modifying files directly, derived slider , overrode appropriate functions , added new class vertical slider.

i changed 'fill' absolutely positioned within slider.

now, next problem value '0' filled , '100' empty. handled modifying calcknobposition adjust max , inverting positioning logic seen in fiddle here: http://jsfiddle.net/roysutton/b9pma/2/

return this.max - (y / this.getbounds().height) * (this.max - this.min);

Comments

Post a Comment

Popular posts from this blog

Change php variable from jquery value using ajax (same page) -

what i'm trying this: i've php global variable $currentid , simple jquery script check if there "id" (page) in hash of url , if yes wanted give value $currentid . i've been reading lot , notice shall use ajax i'm not managing it. my code is: <script type="text/javascript"> $(document).ready(function(){ if (parent.location.hash != '' ) { var thecurrentid = parent.location.hash.split('#')[1]; $.ajax({ url: 'my.php', //current page type: 'post', data: {theid: thecurrentid }, datatype: 'json', success: function () { } }); } // code here }); </script> could me please? thank in advance. php server side language, meaning once has sent data browser, php variables , data cannot changed... however, using ajax, can send request php page , change data in dom based on result. consider th...
Read more

Pull out data related to my apps from Android Play Store and iOS App Store -

i want pull out data related apps (ratings, reviews, etc) google play store , apple app store ? how can accomplish ? i have found open source apis google mentioned not reliable. also there paid apis (e.g. appfigures) available. has idea how able pull data these play stores ?? i looking direction on how can accomplish this. can suggest ? we (appfigures) have been working on developing infrastructure give ability reviews , bunch of other data points major app stores several years :] we make available via our api though may want check out.
Read more

How can I fetch data from a web server in an android application? -

i want retrieve data web server in android application, , don't know begin. should use web services? i recommend these tutorials: connect android php , mysql , json in android , php , mysqli i used these tutorials , managed trying working without difficulty. between them describe each step in how attempting @ each stage, android application, database , web server side , has information included can process , use received information the thing add connect android php , mysql tutorial makes use of mysql_ in php deprecated. better use mysqli why included third link. the basic outline of want this: 1) in android app make request server php script using class this: import java.io.bufferedreader; import java.io.ioexception; import java.io.inputstream; import java.io.inputstreamreader; import java.io.unsupportedencodingexception; import java.util.list; import org.apache.http.httpentity; import org.apache.http.httpresponse; import org.apache.http.namevaluepair...
Read more