I'm creating animations on multiple objects that have to be executed one after another. For this I use construction such as this:
var deferredAnimations = $.Deferred();
deferredAnimations.pipe(function() {
return $("#" + page + " h1 span.text").unbind()
.typist({
cursor: true,
speed: 12,
text: 'Hello'
}).typistStop().delay(2000);
}).
pipe(function() {
return $("#" + page + " h2").unbind()
.typist({
cursor: true,
speed: 12,
text: 'world'
}).typistStop().delay(3000);
}).
pipe(function() {
return $("#" + page + " h2").
selectText().
delay(1000);
}).pipe(function() {
return $("#" + page + " #drop-in-tool").show().addClass("magictime slideUpRetourn").delay(1000);
}).pipe(function() {
return $("#" + page + " h2").
removeClass("fira-sans").
addClass("droid-serif green italic").
delay(1000);
}).pipe(function() {
$("#" + page + " #drop-in-tool").fadeOut("slow");
return $("#" + page + " h1").
selectText().
delay(1000);
}).pipe(function() {
return $("#" + page + " h1").
removeClass("work-sans bold").
addClass("roboto-condensed upper").
delay(1500);
}).pipe(function() {
deselectText();
$("#" + page + " .pop-lines").css("left", $("#" + page).find("h1 .text").offset().left - 20);
$("#" + page + " h1").fadeOut("slow");
$("#" + page + " h2").fadeOut("slow");
return animatePageBackground(page);
}).pipe(function() {
$("#" + page + " h1").show().addClass("magictime slideLeftRetourn");
return $("#" + page + " h2").show().addClass("magictime slideRightRetourn").delay(1000);
})
.pipe(function() {
return $("#" + page + " .pop-line1").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return $("#" + page + " .pop-line2").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return $("#" + page + " .pop-line3").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return animatePageFooter(page);
});
deferredAnimations.resolve();
//page background animate
function animatePageBackground(page) {
return $("#" + page).promise().pipe(function() {
$("#" + page + " .page-grid").fadeOut();
return $("#" + page + " h1").animate({"color":"#ffffff"}, 1000).delay(1000);
}).pipe(function() {
$("#" + page + " .page-header").animate({"color":"#ffffff"}, 2000);
return $("#" + page + " .page-back").fadeIn(2000).delay(1000);
});
}
//page footer animations
function animatePageFooter(page) {
$("#" + page).promise().pipe(function() {
return $("#" + page + " .profile-icon").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .profile-name").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .icons").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .link").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .back-btn").fadeIn();
});
}
but I want to stop all the animations when I click a button and deferredAnimations.reject() doesn't work in this case because as I understand pipe creates new Deferred.
Is there a way to stop animations in pipe list.
Are there any better solution for sequential animations on multiple objects that can be interrupted?
Thanks.
Related
So I'm trying to display the values of a book in myLibrary but the when I do it displays it like this :
Zero To one
Peter Thiel
210
Has been read already
function() { return title + " " + "by" + " " + author + " " + pages + " " + "pages" + " " + isRead; }
It shouldn't display this part:
function() { return title + " " + "by" + " " + author + " " + pages + " " + "pages" + " " + isRead; }
Here's my code:
this.pages = pages;
this.isRead = isRead;
this.info = function() {
return title + " " + "by" + " " + author + " " + pages + " " + "pages" + " " + isRead;
}
}
const zeroToOne = new Book("Zero To one", "Peter Thiel", "210", "Has been read already");
function addBookToLibrary(bookToAdd) {
myLibrary.push(bookToAdd);
console.log(myLibrary);
for (let obj of myLibrary) {
console.log(obj);
card.textContent = Object.values(obj);
}
}
You have to call the info function :
console.log(obj.info());
So I have this command that's supposed to display a player's stats if it's found and says player not found otherwise. After I search a player and go to the previous screen, I get "player not found". I thought it was because my loop continues running after the player is found and my boolean becomes false, so I added a break statement. Won't work
function Search(Table, Stat1, Stat2, Stat3, Stat4, Stat5) {
onEvent("Search2.btn", "click", function() {
readRecords(Table, {}, function(records) {
var SearchPlayer = getText("text_input1");
var found = false;
for (var i = 0; i < records.length; i++) {
if ((records[i]).Player == SearchPlayer) {
setScreen("DisplaySearch");
setText("label3", records[i].Player + " Stats" + "\n" + records[i][Stat1] + " " + Stat1 + "\n" + records[i][Stat2] + " " + Stat2 + "\n" + records[i][Stat3] + " " + Stat3 + "\n" + records[i][Stat4] + " " + Stat4 + "\n" + records[i][Stat5] + " " + Stat5 + "\n");
setText("text_input1", "");
setText("label5", "");
found = true;
break;
} else if ((found == false)) {
setText("label5", "Player Not Found");
}
}
});
});
I have a problem with this code :
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function update() {
$.ajax({
type: 'GET',
url: "http://192.168.4.2/home/api/stato/ambiente/living",
dataType: "json",
success: renderList
}).then(function() {
setTimeout(update, 200);
});
})();
function renderList(data) {
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$.each(list, function(index, data) {
if (data.stato ==1) {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
$('#Switch').append('<button type="button">' + " OFF " + '</button>');
}
else {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
$('#Switch').append('<button type="button">' + " ON " + '</button>');
}
});
}
</script>
</head>
<body>
<div id="statoList"></div>
<div id="Switch"></div>
</body>
</html>
I wish to execute a DIV refresh every 200 ms but the problem is that each time creates a new DIV below the previous one.
How can I solve this?
Thank you.
the append function is not the right one for what you are expecting i suggest you to use .html() so it will translate all your code (new div) to an html code
function renderList(data) {
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$.each(list, function(index, data) {
if (data.stato ==1) {
$('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
$('#Switch').html('<button type="button">' + " OFF " + '</button>');
}
else {
$('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
$('#Switch').html('<button type="button">' + " ON " + '</button>');
}
});
}
If there are more than one of each type empty() the containers before appending
$('#statoList').empty();
$.each(list, function(index, data) {
if (data.stato ==1) {...
I receive from the server xhtml code which I want to show in Android app like ebook reader. For this the Monocle library was chosen.
Next I prepare webview with follow code:
contentView.addJavascriptInterface(new LectureJSInterface(), "Android");
contentView.getSettings().setAllowFileAccess(true);
contentView.getSettings().setJavaScriptEnabled(true);
contentView.setBackgroundColor(0xFFECECEC);
contentView.setWebChromeClient(new WebChromeClient());
contentView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Global.dismissProgressDialog();
}
});
After this I download the xhtml code from the server and add to it JS code for working with Monocle:
private String prepareCode(String code) {
if ((code == null) || code.equals("")) return "";
String newCode = code.substring(code.indexOf("<html"), code.indexOf("<head>")+6);
newCode = newCode.concat(
"<script src=\"file:///android_asset/monocore.js\"></script>\n" +
"<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/monocore.css\" />\n" +
"<style>\n" +
" #reader {\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" border: 0px solid #000;\n" +
" }\n" +
"</style>\n" +
"<script>\n" +
"\n" +
" var isNightMode = false;\n" +
" var isFirstLoading = false;\n" +
" var startPageNumber = 1;\n" +
"\n" +
" function setSettingsForFirstLoading(fontSize, pageNumber, nightMode) {\n" +
" Android.printLogInfo('setSettingsForFirstLoading()');\n" +
" isFirstLoading = true;\n" +
" isNightMode = nightMode;\n" +
" startPageNumber = pageNumber;\n" +
" window.changeFontSize(fontSize);\n" +
" }\n" +
"\n" +
" function changeFontSize(fontSize) {\n" +
" Android.printLogInfo('changeFontSize()');\n" +
" window.reader.formatting.setFontScale(fontSize);\n" +
" }\n" +
"\n" +
" function nightModeOn() {\n" +
" Android.printLogInfo('nightModeOn()');\n" +
" isNightMode = true;\n" +
" var i = 0;\n" +
" var frame;\n" +
" while (frame = window.reader.dom.find('component', i++)) {\n" +
" frame.contentDocument.body.style.backgroundColor = '#1F1F1F';\n" +
" frame.contentDocument.body.style.color = '#ECECEC';\n" +
" }\n" +
" }\n" +
"\n" +
" function nightModeOff() {\n" +
" Android.printLogInfo('nightModeOff()');\n" +
" isNightMode = false;\n" +
" var i = 0;\n" +
" var frame;\n" +
" while (frame = window.reader.dom.find('component', i++)) {\n" +
" frame.contentDocument.body.style.backgroundColor = '#ECECEC';\n" +
" frame.contentDocument.body.style.color = '#1F1F1F';\n" +
" }\n" +
" }\n" +
"\n" +
" function turnPage(pageNumber) {\n" +
" Android.printLogInfo('turnPage(' + pageNumber + ')');\n" +
" window.reader.moveTo({ page: pageNumber });\n" +
" }\n" +
"\n" +
" function savePercents() {\n" +
" Android.printLogInfo('savePercents()');\n" +
" Android.savePercents(window.reader.getPlace().percentAtTopOfPage());\n" +
" }\n" +
"\n" +
" function moveToPercents(percent) {\n" +
" Android.printLogInfo('moveToPercents(' + percent + ')');\n" +
" turnPage(window.reader.getPlace().pageAtPercentageThrough(percent));\n" +
" }\n" +
"\n" +
" function listenFor(evtName) {\n" +
" Monocle.Events.listen('reader', evtName, report);\n" +
" }\n" +
"\n" +
" function report(evt) {\n" +
" switch (evt.type) {\n" +
" case 'monocle:loaded':\n" +
" Android.calculateSeekBar(window.reader.getPlace().properties.component.lastPageNumber());\n" +
" break;\n" +
"\n" +
" case 'monocle:turn':\n" +
" Android.updatePagesCounter(window.reader.getPlace().pageNumber());\n" +
" break;\n" +
"\n" +
" case 'monocle:recalculated':\n" +
" if (isNightMode) nightModeOn();\n" +
" if (isFirstLoading) { isFirstLoading = false; turnPage(startPageNumber); }\n" +
" Android.calculateSeekBar(window.reader.getPlace().properties.component.lastPageNumber());\n" +
" Android.updatePagesCounter(window.reader.getPlace().pageNumber());\n" +
" break;\n" +
" }\n" +
" }\n" +
"\n" +
" function init() {\n" +
" var options = {\n" +
" flipper: Monocle.Flippers.Slider\n" +
" }\n" +
"\n" +
" listenFor('monocle:turn');\n" +
" listenFor('monocle:loaded');\n" +
" listenFor('monocle:recalculated');\n" +
"\n" +
" window.reader = Monocle.Reader('reader', null, options);\n" +
" }\n" +
"\n" +
" Monocle.Events.listen(window, 'load', init);\n" +
"</script>\n");
newCode = newCode.concat(code.substring(code.indexOf("<head>") + 6, code.indexOf("<body>") + 6));
newCode = newCode.concat("<div id=\"reader\">");
newCode = newCode.concat(code.substring(code.indexOf("<body>") + 6, code.indexOf("</body>")));
newCode = newCode.concat("</div>");
newCode = newCode.concat(code.substring(code.indexOf("</body>")));
return newCode;
}
After finishing this task the WebView loads it:
contentView.loadDataWithBaseURL(baseUrl, prepareCode(code), "text/html", "UTF-8", null);
What I have as results? I tested this app on six devices with Android 4.x and 5.x. On Android 4.x the entire content is shown correctly, but on Android 5.x I see a blank page. I should notice that the xhtml code was loaded because I can call JS-functions and get its results via JS Interface.
Are there any ideas about ways to fixing this bug?
Thanks in advance!
You can try uninstalling the webview system update.
or
Try monocle 2.3.1
or
https://github.com/joseph/Monocle/issues/259
As you can see i want to do and if/else statement for adding and removing classes. But the if/else statematen below isn't really working for me, it adds the classes but it doesn't remove them again, when i click second time.
function showAndHidediv(id, liName) {
$("#" + id).toggle(function () {
$("#" + id).animate({
display: 'block'
}, 500);
var open = "closed";
if (open == "open") {
$("#" + liName + " a").removeClass('color');
$("#" + liName + " a div").removeClass('block');
$("#" + liName + " img").removeClass('block');
open = "closed";
} else {
$("#" + liName + " a").addClass('color');
$("#" + liName + " a div").addClass('block');
$("#" + liName + " img").addClass('block');
open = "open";
}
});
}
You can use toggle class to resolve your problem.
In above code snippet you have taken local JS variable.i.e.var open = "closed";
So everytime its gatting reset.
Try declaring 'open' variable globally and then check. It will work.
Since you are using jQuery it would be more convenient to use built-in function toggleClass():
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
DEMO FIDDLE
And your case:
function showAndHidediv(id, liName) {
$("#" + id).toggle(function () {
$("#" + id).animate({
display: 'block'
}, 500);
$("#" + liName + " a").toggleClass('color');
$("#" + liName + " a div").toggleClass('block');
$("#" + liName + " img").toggleClass('block');
});
}
Try like this
function showAndHidediv(id, liName) {
$("#" + id).toggle(function () {
$("#" + id).animate({
display: 'block'
}, 500);
var open = false;
if (open == "open") {
$("#" + liName + " a").removeClass('color');
$("#" + liName + " a div").removeClass('block');
$("#" + liName + " img").removeClass('block');
open =false;
} else {
$("#" + liName + " a").addClass('color');
$("#" + liName + " a div").addClass('block');
$("#" + liName + " img").addClass('block');
open = true;
}
});
}