We Keep Coding

Appcelerator: Elements are not added to views in android

I've been working on a multi platform mobile application. I almost finished it but I always tested on iOS (because of reasons). Now I am able to test on Android to find out that it fails in many ways.
The main problem here is that when I use:
alloy.createSomeElement({
//params
})
$.someView.add(someElemet);
the element is not added to the view. As I mentioned, this only happens on Android and works just fine on iOS.
Here I show you an example and it's result in both platforms.
e.json.forEach(function(address) {
var addressView = Ti.UI.createView({
height : Ti.UI.SIZE,
width : '90%',
layout : 'horizontal',
touchEnabled : true,
Address_id : address.id
});
var icoCont = Ti.UI.createView({
height : 20,
width : '10%'
});
var icon = Ti.UI.createImageView({
height : '20',
width : '20',
image : "/compartidos/persona3.png",
touchEnabled : false
});
var addressText = Ti.UI.createLabel({
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
left : 1,
text : address.street + " - " + address.ext_number,
font : {
fontSize : 12,
fontFamily : "Nunito-Bold",
},
touchEnabled : false,
color: "#000"
});
if (address.alias)
addressText.text = address.alias;
var separator = Ti.UI.createView({
height : 5,
width : '100%',
top : 5,
bottom : 5,
backgroundColor : '#8C000000',
touchEnabled : false
});
addressView.add(icoCont, addressText);
icoCont.add(icon);
$.container.add(addressView, separator);
});
Result on iOS: result on iOS
And this on Android: result on Android
I really hope you can help me with this.
note: Nueva dirección and Dirección actual are not generated this way, those exist in the xml file.

I solved my issue after a long cycle of try & error. I'm posting my solution only in case somebody faces the same problem.
Seems that in Android I can't add multiple elements in a single instruction like this
addressView.add(icoCont, addressText);
The only thing I had to do is separate it in 2 (One for each element) like so
addressView.add(icoCont);
addressView.add(addressText);

You can add many views in single add statement, but you need to pass them as array like : addressView.add( [icoCont, addressText] );

How do I create a transparent button in Java Script (Smartface)

I am just trying to make a transparent button in the smartface cloud IDE using java script, and every time I make it transparent it wont read a click. I can increase the opacity all the way to alpha = .1 but when I set it equal to zero it wont work. How can I fix this, or is there another way to do this. I just want the button to take this form...
left : "50%",
top : "50%",
height : "50%",
width : "50%",
(The bottom right hand corner)
This is the code I have for the button (It doesn't work)
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : alert("Pressed"),
});
myTextBtn.alpha = 0;
page1.add(myTextBtn);

alpha shouldn't affect click unless it is 0. The problem is onPressed accepts callback function. But you are calling alert function there and giving its result to onPressed property.
Try this:
var myTextBtn = new SMF.UI.TextButton({
left : '50%',
top : '50%',
width : '50%',
height : '50%',
text : "",
onPressed : function() {
alert("Pressed");
}
});
myTextBtn.alpha = 0.5;
page1.add(myTextBtn);

Javascript animation with

I'm attempting to get certain items to animate from one location to a new one on a click of the appropriate button. Even though I used fixed positions and have javascript to set the location before the animation, things still go off the page before to the end point.
Firefox and Webkit browsers have had different errors on and off and I can't find a solid solution to this, could anyone help me out with this?
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#buttona").click(function() {
$("#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
http://coreytegeler.com/jg/

Your use of #nav li#a and .set#a worries me. IDs must be unique, so it never makes sense to use more than just an ID in a selector. This is almost certainly the cause of your animation issues.

WebKit jQuery animation bug

I have two sites I'm working on where I use jQuery to animate some objects via CSS properties. Everything works fantastic in Firefox but there ware some webkit bugs where my objects disappear and reappear off screen before the animation starts.
http://coreytegeler.com/gl/ (click the text box)
$('#front-nav-wrapper').css({'position' : 'fixed','top': '55px', 'opacity' : '1' });
http://coreytegeler.com/justin/ (click any of the boxes)
$("#nav ul li").click(function() {
$("#nav ul li#a").animate({'margin-top' : '-300px' , 'margin-left' : '0px', 'left' : '10px'}, 500, 'swing');
$("#nav ul li#b").animate({'margin-top' : '-200px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#c").animate({'margin-top' : '-100px' , 'margin-left' : '0px', 'left' : '10px'} , 500, 'swing');
$("#nav ul li#d").animate({'left' : '10px'} , 500, 'swing');
$("#nav").animate({'margin-top' : '100px'} , 500, 'swing');
});
I'm sure this has to be a known error with an easy fix but I can't seem to find a fix yet :(

From what I can make out, the problem seems to be that webkit can't animate the left property from what is initially an 'auto' value to a pixel offset. What it does is set the property to 0 and then animate from there.
The one solution I can suggest, is to calculate the current pixel offset of each li element immediately before starting the animation, and set their left properties to those offsets.
Something like this:
$("#nav ul li").each(function(){
$(this).css('left', $(this).position().left + 'px');
});
jsFiddle example
This is based on your second example link.

How can i slide a div content in a particular angle using jquery

i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code

Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().

you forgot position:absolute on the #container css

$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.

I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px