Develop Reference

Issue using carouFredSel with plain HTML code

I am trying the following javascript with jquery in my html for scrolling purpose. It doesn't work. So converted the code into plain JS, still it fails. How do I correctly use the carouFredSel with plain HTML code within script tag?
With jquery
$(function() {
var _scroll = {
delay: 500,
easing: 'linear',
items: 1,
duration: 0.05,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
$('#ticker').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
height: 35,
visible: 1
},
scroll: _scroll
});
// set carousels to be 100% wide
$('.caroufredsel_wrapper').css('width', '100%');
Without jquery
document.querySelector(function() {
var _scroll = {
delay: 500,
easing: 'linear',
items: 1,
duration: 0.05,
timeoutDuration: 0,
pauseOnHover: 'immediate'
};
document.querySelector('#ticker').carouFredSel({
width: 1000,
align: false,
items: {
width: 'variable',
height: 35,
visible: 1
},
scroll: _scroll
});
// set carousels to be 100% wide
document.querySelector('.caroufredsel_wrapper').css('width', '100%');

Set animation direction via Javascript/Typescript

Through Typescript I have to set an animation in a component defined in the html template.
To do this I am using the "animate (keyframes, options)" method.
In the options I would like to set the "alternate" direction but I don't know how to do it because the property is of type Playbackdirection which is an interface. How can I do it?
Here my code:
animate() {
const progress = document.querySelector(".progress") as HTMLElement;
if (progress !== null){
const options = {
duration: 2000,
easing: "ease-in-out",
iterations: 2,
direction: "alternate" //ERROR HERE
}
progress.animate({
width: ["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%", "80%", "80%", "80%"],
backgroundSize: ["0%", "1000%", "500%", "333%", "250%", "200%", "166%", "142%", "125%", "125%", "125%"]
}, options);
}
}

direction is an enum, so you should set it to "normal" or "reverse".
const options = {
...
direction: "reverse"
}

Adding text Javascript progressbar

I would like to add a description text to my progress bar. This description text shoud appear at the left top of the bar. The best way to do it is by modifying my Javascript. It should be very easy to do but i don't have a lot of knowledge in js and I don't know how to do it.
Here is the code :
HTML :
<div id="cont"></div>
CSS :
#cont {
margin: 10px;
width: 100%;
height: 5px;
position: relative;
}
JS :
var bar = new ProgressBar.Line(cont, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#ed1100',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#ed1100'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1.0); // Number from 0.0 to 1.0
It also uses another JS you can find here : http://progressbarjs.readthedocs.org/en/1.0.0/
Code in use :
https://jsfiddle.net/kimmobrunfeldt/k5v2d0rr/
Can someone help me to add this description text ?

You mean like this?
https://jsfiddle.net/k5v2d0rr/1996/
You could just extend the "bar" object with your own function:
bar.addText = function(text) {
jQuery(this._container).append("<label>" + text + "</label>");
}
You then call your function after loading your bar.
bar.animate(1.0); // Number from 0.0 to 1.0
bar.addText("Hi");
Note: for simplicity I've added jQuery for DOM manipulation.

Creating a set of views takes a long time (Appcelerator) and blocks user interactions on iOS only

I am creating a list (ScrollView) with some custom "rows" (The image contains a single "row"). I show 5 rows and have added an event listener so that when the user scrolls to the end, 5 more elements are loaded and displayed. I made this using Alloy but I noticed it was taking too long so I tried writing the views manually.
// created the views programmatically to see if there was any difference from Alloy
function createRow(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: Ti.UI.FILL,
height: "42dp"
});
var rowContent = Ti.UI.createView({
width: Titanium.UI.FILL,
height: "41dp", //Titanium.UI.FILL,
layout: "horizontal",
left: "16dp",
right: "16dp"
});
var border = Ti.UI.createView({
left: "16dp",
right: "16dp",
height: "1dp",
backgroundColor: Colors.darkGrey
});
var titleScroll = Ti.UI.createScrollView({
scrollType: "horizontal",
width: "49%",
horizontalWrap: false
});
var scrollContainer = Ti.UI.createScrollView({
scrollType: "horizontal",
horizontalWrap: false,
width: "50%"
});
var scroll = Ti.UI.createView({
layout: "horizontal",
horizontalWrap: false,
right: 0,
width: Ti.UI.SIZE,
height: Titanium.UI.SIZE
});
var title = Ti.UI.createLabel({
text: args.title,
font: args.isTitle ? {font: "Lato-Regular", fontSize: "22dp"} : {fontFamily: "Lato-Regular", fontSize: "15"},
horizontalWrap: false,
wordWrap: false,
left: 0,
color: Colors.grey,
minimumFontSize: "15dp"
});
if(args.value) {
var t = args.value.join();
scroll.add(Ti.UI.createLabel({
text: t,
color: args.action ? Colors.blue : Colors.black,
font: {fontSize: "15dp", fontFamily: "Lato-Regular"},
right: "5dp",
width: Ti.UI.SIZE,
horizontalWrap: false,
wordWrap: false,
minimumFontSize: "15dp"
}));
}
if(args.data)
scrollContainer.data = args.data; //just a dump of the data used by the click handler
if(args.action)
scrollContainer.addEventListener("click",args.action);
scrollContainer.add(scroll);
titleScroll.add(title);
rowContent.add(titleScroll);
rowContent.add(scrollContainer);
container.add(rowContent);
container.add(border);
return container; //Ti.UI.View
}
function createHeader(args) {
var header = Ti.UI.createView({
layout: "horizontal",
height: "44dp",
backgroundColor: "#fff"
});
var leftView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var rightView = Ti.UI.createView({
width: "25%",
height: Ti.UI.FILL
});
var centerView = Ti.UI.createView({
width: "49%",
height: Ti.UI.FILL
});
var verticalAligner = Ti.UI.createView({
height: Ti.UI.SIZE,
width: Ti.UI.SIZE,
layout: "vertical"
});
var headerTitle = Ti.UI.createLabel({
color: Colors.green,
font: {fontSize: "16.5dp", fontFamily: "Lato-Regular"},
textAlign: "center",
horizontalWrap: false,
wordWrap: false
});
var headerSubtitle = Ti.UI.createLabel({
font: {fontSize: "14dp", fontFamily: "Lato-Regular"},
textAlign: "center",
color: Colors.grey,
horizontalWrap: false,
wordWrap: false
});
if(args.rightView)
rightView.add(args.rightView);
if(args.leftView)
leftView.add(args.leftView);
verticalAligner.add(headerTitle);
verticalAligner.add(headerSubtitle);
centerView.add(verticalAligner);
header.add(leftView);
header.add(centerView);
header.add(rightView);
headerTitle.text = args.title;
headerSubtitle.text = args.subTitle;
return header;
}
function createBlock(args) {
var container = Ti.UI.createView({
layout: "vertical",
width: "100%",
height: Ti.UI.SIZE
});
var covers = Ti.UI.createView({ //
height: "119dp"
});
var content = Ti.UI.createView({
height: Ti.UI.SIZE,
layout: "vertical"
});
function goToEvent() {
Storage.event.id = args.event;
Alloy.Globals.openWin("event");
}
var data = new D.data();
var w = Android ? Ti.Platform.displayCaps.platformWidth : Measure.dpToPX(Ti.Platform.displayCaps.platformWidth);
var h = Measure.dpToPX(119); //Android ? Alloy.Globals.dpToPX(119) : Measure.dpToPX(119);
if(args.images) {
//setTimeout(function() { //timeout didn't make any difference
var image = null;
//for(var i = 0; i < args.images.length; i++) {
image = Ti.UI.createImageView({
image: data.getBlobResized({ //returns a URL for the picture
id: args.images[0], //i
width: w,
height: h
}),
width: iOS ? Measure.pxToDP(w) : Alloy.Globals.pxToDP(w),
height: iOS ? Measure.pxToDP(h): Alloy.Globals.pxToDP(h)
});
image.addEventListener("click",goToEvent);
covers.add(image); //addView
//}
//},0);
}
var row = null;
if(args.rows) {
for(var j=0; j < args.rows.length; j++) {
//row = Alloy.createController("index/events/block/row",args.rows[j]).getView();
content.add(createRow(args.rows[j]));
}
}
container.add(createHeader(args));
container.add(covers);
container.add(content);
return container;
}
In particular, in the code provided, I call 4 times the function createRow() which creates a row inside the element (as seen in the picture). This function takes 7ms to 10ms to run for some reason. So calling it 4 times means it slows the whole process 28-40ms.
On Android the app doesn't lag at all. On iOS it stops user interaction completely until these operations are done
Using latest Titanium SDK (5.2.2GA) on Appcelerator Studio
Testing on iPhone 5, iOS simulator (4s,5,6,6s)
Thank you for your help

How to assign attributes or functions to objects added after DOm ready with jquery

I am working in some personal project it is like the front-end of a chat. So i have my users and i have a JSON with the list of online and offline users. When the website firs load I also load plugins for custom scroll and make elements draggable with jquery ui. what i would like to know is if there is a way to make the new elements added to the body (chat windows) automatically be scrollable and have this custom scroll bar every time I add them. So far what I do es something like :
$(document).on("ready", functions);
function functions() {
$("#contacts-container").slimScroll({
height: '220',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false
});
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$("#online .user-name").on("click", checkUser);
};
function checkUser(){
console.log("clicked");
var user = $(this).html();
$.getJSON("js/options.json", function(json){
var itemsLength = json.chat.OnlineContacts.length;
for ( var i = 0; i < itemsLength; i++) {
var jsonUserName = json.chat.OnlineContacts[i].name;
var jsonUserStatus = json.chat.OnlineContacts[i].status;
var jsonUserAvatar = json.chat.OnlineContacts[i].picture;
if(user == jsonUserName){
displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);
}
};
});
}
function displayChatWindow(user, status, avatar){
console.log(avatar);
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
$("body").prepend(template);
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
$(".friend-window").draggable({handler: ".header"});
}
On the DisplayChatWindow I append the template wich is s div representing the chat window, but i also have to re add the slimScroll function and the draggabla function, but i would like them to automatically have it once i append it, I am learning Java Script so I don't know if using an object i can achieve this or if there is another way, basically what i have done here it the most i know how to do so far, i will appreciate if you guys can help me :)

This should work I believe.
$(document).on("ready", function() {
functions();
$(document).bind('DOMNodeInserted', function() {
$(".messages-container").slimScroll({
height: '200',
size: '10px',
position: 'right',
color: '#535a61',
alwaysVisible: false,
distance: '0',
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
disableFadeOut: false,
start: "bottom"
});
});
});