I wrote this code
var loadZones = [];
var loadSites = [];
for (var i=0; i<zones.zone.length; i++){
loadZones[i] = { data: { id: zones.zone[i].id}, position: { x: (i+1)*100,
y: (i+1)*100 } };
}
var cyt = window.cyt = cytoscape({
container: document.getElementById('cyt'),
});
for (var j=0; j<zones.zone.length; j++)
cyt.add(loadZones[j]);
}
Zones is JSON file I uploaded here: https://github.com/bartequ/sk/edit/master/zone.json
I originally have zones in table in code. The problem is I loaded nodes properly, checked in console cyt._private.elements and there are 7 elements as many as in loadZones table, and despite this I don't see nodes on the screen.
Is it possible, that you forgot to call:
var layout = cyt.layout({
name: 'whateverLayoutYouWant' // null/grid/concentric/circle/...
});
layout.run(); // dont forget to run the layout
If you did, here is the link to the cytoscape.js documentation
Related
I have a page setup that requires multiple instances of Google Maps via the API to be initialized. All works fine when one map is initialized the first time. When you re click on the button to do so, the map does not fully show.
var locations = [
['test1', 45.440188, -75.676309, 1, 'transportation.png'],
['test2', 45.439463, -75.675751, 1, 'medical.png'],
['test3', 45.439792, -75.683544, 1, 'schools.png'],
['test4', 45.439652, -75.676929, 1, 'shopping.png']
];
function initialize_1() {
var mapOptions = {
center: new google.maps.LatLng(45.438612, -75.677561),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas_1"), mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(45.438612, -75.677561),
map: map
});
var marker, i;
var iconBase = 'http://www.elkproperty.com/new/images/icons/';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
,icon: iconBase + locations[i][4]
});
}
}
I think the issue is that you are initialising map to a hidden layer. Try to move call to initialize_1() after show():
onclick="$('#units_1').hide(); $('#unitArrow_1').hide(); $('#amenity_1').show(); $('#amenityArrow_1').show(); initialize_1();"
Other option is to force resize event after divs are visible. For this to work you would probably have to make map variable global.
google.maps.event.trigger(map, 'resize');
Maybe unrelated to your question but do you have to initialise the map layer each time you show div with map? Maybe you could test whether it is initialised or not, for example:
var isInit_1 = false;
function initialize_1() {
if (isInit_1) { return; }
isInit_1 = true;
var mapOptions = {
...
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
every one!
I use tablpanel in extjs4,found the memory in IE8 didn't reduce when remove the panel in tabpanel,and also raised when add the panel again.so I write a test as below:
Ext.onReady(function() {
var currentItem;
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll:true,
bodyPadding: 10
}
});
var __my_task = '';
var i = 0;
try{
__my_task = {
run: function(){
if (i % 2 == 0){
for(var j = 0; j < 10; j++){
addTab(true);
}
}else{
var items = [];
tabs.items.each(function(item){
if(item.closable){
if(!false || item != this.item){
items.push(item);
}
}
}, this);
Ext.each(items, function(item){
tabs.remove(item);
item.destroy();
}, this);
} // else
i ++;
},
interval: 300
}
Ext.TaskManager.start(__my_task);
}catch(e){}
// tab generation code
var index = 0;
function addTab (closable) {
++index;
tabs.add(Ext.create('Ext.tree.Panel',{
title: 'New Tab ' + index,
iconCls: 'tabs',
closable: !!closable
}));
}
});
run it in IE8,the memory will raised so quickly,my code is wrong ? any question for me, thanks!
IMO it's hardly to evaluate if there is memory leak in Javascript (Extjs written in JS as you know). The object may be deleted with delete() (destroy() will use it) but cannot sure when the memory will be actually released.
You can find more about Javascript garbage collector in Deleting or setting to null and Javascript garbage collection
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);