Develop Reference

Accessing the DOM from a Firefox for Android add-on

I am attempting(and failing) to insert elements into every page visited. I am only able to insert elements into the initial page(the page displayed after the add-on has been installed). The code snippet below demonstrates this behaviour.
I have tried placing the logic that inserts the H1 element within onOpenWindow(), although that doesn't seem to make any difference.
NOTE: The code below is in addition to template boilerplate code
const { classes: Cc, interfaces: Ci, utils: Cu } = Components;
Cu.import('resource://gre/modules/Services.jsm');
function loadIntoWindow(window) {
if (!window)
return;
window.NativeWindow.toast.show("Inserting script", "short");
var contentWindow = window.BrowserApp.selectedBrowser.contentWindow;
var document = contentWindow.document;
document.body.innerHTML = "<h1>THIS TEXT WAS INSERTED</h1>";
}

var DOMWindows = Services.wm.getEnumerator('navigator:browser');
while (DOMWindows.hasMoreElements()) {
var aDOMWindow = DOMWindows.getNext();
var allTabs = aDOMWindow.BrowserApp._tabs;
for (var i=0; i<allTabs.length; i++) {
var aContentWindow = allTabs[i].window;
}
}

Titanium: animate view back and forth (return to original position)

I'm working on a simple Alloy app. I have a view I want to move back and forth horizontally (thus to move and then return to its original position).
I wrote this function
function move(view) {
var origin = view.getCenter();
console.log("origin ", origin);
console.log("rect ", view.getRect());
var forth = Titanium.UI.createAnimation();
forth.duration = 700;
forth.center = {
x: 0
};
forth.addEventListener('complete', function() {
view.animate(back);
});
var back = Titanium.UI.createAnimation();
back.duration = 300;
back.center = {
x: origin.x
};
back.addEventListener('complete', function() {
alert('completed');
});
view.animate(forth);
}
I you run it, it crashes at x: origin.x because origin is undefined. Moreover, both view.center and view.rect are undefined, thus it's impossible for me to store the original position.
Any help?
Thanks
PS: Code has been tested on iOS simulator, although is meant to be Android and iOS compatible.

Why dont you just animate the left position and work with the view.getRect() ?
var origin = view.getRect();
//console.log("origin ", origin);
console.log("rect ", view.getRect());
var forth = Titanium.UI.createAnimation();
forth.duration = 5000;
forth.left = 0;
forth.addEventListener('complete', function() {
view.animate(back);
});
var back = Titanium.UI.createAnimation();
back.duration = 5000;
back.left = origin.x;
back.addEventListener('complete', function() {
alert('completed');
});
view.animate(forth);

view android is not defined [titanium]

Here I am trying to create an application that works and I want the same code to run the application in a android tablet.
But impossible to run because he told me that my views are not defined, but I do not understand because it works in ipad and android should logically work.
My project structure
ressouces
apps.js => (here I instanced, but views and it is here that I but which are not defined)
pages
base => (I have my views with all the contained)
Helpers => ()
pictures
android => (or the images there)
So apps.js fetches seen in "pages / base /" and then I have all but seen in javascript.
here is my code in apps.js
Titanium.include("helpers/helpers.js")
//Default locale
opened_tab = true;
Titanium.include("i18n/fr.js");
var win = Titanium.UI.createWindow({
backgroundColor:'#333',
//orientationModes:Titanium.UI.LANDSCAPE_LEFT
});
if(Titanium.Platform.osname=="ipad")
Titanium.UI.orientation = Titanium.UI.LANDSCAPE_LEFT;
if(Titanium.Platform.osname=="android")
Titanium.UI.orientation = Titanium.UI.LANDSCAPE_LEFT;
var rotate = Ti.UI.create2DMatrix().rotate(90);
var counterRotate = rotate.rotate(-180);
var pages_references_ios = [
{title:"Couverture",slug:"couverture"},
{title:"Présentation concept",slug:"presentation"},
{title:"Un monde de réussites",slug:"metiers_numeriques"},
{title:"sign of success",slug:"sign_of_success"},
{title:"1000 facons de devenir",slug:"1000_ways"},
{title:"Pédagogie labos",slug:"labs"},
{title:"Partenariats entreprise",slug:"enterprise"},
{title:"la vie étudiante",slug:"student_life"},
{title:"Campus map",slug:"map"},
{title:"open campus",slug:"open_campus"},
{title:"Chaine videos",slug:"video_channel"},
{title:"Réseaux sociaux",slug:"social_networks"}
];
var pages_references_android = [
{title:"Couverture",slug:"couverture"},
{title:"Présentation concept",slug:"presentation"},
{title:"Un monde de réussites",slug:"metiers_numeriques"},
{title:"sign of success",slug:"sign_of_success"},
{title:"1000 facons de devenir",slug:"1000_ways"},
{title:"Pédagogie labos",slug:"labs"},
{title:"Partenariats entreprise",slug:"enterprise"},
{title:"Community awards",slug:"community"},
{title:"la vie étudiante",slug:"student_life"},
{title:"Campus map",slug:"map"},
{title:"open campus",slug:"open_campus"},
{title:"Chaine videos",slug:"video_channel"},
{title:"Réseaux sociaux",slug:"social_networks"}
];
if(Titanium.Platform.osname=="ipad")
pages_references = pages_references_ios;
else if(Titanium.Platform.osname=="android")
pages_references = pages_references_android;
Ti.include("pages/topBar.js")
Ti.include("pages/bottomBar.js")
var scrollView = Titanium.UI.createScrollableView({
views:[cover, presentation_view,metiers_numeriques,
sign_of_success_view,thousands_ways_view,
labs_view,enterprise_view,student_life_view,
map_view,open_campus_view,video_channel,social_view],
maxZoomScale:1.0,
currentPage:0,
showPagingControl:false,
cacheSize:5,
zIndex:-100
});
if (Ti.Platform.name == 'android') {
win.navBarHidden = true;
}
win.add(tabMenu);
//win.add(thumbnailsButtonView);
win.add(scrollView);
win.open();
sorry for my english.
thank you

Pull to refresh in Titanium for Android

How to pull to refresh?
In Titanium appcelerator I need to show a list of content in tableview. If I pull the view it needs to update. In iPhone I complete but in Android it won't work. Please any one help to solve this problem in Android.
My Android code:-
tableView.addEventListener('scroll',function(e)
{
var offset = e.contentOffset.y;
if (offset < -65.0 && !pulling && !reloading)
{
var t = Ti.UI.create2DMatrix();
t = t.rotate(-180);
pulling = true;
arrow.animate({transform:t,duration:180});
statusLabel.text = "Release to refresh...";
}
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading)
{
pulling = false;
var t = Ti.UI.create2DMatrix();
arrow.animate({transform:t,duration:180});
statusLabel.text = "Pull down to refresh...";
}
});
tableView.addEventListener('dragEnd', function(e)
{
if(pulling && !reloading)
{
reloading = true;
pulling = false;
arrow.hide();
actInd.show();
statusLabel.text = "Reloading...";
tableView.setContentInsets({top:60},{animated:true});
tableView.scrollToTop(-60,true);
arrow.transform=Ti.UI.create2DMatrix();
beginReloading();
}
});

Titanium now supports pull to refresh for BOTH Android (> v6.2.0) and iOS (>3.2.0) with a Titanium.UI.TableView, Titanium.UI.ListView or Titanium.UI.ScrollView object.
See the docs:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.RefreshControl
Sample code taken from the docs:
var win = Ti.UI.createWindow({
fullscreen:true
});
var counter = 0;
function genData() {
var data = [];
for (var i=1; i<=3; i++) {
data.push({properties:{title:'ROW '+(counter+i)}})
}
counter += 3;
return data;
}
var section = Ti.UI.createListSection();
section.setItems(genData());
var control = Ti.UI.createRefreshControl({
tintColor:'red'
})
var listView = Ti.UI.createListView({
sections:[section],
refreshControl:control
});
control.addEventListener('refreshstart',function(e){
Ti.API.info('refreshstart');
setTimeout(function(){
Ti.API.debug('Timeout');
section.appendItems(genData());
control.endRefreshing();
}, 2000);
})
win.add(listView);
win.open();

Is this just the IOS code form the Kitchen Sink example?
There are a couple of attempts at getting this working on Android, though I haven't confirmed that any of them work as expected. From what I understand, the problem is that you can't get the offset the same way in Android as in IOS.
A quick Google search turned up this link, which was referenced from the official Appcelerator forums.
https://gist.github.com/903895

Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers

Original Title but too long for post:
"ASP.NET MVC 4, Razor, JQuery, JQueryMobile, Problems with Mobiscroll - orientationchange and access address bar crashes some mobile browsers. Changing scroller width and height does not work on some phones."
The crash issue happens on Android 2.1.
It does not happen on iPhone, HTC EVO 4G LTE or other HTCs.
Changing the scroller width and height does not work on HTCs. If I change to landscape then the scroller is the same size as it should be in portrait. If I change it back to portrait then the scroller is the size it should have been in landscape.
Here is the JQuery/Mobiscroll code:
function createDatePicker(selector){
if($("#input_date_1").scroller('isDisabled') != 'undefined'){
var scrollWidth = ($("div[id='main_content']").width()) / 4;
var scrollHeight = scrollWidth / 2.5;
$("#input_" + selector).scroller({
preset: 'date',
minDate: new Date(2000, 0, 1),
maxDate: new Date(2020, 11, 31),
theme: 'android',
display: 'inline',
mode: 'scroller',
dateOrder: 'mmddyy',
width: scrollWidth,
height: scrollHeight,
onChange: function (valueText, inst) {
var lbl = $("#lbl_" + selector);
var date = $("#input_" + selector).scroller('getDate');
lbl.text(date.toDateString());
}
});
}
function setDatePickerWidthAndHeight(){
var scrollWidth = ($("div[id='main_content']").width()) / 4;
var scrollHeight = scrollWidth / 2.5;
var selectorBase1 = "date_1";
$("#input_" + selectorBase1).eq(0).scroller('option', 'width', scrollWidth);
$("#input_" + selectorBase1).eq(0).scroller('option', 'height', scrollHeight);
}
$(function () {
createDatePicker('date_1');
$(window).bind('orientationchange', function (event) {
setTimeout(setDatePickerWidthAndHeight(),100);
});
});
I am including these scripts in #section scripts {} which is rendered at the bottom of the page ( not sure if that is relevant ).
Any help would be appreciated.

It turns out the problem was that the older Android phones do not like the resize event the way it was written above.... and newer phones did not like the orientationchange event. The code at this link made everything work perfectly:
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
And here is how I used it:
//
// usage:
//$(window).smartresize(function () {
// // code that takes it easy...
//});
//http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function ($, sr) {
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced() {
var obj = this, args = arguments;
function delayed() {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function (fn, threshold, execAsap) { return fn ? this.bind('resize', debounce(fn, threshold, execAsap)) : this.trigger(sr); };
})(jQuery, 'smartresize');
$(function () {
createDatePicker('date_1');
$(window).smartresize(function () {
setDatePickerWidthAndHeight();
}, 200);
});
I found the link in the answer of this post: window.resize in jquery firing multiple times
Thanks!