javascript - Ionic carousel resize issue with $http call -

-

i using plugin in ionic create carousel (https://github.com/ksachdeva/angular-swiper) has demo simple repeat. replaced repeat own using $http , has created problem in delay loading images causes slider break until resized. html looks this:

<ks-swiper-container autoplay="500" initial-slide="1" speed="5000" loop="false" show-nav-buttons="false" slides-per-view="2" space-between="20" pagination-clickable="false" override-parameters="{effect: 'coverflow',coverflow: {rotate: 0,stretch: 0,depth: 100,modifier: 1,centeredslides: true,slideshadows : false}}" on-ready="onreadyswiper(swiper)">              <ks-swiper-slide class="swiper-slide" ng-repeat="feature in featured track feature.id">                 <img imageonload="" ng-src="{{feature.thumbnail_images.thumbnail.url}}" width="100%">                 <h6 ng-bind-html="feature.title"></h6>             </ks-swiper-slide>             <ks-swiper-slide class="swiper-slide">             <img src="img/more.png" style="transform: rotate(180deg);" width="100%">             <h6>read more</h6>             </ks-swiper-slide>          </ks-swiper-container>

i calling images factory this: 

.controller('swipectrl', function($scope, featured) {      $scope.swiper = {};     $scope.onreadyswiper = function (swiper) {          swiper.on('slidechangestart', function () {         });          swiper.on('onslidechangeend', function () {         });         };       $scope.featured = [];   featured.all().then(function (response,swiper){        $scope.featured = response;       (var =0; < $scope.featured.length; i++) {             $scope.featured[i].date = new date($scope.featured[i].date);          }   },     function (err) {      if(window.localstorage.getitem("featured") !== undefined) {        }     }   ); })

i have tried adding $timeout did not help. found suggestion create directive:

.directive('imageonload', function ($rootscope, $timeout) {     return {     restrict: 'a',         link: function(scope, element, attrs) {              element.bind('load', function() {                 $timeout(function(){                     $rootscope.swiper.updateslidessize();                 });             });           }     }; });

but keep getting "updateslidessize() undefined".

really not sure how fix this...

i had same issue. 1 of first things noticed version of swiper.js (not angular-swiper.js) did not have function updateslidessize(). found newer version of swiper.js , has function included.

so should take care of undefined. now, bringing together, here's did:

//my html <ks-swiper-container initial-slide="1"  loop="false" show-nav-buttons="false" slides-per-view="3" space-between="5" pagination-clickable="false" on-ready="onreadyswiper(swiper)">...</ks-swiper-container>  //my controller $scope.swiper = {}; //initialize $scope.onreadyswiper = function (swiper) {   $scope.swiper = swiper; //update when swiper ready }; $scope.mydata=[1,2,3,4,5]; $http.jsonp(myurl+'&callback=json_callback').success(function(data) {    $scope.mydata=data; //e.g.: [6,7,8]    $timeout(function() //give data moment propagate    {      $scope.swiper.updateslidessize(); //now run sizing update - can use .update()      $scope.swiper.slideto(0); //show slider beginning    }, 300); });

i have tested in google chrome emulation - not on actual mobile device.


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more