javascript - AngularJS - Finding width of changing DOM elements -



javascript - AngularJS - Finding width of changing DOM elements -

i sense of angular questions inquire me missing incredibly dumb, let's hope too.

i'm building directive command scrolling of wide list of thumbnails. in jquery, had working perfectly, jquery wasn't comfortable grabbing dynamically loaded list angular, i'm rewriting code. basically, i've got gallery exists in ng-repeat:

<div id="gallery"> <ul id="gallery_img"> <li class="thumb" ng-repeat="image in thumbnails"> <img ng-src="{{image.thumbnail}}" alt="{{image.description}}" /> </li> </ul> </div>

and when click on further-down buttons,

<slider class="mover" style="left:0;">&laquo;</slider> <slider class="mover" style="right:0;">&raquo;</slider>

the list supposed animate/slide backwards , forwards width of image in "0" position. basically, grabs width, adds width ul left position. super simple, right?

here's directive i've got controlling motion @ moment:

app.directive('slider', function() { //to reuse, replace "#gallery_img" whatever want homecoming { restrict: 'e', link: function(scope, element, attrs){ var tomove = angular.element('#gallery_img'); var imagewidth; var imagenumber = 1; element.bind('mousedown', function(){ tomove.css({left: '-=200'}); console.log(tomove.children([imagenumber]).width()); console.log(imagenumber); imagenumber +=1; }); } } });

i added in console.log details, see widths i'm getting. imagenumber changing; each time click next or previous, number goes one. width i'm getting, though, first image in each set; i've got several galleries, no matter how many times click "next," gallery 1 ever give me "566," gallery 2 "433", gallery 3 "521." each image of exclusively different size, so... why giving me width of first image?

e: here's plnkr of i'm talking about: http://plnkr.co/edit/nlg4oksngvytgemg9uov

in next code:

tomove.children([imagenumber]).width()

you passing imagenumber children function. children function accepts optional selector, not indexer. in case homecoming jquery object containing li , phone call width() homecoming width of first.

instead pass indexer children function returns , go there (dividing clarity):

var children = tomove.children() var width = $(children[imagenumber]).width(); console.log(width);

or:

var width = tomove.children().eq(imagenumber).width(); console.log(width);

javascript html angularjs

Comments

Post a Comment

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? - i want insert tables in infoboxes. example, have proteinbox i've developed using infobox template (http://health-and-medicine.wikia.com/wiki/template:proteinbox), , fasta field big fit comfortably in proteinbox. hence collapsible table within box. this tried: {{infobox | row 1 = {| class = "mw-collapsible mw-collapsed wikitable" |- | <!-- table content --> |} }} your problem is, putting nested table within template. pipe characters ( | ) in table syntax collides pipe usage in templates. the commonly used hack around create template called template:! , containing pipe character, , utilize when need set tables, parser functions or other stuff using pipe characters, within templates. table (with every | replaced {{!}} ): {{{!}} {{!}}- {{!}} a1 {{!}} b1 {{!}}- {{!}} a2 {{!}} b2 {{!}}} ...the equivalent of {| |- | a1 | b1 |- | a2 | b2 |} furthermore, hav...
Read more

Local Service User Logged into Windows -

Local Service User Logged into Windows - i created windows service tracks app server user connected through load balancer. it retrieves user logged windows on machine, cross references active directory (ad) business relationship homecoming first name, lastly name , e-mail (for notification through website created project) there 1 scheme on network users remote system, vista system, reason returning values "local service" logged machine, it's weird , security guys impossible "local service" business relationship logged windows. here how user logged windows managementscope ms = new managementscope("\\\\.\\root\\cimv2"); objectquery query = new objectquery("select * win32_computersystem"); managementobjectsearcher searcher = new managementobjectsearcher(ms, query); foreach (managementobject mo in searcher.get()) { _username = mo["username"].tostring(); } // remove domain part username string[] usernameparts = _...
Read more