javascript - How to get width of an element from an ng-click without Jquery in AngularJS? -

-

i dynamically width of div.progress-bar ng-click. function move($event) on element div.progress-bar returns event element div.progress-bar. when click on div.time inside div.progress-bar, returns event element div.time.

i want width of progress-bar click on children.

html : 

    <div class="progress-bar" ng-click="move($event)">         <div class="time" ng-style="{'width': (current_track.time_current / current_track.time_total * 100) + '%'}"></div>     </div>

controller : 

$scope.move = function(e) {     console.log(e);     console.log(e.srcelement.offsetwidth);     var widthofprogressbar = e.srcelement.offsetwidth;     /* ... */ };

you have check if clicked element .progress-bar, , if not, fetch parent element:

var bar = e.srcelement.classname === 'time'     ? e.srcelement.parentnode     : e.srcelement;  var widthofprogressbar = bar.offsetwidth; /* ... */

or alternative more angular/jqlite way:

var element = angular.element(e.srcelement),     bar = (element.hasclass('time') ? element.parent() : element)[0];  var widthofprogressbar = bar.offsetwidth; /* ... */

Comments

Post a Comment

Popular posts from this blog

sql server - MSSQL Text and Varchar(MAX) fields shown (MEMO) in DBGrid -

-
Image
i have encountered problem in mssql & delphi xe3. text , varchar(max) fields seemed (memo) or (widememo) in tdbgrid & tdbadvgrid (tms dbgrid). in first screenshot can see table fiels, in second screentshot can see sample data in database: in screenshot, see how in dbgrid or in query results. i figured out changing field type char , varchar not max solves issue don't know why having problem. can please let me know?
Read more

qml - Is it possible to implement SystemTrayIcon functionality in Qt Quick application -

-
i writing qtquick desktop application. use both c++ (for functionality) , qml (for ui) in it. use qquickview show interface written in qml. i want application reside in system tray when minimised. i mean functionality similar example. http://qt-project.org/doc/qt-4.8/desktop-systray.html . trying implement feature not find way in qt quick application. here main.cpp code: #include <qguiapplication> #include <qqmlengine> #include <qqmlcontext> #include <qqmlfileselector> #include <qquickview> #include "myapp.h" int main(int argc, char* argv[]) { qguiapplication app(argc,argv); app.setapplicationname(qfileinfo(app.applicationfilepath()).basename()); qdir::setcurrent(qapp->applicationdirpath()); myapp myappobject; qquickview view; view.connect(view.engine(), signal(quit()), &app, slot(quit())); view.rootcontext()->setcontextproperty("myappobject", &myappobject); new qqmlfilese...
Read more

mysql - Flyway migration, Unable to obtain Jdbc connection from DataSource -

-
i trying use flyway create , manage mysql database. here code have got far. flywaymigration.java : class applys migration public class flywaymigration { public flywaymigration(databaseconfiguration configuration, flyway flyway) { flyway.setdatasource(configuration.getdatasource()); flyway.migrate(); } public static void main(string[] args) { new flywaymigration(new databaseconfiguration("database.properties"), new flyway()); } } databaseconfiguration.java : configuration class, class configure datasource applyed flyway.setdatasource method public class databaseconfiguration { private final logger logger = loggerfactory.getlogger(this.getclass()); private propertiesutil prop = null; public databaseconfiguration(string file) { prop = new propertiesutil(file); } public string getdatasourceclass() { return prop.getproperty("mysql.data.source.class"); } pu...
Read more