i get data from my wordpress categories in titanium mobile app, i have 5 categories how to set background this 5 row ?
This My Categories JS
$.init = function() {
var rows = [];
getCategories(function(_data) {
for (var x = 0; x < _data.length; x++) {
rows.push(Alloy.createController('category-item', {
data : _data[x]
}).getView());
}
$.categories_table.setData(rows);
APP.Loading.hide();
});
This category-item
$.c_title.text = args.data.name ;
$.c_counts.text = args.data.count ;
$.row.Item = args.data;
Assuming $.row is the Ti.UI.TableViewRow object, you'd do:
$.row.backgroundImage = args.data.variableHoldingImagePath;
Related
I have a bootstrap tabs that is working well.
I have an area map that is working well if it is not inserted into a tab.
I use the Responsive Image Maps jQuery Plugin from Matt Stow, also works fine.
The symptom:
Then I put the area map into one of the tabs, a not active by default.
Then I click on the tab to make it shown. So the img is well shown.
But the area map does not working. I can't see the clickable rect.
But if I manually resize my navigator, then the area map works.
The page: https://boutique.bilp.fr/71-les-pieds-de-poteaux.html
Select tab "Guide de choix", the white rectangles should be clickable. THey are not until I manually resize the window.
The cause:
The responsible is the Responsive Image Maps jQuery Plugin. In its code, it makes a call to the jquery .width() method to obtain the width of the img where the map should works. And because the parent (tab) is hidden, the returned width is wrong. And it uses it to resize the map... with bad values. The map is then so small that it seems to not work.
Thanks for your help.
One solution is to modify the Responsive Image Maps jQuery Plugin by making ancestors visible before calling width().
Original code:
/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').on('load', function() {
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;
}
var wPercent = $that.width()/100,
hPercent = $that.height()/100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$this.attr(c, coordsPercent.toString());
});
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);
The modified code:
/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {
$.fn.rwdImageMaps = function() {
var $img = this;
var rwdImageMap = function() {
$img.each(function() {
if (typeof($(this).attr('usemap')) == 'undefined')
return;
var that = this,
$that = $(that);
// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy
$('<img />').on('load', function() {
// Modif BC : make ancestors visible so .width() can return the right value
//************************************************
var hidden_ancestors = [];
$that.parents().each(function() {
if ($(this).css('display') == 'none')
{
$(this).show();
hidden_ancestors.push($(this));
};
});
// END Modif BC
var attrW = 'width',
attrH = 'height',
w = $that.attr(attrW),
h = $that.attr(attrH);
if (!w || !h) {
var temp = new Image();
temp.src = $that.attr('src');
if (!w)
w = temp.width;
if (!h)
h = temp.height;
}
var wPercent = $that.width()/100,
hPercent = $that.height()/100,
map = $that.attr('usemap').replace('#', ''),
c = 'coords';
$('map[name="' + map + '"]').find('area').each(function() {
var $this = $(this);
if (!$this.data(c))
$this.data(c, $this.attr(c));
var coords = $this.data(c).split(','),
coordsPercent = new Array(coords.length);
for (var i = 0; i < coordsPercent.length; ++i) {
if (i % 2 === 0)
coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
else
coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
}
$this.attr(c, coordsPercent.toString());
});
// Modif BC : Restore invisibility on ancestors
//*********************************************
jQuery.each(hidden_ancestors, function(index, value)
{
$(value).css({display: ''});
});
// END Modif BC
}).attr('src', $that.attr('src'));
});
};
$(window).resize(rwdImageMap).trigger('resize');
return this;
};
})(jQuery);
I will propose this improvment to Matt Stow, the author
I'm trying to get my head around using a the TableView index property to create native right hand alphabetical navigation - similar to that in the Apple iOS Contacts app - shown in the picture below:
I created a really simple example, with a set of rows, with row headers, but it doesn't work - whenever I tap on an index item, it just jumps to the top of the TableView again.
Here is my example code:
// Create the first TableViewSection
var section1 = Ti.UI.createTableViewSection({
headerTitle:'A'
});
// use a loop to add some rows
for (var i=0; i < 20; i++) {
section1.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// do it all again...
var section2 = Ti.UI.createTableViewSection({
headerTitle: 'B'
});
for (var i=4; i < 10; i++) {
section2.add(Ti.UI.createTableViewRow({
title:'Row '+i
}));
}
// Now, here's our table, and we're setting the data to hold the sections
var tv = Ti.UI.createTableView({
data:[section1,section2]
});
// Create a table view index
var index = [
{ title: "A", index: 0 },
{ title: "B", index: 1 }
];
// Set the index on the table view
tv.setIndex(index);
$.index.open();
$.index.add(tv);
Here is an example for you dear
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView({});
var contacts = ["Adam", "Andrew", "Boris", "Claus", "Debby", 'Saba', 'Sana', 'Wahhab', 'Zohaib', 'Zzaid', 'Zzxad'];
var curheader = 'A';
var sectionArr = [];
var index = [];
for (var i = 0, lastL, l, currSection, ilen = contacts.length; i < ilen; i++) {
l = contacts[i].substr(0, 1);
if (lastL != l) {
index.push({
title : l,
index : i
});
currSection = Ti.UI.createTableViewSection({
headerTitle : l
});
sectionArr.push(currSection);
}
currSection.add(Ti.UI.createTableViewRow({
title : contacts[i],
}));
lastL = l;
}
table.setData(sectionArr);
table.index = index;
win.add(table);
win.open();
Thanks
The home page on my app has a swipable carousel
`{
xtype : 'carousel',
id:'myCar',
autoDestroy:false,
styleHtmlContent:true,
padding:'0 0 0 0',
height:100
}`
I have a painted listener function on my view which add items to my carousel dynamically.
`var store = Ext.getStore("inspirationStore");
var car = Ext.getCmp('myCar');
var items = car.getItems();
//destroy all items within this container before populating
if (items.length > 1){
for (var j = 0; j < items.length; j++){
items[j].destroy();
}
}
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+ store.getAt(i).data.message + '</b></p>' + '<p class = "authorName"><b>' + store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
car.add(item);
}`
The carousel works fine the first time ,But when I go To another page then come back to my home page my carousel doesnt swipe. I could see that items are added but the carousel is not working the way it should. Any suggestions?
use setItems( Array/Object items ) which
Sets the value of items.
docs
Instead of adding items in loop try this:
var items = [];
for (var i = 0; i < store.getCount(); i++){
var item = Ext.create('Ext.Panel',{
html:'<p class = "inspirationMessage"><b>'+
store.getAt(i).data.message + '</b></p>' +
'<p class = "authorName"><b>' +
store.getAt(i).raw.Author__r.Name + '</b></p>',
cls:'carouselPanel'
});
items.push(item);
}
car.add(items);
I am trying to fill remote data into picker, but it crashes.
here is the code:
var countryDataArray = [];
var picker_country = Ti.UI.createPicker
({
bottom:'-251dp'
});
win.add(picker_country);
getCountryList(); //to call web service
//Gets country list from the server
function getCountryList()
{
getCountry.onload = function()
{
var jsonString = JSON.parse(this.responseText);
var msg = jsonString.Message;
var success = jsonString.IsSuccess;
countryDataArray = jsonString.dsetData.CountryList;
Ti.API.log('countryList value:'+countryDataArray);
activity.hide();
if(countryDataArray.length > 0)
{
for (var i=0; i < countryDataArray.length ; i++)
{
data[i] = Ti.UI.createPickerRow(
{
title:countryDataArray[i].Name,
country_id:countryDataArray[i].ID,
fontSize:18
});
};
}
picker_country.add(data);
}
what's wrong with this code ? code works fine with static data !!!
static data :-
var data = [
{title:'Bananas',custom_item:'b',fontSize:18},
{title:'Strawberries',custom_item:'s',fontSize:20},
{title:'Mangos',custom_item:'m',fontSize:22,selected:true},
{title:'Grapes',custom_item:'g',fontSize:24}
];
Solved !!! I Don't why but I just assign the data to picker before adding the picker into the view and it get solved !
picker_country.add(data);
win.add(picker_country);
Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.
The script below can be replaced with the script in the "example1-simple.html" viewed here.
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.
The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.
The grid is getting initialized before the AJAX call to get the additional columns completes.
Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:
grid.setColumns(dynamicColumns);