I use this code to display my animation, when I am in chrome, wait for 10~40 minutes later, the browser will hang/crash, what's the problem? Can someone help me?
$(function(){
$(".card_up,.girl,.card_down").css({"position":"absolute"})
$(".card_up").fadeIn(300).animate({top: 800}).animate({top: -15},1200);
$(".girl").fadeIn(300).animate({top: -800}).animate({top: -90},900).animate({top: -131},500);
$(".card_down").fadeIn(300).animate({top:-300}).animate({top:0},2000).animate({top: 20},2000);
function UU(){
$(".card_up").animate({top: 15},1000).animate({top: 5},2000);
setTimeout(UU,0);
}
function GG(){
$(".girl").animate({top: -121},1000).animate({top: -131},1000);
setTimeout(GG,0);
}
function DD(){
$(".card_down").animate({top: 20},2000).animate({top: 30},3000);
setTimeout(DD,0);
}
UU();
GG();
DD();
Related
I have a slider menu on my page which appear after an interval of time through an animation. I would to know how can I handle click action without using browser.wait(condition, timeout) since depending on the network traffic to fetch data in a remote database.
The page rendering can take long time thus protractor is triggering timeouts error. I have been trying as bellow to use jQuery in order to wait for all transition and animation event to finish, but it is still not working.
BasePage.prototype.clickMenuButton = function(menuName) {
var link = element(by.linkText(menuName));
browser.ignoreSynchronization = true;
browser.executeScript("jQuery('html > *').one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(){})").then(
function() {
link.click();
},
function (error) { console.log("Error : ", error); }
);
}
Does anyone know a way to wait for angularjs to finish rendering and animation without using browser.wait and timeouts?
It's a Protractor "incompatibility" with Angular JS. Most of the people calls this a bug, but nobody is sure about this.
However, if this issue occurs, the Angular and Protractor teams recommends in order to fix the $timeout awaits, to replace the $timeout function with a $interval function. They're almost the same, they both achieve the same thing.
$interval function fixes the protractor $timeout issue.
Official documentation states that You should use the $interval for anything that polls continuously (introduced in Angular 1.2rc3).
In this case, $timeout it's not a good option for Front End Developers(AngularJS developers) neither for JavaScript Automation Developers(Protractor developers).
Another option would be to either use a timeout in your test application, either turn the browser sync off.
Here's my example for ignoreSynchronization function.
browser.ignoreSynchronization = true;
browser.wait(toast.isPresent(), 3000).then(
function(arr) {
if (arr) {
toast.getText().then(function(txt) {
// console.log(txt);
expect(txt).toContain(caption);
});
} else {
toast.getText().then(function(txt) {
console.log('current toast: ' + txt);
console.log('modal not catched. see bug with $timeout \n ' +
caption + " \n" +
"==> Error! NOT PRESENT");
});
}
}
);
browser.ignoreSynchronization = false;
You could also have a look over their official github issue tracker. This page states that if you have a $timeout function, that the developer cannot change this(this seems a bit unlikely, and seems like one of the bad QA/dev relationship) you should use the ignoreSynchronization function.
The main conclusion is that, in order to fix protractor $timeout awaits for Angular the Front End developer should easily replace $timeout with $interval.
Let me know if it helps.
The problem: If I exit the current ion-view when the on-finite callback hasn't finished processing, the on-infinite callback will start getting called in a loop until the app freezes, even if I'm not in the view anymore where the ion-infinite-scroll was installed.
This was difficult to reproduce, but I have found a way to easily manifest it. Setup the on-infinite callback on the view.
<ion-infinite-scroll
immediate-check="false"
on-infinite="loadMore()"
distance="5%">
</ion-infinite-scroll>
And then use $timeout to artificially slow down the loadMore() function to 2 seconds. Something like this:
$scope.loadMore = function() {
console.log("Loading more...");
$timeout(function() {
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 2000);
};
Now, trigger the infinite scroll, and while your loadMore() function is "processing" for 2 seconds, leave your view. You will see that even that you are in another view, the console will continue to print "Loading more..." every 2 seconds. That is, loadMore() is being called in a loop.
On a real scenario, this bug is causing the app to freeze badly. On some links this issue has been addressed but no solutions (the ionic forum is down atm, btw). Some solutions out there suggest calling infiniteScrollComplete inside an $apply(), but that doesn't solve it and actually triggers a digest already in progress error. Others suggest to use $timeout(...,0) as an alternative to $apply() but still the issue will manifest if, for instance, your loadMore() does async calls to your server, in such case there is still a chance that the user exits the view while loadMore() is busy.
Is there any suggested workaround to this?
Ionic team: this is a bug. And all documentation everywhere about ion-infinite-scroll completely ignores this. There should be, at the very least, a warning. My ionic version 1.7.16.
Try below code for stop load more callback.
html
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
<ion-infinite-scroll
immediate-check="false"
ng-if="!noMoreItemsAvailable"
on-infinite="loadMore()"
distance="5%">
</ion-infinite-scroll>
</ion-content>
</ion-view>
Controller
$scope.loadMore = function()
{
$http({
method:'GET',
url:'http://headers.jsontest.com/'
}).then(function(response)
{
console.log(response);
$scope.noMoreItemsAvailable = true;
}, function(response)
{});
}
Try below code for infinite loop functionality
HTML
<ion-infinite-scroll
ng-if="!noMoreDaTa" on-infinite="loadData()"
distance="2%" immediate-check="false">
</ion-infinite-scroll>
Controller
$scope.loadData = function() {
if ($scope.dataRecords.length >= $scope.total_records) {
$scope.noMoreDaTa = true;
}
}
Please let me know, if you need any help :)
I tried to implement facebook login for my app.
After success login, i am trying to get userdata by following code,
Facebook.Social.userDetails({onSuccess : function (e) {
alert(e.name);
},
onError : function () {
alert(e.message);
}
});
But, both onSuccess and onError events is not firing.
Can any one help me pls.
Thanks in advance.
Got it. :)
Should use Social.Facebook.userDetails({}) rather than Facebook.Social.userDetails({});
Thanks.
My current code pops up a warning box window telling the user that he or she is using IE. But is there a way to direct them to Firefox website?
public static boolean isIEBrowser()
{
return (Window.Navigator.getUserAgent().toUpperCase().indexOf("TRIDENT") != -1);
}
if (isIEBrowser())
{
SC.warn("It looks like you're using a version of Internet Explorer." +
" For the best GUI experience, please update your browser.");
}
Sure!
This might be more of what you're looking for.
String site = "http://www.mozilla.org/en-US/firefox/new/";
Window.Location.assign(site);
Window.Location.reload();
You can also add a simple timer that redirects them after a certain number of seconds or a button that takes them directly to the site.
edit:
Or... you can do this in pure javascript
JS:
function changeURL(site) {
window.location.href = site;
}
HTML:
<script>
changeURL('http://www.mozilla.org/en-US/firefox/new/');
</script>
I am a new developer and am trying to create a jQTouch application to display some scrollable content throughout multiple pages. I've decided to use iscroll and it only works fine on the home page. I've read that I need to refresh iscroll after each page but I am completely lost on how to do this. Here is my script:
<script type="text/javascript">
var myScroll, myScroll2;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper1');
}, 100);
setTimeout(function () {
myScroll2 = new iScroll('wrapper2');
}, 100);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
In my html I have a div id="wrapper1" which works fine until I navigate to the second page where the div id="wrapper2" has the rubber band effect.
In case you haven't figured this out yet (although I'm sure you have), you want:
myScroll.refresh()
or
myScroll2.refresh()
Ok finally got this working. To get jQTOuch and iScroll to play nice with each other, the scrolling areas on the page need to be reset each time JQTouch makes them disappear. In other words, once you hide the div, iScroll doesn't know what to scroll the next time it's made visible. So as a result, you get the infamous rubberband effect. To solve this, just add an event listener that resets the scrolling area right after the div is called. Make sure you give it 100 to 300ms delay. This code below assumes your variable is called myScroll:
$(".about").tap(function(){
setTimeout(function(){myScroll.refresh()},300);
});
And on a side note, here's how to establish multiple scrollers using iScroll:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}